@vectoriox/iox-ui 5.74.0 → 5.74.2

package/src/media-core/frames.ts

@@ -108,6 +108,13 @@ export function framePosition(played: number, count: number): number {
     return (Math.min(100, Math.max(0, played)) / 100) * (count - 1);
 }
 
+/** On a Video whose pictures are drawing: the poster has done its job and steps aside. */
+export 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;
+
 /** How finely two neighbours mix. Finer than the eye reads, and a scroll that moves less than a step draws nothing. */
 export const FRAME_BLEND_STEPS = 32;
 
@@ -247,6 +254,9 @@ export interface FramePlayerOptions {
  * Browser only. It writes and never reads, so the driver can call it in its write phase.
  */
 export class FramePlayer {
+    private played: number | null = null;
+    private restTimer: number | null = null;
+    private restFrame: number | null = null;
     private readonly set: FrameSet;
     private readonly info: FrameSetInfo;
     private readonly images: Array<HTMLImageElement | null>;
@@ -284,8 +294,34 @@ export class FramePlayer {
 
     /** Stand at `played` %. */
     seek(played: number): void {
+        if (played === this.played) return;
+        this.played = played;
+        this.stopResting();
         this.position = framePosition(played, this.info.count);
         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. */
+    private rest(): void {
+        this.restTimer = null;
+        const target = Math.round(this.position);
+        const step = (): void => {
+            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();
+    }
+
+    private stopResting(): void {
+        if (this.restTimer !== null) this.host.clearTimeout?.(this.restTimer);
+        if (this.restFrame !== null) this.host.cancelAnimationFrame?.(this.restFrame);
+        this.restTimer = null;
+        this.restFrame = null;
     }
 
     /** Whether a re-render took the canvas away with the markup it sat in. */
@@ -295,6 +331,8 @@ export class FramePlayer {
 
     destroy(): void {
         this.destroyed = true;
+        this.stopResting();
+        this.el.removeAttribute(FRAMES_SHOWING_ATTRIBUTE);
         this.observer?.disconnect();
         this.observer = null;
         for (const image of this.pending) {
@@ -368,6 +406,8 @@ export class FramePlayer {
             context.drawImage(this.images[blend.to]!, 0, 0, width, height);
             context.globalAlpha = 1;
         }
+        // Over a transparent film the poster would show through: a second, stiller subject behind the moving one.
+        if (!this.drawn) this.el.setAttribute(FRAMES_SHOWING_ATTRIBUTE, '');
         this.drawn = blend;
     }
 

package/src/scene-core/scene.ts

@@ -310,6 +310,8 @@ export function applySceneFirstFrame(el: HTMLElement | null | undefined, node: S
 export const SCENE_FLOW_RULES = `.iox-role-scene{height:auto!important}`
     + `.iox-role-scene-stage{position:relative!important;top:auto!important;height:auto!important;overflow:visible!important;container-type:normal!important}`
     + `[${SceneAttribute.Tracks}]{transform:none!important;opacity:1!important;clip-path:none!important;pointer-events:auto!important}`
+    // A row the scroll slid sideways has no scroll to slide it now: it wraps, or its last items run off the side of a phone.
+    + `[${SceneAttribute.Tracks}]{max-width:100%!important;flex-wrap:wrap!important}`
     // A Video the scroll plays stands as its poster, at the poster's own height: a percent of a stage that now flows is nothing.
     + `[${VideoAttribute.Frames}]{height:auto!important}`
     + `[${VideoAttribute.Frames}]>.${VideoClass.Poster},[${VideoAttribute.Frames}]>picture>.${VideoClass.Poster}{position:static!important;height:auto!important}`;

package/styles/iox-design.css

@@ -359,6 +359,7 @@ dialog[data-iox-dialog]:not([open]) {
   position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; display: block; object-fit: cover;
 }
 .iox-video > .iox-video__poster, .iox-video > picture > .iox-video__poster { z-index: -1; }
+.iox-video[data-iox-frames-showing] > .iox-video__poster, .iox-video[data-iox-frames-showing] > picture > .iox-video__poster { visibility: hidden; }
 .iox-video > .iox-video__media { object-fit: contain; background-color: var(--iox-inverse-bg); }
 .iox-video[data-iox-video-mode='background'] > .iox-video__media { object-fit: cover; }
 .iox-video__play {