@braccato/core 1.16.13 → 1.16.14

package/dist/engine.js

@@ -122,7 +122,7 @@ export function createAnimationEngineInstance(engineDocument, engineWindow, host
         skipScrolls: 0,
         skipScrollsDecayTimes: [],
         scrollResumeTime: 0,
-        scrollPos: 0,
+        scrollPos: -1,
         selectedElementIndex: 0,
         wasUserScrolling: false,
         lastScrollElements: [],
@@ -1679,7 +1679,18 @@ function measureTrailingItem(lyricsElement, className) {
     const bounds = getRelativeLayoutBounds(lyricsElement, element);
     return { lyricElement: element, position: bounds.y, height: bounds.height };
 }
-function prepareLineScrollOffsets(engine, lines, activeLineIndex, scrollDeltaPx, fromScrollTop, toScrollTop, viewportHeight, config) {
+// A leading line slower than the one behind closes their gap by distance times progress difference.
+function lineScrollStaggerScale(lines, activeLineIndex, scrollDistancePx, naturalAdvance) {
+    if (naturalAdvance)
+        return 1;
+    const active = lines[activeLineIndex];
+    const steps = [lines[activeLineIndex - 1], lines[activeLineIndex + 1]]
+        .filter(neighbour => neighbour !== undefined)
+        .map(neighbour => Math.abs(active.position - neighbour.position));
+    const stepPx = steps.length > 0 ? Math.min(...steps) : active.height;
+    return Math.min(1, stepPx / scrollDistancePx);
+}
+function prepareLineScrollOffsets(engine, lines, activeLineIndex, scrollDeltaPx, fromScrollTop, toScrollTop, viewportHeight, config, naturalAdvance) {
     if (!config.enabled.scroll || activeLineIndex < 0) {
         return null;
     }
@@ -1742,12 +1753,16 @@ function prepareLineScrollOffsets(engine, lines, activeLineIndex, scrollDeltaPx,
         startTranslates = batchResolveLineScrollProperty(engine, items, "translate", item => lineScrollTranslate(item.side, "start", config.lineScroll.differentialEffects), style => normalizedTranslate(style.translate));
         endTranslates = batchResolveLineScrollProperty(engine, items, "translate", item => lineScrollTranslate(item.side, "end", config.lineScroll.differentialEffects), style => normalizedTranslate(style.translate));
     }
+    const staggerScale = lineScrollStaggerScale(lines, activeLineIndex, scrollDistancePx, naturalAdvance);
+    const activeDurationMs = requests.find(request => request.relativeIndex === 0)?.timing?.durationMs;
     return {
         items: requests.map((request, requestIndex) => {
             const timing = request.timing;
             return {
                 ...request.item,
-                durationMs: timing.durationMs,
+                durationMs: activeDurationMs === undefined
+                    ? timing.durationMs
+                    : activeDurationMs + (timing.durationMs - activeDurationMs) * staggerScale,
                 startEasing: timing.startEasing,
                 endEasing: timing.endEasing,
                 startTranslate: startTranslates ? startTranslates[requestIndex] : defaultStartTranslate,
@@ -1789,7 +1804,7 @@ function pendingLineScrollMatches(engine, activeLine, fromScrollTop, toScrollTop
         Math.abs(engine.pendingLineScroll.fromScrollTop - fromScrollTop) <= 2 &&
         Math.abs(engine.pendingLineScroll.toScrollTop - toScrollTop) <= 2);
 }
-function commitOrPrepareLineScroll(engine, lines, activeLine, scrollDeltaPx, fromScrollTop, toScrollTop, viewportHeight, config) {
+function commitOrPrepareLineScroll(engine, lines, activeLine, scrollDeltaPx, fromScrollTop, toScrollTop, viewportHeight, config, naturalAdvance) {
     if (pendingLineScrollMatches(engine, activeLine, fromScrollTop, toScrollTop)) {
         const pending = engine.pendingLineScroll;
         engine.pendingLineScroll = null;
@@ -1797,16 +1812,16 @@ function commitOrPrepareLineScroll(engine, lines, activeLine, scrollDeltaPx, fro
         return;
     }
     dropPendingLineScroll(engine);
-    const plan = prepareLineScrollOffsets(engine, lines, lines.findIndex(line => line.lyricElement === activeLine.lyricElement), scrollDeltaPx, fromScrollTop, toScrollTop, viewportHeight, config);
+    const plan = prepareLineScrollOffsets(engine, lines, lines.findIndex(line => line.lyricElement === activeLine.lyricElement), scrollDeltaPx, fromScrollTop, toScrollTop, viewportHeight, config, naturalAdvance);
     if (plan)
         startPreparedLineScroll(engine, plan);
 }
-function prepareUpcomingLineScroll(engine, lines, activeLine, scrollDeltaPx, fromScrollTop, toScrollTop, viewportHeight, config) {
+function prepareUpcomingLineScroll(engine, lines, activeLine, scrollDeltaPx, fromScrollTop, toScrollTop, viewportHeight, config, naturalAdvance) {
     if (pendingLineScrollMatches(engine, activeLine, fromScrollTop, toScrollTop))
         return;
     dropPendingLineScroll(engine);
     const activeLineIndex = lines.findIndex(line => line.lyricElement === activeLine.lyricElement);
-    const plan = prepareLineScrollOffsets(engine, lines, activeLineIndex, scrollDeltaPx, fromScrollTop, toScrollTop, viewportHeight, config);
+    const plan = prepareLineScrollOffsets(engine, lines, activeLineIndex, scrollDeltaPx, fromScrollTop, toScrollTop, viewportHeight, config, naturalAdvance);
     if (plan) {
         engine.pendingLineScroll = {
             plan,
@@ -2640,6 +2655,8 @@ export function tickView(engine, currentTime, options) {
                 }
             }
             const timeUntilUpcomingScrollMs = (lastActiveLyric.time - lyricScrollTime) * 1000;
+            // Only a scroll from where the engine itself left the view keeps the theme's full stagger.
+            const naturalAdvance = !timeJumped && !engine.wasUserScrolling && engine.scrollPos >= 0 && Math.abs(scrollTop - engine.scrollPos) <= 2;
             if (smoothScroll &&
                 animationConfig.enabled.scroll &&
                 !newLyricSelected &&
@@ -2649,7 +2666,7 @@ export function tickView(engine, currentTime, options) {
                 !engine.lastScrollElements.includes(lastActiveLyric) &&
                 Math.abs(scrollTop - scrollPos) > 2) {
                 updateVisibleLyricWillChange(engine, lines, scrollTop, scrollPos, tabRendererHeight);
-                prepareUpcomingLineScroll(engine, getLineScrollItems(engine, lines), lastActiveLyric, scrollPos - scrollTop, scrollTop, scrollPos, tabRendererHeight, animationConfig);
+                prepareUpcomingLineScroll(engine, getLineScrollItems(engine, lines), lastActiveLyric, scrollPos - scrollTop, scrollTop, scrollPos, tabRendererHeight, animationConfig, naturalAdvance);
             }
             if (engine.wasUserScrolling || newLyricSelected) {
                 // Remember future lines only when their group is committed, so they cannot scroll
@@ -2664,7 +2681,7 @@ export function tickView(engine, currentTime, options) {
                     if (animationConfig.enabled.scroll) {
                         updateVisibleLyricWillChange(engine, lines, scrollTop, scrollPos, tabRendererHeight);
                         const lineScrollItems = getLineScrollItems(engine, lines);
-                        commitOrPrepareLineScroll(engine, lineScrollItems, lastActiveLyric, scrollDeltaPx, scrollTop, scrollPos, tabRendererHeight, animationConfig);
+                        commitOrPrepareLineScroll(engine, lineScrollItems, lastActiveLyric, scrollDeltaPx, scrollTop, scrollPos, tabRendererHeight, animationConfig, naturalAdvance);
                     }
                 }
                 else {

package/package.json

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