disable lyrics on radio playback (#1885)

src/renderer/features/lyrics/lyrics.tsx

@@ -25,6 +25,7 @@ import {
 } from '/@/renderer/features/lyrics/unsynchronized-lyrics';
 import { openLyricsSettingsModal } from '/@/renderer/features/lyrics/utils/open-lyrics-settings-modal';
 import { usePlayerEvents } from '/@/renderer/features/player/audio-player/hooks/use-player-events';
+import { useIsRadioActive } from '/@/renderer/features/radio/hooks/use-radio-player';
 import { ComponentErrorBoundary } from '/@/renderer/features/shared/components/component-error-boundary';
 import { queryClient } from '/@/renderer/lib/react-query';
 import { useLyricsSettings, usePlayerSong } from '/@/renderer/store';
@@ -42,6 +43,10 @@ type LyricsProps = {
 
 export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default' }: LyricsProps) => {
     const currentSong = usePlayerSong();
+    const isRadioActive = useIsRadioActive();
+
+    const isLyricsDisabled = isRadioActive;
+
     const {
         enableAutoTranslation,
         preferLocalLyrics,
@@ -91,7 +96,8 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
         lyricsQueries.songLyrics(
             {
                 options: {
-                    enabled: !!pendingSongId && pendingSongId === currentSong?.id,
+                    enabled:
+                        !!pendingSongId && pendingSongId === currentSong?.id && !isLyricsDisabled,
                 },
                 query: { songId: currentSong?.id || '' },
                 serverId: currentSong?._serverId || '',
@@ -110,11 +116,15 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
         return computeSelectedFromResult(data, preferLocalLyrics, indexToUse);
     }, [data, indexToUse, preferLocalLyrics]);
 
+    const displayLyrics = isLyricsDisabled ? null : lyrics;
+
     const currentOffsetMs = useMemo(() => {
         if (!data) return 0;
         return getDisplayOffset(lyrics, data.selectedOffsetMs, indexToUse, data.local);
     }, [data, indexToUse, lyrics]);
 
+    const displayOffsetMs = isLyricsDisabled ? 0 : currentOffsetMs;
+
     const handleOnSearchOverride = useCallback(
         (params: LyricsOverride) => {
             if (!lyricsKey) return;
@@ -192,7 +202,7 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
     }, [currentSong, lyricsKey]);
 
     const fetchTranslation = useCallback(async () => {
-        if (!lyrics) return;
+        if (!lyrics || isLyricsDisabled) return;
         const originalLyrics = Array.isArray(lyrics.lyrics)
             ? lyrics.lyrics.map(([, line]) => line).join('\n')
             : lyrics.lyrics;
@@ -204,7 +214,13 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
         );
         setTranslatedLyrics(TranslatedText);
         setShowTranslation(true);
-    }, [lyrics, translationApiKey, translationApiProvider, translationTargetLanguage]);
+    }, [
+        isLyricsDisabled,
+        lyrics,
+        translationApiKey,
+        translationApiProvider,
+        translationTargetLanguage,
+    ]);
 
     const handleOnTranslateLyric = useCallback(async () => {
         if (translatedLyrics) {
@@ -226,10 +242,10 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
     );
 
     useEffect(() => {
-        if (lyrics && !translatedLyrics && enableAutoTranslation) {
+        if (displayLyrics && !translatedLyrics && enableAutoTranslation) {
             fetchTranslation();
         }
-    }, [lyrics, translatedLyrics, enableAutoTranslation, fetchTranslation]);
+    }, [displayLyrics, translatedLyrics, enableAutoTranslation, fetchTranslation]);
 
     const languages = useMemo(() => {
         const local = data?.local;
@@ -242,8 +258,8 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
         return [];
     }, [data?.local]);
 
-    const isLoadingLyrics = isLoading;
+    const isLoadingLyrics = isLoading && !isLyricsDisabled;
-    const hasNoLyrics = !lyrics;
+    const hasNoLyrics = !displayLyrics;
     const [shouldFadeOut, setShouldFadeOut] = useState(false);
 
     useEffect(() => {
@@ -267,10 +283,10 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
     }, [isLoadingLyrics, hasNoLyrics, fadeOutNoLyricsMessage]);
 
     const handleExportLyrics = useCallback(() => {
-        if (lyrics) {
+        if (displayLyrics) {
-            openLyricsExportModal({ lyrics, offsetMs: currentOffsetMs, synced });
+            openLyricsExportModal({ lyrics: displayLyrics, offsetMs: currentOffsetMs, synced });
         }
-    }, [currentOffsetMs, lyrics, synced]);
+    }, [currentOffsetMs, displayLyrics, synced]);
 
     const handleOpenSettings = () => {
         openLyricsSettingsModal(settingsKey);
@@ -318,14 +334,14 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
                             >
                                 {synced ? (
                                     <SynchronizedLyrics
-                                        {...(lyrics as SynchronizedLyricsProps)}
+                                        {...(displayLyrics as SynchronizedLyricsProps)}
-                                        offsetMs={currentOffsetMs}
+                                        offsetMs={displayOffsetMs}
                                         settingsKey={settingsKey}
                                         translatedLyrics={showTranslation ? translatedLyrics : null}
                                     />
                                 ) : (
                                     <UnsynchronizedLyrics
-                                        {...(lyrics as UnsynchronizedLyricsProps)}
+                                        {...(displayLyrics as UnsynchronizedLyricsProps)}
                                         settingsKey={settingsKey}
                                         translatedLyrics={showTranslation ? translatedLyrics : null}
                                     />
@@ -336,10 +352,10 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
                 )}
                 <div className={styles.actionsContainer}>
                     <LyricsActions
-                        hasLyrics={!!lyrics}
+                        hasLyrics={!!displayLyrics}
                         index={indexToUse}
                         languages={languages}
-                        offsetMs={currentOffsetMs}
+                        offsetMs={displayOffsetMs}
                         onExportLyrics={handleExportLyrics}
                         onRemoveLyric={handleOnRemoveLyric}
                         onSearchOverride={handleOnSearchOverride}