mirror of
https://github.com/jeffvli/feishin.git
synced 2026-07-06 18:49:59 +02:00
fix lyric desync due to scroll issues (#2110)
This commit is contained in:
@@ -95,6 +95,7 @@ export const SynchronizedLyrics = ({
|
|||||||
const scrollTimeoutRef = useRef<null | ReturnType<typeof setTimeout>>(null);
|
const scrollTimeoutRef = useRef<null | ReturnType<typeof setTimeout>>(null);
|
||||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||||
const programmaticScrollRef = useRef(false);
|
const programmaticScrollRef = useRef(false);
|
||||||
|
const programmaticScrollTimeoutRef = useRef<null | ReturnType<typeof setTimeout>>(null);
|
||||||
|
|
||||||
const getCurrentLyric = (timeInMs: number) => {
|
const getCurrentLyric = (timeInMs: number) => {
|
||||||
const activeLyrics = lyricRef.current;
|
const activeLyrics = lyricRef.current;
|
||||||
@@ -178,9 +179,6 @@ export const SynchronizedLyrics = ({
|
|||||||
if (followRef.current && !userScrollingRef.current) {
|
if (followRef.current && !userScrollingRef.current) {
|
||||||
programmaticScrollRef.current = true;
|
programmaticScrollRef.current = true;
|
||||||
doc?.scroll({ behavior: 'smooth', top: offsetTop });
|
doc?.scroll({ behavior: 'smooth', top: offsetTop });
|
||||||
setTimeout(() => {
|
|
||||||
programmaticScrollRef.current = false;
|
|
||||||
}, 600);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (index !== lyricRef.current!.length - 1) {
|
if (index !== lyricRef.current!.length - 1) {
|
||||||
@@ -287,6 +285,14 @@ export const SynchronizedLyrics = ({
|
|||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
// Ignore programmatic scrolls (auto-scroll)
|
// Ignore programmatic scrolls (auto-scroll)
|
||||||
if (programmaticScrollRef.current) {
|
if (programmaticScrollRef.current) {
|
||||||
|
if (programmaticScrollTimeoutRef.current) {
|
||||||
|
clearTimeout(programmaticScrollTimeoutRef.current);
|
||||||
|
}
|
||||||
|
|
||||||
|
programmaticScrollTimeoutRef.current = setTimeout(() => {
|
||||||
|
programmaticScrollRef.current = false;
|
||||||
|
}, 150);
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -309,6 +315,10 @@ export const SynchronizedLyrics = ({
|
|||||||
if (scrollTimeoutRef.current) {
|
if (scrollTimeoutRef.current) {
|
||||||
clearTimeout(scrollTimeoutRef.current);
|
clearTimeout(scrollTimeoutRef.current);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (programmaticScrollTimeoutRef.current) {
|
||||||
|
clearTimeout(programmaticScrollTimeoutRef.current);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user