add setting for lyrics follow alignment

src/renderer/features/lyrics/hooks/lyrics-animation-engine.ts

@@ -17,9 +17,9 @@ const LINE_ANIMATING_CLASS = 'lyrics-line-animating';
 const LINE_PRE_ANIMATING_CLASS = 'lyrics-line-pre-animating';
 
 const TIME_JUMP_THRESHOLD = 0.5;
+const CENTER_SCROLL_POS_RATIO = 0.5;
 const DEFAULT_ENDING_THRESHOLD = 0.5;
 const DEFAULT_LINE_LEAD_TIME_MS = 800;
-const DEFAULT_SCROLL_POS_RATIO = 0.37;
 const RICHSYNC_TIMING_OFFSET_MS = 150;
 const SYNC_TIMING_OFFSET_MS = 115;
 const GLOW_DURATION_MULTIPLIER = 1.6;
@@ -90,6 +90,7 @@ export interface TickOptions {
     currentTimeMs: number;
     eventCreationTime: number;
     follow?: boolean;
+    followScrollAlignment?: number;
     forceResync?: boolean;
     isPlaying: boolean;
     lineLeadTimeMs?: number;
@@ -99,6 +100,10 @@ export interface TickOptions {
     smoothScroll?: boolean;
 }
 
+export const getFollowScrollPositionRatio = (followScrollAlignment = 0): number => {
+    return Math.min(0.95, Math.max(0.05, CENTER_SCROLL_POS_RATIO + followScrollAlignment / 100));
+};
+
 const reflow = (element: HTMLElement): void => {
     void element.offsetHeight;
 };
@@ -735,7 +740,8 @@ export const tickLyricsAnimation = (state: AnimEngineState, opts: TickOptions):
         state.lastActiveElements = activeElems.filter((entry) => playbackTimeSec >= entry.time);
 
         if (activeElems.length > 0) {
-            const scrollPosOffset = scrollHeight * DEFAULT_SCROLL_POS_RATIO;
+            const scrollPosRatio = getFollowScrollPositionRatio(opts.followScrollAlignment);
+            const scrollPosOffset = scrollHeight * scrollPosRatio;
             const lastActive = activeElems[activeElems.length - 1];
             const useLastActiveOnly = newLyricSelected || activeElems.length > 1;
             const scrollLines = useLastActiveOnly ? [lastActive] : activeElems;

src/renderer/features/lyrics/hooks/use-lyrics-animation-engine.ts

@@ -20,6 +20,7 @@ export interface UseLyricsAnimationEngineOptions {
     containerRef: React.RefObject<HTMLElement | null>;
     enabled?: boolean;
     followRef?: React.RefObject<boolean>;
+    followScrollAlignmentRef?: React.RefObject<number>;
     lineIdPrefix: 'karaoke-line' | 'lyric';
     lineLeadTimeMsRef?: React.RefObject<number>;
     lyrics: SynchronizedLyrics;
@@ -32,6 +33,7 @@ export const useLyricsAnimationEngine = ({
     containerRef,
     enabled = true,
     followRef,
+    followScrollAlignmentRef,
     lineIdPrefix,
     lineLeadTimeMsRef,
     lyrics,
@@ -116,6 +118,7 @@ export const useLyricsAnimationEngine = ({
                 currentTimeMs,
                 eventCreationTime: options?.eventCreationTime ?? Date.now(),
                 follow: followRef?.current ?? true,
+                followScrollAlignment: followScrollAlignmentRef?.current ?? 0,
                 forceResync: options?.forceResync ?? false,
                 isPlaying,
                 lineLeadTimeMs: lineLeadTimeMsRef?.current,

src/renderer/features/lyrics/hooks/use-synchronized-lyrics-base.ts

@@ -51,6 +51,7 @@ export const useSynchronizedLyricsBase = (settingsKey = 'default', offsetMs?: nu
     const effectiveOffsetMs = offsetMs ?? 0;
     const delayMsRef = useRef(effectiveOffsetMs);
     const followRef = useRef(settings.follow);
+    const followScrollAlignmentRef = useRef(settings.followScrollAlignment);
     const lineLeadTimeMsRef = useRef(settings.lineLeadTimeMs);
     const userScrollingRef = useRef(false);
     const scrollTimeoutRef = useRef<null | ReturnType<typeof setTimeout>>(null);
@@ -155,6 +156,10 @@ export const useSynchronizedLyricsBase = (settingsKey = 'default', offsetMs?: nu
         followRef.current = settings.follow;
     }, [settings.follow]);
 
+    useEffect(() => {
+        followScrollAlignmentRef.current = settings.followScrollAlignment;
+    }, [settings.followScrollAlignment]);
+
     useEffect(() => {
         lineLeadTimeMsRef.current = settings.lineLeadTimeMs;
     }, [settings.lineLeadTimeMs]);
@@ -224,6 +229,7 @@ export const useSynchronizedLyricsBase = (settingsKey = 'default', offsetMs?: nu
         containerStyle,
         delayMsRef,
         followRef,
+        followScrollAlignmentRef,
         handleLineClick,
         handleSeek,
         hideScrollbar,