Improve lyrics match with scored searches

package-lock.json

@@ -37,6 +37,7 @@
         "fast-average-color": "^9.3.0",
         "format-duration": "^2.0.0",
         "framer-motion": "^9.1.7",
+        "fuse.js": "^6.6.2",
         "history": "^5.3.0",
         "i18next": "^21.6.16",
         "immer": "^9.0.21",
@@ -10726,6 +10727,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/fuse.js": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz",
+      "integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/gauge": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
@@ -31631,6 +31640,11 @@
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
       "dev": true
     },
+    "fuse.js": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz",
+      "integrity": "sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA=="
+    },
     "gauge": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
@@ -34842,7 +34856,7 @@
     },
     "node-mpv": {
       "version": "git+ssh://git@github.com/jeffvli/Node-MPV.git#c7f84d7966b82e5916c3b4bb47cac667bb895c22",
-      "from": "node-mpv@https://github.com/jeffvli/Node-MPV"
+      "from": "node-mpv@github:jeffvli/Node-MPV"
     },
     "node-releases": {
       "version": "2.0.8",

package.json

@@ -275,6 +275,7 @@
     "fast-average-color": "^9.3.0",
     "format-duration": "^2.0.0",
     "framer-motion": "^9.1.7",
+    "fuse.js": "^6.6.2",
     "history": "^5.3.0",
     "i18next": "^21.6.16",
     "immer": "^9.0.21",

src/main/features/core/lyrics/genius.ts

@@ -1,69 +1,103 @@
 import axios, { AxiosResponse } from 'axios';
 import { load } from 'cheerio';
-import type {
+import {
+  LyricSource,
   InternetProviderLyricResponse,
   InternetProviderLyricSearchResponse,
   LyricSearchQuery,
-} from '/@/renderer/api/types';
+} from '../../../../renderer/api/types';
-import { LyricSource } from '../../../../renderer/api/types';
+import { orderSearchResults } from './shared';
 
 const SEARCH_URL = 'https://genius.com/api/search/song';
 
 // Adapted from https://github.com/NyaomiDEV/Sunamu/blob/master/src/main/lyricproviders/genius.ts
 
-interface GeniusResponse {
+export interface GeniusResponse {
-  artist: string;
+  meta: Meta;
-  name: string;
+  response: Response;
+}
+
+export interface Meta {
+  status: number;
+}
+
+export interface Response {
+  next_page: number;
+  sections: Section[];
+}
+
+export interface Section {
+  hits: Hit[];
+  type: string;
+}
+
+export interface Hit {
+  highlights: any[];
+  index: string;
+  result: Result;
+  type: string;
+}
+
+export interface Result {
+  _type: string;
+  annotation_count: number;
+  api_path: string;
+  artist_names: string;
+  featured_artists: any[];
+  full_title: string;
+  header_image_thumbnail_url: string;
+  header_image_url: string;
+  id: number;
+  instrumental: boolean;
+  language: string;
+  lyrics_owner_id: number;
+  lyrics_state: string;
+  lyrics_updated_at: number;
+  path: string;
+  primary_artist: PrimaryArtist;
+  pyongs_count: null;
+  relationships_index_url: string;
+  release_date_components: ReleaseDateComponents;
+  release_date_for_display: string;
+  release_date_with_abbreviated_month_for_display: string;
+  song_art_image_thumbnail_url: string;
+  song_art_image_url: string;
+  stats: Stats;
+  title: string;
+  title_with_featured: string;
+  updated_by_human_at: number;
   url: string;
 }
 
-interface GeniusSearchResponse {
+export interface PrimaryArtist {
-  response: {
+  _type: string;
-    sections: {
+  api_path: string;
-      hits: {
+  header_image_url: string;
-        highlights: any[];
+  id: number;
-        index: string;
+  image_url: string;
-        result: {
+  index_character: string;
-          _type: string;
+  is_meme_verified: boolean;
-          annotation_count: number;
+  is_verified: boolean;
-          api_path: string;
+  name: string;
-          artist_names: string;
+  slug: string;
-          featured_artits: any[];
+  url: string;
-          full_title: string;
+}
-          header_image_thumbnail_url: string;
+
-          header_image_url: string;
+export interface ReleaseDateComponents {
-          id: number;
+  day: number;
-          instrumental: boolean;
+  month: number;
-          language: string;
+  year: number;
-          lyrics_owner_id: number;
+}
-          lyrics_state: string;
+
-          lyrics_updated_at: number;
+export interface Stats {
-          path: string;
+  hot: boolean;
-          primary_artist: Record<any, any>;
+  unreviewed_annotations: number;
-          pyongs_count: number;
-          relationships_index_url: string;
-          release_date_components: Record<any, any>;
-          release_date_for_display: string;
-          release_date_with_abbreviated_month_for_display: string;
-          song_art_image_thumbnail_url: string;
-          song_art_image_url: string;
-          stats: Record<any, any>;
-          title: string;
-          title_with_featured: string;
-          updated_by_human_at: number;
-          url: string;
-        };
-        type: string;
-      }[];
-      type: string;
-    }[];
-  };
 }
 
 export async function getSearchResults(
   params: LyricSearchQuery,
 ): Promise<InternetProviderLyricSearchResponse[] | null> {
-  let result: AxiosResponse<GeniusSearchResponse>;
+  let result: AxiosResponse<GeniusResponse>;
 
   const searchQuery = [params.artist, params.name].join(' ');
 
@@ -83,11 +117,11 @@ export async function getSearchResults(
     return null;
   }
 
-  const songs = result.data.response?.sections?.[0]?.hits?.map((hit) => hit.result);
+  const rawSongsResult = result.data.response?.sections?.[0]?.hits?.map((hit) => hit.result);
 
-  if (!songs) return null;
+  if (!rawSongsResult) return null;
 
-  return songs.map((song: any) => {
+  const songResults: InternetProviderLyricSearchResponse[] = rawSongsResult.map((song: any) => {
     return {
       artist: song.artist_names,
       id: song.url,
@@ -95,10 +129,14 @@ export async function getSearchResults(
       source: LyricSource.GENIUS,
     };
   });
+
+  return orderSearchResults({ params, results: songResults });
 }
 
-async function getSongURL(params: LyricSearchQuery): Promise<GeniusResponse | undefined> {
+async function getSongId(
-  let result: AxiosResponse<GeniusSearchResponse>;
+  params: LyricSearchQuery,
+): Promise<Omit<InternetProviderLyricResponse, 'lyrics'> | null> {
+  let result: AxiosResponse<GeniusResponse>;
   try {
     result = await axios.get(SEARCH_URL, {
       params: {
@@ -108,23 +146,24 @@ async function getSongURL(params: LyricSearchQuery): Promise<GeniusResponse | un
     });
   } catch (e) {
     console.error('Genius search request got an error!', e);
-    return undefined;
+    return null;
   }
 
   const hit = result.data.response?.sections?.[0]?.hits?.[0]?.result;
 
   if (!hit) {
-    return undefined;
+    return null;
   }
 
   return {
     artist: hit.artist_names,
+    id: hit.url,
     name: hit.full_title,
-    url: hit.url,
+    source: LyricSource.GENIUS,
   };
 }
 
-export async function getLyricsByURL(url: string): Promise<string | null> {
+export async function getLyricsBySongId(url: string): Promise<string | null> {
   let result: AxiosResponse<string, any>;
   try {
     result = await axios.get<string>(url, { responseType: 'text' });
@@ -148,13 +187,13 @@ export async function getLyricsByURL(url: string): Promise<string | null> {
 export async function query(
   params: LyricSearchQuery,
 ): Promise<InternetProviderLyricResponse | null> {
-  const response = await getSongURL(params);
+  const response = await getSongId(params);
   if (!response) {
     console.error('Could not find the song on Genius!');
     return null;
   }
 
-  const lyrics = await getLyricsByURL(response.url);
+  const lyrics = await getLyricsBySongId(response.id);
   if (!lyrics) {
     console.error('Could not get lyrics on Genius!');
     return null;
@@ -162,6 +201,7 @@ export async function query(
 
   return {
     artist: response.artist,
+    id: response.id,
     lyrics,
     name: response.name,
     source: LyricSource.GENIUS,

src/main/features/core/lyrics/index.ts

@@ -1,3 +1,4 @@
+import { ipcMain } from 'electron';
 import {
   InternetProviderLyricResponse,
   InternetProviderLyricSearchResponse,
@@ -5,19 +6,18 @@ import {
   QueueSong,
   LyricGetQuery,
   LyricSource,
-} from '/@/renderer/api/types';
+} from '../../../../renderer/api/types';
+import { store } from '../settings/index';
 import {
   query as queryGenius,
   getSearchResults as searchGenius,
-  getLyricsByURL as getGenius,
+  getLyricsBySongId as getGenius,
 } from './genius';
 import {
   query as queryNetease,
   getSearchResults as searchNetease,
   getLyricsBySongId as getNetease,
 } from './netease';
-import { ipcMain } from 'electron';
-import { store } from '../settings/index';
 
 type SongFetcher = (params: LyricSearchQuery) => Promise<InternetProviderLyricResponse | null>;
 type SearchFetcher = (

src/main/features/core/lyrics/netease.ts

@@ -1,5 +1,6 @@
 import axios, { AxiosResponse } from 'axios';
 import { LyricSource } from '../../../../renderer/api/types';
+import { orderSearchResults } from './shared';
 import type {
   InternetProviderLyricResponse,
   InternetProviderLyricSearchResponse,
@@ -11,16 +12,65 @@ const LYRICS_URL = 'https://music.163.com/api/song/lyric';
 
 // Adapted from https://github.com/NyaomiDEV/Sunamu/blob/master/src/main/lyricproviders/netease.ts
 
-interface NetEaseResponse {
+export interface NetEaseResponse {
-  artist: string;
+  code: number;
-  id: string;
+  result: Result;
+}
+
+export interface Result {
+  hasMore: boolean;
+  songCount: number;
+  songs: Song[];
+}
+
+export interface Song {
+  album: Album;
+  alias: string[];
+  artists: Artist[];
+  copyrightId: number;
+  duration: number;
+  fee: number;
+  ftype: number;
+  id: number;
+  mark: number;
+  mvid: number;
   name: string;
+  rUrl: null;
+  rtype: number;
+  status: number;
+  transNames?: string[];
+}
+
+export interface Album {
+  artist: Artist;
+  copyrightId: number;
+  id: number;
+  mark: number;
+  name: string;
+  picId: number;
+  publishTime: number;
+  size: number;
+  status: number;
+  transNames?: string[];
+}
+
+export interface Artist {
+  albumSize: number;
+  alias: any[];
+  fansGroup: null;
+  id: number;
+  img1v1: number;
+  img1v1Url: string;
+  name: string;
+  picId: number;
+  picUrl: null;
+  trans: null;
 }
 
 export async function getSearchResults(
   params: LyricSearchQuery,
 ): Promise<InternetProviderLyricSearchResponse[] | null> {
-  let result: AxiosResponse<any, any>;
+  let result: AxiosResponse<NetEaseResponse>;
 
   const searchQuery = [params.artist, params.name].join(' ');
 
@@ -42,11 +92,11 @@ export async function getSearchResults(
     return null;
   }
 
-  const songs = result?.data.result?.songs;
+  const rawSongsResult = result?.data.result?.songs;
 
-  if (!songs) return null;
+  if (!rawSongsResult) return null;
 
-  return songs.map((song: any) => {
+  const songResults: InternetProviderLyricSearchResponse[] = rawSongsResult.map((song: any) => {
     const artist = song.artists ? song.artists.map((artist: any) => artist.name).join(', ') : '';
 
     return {
@@ -56,19 +106,24 @@ export async function getSearchResults(
       source: LyricSource.NETEASE,
     };
   });
+
+  return orderSearchResults({ params, results: songResults });
 }
 
-async function getSongId(params: LyricSearchQuery): Promise<NetEaseResponse | undefined> {
+async function getMatchedLyrics(
+  params: LyricSearchQuery,
+): Promise<Omit<InternetProviderLyricResponse, 'lyrics'> | null> {
   const results = await getSearchResults(params);
-  const song = results?.[0];
 
-  if (!song) return undefined;
+  console.log('results', results);
 
-  return {
+  const firstMatch = results?.[0];
-    artist: song.artist,
+
-    id: song.id,
+  if (!firstMatch || (firstMatch?.score && firstMatch.score > 0.5)) {
-    name: song.name,
+    return null;
-  };
+  }
+
+  return firstMatch;
 }
 
 export async function getLyricsBySongId(songId: string): Promise<string | null> {
@@ -92,22 +147,23 @@ export async function getLyricsBySongId(songId: string): Promise<string | null>
 export async function query(
   params: LyricSearchQuery,
 ): Promise<InternetProviderLyricResponse | null> {
-  const response = await getSongId(params);
+  const lyricsMatch = await getMatchedLyrics(params);
-  if (!response) {
+  if (!lyricsMatch) {
     console.error('Could not find the song on NetEase!');
     return null;
   }
 
-  const lyrics = await getLyricsBySongId(response.id);
+  const lyrics = await getLyricsBySongId(lyricsMatch.id);
   if (!lyrics) {
     console.error('Could not get lyrics on NetEase!');
     return null;
   }
 
   return {
-    artist: response.artist,
+    artist: lyricsMatch.artist,
+    id: lyricsMatch.id,
     lyrics,
-    name: response.name,
+    name: lyricsMatch.name,
     source: LyricSource.NETEASE,
   };
 }

src/main/features/core/lyrics/shared.ts

@@ -0,0 +1,34 @@
+import Fuse from 'fuse.js';
+import {
+  InternetProviderLyricSearchResponse,
+  LyricSearchQuery,
+} from '../../../../renderer/api/types';
+
+export const orderSearchResults = (args: {
+  params: LyricSearchQuery;
+  results: InternetProviderLyricSearchResponse[];
+}) => {
+  const { params, results } = args;
+
+  const options: Fuse.IFuseOptions<InternetProviderLyricSearchResponse> = {
+    fieldNormWeight: 1,
+    includeScore: true,
+    keys: [
+      { getFn: (song) => song.name, name: 'name', weight: 3 },
+      { getFn: (song) => song.artist, name: 'artist' },
+    ],
+    threshold: 1.0,
+  };
+
+  const fuse = new Fuse(results, options);
+
+  const searchResults = fuse.search<InternetProviderLyricSearchResponse>({
+    ...(params.artist && { artist: params.artist }),
+    ...(params.name && { name: params.name }),
+  });
+
+  return searchResults.map((result) => ({
+    ...result.item,
+    score: result.score,
+  }));
+};

src/renderer/api/types.ts

@@ -6,7 +6,8 @@ import {
   JFAlbumArtistListSort,
   JFArtistListSort,
   JFPlaylistListSort,
-} from '/@/renderer/api/jellyfin.types';
+} from './jellyfin.types';
+import { jfType } from './jellyfin/jellyfin-types';
 import {
   NDSortOrder,
   NDOrder,
@@ -15,9 +16,8 @@ import {
   NDPlaylistListSort,
   NDSongListSort,
   NDUserListSort,
-} from '/@/renderer/api/navidrome.types';
+} from './navidrome.types';
-import { ndType } from '/@/renderer/api/navidrome/navidrome-types';
+import { ndType } from './navidrome/navidrome-types';
-import { jfType } from '/@/renderer/api/jellyfin/jellyfin-types';
 
 export enum LibraryItem {
   ALBUM = 'album',
@@ -1031,6 +1031,7 @@ export type LyricsResponse = SynchronizedLyricsArray | string;
 
 export type InternetProviderLyricResponse = {
   artist: string;
+  id: string;
   lyrics: string;
   name: string;
   source: LyricSource;
@@ -1040,6 +1041,7 @@ export type InternetProviderLyricSearchResponse = {
   artist: string;
   id: string;
   name: string;
+  score?: number;
   source: LyricSource;
 };
 

src/renderer/features/lyrics/components/lyrics-search-form.tsx

@@ -3,6 +3,7 @@ import { Divider, Group, Stack } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useDebouncedValue } from '@mantine/hooks';
 import { openModal } from '@mantine/modals';
+import orderBy from 'lodash/orderBy';
 import styled from 'styled-components';
 import {
   InternetProviderLyricSearchResponse,
@@ -10,7 +11,7 @@ import {
   LyricsOverride,
 } from '../../../api/types';
 import { useLyricSearch } from '../queries/lyric-search-query';
-import { Badge, ScrollArea, Spinner, Text, TextInput } from '/@/renderer/components';
+import { ScrollArea, Spinner, Text, TextInput } from '/@/renderer/components';
 
 const SearchItem = styled.button`
   all: unset;
@@ -27,12 +28,22 @@ const SearchItem = styled.button`
 `;
 
 interface SearchResultProps {
-  artist?: string;
+  data: InternetProviderLyricSearchResponse;
-  name?: string;
   onClick?: () => void;
-  source?: string;
 }
-const SearchResult = ({ name, artist, source, onClick }: SearchResultProps) => {
+const SearchResult = ({ data, onClick }: SearchResultProps) => {
+  const { artist, name, source, score, id } = data;
+
+  const percentageScore = useMemo(() => {
+    if (!score) return 0;
+    return ((1 - score) * 100).toFixed(2);
+  }, [score]);
+
+  const cleanId =
+    source === LyricSource.GENIUS
+      ? String(id).replace(/^((http[s]?|ftp):\/)?\/?([^:/\s]+)/g, '')
+      : id;
+
   return (
     <SearchItem onClick={onClick}>
       <Group
@@ -50,8 +61,19 @@ const SearchResult = ({ name, artist, source, onClick }: SearchResultProps) => {
             {name}
           </Text>
           <Text $secondary>{artist}</Text>
+          <Group
+            noWrap
+            spacing="sm"
+          >
+            <Text
+              $secondary
+              size="sm"
+            >
+              {[source, cleanId].join(' — ')}
+            </Text>
+          </Group>
         </Stack>
-        <Badge size="lg">{source}</Badge>
+        <Text>{percentageScore}%</Text>
       </Group>
     </SearchItem>
   );
@@ -86,21 +108,21 @@ export const LyricsSearchForm = ({ artist, name, onSearchOverride }: LyricSearch
       (data[key as keyof typeof data] || []).forEach((result) => results.push(result));
     });
 
-    return results;
+    const scoredResults = orderBy(results, ['score'], ['asc']);
+
+    return scoredResults;
   }, [data]);
 
   return (
-    <Stack h={400}>
+    <Stack w="100%">
       <form>
         <Group grow>
           <TextInput
             data-autofocus
-            required
             label="Name"
             {...form.getInputProps('name')}
           />
           <TextInput
-            required
             label="Artist"
             {...form.getInputProps('artist')}
           />
@@ -112,15 +134,16 @@ export const LyricsSearchForm = ({ artist, name, onSearchOverride }: LyricSearch
       ) : (
         <ScrollArea
           offsetScrollbars
+          h={400}
           pr="1rem"
+          type="auto"
+          w="100%"
         >
           <Stack spacing="md">
             {searchResults.map((result) => (
               <SearchResult
                 key={`${result.source}-${result.id}`}
-                artist={result.artist}
+                data={result}
-                name={result.name}
-                source={result.source}
                 onClick={() => {
                   onSearchOverride?.({
                     artist: result.artist,
@@ -149,6 +172,6 @@ export const openLyricSearchModal = ({ artist, name, onSearchOverride }: LyricSe
       />
     ),
     size: 'lg',
-    title: 'Search for lyrics',
+    title: 'Lyrics Search',
   });
 };