chore: useLyric refactor

changelog.txt

@@ -7,6 +7,7 @@
 
 3.1.9:
 github同步
+歌词性能提升
 
 3.1.8:
 b站字幕歌词

package.json

@@ -26,6 +26,7 @@
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
+    "@welldone-software/why-did-you-render": "^8.0.1",
     "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "12.0.2",
@@ -96,7 +97,7 @@
     "he": "^1.2.0",
     "i18next": "^23.11.4",
     "libmuse": "git+https://github.com/lovegaoshi/muse.git#apm-release",
-    "material-ui-confirm": "^3.0.14",
+    "material-ui-confirm": "^3.0.15",
     "md5": "^2.3.0",
     "notistack": "^3.0.1",
     "octokit": "^4.0.2",

src/components/App/App.tsx

@@ -72,7 +72,6 @@ export default function Player({ songList }: Props) {
         <LyricOverlay
           showLyric={showLyric}
           currentAudio={currentAudio}
-          currentTime={currentAudio.currentTime}
           closeLyric={() => setShowLyric(false)}
         />
       )}

src/components/lyric/Lyric.tsx

@@ -5,10 +5,10 @@ import { withStyles } from '@mui/styles';
 import Grid from '@mui/material/Grid';
 
 import { getName } from '@APM/utils/re';
-import { useNoxSetting } from '@APM/stores/useApp';
 import { useDebouncedValue } from '@APM/hooks';
 import useApp from '@stores/useApp';
 import LyricSearchBar from './LyricSearchBar';
+import useLyric from '@hooks/useLyric';
 
 const styles = () => ({
   inputOffset: {
@@ -26,8 +26,7 @@ const styles = () => ({
 });
 
 interface Props {
-  currentAudio: NoxMedia.Song;
-  currentTime: number;
+  currentAudio: NoxMediaChrome.RJKMAudio;
 }
 
 interface LineRenderer {
@@ -39,36 +38,15 @@ interface LineRenderer {
   active: boolean;
 }
 
-export default withStyles(styles)((props: Props) => {
-  const setLyricMapping = useNoxSetting((state) => state.setLyricMapping);
-  const { colorTheme, ScrollBar } = useApp((state) => state.playerStyle);
-  const [lyricOffset, setLyricOffset] = useState(0);
-  const [lyric, setLyric] = useState('');
-  const [songTitle, setSongTitle] = useState('');
-  const debouncedSongTitle = useDebouncedValue(songTitle, 1000);
-
-  // HACK: how to do this..?
-  // @ts-ignore
-  const { classes, currentTime, currentAudio } = props;
-  const audioName = getName(currentAudio);
-
-  useEffect(() => {
-    // console.log('Lrc changed to %s', extractedName)
-    // fetchLRC(audioName, setLyric, setSongTitle)
-    setSongTitle(audioName);
-  }, [audioName]);
+interface LrcViewProps {
+  lyricOffset: number;
+  lrc: string;
+  className: string;
+}
 
-  const onLrcOffsetChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    const lyricOffset = Number(e.target.value);
-    setLyricOffset(lyricOffset);
-    setLyricMapping({
-      songId: currentAudio.id,
-      lyricOffset,
-      lyric,
-    });
-  };
+const LrcView = ({ lyricOffset, lrc, className }: LrcViewProps) => {
+  const currentProgress = useApp((state) => state.currentProgress);
+  const { colorTheme } = useApp((state) => state.playerStyle);
 
   const lineRenderer = useCallback(
     ({ line: { content }, active }: LineRenderer) => {
@@ -92,7 +70,45 @@ export default withStyles(styles)((props: Props) => {
     [],
   );
 
-  // //console.log(+currentTime * 1000 + +lyricOffset)
+  return (
+    <Lrc
+      className={className}
+      style={mStyles.lrc}
+      lrc={lrc}
+      lineRenderer={lineRenderer}
+      currentMillisecond={+currentProgress * 1000 + +lyricOffset} // Add offset value to adapt lrc time
+      recoverAutoScrollInterval={5000}
+    />
+  );
+};
+
+export default withStyles(styles)((props: Props) => {
+  const { colorTheme, ScrollBar } = useApp((state) => state.playerStyle);
+  const [songTitle, setSongTitle] = useState('');
+  const debouncedSongTitle = useDebouncedValue(songTitle, 1000);
+
+  // HACK: how to do this..?
+  // @ts-ignore
+  const { classes, currentAudio } = props;
+  const audioName = getName(currentAudio);
+  const usedLyric = useLyric(currentAudio);
+
+  useEffect(() => {
+    // console.log('Lrc changed to %s', extractedName)
+    // fetchLRC(audioName, setLyric, setSongTitle)
+    setSongTitle(audioName);
+  }, [audioName]);
+
+  useEffect(() => {
+    if (debouncedSongTitle.length > 0) {
+      usedLyric.fetchAndSetLyricOptions(debouncedSongTitle);
+    }
+  }, [debouncedSongTitle]);
+
+  const onLrcOffsetChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => usedLyric.onLrcOffsetChange(Number(e.target.value));
+
   const className = ScrollBar().root;
 
   return (
@@ -119,7 +135,7 @@ export default withStyles(styles)((props: Props) => {
               InputProps={{
                 className: classes.inputOffset,
               }}
-              value={lyricOffset}
+              value={usedLyric.currentTimeOffset}
               onChange={onLrcOffsetChange}
             />
             <TextField
@@ -138,23 +154,15 @@ export default withStyles(styles)((props: Props) => {
           </Grid>
 
           <Grid sx={mStyles.lrcSearchBarGrid} item xs={12}>
-            <LyricSearchBar
-              searchKey={debouncedSongTitle}
-              currentAudio={currentAudio}
-              setLyricOffset={setLyricOffset}
-              setLyric={setLyric}
-            />
+            <LyricSearchBar currentAudio={currentAudio} usedLyric={usedLyric} />
           </Grid>
         </Grid>
       </Grid>
       <Grid style={mStyles.lrcGrid} item xs={6}>
-        <Lrc
+        <LrcView
           className={className}
-          style={mStyles.lrc}
-          lrc={lyric}
-          lineRenderer={lineRenderer}
-          currentMillisecond={+currentTime * 1000 + +lyricOffset} // Add offset value to adapt lrc time
-          recoverAutoScrollInterval={5000}
+          lrc={usedLyric.lrc}
+          lyricOffset={usedLyric.currentTimeOffset}
         />
       </Grid>
     </Grid>

src/components/lyric/LyricOverlay.tsx

@@ -17,15 +17,13 @@ const Transition = React.forwardRef(function Transition(
 });
 
 interface Props {
-  currentAudio: NoxMedia.Song;
+  currentAudio: NoxMediaChrome.RJKMAudio;
   showLyric: boolean;
-  currentTime: number;
   closeLyric?: () => void;
 }
 export default function LyricOverlay({
   currentAudio,
   showLyric,
-  currentTime,
   closeLyric = () => {},
 }: Props) {
   return (
@@ -60,7 +58,7 @@ export default function LyricOverlay({
           >
             <KeyboardArrowDownIcon />
           </IconButton>
-          <Lyric currentTime={currentTime} currentAudio={currentAudio} />
+          <Lyric currentAudio={currentAudio} />
         </div>
       </Dialog>
     </div>

src/components/lyric/LyricSearchBar.tsx

@@ -1,94 +1,33 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
 
-import { useNoxSetting } from '@APM/stores/useApp';
-import { searchLyricOptions, searchLyric } from '@APM/utils/LyricFetch';
-import { LrcSource } from '@enums/LyricFetch';
-
 interface Props {
-  searchKey: string;
   currentAudio: NoxMedia.Song;
-  setLyric: (v: string) => void;
-  setLyricOffset: (v: number) => void;
+  usedLyric: any;
 }
-export default function LyricSearchBar({
-  searchKey,
-  currentAudio,
-  setLyric,
-  setLyricOffset,
-}: Props) {
-  const setLyricMapping = useNoxSetting((state) => state.setLyricMapping);
-  const lyricMapping = useNoxSetting((state) => state.lyricMapping);
-  const [options, setOptions] = useState<NoxNetwork.NoxFetchedLyric[]>([]);
-  const [value, setValue] = useState<NoxNetwork.NoxFetchedLyric>({
-    key: '',
-    songMid: '',
-    label: '',
-  });
 
-  // Initializes options
-  useEffect(() => {
-    (async () => {
-      if (searchKey === '') return;
-      const resolvedOptions = await Promise.all([
-        searchLyricOptions({ searchKey }),
-        searchLyricOptions({
-          searchKey,
-          source: LrcSource.BiliBili,
-          song: currentAudio,
-        }),
-      ]);
-      setOptions(resolvedOptions.flat());
-    })();
-  }, [searchKey]);
+export default function LyricSearchBar({ currentAudio, usedLyric }: Props) {
+  const { initTrackLrcLoad, lrcOptions, lrcOption, searchAndSetCurrentLyric } =
+    usedLyric;
 
   useEffect(() => {
-    if (options.length === 0) {
-      return;
-    }
-    function initLyric() {
-      const detail = lyricMapping.get(currentAudio.id);
-      if (undefined !== detail) {
-        setLyricOffset(detail.lyricOffset);
-        const index = options.findIndex((v) => v.songMid === detail.lyricKey);
-        if (index !== -1) {
-          onOptionSet({}, options[index]);
-          return;
-        }
-
-        options.unshift({
-          key: detail.lyricKey,
-          songMid: detail.lyricKey,
-          label: detail.songId,
-        });
-        setOptions(options);
-      }
-      onOptionSet({}, options[0]);
-    }
-    initLyric();
-  }, [options]);
+    initTrackLrcLoad();
+  }, [currentAudio]);
 
   const onOptionSet = (_: any, newValue?: NoxNetwork.NoxFetchedLyric) => {
     if (newValue === undefined) return;
-    setValue(newValue);
-    searchLyric(newValue.songMid, newValue.source).then(setLyric);
-    setLyricMapping({
-      songId: currentAudio.id,
-      lyricKey: newValue.key,
-    });
+    searchAndSetCurrentLyric(0, [newValue]);
   };
 
-  // //console.log("SearchBarValue:", options)
-
   return (
     <div>
       <Autocomplete
         disableClearable
         onChange={onOptionSet}
-        value={value}
+        value={lrcOption}
         id='LyricSearchBar'
-        options={options}
+        options={lrcOptions}
         sx={{ width: 500 }}
         size='small'
         renderInput={(params) => <TextField {...params} label='歌词选择' />}