@braccato/core 1.15.1 → 1.15.3

package/dist/engine.d.ts

@@ -72,6 +72,8 @@ export interface AnimationEngineInstance extends AnimEngineViewState {
     animationTimingVisibilityLogUntil: number;
     layout: LyricsLayout;
     stageKey: string;
+    stageRemeasured: boolean;
+    stageHeight: number;
     stageBox: StageBox | null;
     stageMetrics: Map<HTMLElement, StageMetrics>;
     stageY: Map<HTMLElement, number>;

package/dist/engine.js

@@ -18,7 +18,7 @@
 // that never meet. `themeSettings.ts` holds the third thing under that rule.
 import { ANIMATING_CLASS, CREDITS_CLASS, CURRENT_LYRICS_CLASS, FOOTER_CLASS, LINE_CLASS, PAUSED_CLASS, ROMANIZED_LYRICS_CLASS, RTL_CLASS, TRANSLATED_LYRICS_CLASS, USER_SCROLLING_CLASS, WORD_STATE_ACTIVE, WORD_STATE_ATTR, WORD_STATE_PAST, WORD_STATE_UPCOMING, } from "./constants.js";
 import { INSTRUMENTAL_WAVE_PATH_HIGH, INSTRUMENTAL_WAVE_PATH_LOW } from "./instrumental.js";
-import { layoutStage, planStage } from "./stage.js";
+import { layoutStage, planStage, queuedStageY, } from "./stage.js";
 import { registerThemeSetting } from "./themeSettings.js";
 import { clamp, getRelativeLayoutBounds, positiveModulo, roundedMs, toMs } from "./util.js";
 const NO_LYRICS_ELEMENT_LOG = "No lyrics element found on the page, skipping lyrics injection";
@@ -156,6 +156,8 @@ export function createAnimationEngineInstance(engineDocument, engineWindow, host
         animationTimingVisibilityLogUntil: 0,
         layout,
         stageKey: "",
+        stageRemeasured: false,
+        stageHeight: 0,
         stageBox: null,
         stageMetrics: new Map(),
         stageY: new Map(),
@@ -316,6 +318,7 @@ function resetStage(engine) {
     engine.stageMetrics.clear();
     engine.stageY.clear();
     engine.stageKey = "";
+    engine.stageHeight = 0;
     if (engine.stageBox !== null) {
         engine.stageBox = null;
         engine.host.onStageLayout?.(null);
@@ -1957,7 +1960,11 @@ function stageElements(engine) {
         lastEnd = Math.max(lastEnd, end);
         elements.push(line.lyricElement);
         items.push({
-            kind: line.lyricElement.dataset.instrumental === "true" ? "instrumental" : "line",
+            kind: line.lyricElement.dataset.instrumental === "true"
+                ? "instrumental"
+                : line.lyricElement.dataset.blank === "true"
+                    ? "blank"
+                    : "line",
             start: line.time,
             end,
         });
@@ -1992,12 +1999,18 @@ export function measureStage(engine) {
         });
     }
     engine.stageKey = "";
+    engine.stageRemeasured = true;
 }
 function currentTranslateY(engine, element, fallback) {
     const parts = engine.window.getComputedStyle(element).translate.split(" ");
     const y = Number.parseFloat(parts[1] ?? "");
     return Number.isFinite(y) ? y : fallback;
 }
+function snapStageElement(engine, element, y) {
+    engine.stageMoves.get(element)?.cancel();
+    engine.stageMoves.set(element, element.animate([{ translate: `0 ${y}px` }], { duration: 0, fill: "forwards" }));
+    engine.stageY.set(element, y);
+}
 function placeStageElement(engine, { element, placement, wasVisible, fromY, fromOpacity }, instant, reduced) {
     engine.stageMoves.get(element)?.cancel();
     engine.stageFades.get(element)?.cancel();
@@ -2075,12 +2088,21 @@ function applyStage(engine, timeS, instant) {
     if (key === engine.stageKey && !instant)
         return;
     engine.stageKey = key;
+    const remeasured = engine.stageRemeasured;
+    engine.stageRemeasured = false;
     const metrics = elements.map(element => engine.stageMetrics.get(element) ?? { height: 0, left: 0, width: 0, originX: 0 });
-    const { placements, box } = layoutStage(roles, items, metrics, elements.map(element => engine.stageY.get(element) ?? null), {
+    const geometry = {
         stageHeight: container.clientHeight,
         gap: engine.stageFontSize * STAGE_GAP_EM,
         activeScale: getCSSNumber(engine, container, "--blyrics-active-scale", 1),
-    });
+    };
+    // Lines sit on the floor, so a resize moves every place by how far the floor moved.
+    const floorShift = remeasured && engine.stageHeight > 0 ? geometry.stageHeight - engine.stageHeight : 0;
+    engine.stageHeight = geometry.stageHeight;
+    const { placements, box } = layoutStage(roles, items, metrics, elements.map(element => {
+        const y = engine.stageY.get(element);
+        return y === undefined ? null : y + floorShift;
+    }), geometry);
     // Only the elements whose place changed move. A line that stays where it is keeps its running
     // animations, and one already hidden stays hidden without being animated again.
     const moves = [];
@@ -2089,13 +2111,24 @@ function applyStage(engine, timeS, instant) {
         const previousY = engine.stageY.get(element);
         const wasVisible = element.dataset.stageRole !== undefined && isStageRoleVisible(element.dataset.stageRole);
         const unchanged = previousY !== undefined && wasVisible === placement.visible && (!placement.visible || previousY === placement.y);
+        // After a resize a line still on screen, fading out included, jumps to its new place and keeps
+        // the fade and blur it was in the middle of.
+        const onScreen = placement.visible || element.dataset.stageVisible !== undefined;
+        if (remeasured && !instant && onScreen && element.dataset.stageRole === roles[index]) {
+            if (previousY !== placement.y)
+                snapStageElement(engine, element, placement.y);
+            return;
+        }
         if (unchanged && !instant)
             return;
         moves.push({
             element,
             placement,
             wasVisible,
-            fromY: currentTranslateY(engine, element, previousY ?? placement.y),
+            // A queued line rises from below the floor as it is now, never from where an older size put it.
+            fromY: element.dataset.stageRole === "queued" && placement.visible
+                ? queuedStageY(geometry.stageHeight, metrics[index].height, geometry.gap)
+                : currentTranslateY(engine, element, previousY ?? placement.y),
             fromOpacity: Number(engine.window.getComputedStyle(element).opacity) || 0,
         });
     });

package/dist/stage.d.ts

@@ -1,4 +1,4 @@
-export type StageItemKind = "line" | "instrumental" | "credits";
+export type StageItemKind = "line" | "blank" | "instrumental" | "credits";
 export type StageRole = "current" | "previous" | "queued" | "gone";
 export interface StageItem {
     kind: StageItemKind;
@@ -35,6 +35,8 @@ export interface StageBox {
     width: number;
     height: number;
 }
+/** Where a line waits below the floor, and where it rises from as it enters. */
+export declare function queuedStageY(stageHeight: number, height: number, gap: number): number;
 export declare function layoutStage(roles: readonly StageRole[], items: readonly StageItem[], metrics: readonly StageMetrics[], previousY: readonly (number | null)[], geometry: StageGeometry): {
     placements: StagePlacement[];
     box: StageBox | null;

package/dist/stage.js

@@ -3,7 +3,10 @@ export const STAGE_HANDOFF_S = 0.12;
 export const STAGE_OVERLAP_S = 0.15;
 export function overlapsPrevious(items, index) {
     const previous = items[index - 1];
-    return previous !== undefined && previous.kind === "line" && items[index].start < previous.end - STAGE_OVERLAP_S;
+    return (previous !== undefined &&
+        previous.kind === "line" &&
+        items[index].kind !== "blank" &&
+        items[index].start < previous.end - STAGE_OVERLAP_S);
 }
 export function stageEnterTimes(items) {
     return items.map((item, index) => {
@@ -45,6 +48,10 @@ function unionBox(box, next) {
         height: Math.max(box.y + box.height, next.y + next.height) - y,
     };
 }
+/** Where a line waits below the floor, and where it rises from as it enters. */
+export function queuedStageY(stageHeight, height, gap) {
+    return stageHeight - height + gap;
+}
 export function layoutStage(roles, items, metrics, previousY, geometry) {
     const { stageHeight, gap } = geometry;
     const current = roles.indexOf("current");
@@ -57,14 +64,15 @@ export function layoutStage(roles, items, metrics, previousY, geometry) {
             case "previous":
                 return { y: currentY - gap - height, visible: true };
             case "queued":
-                return { y: stageHeight - height + gap, visible: false };
+                return { y: queuedStageY(stageHeight, height, gap), visible: false };
             case "gone":
                 return { y: previousY[index] ?? currentY, visible: false };
         }
     });
     let box = null;
     roles.forEach((role, index) => {
-        if ((role !== "current" && role !== "previous") || items[index].kind === "instrumental")
+        const { kind } = items[index];
+        if ((role !== "current" && role !== "previous") || kind === "instrumental" || kind === "blank")
             return;
         const { height, left, width, originX } = metrics[index];
         const scale = geometry.activeScale;

package/dist/view.js

@@ -95,6 +95,8 @@ export function setLyrics(engine, mount, lyrics, options) {
         }
         else {
             buildSungLine(doc, lyricElement, lyricItem, line);
+            if (!lyricItem.words?.trim())
+                lyricElement.dataset.blank = "true";
         }
         container.appendChild(lyricElement);
     }
@@ -108,7 +110,10 @@ export function setLyrics(engine, mount, lyrics, options) {
     container.dataset.sync = syncType;
     if (engine.layout === "stage") {
         container.dataset.layout = "stage";
-        if (lyrics.some(item => item.agent === "v2" || item.agent === "v3")) {
+        // Sides only when both are sung, so a song with one singer stays centred whichever voice it is.
+        const sung = lyrics.filter(item => !item.isInstrumental && item.words?.trim() && item.agent !== "v1000");
+        const onRight = (item) => item.agent === "v2" || item.agent === "v3";
+        if (sung.some(onRight) && sung.some(item => !onRight(item))) {
             container.dataset.stageDuet = "";
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braccato/core",
-  "version": "1.15.1",
+  "version": "1.15.3",
   "description": "Synchronized lyrics renderer with word-by-word animations",
   "type": "module",
   "license": "MIT",