@vectoriox/iox-ui 5.74.6 → 5.75.0

package/fesm2022/vectoriox-iox-ui-media-core.mjs

@@ -86,9 +86,22 @@ function framePosition(played, count) {
 }
 /** On a Video whose pictures are drawing: the poster has done its job and steps aside. */
 const FRAMES_SHOWING_ATTRIBUTE = 'data-iox-frames-showing';
-/** How long a stopped scroll waits before settling on a whole picture, and how fast it gets there per frame. */
-const REST_AFTER_MS = 140;
-const REST_RATE = 0.25;
+/**
+ * Below this many pictures a second the film stops following the scroll exactly and lands on its own. A landing scroll
+ * slows exponentially, so the last picture or two would take most of a second as one slow dissolve between two places:
+ * the subject showing twice, and then settling. Landing at least this fast keeps the end of the move a move.
+ */
+const FILM_LANDING_SPEED = 10;
+/** How fast a landing scroll is assumed to slow (per second): where it will stop is its speed over this. */
+const FILM_LANDING_DECAY = 5;
+/** How quickly the film catches up with a scroll that turned back while it was landing ahead of it (per second). */
+const FILM_CATCH_RATE = 25;
+/** How quickly the film's reading of the scroll's speed follows it (per second). */
+const FILM_SPEED_RATE = 30;
+/** A step this short is the same frame asked twice: it moves nothing and reads no speed. */
+const FILM_SAME_FRAME_SECONDS = 0.002;
+const FILM_MAX_STEP_SECONDS = 0.1;
+const FILM_EPSILON = 1e-6;
 /** How finely two neighbours mix. Finer than the eye reads, and a scroll that moves less than a step draws nothing. */
 const FRAME_BLEND_STEPS = 32;
 /**
@@ -105,6 +118,42 @@ function frameBlendAt(loaded, position) {
     const nearest = nearestLoadedFrame(loaded, Math.round(position));
     return nearest < 0 ? null : { from: nearest, to: nearest, mix: 0 };
 }
+/** Where a film stands before its first step: on the moment asked for, still. */
+function filmAt(wanted) {
+    return { position: wanted, wanted, speed: 0, direction: 1 };
+}
+/**
+ * One step of the film. Moving fast, it stands exactly where the scroll asks. Landing (slower than FILM_LANDING_SPEED
+ * pictures a second) it runs on at that speed to the whole picture past where the scroll will stop, and stands there: it
+ * never crawls through a dissolve, never stops between two pictures, and never steps back unless the scroll does.
+ */
+function stepFilm(motion, wanted, seconds, last) {
+    const sameFrame = seconds < FILM_SAME_FRAME_SECONDS;
+    const step = Math.min(FILM_MAX_STEP_SECONDS, seconds);
+    const moved = wanted - motion.wanted;
+    const speed = sameFrame ? motion.speed : motion.speed + (moved / step - motion.speed) * (1 - Math.exp(-FILM_SPEED_RATE * step));
+    const direction = Math.abs(moved) > FILM_EPSILON ? (moved > 0 ? 1 : -1) : motion.direction;
+    // Moving: with the scroll, but never back over a picture a landing already reached unless the scroll turned.
+    if (Math.abs(speed) >= FILM_LANDING_SPEED) {
+        const position = direction > 0 ? Math.max(wanted, Math.min(motion.position, Math.ceil(wanted))) : Math.min(wanted, Math.max(motion.position, Math.floor(wanted)));
+        return { position, wanted, speed, direction };
+    }
+    if (sameFrame)
+        return { ...motion, wanted, direction };
+    const clamp = (value) => Math.min(last, Math.max(0, value));
+    const stop = wanted + speed / FILM_LANDING_DECAY;
+    const reached = direction > 0 ? Math.ceil(motion.position - FILM_EPSILON) : Math.floor(motion.position + FILM_EPSILON);
+    const goal = clamp(direction > 0 ? Math.max(Math.ceil(stop - FILM_EPSILON), reached) : Math.min(Math.floor(stop + FILM_EPSILON), reached));
+    const behind = (wanted - motion.position) * direction;
+    const reach = Math.max(FILM_LANDING_SPEED * step, behind > 0 ? behind * (1 - Math.exp(-FILM_CATCH_RATE * step)) : 0);
+    const position = direction > 0 ? Math.min(goal, motion.position + reach) : Math.max(goal, motion.position - reach);
+    return { position, wanted, speed, direction };
+}
+/** Whether a film has landed: still, on the whole picture at or just past where the scroll stands. */
+function filmLanded(motion) {
+    const past = (motion.position - motion.wanted) * motion.direction;
+    return Math.abs(motion.speed) < 0.01 && Number.isInteger(motion.position) && past > -FILM_EPSILON && past < 1;
+}
 /** The picture at `played` % of a set of `count`. */
 function frameIndexAt(played, count) {
     if (count <= 1)
@@ -199,12 +248,12 @@ class FramePlayer {
         this.el = el;
         this.sequence = sequence;
         this.played = null;
-        this.restTimer = null;
-        this.restFrame = null;
+        this.motion = null;
+        this.steppedAt = 0;
+        this.landingFrame = null;
         this.observer = null;
         this.canvas = null;
         this.context = null;
-        this.position = 0;
         this.drawn = null;
         this.nextToLoad = 0;
         this.loading = 0;
@@ -235,34 +284,27 @@ class FramePlayer {
         if (played === this.played)
             return;
         this.played = played;
-        this.stopResting();
-        this.position = framePosition(played, this.info.count);
+        this.step();
+    }
+    /** One step toward the moment asked for, drawn now; a landing goes on by itself until it stands on a whole picture. */
+    step() {
+        if (this.destroyed || this.played === null)
+            return;
+        const wanted = framePosition(this.played, this.info.count);
+        const now = this.host.performance?.now() ?? Date.now();
+        this.motion = this.motion ? stepFilm(this.motion, wanted, (now - this.steppedAt) / 1000, this.info.count - 1) : filmAt(wanted);
+        this.steppedAt = now;
         this.draw();
-        this.restTimer = this.host.setTimeout?.(() => this.rest(), REST_AFTER_MS) ?? null;
-    }
-    /** A stopped scroll must not stand on two pictures at once: a moving subject would show twice. It settles on the nearer. */
-    rest() {
-        this.restTimer = null;
-        const target = Math.round(this.position);
-        const step = () => {
-            this.restFrame = null;
-            if (this.destroyed)
-                return;
-            const left = target - this.position;
-            this.position = Math.abs(left) < 1 / FRAME_BLEND_STEPS ? target : this.position + left * REST_RATE;
-            this.draw();
-            if (this.position !== target)
-                this.restFrame = this.host.requestAnimationFrame(step);
-        };
-        step();
+        if (!filmLanded(this.motion) && this.landingFrame === null)
+            this.landingFrame = this.host.requestAnimationFrame(() => {
+                this.landingFrame = null;
+                this.step();
+            });
     }
-    stopResting() {
-        if (this.restTimer !== null)
-            this.host.clearTimeout?.(this.restTimer);
-        if (this.restFrame !== null)
-            this.host.cancelAnimationFrame?.(this.restFrame);
-        this.restTimer = null;
-        this.restFrame = null;
+    stopLanding() {
+        if (this.landingFrame !== null)
+            this.host.cancelAnimationFrame?.(this.landingFrame);
+        this.landingFrame = null;
     }
     /** Whether a re-render took the canvas away with the markup it sat in. */
     get detached() {
@@ -270,7 +312,7 @@ class FramePlayer {
     }
     destroy() {
         this.destroyed = true;
-        this.stopResting();
+        this.stopLanding();
         this.el.removeAttribute(FRAMES_SHOWING_ATTRIBUTE);
         this.observer?.disconnect();
         this.observer = null;
@@ -330,7 +372,9 @@ class FramePlayer {
         image.src = frameUrl(this.sequence, this.set, index);
     }
     draw() {
-        const blend = frameBlendAt(this.images, this.position);
+        if (!this.motion)
+            return;
+        const blend = frameBlendAt(this.images, this.motion.position);
         const last = this.drawn;
         if (!blend || (last && last.from === blend.from && last.to === blend.to && last.mix === blend.mix))
             return;
@@ -988,5 +1032,5 @@ function videoRuntimeOf(el) {
  * Generated bundle index. Do not edit.
  */
 
-export { CONSENT_GRANT_EVENT, CONSENT_PREFERENCES_EVENT, FRAMES_PHONE_MAX_WIDTH, FRAMES_SHOWING_ATTRIBUTE, FRAME_BLEND_STEPS, FRAME_SEQUENCE_ID, FrameExtension, FramePlayer, FrameSet, FramesClass, MAX_FRAMES, MAX_FRAME_BYTES, PHONE_LONG_SIDE, VIDEO_EMBED_ORIGINS, VIDEO_NODE_TYPE, VIDEO_PROVIDER_COMPANY, VIDEO_PROVIDER_LABEL, VIDEO_WORDS, VideoAttribute, VideoClass, VideoIcon, VideoKind, VideoMode, VideoRuntime, VideoSource, VideoTrait, WIDE_LONG_SIDE, attachVideoAt, attachVideos, documentConsentTransport, fittedFrameSize, frameBlendAt, frameFileName, frameIndexAt, frameLoadOrder, framePosition, frameSetFor, frameSummary, frameUrl, isThirdPartyPoster, nearestLoadedFrame, normalizeFrameSequence, parseVideoUrl, phoneFrameCount, phoneFrameSrcset, planVideo, readConsentRecord, sampledFrameIndexes, serializeVideoAttributes, sortFrameFiles, videoConsentCategory, videoEmbedUrl, videoFrameCount, videoInnerHtml, videoPlayLabel, videoPosterFileName, videoProp, videoRefOf, videoRootAttributes, videoRuntimeOf, videoSourceOf, videoThumbnailRequest, videoWords };
+export { CONSENT_GRANT_EVENT, CONSENT_PREFERENCES_EVENT, FILM_LANDING_SPEED, FRAMES_PHONE_MAX_WIDTH, FRAMES_SHOWING_ATTRIBUTE, FRAME_BLEND_STEPS, FRAME_SEQUENCE_ID, FrameExtension, FramePlayer, FrameSet, FramesClass, MAX_FRAMES, MAX_FRAME_BYTES, PHONE_LONG_SIDE, VIDEO_EMBED_ORIGINS, VIDEO_NODE_TYPE, VIDEO_PROVIDER_COMPANY, VIDEO_PROVIDER_LABEL, VIDEO_WORDS, VideoAttribute, VideoClass, VideoIcon, VideoKind, VideoMode, VideoRuntime, VideoSource, VideoTrait, WIDE_LONG_SIDE, attachVideoAt, attachVideos, documentConsentTransport, filmAt, filmLanded, fittedFrameSize, frameBlendAt, frameFileName, frameIndexAt, frameLoadOrder, framePosition, frameSetFor, frameSummary, frameUrl, isThirdPartyPoster, nearestLoadedFrame, normalizeFrameSequence, parseVideoUrl, phoneFrameCount, phoneFrameSrcset, planVideo, readConsentRecord, sampledFrameIndexes, serializeVideoAttributes, sortFrameFiles, stepFilm, videoConsentCategory, videoEmbedUrl, videoFrameCount, videoInnerHtml, videoPlayLabel, videoPosterFileName, videoProp, videoRefOf, videoRootAttributes, videoRuntimeOf, videoSourceOf, videoThumbnailRequest, videoWords };
 //# sourceMappingURL=vectoriox-iox-ui-media-core.mjs.map