vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-07-15 15:10:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: persist lyrics overlay visibility (#2226)

Browse Source 
Co-authored-by: cyphercodes <cyphercodes@users.noreply.github.com>
This commit is contained in:
Rayan Salhab
2026-07-14 22:05:08 +03:00
committed by GitHub
parent 8517a9f934
commit f462ebafdb
1 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/lyrics/lyrics.tsx
+24 -13
View File
@@ -47,6 +47,7 @@ import { Center } from '/@/shared/components/center/center';
import { Group } from '/@/shared/components/group/group'; import { Group } from '/@/shared/components/group/group';
import { Spinner } from '/@/shared/components/spinner/spinner'; import { Spinner } from '/@/shared/components/spinner/spinner';
import { Text } from '/@/shared/components/text/text'; import { Text } from '/@/shared/components/text/text';
import { useLocalStorage } from '/@/shared/hooks/use-local-storage';
import { LyricsOverride } from '/@/shared/types/domain-types'; import { LyricsOverride } from '/@/shared/types/domain-types';
type LyricsProps = { type LyricsProps = {
@@ -73,7 +74,10 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
const [index, setIndexState] = useState(0); const [index, setIndexState] = useState(0);
const [translatedLyrics, setTranslatedLyrics] = useState<null | string>(null); const [translatedLyrics, setTranslatedLyrics] = useState<null | string>(null);
const [showTranslation, setShowTranslation] = useState(false); const [showTranslation, setShowTranslation] = useState(false);
const [visibleOverlayKeys, setVisibleOverlayKeys] = useState<Set<string>>(new Set()); const [visibleOverlayLayerKeys, setVisibleOverlayLayerKeys] = useLocalStorage<string[]>({
defaultValue: [],
key: `lyrics:visible-overlay-layers:${settingsKey}`,
});
const [pendingSongId, setPendingSongId] = useState<string | undefined>(currentSong?.id); const [pendingSongId, setPendingSongId] = useState<string | undefined>(currentSong?.id);
const lyricsFetchTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined); const lyricsFetchTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
const previousSongIdRef = useRef<string | undefined>(currentSong?.id); const previousSongIdRef = useRef<string | undefined>(currentSong?.id);
@@ -182,6 +186,11 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
})); }));
}, [layers]); }, [layers]);
const visibleOverlayKeys = useMemo(
() => new Set(visibleOverlayLayerKeys),
[visibleOverlayLayerKeys],
);
const visibleOverlayLayers = useMemo(() => { const visibleOverlayLayers = useMemo(() => {
if (!layers?.overlayLayers.length || !visibleOverlayKeys.size) { if (!layers?.overlayLayers.length || !visibleOverlayKeys.size) {
return []; return [];
@@ -390,24 +399,26 @@ export const Lyrics = ({ fadeOutNoLyricsMessage = true, settingsKey = 'default'
await fetchTranslation(); await fetchTranslation();
}, [translatedLyrics, showTranslation, fetchTranslation]); }, [translatedLyrics, showTranslation, fetchTranslation]);
const handleToggleOverlayLayer = useCallback((key: string) => { const handleToggleOverlayLayer = useCallback(
setVisibleOverlayKeys((current) => { (key: string) => {
const next = new Set(current); setVisibleOverlayLayerKeys((current) => {
if (next.has(key)) { const next = new Set(current);
next.delete(key); if (next.has(key)) {
} else { next.delete(key);
next.add(key); } else {
} next.add(key);
return next; }
}); return Array.from(next);
}, []); });
},
[setVisibleOverlayLayerKeys],
);
usePlayerEvents( usePlayerEvents(
{ {
onCurrentSongChange: () => { onCurrentSongChange: () => {
setIndexState(0); setIndexState(0);
setShowTranslation(false); setShowTranslation(false);
setVisibleOverlayKeys(new Set());
setTranslatedLyrics(null); setTranslatedLyrics(null);
}, },
}, },