remove lyrics highlight on pause

This commit is contained in:
jeffvli
2026-07-09 00:51:44 -07:00
parent 032c17acf4
commit fefbf7e3e6
@@ -456,6 +456,22 @@ const setupLineAnimation = (line: LineData, interpolatedTimeSec: number, now: nu
line.accumulatedOffsetMs = 0; line.accumulatedOffsetMs = 0;
}; };
const clearLineKaraokeHighlights = (lineData: LineData, interpolatedTimeSec: number): void => {
if (lineData.hasWordCues) {
for (const part of lineData.parts) {
clearPartAnimation(part);
clearWordSungState(part);
syncRomajiAnimation(part.element, interpolatedTimeSec, 'clear');
}
} else {
clearLineAnimation(lineData);
}
lineData.isSelected = false;
lineData.isAnimating = false;
lineData.isAnimationPlayStatePlaying = false;
};
const decaySkipScrolls = (state: ScrollState, now: number): void => { const decaySkipScrolls = (state: ScrollState, now: number): void => {
let decayCount = 0; let decayCount = 0;
@@ -601,6 +617,17 @@ export const tickLyricsAnimation = (state: AnimEngineState, opts: TickOptions):
let newLyricSelected = timeJumped; let newLyricSelected = timeJumped;
let activeLineIndex = -1; let activeLineIndex = -1;
if (!isPlaying) {
for (const lineData of lines) {
clearLineKaraokeHighlights(lineData, interpolatedTimeSec);
if (lineData.isScrolled) {
lineData.element.classList.remove(LINE_ACTIVE_CLASS);
lineData.isScrolled = false;
}
}
}
for (let index = 0; index < lines.length; index += 1) { for (let index = 0; index < lines.length; index += 1) {
const lineData = lines[index]; const lineData = lines[index];
const time = lineData.time; const time = lineData.time;
@@ -616,7 +643,7 @@ export const tickLyricsAnimation = (state: AnimEngineState, opts: TickOptions):
state.selectedElementIndex = index; state.selectedElementIndex = index;
activeLineIndex = index; activeLineIndex = index;
if (!lineData.isScrolled) { if (isPlaying && !lineData.isScrolled) {
newLyricSelected = true; newLyricSelected = true;
state.scroll.pendingScroll = true; state.scroll.pendingScroll = true;
lineData.element.classList.add(LINE_ACTIVE_CLASS); lineData.element.classList.add(LINE_ACTIVE_CLASS);
@@ -628,7 +655,11 @@ export const tickLyricsAnimation = (state: AnimEngineState, opts: TickOptions):
lineData.isScrolled = false; lineData.isScrolled = false;
} }
const setUpEarly = isPlaying ? 2 : 0; if (!isPlaying) {
continue;
}
const setUpEarly = 2;
const effectiveEnd = Math.max(nextTime, time + lineData.duration + 0.05); const effectiveEnd = Math.max(nextTime, time + lineData.duration + 0.05);
const isLineInRange = const isLineInRange =
interpolatedTimeSec + setUpEarly >= time && interpolatedTimeSec < effectiveEnd; interpolatedTimeSec + setUpEarly >= time && interpolatedTimeSec < effectiveEnd;
@@ -636,34 +667,19 @@ export const tickLyricsAnimation = (state: AnimEngineState, opts: TickOptions):
if (isLineInRange) { if (isLineInRange) {
lineData.isSelected = true; lineData.isSelected = true;
if (!isPlaying) { if (lineData.hasWordCues) {
if (lineData.hasWordCues) { for (const part of lineData.parts) {
for (const part of lineData.parts) { part.element.classList.remove(PAUSED_CLASS);
if (part.isAnimating) { syncRomajiAnimation(part.element, interpolatedTimeSec, 'resume');
part.element.classList.add(PAUSED_CLASS);
syncRomajiAnimation(part.element, interpolatedTimeSec, 'pause');
}
}
} else if (lineData.isAnimating) {
lineData.element.classList.add(PAUSED_CLASS);
} }
lineData.isAnimationPlayStatePlaying = false;
} else { } else {
if (lineData.hasWordCues) { lineData.element.classList.remove(PAUSED_CLASS);
for (const part of lineData.parts) { }
part.element.classList.remove(PAUSED_CLASS);
syncRomajiAnimation(part.element, interpolatedTimeSec, 'resume');
}
} else {
lineData.element.classList.remove(PAUSED_CLASS);
}
lineData.isAnimationPlayStatePlaying = true; lineData.isAnimationPlayStatePlaying = true;
if (!lineData.hasWordCues && !lineData.isAnimating) { if (!lineData.hasWordCues && !lineData.isAnimating) {
setupLineAnimation(lineData, interpolatedTimeSec, now); setupLineAnimation(lineData, interpolatedTimeSec, now);
}
} }
if (lineData.hasWordCues) { if (lineData.hasWordCues) {
@@ -680,7 +696,7 @@ export const tickLyricsAnimation = (state: AnimEngineState, opts: TickOptions):
clearWordSungState(part); clearWordSungState(part);
syncRomajiAnimation(part.element, interpolatedTimeSec, 'clear'); syncRomajiAnimation(part.element, interpolatedTimeSec, 'clear');
} }
} else if (isPlaying && !part.isAnimating) { } else if (!part.isAnimating) {
setupPartAnimation(part, interpolatedTimeSec, now); setupPartAnimation(part, interpolatedTimeSec, now);
} }
} }