disable lyrics on radio playback (#1885)

This commit is contained in:
jeffvli
2026-03-29 20:33:29 -07:00
parent a5c3b454f4
commit d81f30a8b5
+31 -15
View File
@@ -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 ? (
<SynchronizedLyrics
{...(lyrics as SynchronizedLyricsProps)}
offsetMs={currentOffsetMs}
{...(displayLyrics as SynchronizedLyricsProps)}
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}