itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-21 14:55:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(fullscreen-player): honour the Lyrics scroll style setting (#1089)

Browse Source 
The rebuilt fullscreen player hardcoded Apple-style lyrics scrolling (active
line ~35% from the top) and ignored Settings -> Lyrics -> Lyrics scroll style,
which still drives the sidebar/mobile LyricsPane. FsLyricsApple now reads
sidebarLyricsStyle: 'classic' centres the active line, 'apple' keeps the 35%
anchor, matching the sidebar lyrics.
This commit is contained in:
Psychotoxical
2026-06-14 13:37:25 +02:00
committed by GitHub
parent 6f555bdc96
commit 07232cea9a
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/fullscreenPlayer/FsLyricsApple.tsx
+15 -6
View File
@@ -8,13 +8,15 @@ import type { LrcLine } from '../../api/lrclib';
import type { Track } from '../../store/playerStoreTypes'; import type { Track } from '../../store/playerStoreTypes';
import { EaseScroller, targetForFraction } from '../../utils/ui/easeScroll'; import { EaseScroller, targetForFraction } from '../../utils/ui/easeScroll';
// Apple Music-style fullscreen lyrics. // Fullscreen synced lyrics.
// Full-screen scrollable list. Active line auto-scrolls to ~35% from top. // Full-screen scrollable list. The active line auto-scrolls following the
// Word-sync runs imperatively (no React re-renders on every time tick). // "Lyrics scroll style" setting: 'apple' anchors it ~35% from the top, 'classic'
// centres it. Word-sync runs imperatively (no React re-renders on every time tick).
// User scroll pauses auto-scroll for 4 s then resumes. // User scroll pauses auto-scroll for 4 s then resumes.
export const FsLyricsApple = memo(function FsLyricsApple({ currentTrack }: { currentTrack: Track | null }) { export const FsLyricsApple = memo(function FsLyricsApple({ currentTrack }: { currentTrack: Track | null }) {
const { syncedLines, wordLines, plainLyrics, loading } = useLyrics(currentTrack); const { syncedLines, wordLines, plainLyrics, loading } = useLyrics(currentTrack);
const staticOnly = useAuthStore(s => s.lyricsStaticOnly); const staticOnly = useAuthStore(s => s.lyricsStaticOnly);
const sidebarLyricsStyle = useAuthStore(s => s.sidebarLyricsStyle);
const useWords = !staticOnly && wordLines !== null && wordLines.length > 0; const useWords = !staticOnly && wordLines !== null && wordLines.length > 0;
const lineSrc: LrcLine[] | null = useWords const lineSrc: LrcLine[] | null = useWords
@@ -68,14 +70,21 @@ export const FsLyricsApple = memo(function FsLyricsApple({ currentTrack }: { cur
return subscribePlaybackProgress(s => apply(s.currentTime)); return subscribePlaybackProgress(s => apply(s.currentTime));
}, [hasSynced, currentTrack?.id]); }, [hasSynced, currentTrack?.id]);
// Ease-scroll active line to ~35% from the top of the container. // Scroll the active line into view, honouring the "Lyrics scroll style" setting
// (same as the sidebar LyricsPane): 'apple' ease-scrolls to ~35% from the top,
// 'classic' centres the active line via native smooth scrollIntoView.
useEffect(() => { useEffect(() => {
if (activeIdx < 0 || isUserScroll.current) return; if (activeIdx < 0 || isUserScroll.current) return;
const el = lineRefs.current[activeIdx]; const el = lineRefs.current[activeIdx];
const box = containerRef.current; const box = containerRef.current;
if (!el || !box || !scrollerRef.current) return; if (!el || !box || !scrollerRef.current) return;
scrollerRef.current.scrollTo(targetForFraction(box, el, 0.35)); if (sidebarLyricsStyle === 'apple') {
}, [activeIdx]); scrollerRef.current.scrollTo(targetForFraction(box, el, 0.35));
} else {
scrollerRef.current.stop();
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}, [activeIdx, sidebarLyricsStyle]);
const { setWordRef } = useWordLyricsSync({ const { setWordRef } = useWordLyricsSync({
enabled: useWords, enabled: useWords,