Merge pull request #74 from meowarex/dev

Apply Context Aware & Bubbled lyrics to Line
This commit is contained in:
Meow Meow
2026-02-24 23:38:58 +11:00
committed by GitHub
2 changed files with 81 additions and 66 deletions
@@ -224,8 +224,6 @@ export const Settings = () => {
}
}}
/>
{lyricsStyle >= 1 && (
<>
<AnySwitch
title="Context Aware Lyrics"
desc="Enables background vocal display & duet singer positioning"
@@ -250,8 +248,6 @@ export const Settings = () => {
}
}}
/>
</>
)}
<AnySwitch
title="Sticky Lyrics"
desc="auto-switches to Play Queue when lyrics aren't available (mirrored in lyrics dropdown)"
+26 -7
View File
@@ -1204,7 +1204,7 @@ function setupStickyLyricsObserver(): void {
observe<HTMLElement>(unloads, '[data-test="lyrics-lines"]', () => {
if (lyricsData) {
reapplyWordLyrics();
} else if (settings.lyricsStyle !== 0) {
} else {
onTrackChange();
}
});
@@ -1823,6 +1823,28 @@ const buildWordSpans = (): {
}
}
if (settings.lyricsStyle === 0) {
// Line mode: one span per container (main / bg) — no word splitting
const mainSyls = syllabus.filter(s => !splitBg || !s.isBackground);
const bgSyls = splitBg ? syllabus.filter(s => s.isBackground) : [];
if (mainSyls.length > 0) {
const text = mainSyls.map(s => s.text).join("").trim();
const first = mainSyls[0];
const last = mainSyls[mainSyls.length - 1];
const span = makeSpan(text, first.time, false);
mainContainer.appendChild(span);
lineWords.push({ el: span, start: first.time, end: last.time + last.duration, duration: (last.time + last.duration) - first.time });
}
if (bgSyls.length > 0 && bgContainer) {
const text = bgSyls.map(s => s.text).join("").trim().replace(/[()]/g, "");
const first = bgSyls[0];
const last = bgSyls[bgSyls.length - 1];
const span = makeSpan(text, first.time, true);
bgContainer.appendChild(span);
lineBgWords.push({ el: span, start: first.time, end: last.time + last.duration, duration: (last.time + last.duration) - first.time });
}
} else {
for (const group of wordGroups) {
const groupIsBg = splitBg && syllabus[group[0]].isBackground;
const targetContainer = groupIsBg ? bgContainer! : mainContainer;
@@ -1859,6 +1881,7 @@ const buildWordSpans = (): {
}
targetContainer.appendChild(document.createTextNode(" "));
}
}
wbwContainer.appendChild(lineDiv);
@@ -2440,8 +2463,6 @@ const startTickLoop = (): void => {
const onTrackChange = async (): Promise<void> => {
teardown();
if (settings.lyricsStyle === 0) return;
const token = ++trackChangeToken;
const trackInfo = await getTrackInfo();
@@ -2494,7 +2515,7 @@ const onTrackChange = async (): Promise<void> => {
// Reapply word lyrics (for tab switch back)
const reapplyWordLyrics = (): void => {
if (settings.lyricsStyle === 0 || !lyricsData) return;
if (!lyricsData) return;
clearTickLoop();
clearScrollAnim();
@@ -2519,9 +2540,7 @@ const reapplyWordLyrics = (): void => {
// Called by Settings or dropdown
const toggle = (): void => {
teardown();
if (settings.lyricsStyle !== 0) {
onTrackChange();
}
};
const updateLyricsStyleFromSettings = (): void => {
const segButtons = document.querySelectorAll(".rl-seg-btn");
@@ -2538,7 +2557,7 @@ const updateLyricsStyleFromSettings = (): void => {
onGlobalTrackChange(() => {
cachedLyricsKey = null;
cachedLyricsData = null;
if (settings.lyricsStyle !== 0) onTrackChange();
onTrackChange();
});
unloads.add(() => teardown());