@vectoriox/iox-ui 5.75.0 → 5.75.2

package/src/media-core/frames.ts

@@ -117,7 +117,7 @@ export 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.
  */
 export 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;
@@ -171,15 +171,17 @@ export function filmAt(wanted: number): FilmMotion {
 
 /**
  * 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 at or 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. `aim` is where the scroll is heading, when the driver knows it (its undamped target); without it, it is guessed.
  */
-export function stepFilm(motion: FilmMotion, wanted: number, seconds: number, last: number): FilmMotion {
+export function stepFilm(motion: FilmMotion, wanted: number, seconds: number, last: number, aim?: number): FilmMotion {
     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: 1 | -1 = Math.abs(moved) > FILM_EPSILON ? (moved > 0 ? 1 : -1) : motion.direction;
+    const heading = aim === undefined ? moved : aim - wanted;
+    const direction: 1 | -1 = 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)));
@@ -187,7 +189,7 @@ export function stepFilm(motion: FilmMotion, wanted: number, seconds: number, la
     }
     if (sameFrame) return { ...motion, wanted, direction };
     const clamp = (value: number): number => Math.min(last, Math.max(0, value));
-    const stop = wanted + speed / FILM_LANDING_DECAY;
+    const stop = aim ?? 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;
@@ -318,6 +320,7 @@ export interface FramePlayerOptions {
  */
 export class FramePlayer {
     private played: number | null = null;
+    private aim: number | undefined;
     private motion: FilmMotion | null = null;
     private steppedAt = 0;
     private landingFrame: number | null = null;
@@ -355,24 +358,28 @@ export class FramePlayer {
         this.observer.observe(options.near ?? el);
     }
 
-    /** Stand at `played` %. */
-    seek(played: number): void {
-        if (played === this.played) return;
+    /**
+     * 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: number, aim?: number, now?: number): void {
+        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. */
-    private step(): void {
+    private step(now: number): void {
         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(() => {
+        if (!filmLanded(this.motion) && this.landingFrame === null) this.landingFrame = this.host.requestAnimationFrame(time => {
             this.landingFrame = null;
-            this.step();
+            this.step(time);
         });
     }
 

package/src/scene-core/scroll-driver.ts

@@ -267,7 +267,7 @@ export class ScrollDriver {
             scene.progress = settled ? target : next;
             scene.target = target;
             scene.fresh = false;
-            this.write(scene);
+            this.write(scene, now);
             this.options.onFrame?.(scene.root, { target, progress: scene.progress });
             moving = moving || !settled;
         }
@@ -283,11 +283,11 @@ export class ScrollDriver {
         return { scene, local, target: progress };
     }
 
-    private write(scene: Scene): void {
+    private write(scene: Scene, now: number): void {
         for (const layer of scene.layers) {
             const tracks = scene.phone && layer.phoneTracks.length ? layer.phoneTracks : layer.tracks;
             this.writeWords(layer, sceneWordsLit(tracks, scene.progress));
-            this.writePlayed(layer, scene, scenePlayed(tracks, scene.progress));
+            this.writePlayed(layer, scene, scenePlayed(tracks, scene.progress), scenePlayed(tracks, scene.target), now);
             const frame = sceneFrame(tracks, scene.progress, { inlineSign: scene.inlineSign });
             for (const key of Object.keys(frame) as (keyof SceneFrame)[]) {
                 if (layer.stale || frame[key] !== layer.last[key]) layer.el.style[key] = frame[key] ?? '';
@@ -305,7 +305,7 @@ export class ScrollDriver {
      * The picture this moment asks for. The attribute sits on the Video's own root, which is the layer on the string path
      * and inside it on the component path. A layer with no pictures, or no Play track, holds its poster.
      */
-    private writePlayed(layer: Layer, scene: Scene, played: number | null): void {
+    private writePlayed(layer: Layer, scene: Scene, played: number | null, aim: number | null, now: number): void {
         const target = played === null ? null : (layer.el.hasAttribute(VideoAttribute.Frames) ? layer.el : layer.el.querySelector<HTMLElement>(`[${VideoAttribute.Frames}]`));
         const raw = target?.getAttribute(VideoAttribute.Frames) ?? '';
         const sequence = raw ? normalizeFrameSequence(raw) : null;
@@ -319,7 +319,8 @@ export class ScrollDriver {
             layer.player = new FramePlayer(target, sequence, { phone: scene.phone, near: scene.root, host: this.host });
             layer.playerKey = key;
         }
-        layer.player.seek(played!);
+        // Where the damping is heading, so a landing film stops on the picture the scroll stops on, not one past it.
+        layer.player.seek(played!, aim ?? undefined, now);
     }
 
     /** One opacity per word, and a write only for the few the scroll actually changed. */