Move all lyrics fetching logic into query

src/renderer/features/lyrics/lyrics.tsx

@@ -1,132 +1,33 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
 import { Center, Group } from '@mantine/core';
-import isElectron from 'is-electron';
 import { ErrorBoundary } from 'react-error-boundary';
-import { ErrorFallback } from '/@/renderer/features/action-required';
-import { getServerById, useCurrentSong } from '/@/renderer/store';
-import { UnsynchronizedLyrics } from '/@/renderer/features/lyrics/unsynchronized-lyrics';
 import { RiInformationFill } from 'react-icons/ri';
-import { TextTitle } from '/@/renderer/components';
-import {
-  InternetProviderLyricResponse,
-  LyricOverride,
-  LyricsResponse,
-  SynchronizedLyricsArray,
-} from '/@/renderer/api/types';
-import { useSongLyrics } from '/@/renderer/features/lyrics/queries/lyric-query';
+import { useSongLyrics } from './queries/lyric-query';
 import { SynchronizedLyrics } from './synchronized-lyrics';
-
-const lyrics = isElectron() ? window.electron.lyrics : null;
-
-const ipc = isElectron() ? window.electron.ipc : null;
-
-// use by https://github.com/ustbhuangyi/lyric-parser
-const timeExp = /\[(\d{2,}):(\d{2})(?:\.(\d{2,3}))?]([^\n]+)\n/g;
+import { Spinner, TextTitle } from '/@/renderer/components';
+import { ErrorFallback } from '/@/renderer/features/action-required';
+import { UnsynchronizedLyrics } from '/@/renderer/features/lyrics/unsynchronized-lyrics';
+import { getServerById, useCurrentSong } from '/@/renderer/store';
 
 export const Lyrics = () => {
   const currentSong = useCurrentSong();
   const currentServer = getServerById(currentSong?.serverId);
 
-  const [overrideLyrics, setOverrideLyrics] = useState<string | null>(null);
-  const [overrideData, setOverrideData] = useState<LyricOverride | null>(null);
-  const [source, setSource] = useState<string | null>(null);
-  const [songLyrics, setSongLyrics] = useState<LyricsResponse | null>(null);
-
-  const remoteLyrics = useSongLyrics({
-    options: { enabled: !!currentSong },
-    query: { songId: currentSong?.id ?? '' },
-    serverId: currentServer?.id,
-  });
-
-  const songRef = useRef<string | null>(null);
-
-  useEffect(() => {
-    lyrics?.remoteLyricsListener(
-      (
-        _event: any,
-        songName: string,
-        lyricSource: string,
-        lyric: InternetProviderLyricResponse,
-      ) => {
-        if (songName === songRef.current) {
-          const { lyrics, ...rest } = lyric;
-          setSource(lyricSource);
-
-          setOverrideData(rest);
-          setOverrideLyrics(lyrics);
-        }
-      },
-    );
-
-    return () => {
-      ipc?.removeAllListeners('lyric-get');
-    };
-  }, []);
-
-  useEffect(() => {
-    const hasTaggedLyrics = currentSong && currentSong.lyrics;
-    const hasLyricsResponse =
-      !remoteLyrics.isLoading && remoteLyrics?.isSuccess && remoteLyrics?.data !== null;
-
-    if (!hasTaggedLyrics && !hasLyricsResponse) {
-      lyrics?.fetchRemoteLyrics(currentSong);
-    }
-
-    songRef.current = currentSong?.name ?? null;
-
-    setOverrideData(null);
-    setOverrideLyrics(null);
-    setSource(null);
-  }, [currentSong, remoteLyrics.isLoading, remoteLyrics?.data, remoteLyrics?.isSuccess]);
-
-  useEffect(() => {
-    let lyrics: string | null = null;
-
-    if (currentSong?.lyrics) {
-      lyrics = currentSong.lyrics;
-
-      setSource(currentServer?.name ?? 'music server');
-    } else if (overrideLyrics) {
-      lyrics = overrideLyrics;
-    } else if (remoteLyrics.data) {
-      setSource(currentServer?.name ?? 'music server');
-      setSongLyrics(remoteLyrics.data);
-      return;
-    }
-
-    if (lyrics) {
-      const synchronizedLines = lyrics.matchAll(timeExp);
-
-      const synchronizedTimes: SynchronizedLyricsArray = [];
-
-      for (const line of synchronizedLines) {
-        const [, minute, sec, ms, text] = line;
-        const minutes = parseInt(minute, 10);
-        const seconds = parseInt(sec, 10);
-        const milis = ms?.length === 3 ? parseInt(ms, 10) : parseInt(ms, 10) * 10;
-
-        const timeInMilis = (minutes * 60 + seconds) * 1000 + milis;
-        synchronizedTimes.push([timeInMilis, text]);
-      }
-
-      if (synchronizedTimes.length === 0) {
-        setSongLyrics(lyrics);
-      } else {
-        setSongLyrics(synchronizedTimes);
-      }
-    } else {
-      setSongLyrics(null);
-    }
-  }, [currentServer?.name, currentSong, overrideLyrics, remoteLyrics.data]);
-
-  const clearOverride = useCallback(() => {
-    setOverrideData(null);
-    setOverrideLyrics(null);
-  }, []);
+  const { data, isLoading } = useSongLyrics(
+    {
+      query: { songId: currentSong?.id || '' },
+      serverId: currentServer?.id,
+    },
+    currentSong,
+  );
 
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
-      {!songLyrics ? (
+      {isLoading ? (
+        <Spinner
+          container
+          size={25}
+        />
+      ) : !data?.lyrics ? (
         <Center p="2rem">
           <Group>
             <RiInformationFill size="2rem" />
@@ -140,19 +41,19 @@ export const Lyrics = () => {
         </Center>
       ) : (
         <>
-          {Array.isArray(songLyrics) ? (
+          {Array.isArray(data.lyrics) ? (
             <SynchronizedLyrics
-              lyrics={songLyrics}
-              override={overrideData}
-              source={source}
-              onRemoveLyric={clearOverride}
+              lyrics={data.lyrics}
+              override={null}
+              source={data.source}
+              onRemoveLyric={() => {}}
             />
           ) : (
             <UnsynchronizedLyrics
-              lyrics={songLyrics}
-              override={overrideData}
-              source={source}
-              onRemoveLyric={clearOverride}
+              lyrics={data.lyrics}
+              override={null}
+              source={data.source}
+              onRemoveLyric={() => {}}
             />
           )}
         </>