@braccato/core 1.16.5 → 1.16.6

package/dist/engine.js

@@ -436,7 +436,7 @@ function mirrorImageHighlightAnimations(part, animations) {
         mirror.currentTime = animation.currentTime;
         const timing = animationTimingTracks.get(animation);
         if (timing)
-            animationTimingTracks.set(mirror, timing);
+            animationTimingTracks.set(mirror, { ...timing, skipDriftSample: true });
         mirrors.push(mirror);
     }
     return mirrors;
@@ -529,8 +529,11 @@ function timingValueToMs(value) {
 function animationCurrentTimeMs(animation) {
     return timingValueToMs(animation.currentTime);
 }
-function animationActiveDurationMs(animation) {
-    return timingValueToMs(animation.effect?.getComputedTiming().activeDuration);
+// A finished animation's currentTime stops at its end time, which counts the delay, so that is where
+// the expected time has to stop too. Clamping to the active duration alone saturates a delayed
+// animation as soon as it is created and hides any drift in it.
+function animationEndTimeMs(animation) {
+    return timingValueToMs(animation.effect?.getComputedTiming().endTime);
 }
 function wrappedTimingOffsetMs(actualTimeMs, expectedTimeMs, wrapDurationMs) {
     return positiveModulo(actualTimeMs - expectedTimeMs + wrapDurationMs / 2, wrapDurationMs) - wrapDurationMs / 2;
@@ -542,18 +545,18 @@ function normalizeAnimationTimeMs(animation, timeMs, timing) {
     if (timing.wrapDurationMs && timing.wrapDurationMs > 0) {
         return positiveModulo(timeMs, timing.wrapDurationMs);
     }
-    const activeDurationMs = animationActiveDurationMs(animation);
-    if (activeDurationMs !== null && Number.isFinite(activeDurationMs)) {
-        return Math.min(timeMs, activeDurationMs);
+    const endTimeMs = animationEndTimeMs(animation);
+    if (endTimeMs !== null && Number.isFinite(endTimeMs)) {
+        return Math.min(timeMs, endTimeMs);
     }
     return timeMs;
 }
 function animationTimingSample(part, animation, currentTime) {
-    if (animation.playState === "idle") {
+    const timing = animationTimingTracks.get(animation);
+    if (!timing || timing.skipDriftSample) {
         return null;
     }
-    const timing = animationTimingTracks.get(animation);
-    if (!timing) {
+    if (animation.playState === "idle") {
         return null;
     }
     const actualTimeMs = animationCurrentTimeMs(animation);
@@ -887,7 +890,11 @@ function startRichSyncedHighlightAnimations(engine, part, config, swipeTimeMs, w
                         offset: frame.offset,
                         maskPosition: frame.maskPosition,
                         WebkitMaskPosition: frame.maskPosition,
-                    })), { duration: sweep.durationMs, delay: sweep.delayMs, easing: sweep.easing, fill: "both" }), swipeTiming);
+                    })), { duration: sweep.durationMs, delay: sweep.delayMs, easing: sweep.easing, fill: "both" }), 
+                    // The last letter's sweep ends last, so it alone covers the whole word.
+                    index === sweeps.length - 1 && target === highlightLetters[index]
+                        ? swipeTiming
+                        : { ...swipeTiming, skipDriftSample: true });
                     animation.currentTime = swipeCurrentTimeMs;
                     if (index === 0)
                         swipeAnimation = animation;
@@ -1042,20 +1049,40 @@ function startWordAnimations(engine, part, config, currentTime, appliedTimingOff
             // as the wave running behind once it finishes. Run the wave's clock ahead by the head start
             // instead, the way the swipe carries its lead, so every delay stays at zero or above.
             const waveLeadMs = Math.max(0, -Math.min(...waves.map(wave => wave.delayMs)));
-            const cascadeDurationMs = waveLeadMs + Math.max(...waves.map(wave => wave.delayMs + wave.durationMs));
+            const waveEndsMs = waves.map(wave => wave.delayMs + wave.durationMs);
+            const lastWaveEndMs = Math.max(...waveEndsMs);
+            const lastEndingWaveIndex = waveEndsMs.lastIndexOf(lastWaveEndMs);
+            const cascadeDurationMs = waveLeadMs + lastWaveEndMs;
             const floatStartMs = correctedAnimationTimeMs(wordTimeMs + waveLeadMs, appliedTimingOffsetMs, cascadeDurationMs);
             const floatKeyframeSignature = JSON.stringify(floatKeyframes);
-            for (const set of [part.letterElements, part.highlightLetterElements, part.imageLayers?.glowLetters]) {
-                set?.forEach((letterElement, index) => {
+            // Glow letters only show while the glow does: never when it is off or renders nothing for this
+            // word, and not once it has faded out. Their waves stop there instead of running to the end.
+            const glowLetters = config.enabled.highlightGlow && !part.glowSuppressed ? part.imageLayers?.glowLetters : undefined;
+            const glowEndMs = Number.parseFloat(config.highlight.imageGlowOpacityTo) === 0 ? waveLeadMs + glowDurationMs : Infinity;
+            const animateLetters = (letters, endMs, sampled) => {
+                letters?.forEach((letterElement, index) => {
+                    const delayMs = waves[index].delayMs + waveLeadMs;
+                    if (delayMs >= endMs)
+                        return;
+                    const endDelayMs = Math.min(0, endMs - delayMs - waves[index].durationMs);
                     const animation = trackLyricAnimationTiming(engine, acquireWaveAnimation(engine, letterElement, floatKeyframes, floatKeyframeSignature, {
                         duration: waves[index].durationMs,
-                        delay: waves[index].delayMs + waveLeadMs,
+                        delay: delayMs,
+                        endDelay: endDelayMs,
                         fill: "forwards",
-                    }), { appliedTimingOffsetMs, offsetMs: waveLeadMs });
+                    }), {
+                        appliedTimingOffsetMs,
+                        offsetMs: waveLeadMs,
+                        // The wave that ends last covers the whole word. A theme's swipe ramp can make that an early letter.
+                        skipDriftSample: !sampled || index !== lastEndingWaveIndex,
+                    });
                     animation.currentTime = floatStartMs;
                     wobbleAnimations.push(animation);
                 });
-            }
+            };
+            animateLetters(part.letterElements, Infinity, true);
+            animateLetters(part.highlightLetterElements, Infinity, false);
+            animateLetters(glowLetters, glowEndMs, false);
         }
     }
     part.animations = [

package/package.json

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