diff --git a/src/renderer/features/lyrics/lyrics.tsx b/src/renderer/features/lyrics/lyrics.tsx index ced8e6384..d7842058f 100644 --- a/src/renderer/features/lyrics/lyrics.tsx +++ b/src/renderer/features/lyrics/lyrics.tsx @@ -47,6 +47,7 @@ import { Center } from '/@/shared/components/center/center'; import { Group } from '/@/shared/components/group/group'; import { Spinner } from '/@/shared/components/spinner/spinner'; import { Text } from '/@/shared/components/text/text'; +import { useLocalStorage } from '/@/shared/hooks/use-local-storage'; import { LyricsOverride } from '/@/shared/types/domain-types'; type LyricsProps = { @@ -73,7 +74,10 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default' const [index, setIndexState] = useState(0); const [translatedLyrics, setTranslatedLyrics] = useState(null); const [showTranslation, setShowTranslation] = useState(false); - const [visibleOverlayKeys, setVisibleOverlayKeys] = useState>(new Set()); + const [visibleOverlayLayerKeys, setVisibleOverlayLayerKeys] = useLocalStorage({ + defaultValue: [], + key: `lyrics:visible-overlay-layers:${settingsKey}`, + }); const [pendingSongId, setPendingSongId] = useState(currentSong?.id); const lyricsFetchTimeoutRef = useRef | undefined>(undefined); const previousSongIdRef = useRef(currentSong?.id); @@ -182,6 +186,11 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default' })); }, [layers]); + const visibleOverlayKeys = useMemo( + () => new Set(visibleOverlayLayerKeys), + [visibleOverlayLayerKeys], + ); + const visibleOverlayLayers = useMemo(() => { if (!layers?.overlayLayers.length || !visibleOverlayKeys.size) { return []; @@ -390,24 +399,26 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default' await fetchTranslation(); }, [translatedLyrics, showTranslation, fetchTranslation]); - const handleToggleOverlayLayer = useCallback((key: string) => { - setVisibleOverlayKeys((current) => { - const next = new Set(current); - if (next.has(key)) { - next.delete(key); - } else { - next.add(key); - } - return next; - }); - }, []); + const handleToggleOverlayLayer = useCallback( + (key: string) => { + setVisibleOverlayLayerKeys((current) => { + const next = new Set(current); + if (next.has(key)) { + next.delete(key); + } else { + next.add(key); + } + return Array.from(next); + }); + }, + [setVisibleOverlayLayerKeys], + ); usePlayerEvents( { onCurrentSongChange: () => { setIndexState(0); setShowTranslation(false); - setVisibleOverlayKeys(new Set()); setTranslatedLyrics(null); }, },