@braccato/core 1.19.1 → 1.20.0

package/dist/inject.js

@@ -140,6 +140,7 @@ function splitPartIntoTokens(part) {
             part: {
                 words: chunk,
                 isBackground: part.isBackground,
+                backgroundGroup: part.backgroundGroup,
                 explicit: part.explicit,
             },
         });
@@ -166,7 +167,7 @@ function splitPartIntoTokens(part) {
 function normalizeParts(parts) {
     return parts.flatMap(splitPartIntoTokens);
 }
-function groupTokensByWord(tokens) {
+function groupTokensByWord(tokens, splitBackgroundGroups) {
     const groups = [];
     let current = null;
     const flush = () => {
@@ -182,9 +183,10 @@ function groupTokensByWord(tokens) {
             continue;
         }
         const isBackground = token.part?.isBackground === true;
-        if (!current || current.isBackground !== isBackground) {
+        const backgroundGroup = splitBackgroundGroups ? token.part?.backgroundGroup : undefined;
+        if (!current || current.isBackground !== isBackground || current.backgroundGroup !== backgroundGroup) {
             flush();
-            current = { text: "", isBackground, tokens: [] };
+            current = { text: "", isBackground, backgroundGroup, tokens: [] };
         }
         current.text += token.text;
         current.tokens.push(token);
@@ -331,24 +333,36 @@ export function createLyricsLine(doc, parts, line, lyricElement, options = { spl
             .map(part => part.words)
             .join("")
         : lineText;
-    const backgroundText = parts
-        .filter(part => part.isBackground === true)
+    const backgroundTextOf = (group) => parts
+        .filter(part => part.isBackground === true && (part.backgroundGroup ?? 0) === group)
         .map(part => part.words)
         .join("");
     const main = createContentLine(doc, LINE_MAIN_CLASS, mainText);
     const mainRun = createBidiRun(doc, mainText);
     const mainHighlightRun = createHighlightRun(doc, mainText);
-    const groupedTokens = groupTokensByWord(normalizeParts(parts));
-    const backgroundLine = createContentLine(doc, BACKGROUND_LINE_CLASS, backgroundText);
-    const backgroundRun = createBidiRun(doc, backgroundText);
-    const backgroundHighlightRun = createHighlightRun(doc, backgroundText);
-    let hasBackground = false;
+    const groupedTokens = groupTokensByWord(normalizeParts(parts), options.splitBackgroundLine);
+    const backgroundRows = new Map();
+    const backgroundRowOf = (group) => {
+        let row = backgroundRows.get(group);
+        if (!row) {
+            const text = backgroundTextOf(group);
+            row = {
+                line: createContentLine(doc, BACKGROUND_LINE_CLASS, text),
+                run: createBidiRun(doc, text),
+                highlightRun: createHighlightRun(doc, text),
+                used: false,
+            };
+            row.line.appendChild(row.highlightRun);
+            row.line.appendChild(row.run);
+            backgroundRows.set(group, row);
+        }
+        return row;
+    };
+    backgroundRowOf(0);
     let pendingForegroundSpace = "";
     let pendingBackgroundSpace = "";
     main.appendChild(mainHighlightRun);
     main.appendChild(mainRun);
-    backgroundLine.appendChild(backgroundHighlightRun);
-    backgroundLine.appendChild(backgroundRun);
     for (const item of groupedTokens) {
         if ("kind" in item) {
             // Is a RenderToken, not a WordGroup, only whitespace should enter this path
@@ -357,8 +371,9 @@ export function createLyricsLine(doc, parts, line, lyricElement, options = { spl
         }
         else {
             const shouldUseBackgroundLine = options.splitBackgroundLine && item.isBackground;
-            const target = shouldUseBackgroundLine ? backgroundRun : mainRun;
-            const highlightRun = shouldUseBackgroundLine ? backgroundHighlightRun : mainHighlightRun;
+            const backgroundRow = shouldUseBackgroundLine ? backgroundRowOf(item.backgroundGroup ?? 0) : null;
+            const target = backgroundRow ? backgroundRow.run : mainRun;
+            const highlightRun = backgroundRow ? backgroundRow.highlightRun : mainHighlightRun;
             const pendingSpace = shouldUseBackgroundLine ? pendingBackgroundSpace : pendingForegroundSpace;
             if (target.childNodes.length > 0 && pendingSpace.length > 0) {
                 target.appendChild(createSpaceNode(doc, pendingSpace, shouldUseBackgroundLine));
@@ -367,8 +382,8 @@ export function createLyricsLine(doc, parts, line, lyricElement, options = { spl
             const { lyricGroup, highlightGroup } = createWordGroup(doc, item, line);
             target.appendChild(lyricGroup);
             highlightRun.appendChild(highlightGroup);
-            if (shouldUseBackgroundLine) {
-                hasBackground = true;
+            if (backgroundRow) {
+                backgroundRow.used = true;
                 pendingBackgroundSpace = "";
             }
             else {
@@ -376,13 +391,16 @@ export function createLyricsLine(doc, parts, line, lyricElement, options = { spl
             }
         }
     }
+    const usedBackgroundRows = [...backgroundRows]
+        .filter(([, row]) => row.used)
+        .sort(([a], [b]) => a - b)
+        .map(([, row]) => row);
     alignImageGlowRun(mainHighlightRun, line.parts);
-    if (hasBackground)
-        alignImageGlowRun(backgroundHighlightRun, line.parts);
+    for (const row of usedBackgroundRows)
+        alignImageGlowRun(row.highlightRun, line.parts);
     lyricElement.appendChild(main);
-    if (hasBackground) {
-        lyricElement.appendChild(backgroundLine);
-    }
+    for (const row of usedBackgroundRows)
+        lyricElement.appendChild(row.line);
     return main;
 }
 export function buildLineSyncedParts(item) {

package/dist/view.js

@@ -114,6 +114,7 @@ function lineSignature(lyrics, lineIndex) {
         part.durationMs,
         part.words,
         part.isBackground === true,
+        part.backgroundGroup ?? null,
         part.explicit === true,
     ]);
     // An instrumental line takes its side and direction from the lines around it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braccato/core",
-  "version": "1.19.1",
+  "version": "1.20.0",
   "description": "Synchronized lyrics renderer with word-by-word animations",
   "type": "module",
   "license": "MIT",
@@ -57,7 +57,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@braccato/types": "^1.0.0"
+    "@braccato/types": "^1.1.0"
   },
   "scripts": {
     "build": "tsx ../../tooling/build-package.ts",