diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx index baf4c3ddc..7877a45bc 100644 --- a/src/renderer/features/lyrics/lyrics.tsx +++ b/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 hasNoLyrics = !lyrics; + const isLoadingLyrics = isLoading && !isLyricsDisabled; + 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) { - openLyricsExportModal({ lyrics, offsetMs: currentOffsetMs, synced }); + if (displayLyrics) { + 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 ? ( ) : ( @@ -336,10 +352,10 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default' )}