@braccato/core 1.15.1 → 1.15.2

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);
@@ -1992,12 +1995,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 +2084,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 +2107,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

@@ -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

@@ -45,6 +45,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,7 +61,7 @@ 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 };
         }

package/package.json

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