@vectoriox/iox-ui 5.75.0 → 5.75.3

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

@@ -92,7 +92,7 @@ const FRAMES_SHOWING_ATTRIBUTE = 'data-iox-frames-showing';
  * 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. */
+/** With no word from the driver on where the scroll is going, how fast a landing scroll is assumed to slow (per second). */
 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;
@@ -124,15 +124,17 @@ function filmAt(wanted) {
 }
 /**
  * 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.
+ * pictures a second) it runs on at that speed to the whole picture nearest where the scroll will stop, and stands there:
+ * it never crawls through a dissolve, never stops between two pictures, and never steps back over a picture it reached
+ * unless the scroll turns. `aim` is where the scroll is heading, when the driver knows it (its undamped target); without it, it is guessed.
  */
-function stepFilm(motion, wanted, seconds, last) {
+function stepFilm(motion, wanted, seconds, last, aim) {
     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;
+    const heading = aim === undefined ? moved : aim - wanted;
+    const direction = Math.abs(heading) > FILM_EPSILON ? (heading > 0 ? 1 : -1) : 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)));
@@ -141,18 +143,19 @@ function stepFilm(motion, wanted, seconds, last) {
     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 stop = aim ?? wanted + speed / FILM_LANDING_DECAY;
+    // The picture nearest the stop, unless reaching it would show a step back: then the next whole one on the way.
+    const nearest = Math.round(stop);
+    const back = (motion.position - nearest) * direction > 1 / FRAME_BLEND_STEPS;
+    const goal = clamp(back ? (direction > 0 ? Math.ceil(motion.position) : Math.floor(motion.position)) : nearest);
     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. */
+/** Whether a film has landed: still, on a whole picture beside 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;
+    return Math.abs(motion.speed) < 0.01 && Number.isInteger(motion.position) && Math.abs(motion.position - motion.wanted) < 1;
 }
 /** The picture at `played` % of a set of `count`. */
 function frameIndexAt(played, count) {
@@ -279,26 +282,30 @@ class FramePlayer {
         }, { rootMargin: NEAR_MARGIN });
         this.observer.observe(options.near ?? el);
     }
-    /** Stand at `played` %. */
-    seek(played) {
-        if (played === this.played)
+    /**
+     * Stand at `played` %, on the way to `aim` % when the caller knows where the scroll is going. `now` is the caller's
+     * frame time: the player keeps time by frames, so a frame asked twice moves once however long the page took.
+     */
+    seek(played, aim, now) {
+        if (played === this.played && aim === this.aim)
             return;
         this.played = played;
-        this.step();
+        this.aim = aim;
+        this.step(now ?? this.host.performance?.now() ?? 0);
     }
     /** One step toward the moment asked for, drawn now; a landing goes on by itself until it stands on a whole picture. */
-    step() {
+    step(now) {
         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);
+        const aim = this.aim === undefined ? undefined : framePosition(this.aim, this.info.count);
+        this.motion = this.motion ? stepFilm(this.motion, wanted, (now - this.steppedAt) / 1000, this.info.count - 1, aim) : filmAt(wanted);
         this.steppedAt = now;
         this.draw();
         if (!filmLanded(this.motion) && this.landingFrame === null)
-            this.landingFrame = this.host.requestAnimationFrame(() => {
+            this.landingFrame = this.host.requestAnimationFrame(time => {
                 this.landingFrame = null;
-                this.step();
+                this.step(time);
             });
     }
     stopLanding() {