@vectoriox/iox-ui 5.75.3 → 5.76.1

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

@@ -86,22 +86,6 @@ 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';
-/**
- * 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;
-/** 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;
-/** 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;
 /**
@@ -118,45 +102,6 @@ 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 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, 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 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)));
-        return { position, wanted, speed, direction };
-    }
-    if (sameFrame)
-        return { ...motion, wanted, direction };
-    const clamp = (value) => Math.min(last, Math.max(0, value));
-    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 a whole picture beside where the scroll stands. */
-function filmLanded(motion) {
-    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) {
     if (count <= 1)
@@ -195,6 +140,30 @@ function nearestLoadedFrame(loaded, index) {
     }
     return -1;
 }
+/**
+ * How much unpacked picture one player holds at once. A browser keeps few of 300 unpacked pictures (a wide set is 1.7 GB
+ * unpacked) and unpacked again on the page's own thread, at the moment of drawing, 22 ms a 1600×900 picture: longer than a
+ * whole frame, so the film and the page beside it skipped a beat for every new picture (Doron's recording, 2026-11-04).
+ */
+const FRAMES_UNPACKED_BYTES = 96 * 1024 * 1024;
+const MIN_UNPACKED = 6;
+const MAX_UNPACKED = 24;
+/** How many pictures of `width`×`height` a player holds unpacked. */
+function unpackedFrameCount(width, height) {
+    return Math.min(MAX_UNPACKED, Math.max(MIN_UNPACKED, Math.floor(FRAMES_UNPACKED_BYTES / (width * height * 4))));
+}
+/** The `size` pictures to hold unpacked around `position`, nearest first, each side in turn starting ahead. */
+function framesToHold(position, count, size) {
+    const from = Math.min(count - 1, Math.max(0, Math.floor(position)));
+    const held = [from];
+    for (let distance = 1; held.length < Math.min(size, count); distance++) {
+        if (from + distance < count)
+            held.push(from + distance);
+        if (from - distance >= 0 && held.length < size)
+            held.push(from - distance);
+    }
+    return held;
+}
 /** The longest side of a wide picture and of a phone picture. A phone's is not its width: a landscape video covers a
  *  tall stage by its height, so a picture sized to the phone's width would be enlarged five times. */
 const WIDE_LONG_SIDE = 1600;
@@ -238,6 +207,7 @@ var FramesClass;
     FramesClass["Canvas"] = "iox-video__frames";
 })(FramesClass || (FramesClass = {}));
 const LOAD_CONCURRENCY = 6;
+const UNPACK_CONCURRENCY = 4;
 const NEAR_MARGIN = '100% 0px';
 /** Under these the visitor keeps the poster: nobody on a metered 2G connection asked to download a film. */
 const SLOW_CONNECTIONS = new Set(['slow-2g', '2g']);
@@ -245,15 +215,17 @@ const SLOW_CONNECTIONS = new Set(['slow-2g', '2g']);
  * The player: draws the picture nearest what the scroll asked for on a canvas laid over the poster, and nothing until a
  * first picture has arrived, so the poster is what a visitor sees until then, and for good if the pictures never come.
  * Browser only. It writes and never reads, so the driver can call it in its write phase.
+ *
+ * Each picture is downloaded as a file and unpacked off the page's thread (`createImageBitmap` of the file), a window of
+ * them around where the film stands, so drawing one never waits for it. A browser that cannot (no `fetch` or
+ * `createImageBitmap`, or storage that refuses the download) plays from `<img>` pictures, as before: it works, and pays the
+ * unpacking on the page's thread.
  */
 class FramePlayer {
     constructor(el, sequence, options = {}) {
         this.el = el;
         this.sequence = sequence;
         this.played = null;
-        this.motion = null;
-        this.steppedAt = 0;
-        this.landingFrame = null;
         this.observer = null;
         this.canvas = null;
         this.context = null;
@@ -262,13 +234,21 @@ class FramePlayer {
         this.loading = 0;
         this.started = false;
         this.destroyed = false;
+        this.held = new Set();
+        this.unpacked = new Map();
+        this.unpacking = new Set();
         this.pending = new Set();
         this.host = options.host ?? window;
         const { set, info } = frameSetFor(sequence, !!options.phone);
         this.set = set;
         this.info = info;
-        this.images = new Array(info.count).fill(null);
+        this.ready = new Array(info.count).fill(null);
+        this.files = new Array(info.count).fill(null);
         this.order = frameLoadOrder(info.count);
+        this.holdCount = unpackedFrameCount(info.width, info.height);
+        this.fromFiles = typeof this.host.fetch === 'function' && typeof this.host.createImageBitmap === 'function';
+        const Controller = this.host.AbortController;
+        this.downloads = this.fromFiles && Controller ? new Controller() : null;
         if (!this.allowed())
             return;
         const Observer = this.host.IntersectionObserver;
@@ -283,35 +263,15 @@ class FramePlayer {
         this.observer.observe(options.near ?? el);
     }
     /**
-     * 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.
+     * Stand at `played` %, exactly. The film keeps no motion of its own: the scroll's glide, and the slowing at its end,
+     * are the caller's, so the film slows with the page and stops when it stops. Between two pictures it blends them.
      */
-    seek(played, aim, now) {
-        if (played === this.played && aim === this.aim)
+    seek(played) {
+        if (played === this.played)
             return;
         this.played = played;
-        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(now) {
-        if (this.destroyed || this.played === null)
-            return;
-        const wanted = framePosition(this.played, this.info.count);
-        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.hold();
         this.draw();
-        if (!filmLanded(this.motion) && this.landingFrame === null)
-            this.landingFrame = this.host.requestAnimationFrame(time => {
-                this.landingFrame = null;
-                this.step(time);
-            });
-    }
-    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() {
@@ -319,16 +279,19 @@ class FramePlayer {
     }
     destroy() {
         this.destroyed = true;
-        this.stopLanding();
         this.el.removeAttribute(FRAMES_SHOWING_ATTRIBUTE);
         this.observer?.disconnect();
         this.observer = null;
+        this.downloads?.abort();
         for (const image of this.pending) {
             image.onload = null;
             image.onerror = null;
             image.src = '';
         }
         this.pending.clear();
+        for (const bitmap of this.unpacked.values())
+            bitmap.close();
+        this.unpacked.clear();
         this.canvas?.remove();
         this.canvas = null;
         this.context = null;
@@ -347,26 +310,55 @@ class FramePlayer {
     }
     pump() {
         while (!this.destroyed && this.loading < LOAD_CONCURRENCY && this.nextToLoad < this.order.length) {
-            this.load(this.order[this.nextToLoad++]);
+            const index = this.order[this.nextToLoad++];
+            if (this.fromFiles)
+                this.download(index);
+            else
+                this.loadImage(index);
         }
     }
-    load(index) {
+    loaded(arrived) {
+        this.loading--;
+        if (this.destroyed)
+            return;
+        if (arrived)
+            this.draw();
+        this.pump();
+    }
+    download(index) {
+        this.loading++;
+        const url = frameUrl(this.sequence, this.set, index);
+        this.host.fetch(url, this.downloads ? { signal: this.downloads.signal } : undefined)
+            .then(response => (response.ok ? response.blob() : null))
+            .then(file => {
+            if (this.destroyed)
+                return;
+            // A picture that failed is a gap: its neighbours stand in.
+            this.files[index] = file;
+            this.loading--;
+            this.hold();
+            this.pump();
+        }, () => {
+            if (this.destroyed)
+                return;
+            // Storage that refuses a download from the page's address still serves an <img>: play from those.
+            this.fromFiles = false;
+            this.loading--;
+            this.loadImage(index);
+        });
+    }
+    loadImage(index) {
         const image = this.host.document.createElement('img');
         image.decoding = 'async';
         this.loading++;
         this.pending.add(image);
         const done = (arrived) => {
             this.pending.delete(image);
-            this.loading--;
-            if (this.destroyed)
-                return;
-            if (arrived) {
-                this.images[index] = image;
-                this.draw();
-            }
-            this.pump();
+            if (!this.destroyed && arrived)
+                this.ready[index] = image;
+            this.loaded(arrived);
         };
-        // Decoded before it counts, or the first draw of each picture decodes on the driver's frame and the scroll stutters.
+        // Decoded before it counts, or its first draw decodes on the driver's frame.
         image.onload = () => {
             const decoded = image.decode?.();
             if (decoded)
@@ -374,42 +366,91 @@ class FramePlayer {
             else
                 done(true);
         };
-        // A picture that failed is a gap: its neighbours stand in.
         image.onerror = () => done(false);
         image.src = frameUrl(this.sequence, this.set, index);
     }
+    /** Unpack the pictures around where the film stands, nearest first, and let go of the ones it has left. */
+    hold() {
+        if (this.destroyed)
+            return;
+        const wanted = framesToHold(framePosition(this.played ?? 0, this.info.count), this.info.count, this.holdCount);
+        this.held = new Set(wanted);
+        for (const [index, bitmap] of this.unpacked) {
+            if (this.held.has(index))
+                continue;
+            bitmap.close();
+            this.unpacked.delete(index);
+            this.ready[index] = null;
+        }
+        for (const index of wanted) {
+            if (this.unpacking.size >= UNPACK_CONCURRENCY)
+                return;
+            if (this.files[index] && !this.ready[index] && !this.unpacking.has(index))
+                this.unpack(index);
+        }
+    }
+    unpack(index) {
+        this.unpacking.add(index);
+        this.host.createImageBitmap(this.files[index]).then(bitmap => {
+            this.unpacking.delete(index);
+            if (this.destroyed || !this.held.has(index)) {
+                bitmap.close();
+            }
+            else {
+                this.unpacked.set(index, bitmap);
+                this.ready[index] = bitmap;
+                this.draw();
+            }
+            this.hold();
+        }, () => {
+            // A file that will not unpack is a gap, like one that never came.
+            this.unpacking.delete(index);
+            this.files[index] = null;
+            this.hold();
+        });
+    }
     draw() {
-        if (!this.motion)
+        if (this.destroyed || this.played === null)
             return;
-        const blend = frameBlendAt(this.images, this.motion.position);
+        const blend = frameBlendAt(this.ready, framePosition(this.played, this.info.count));
         const last = this.drawn;
         if (!blend || (last && last.from === blend.from && last.to === blend.to && last.mix === blend.mix))
             return;
-        const image = this.images[blend.from];
-        if (!this.ensureCanvas(image))
+        const picture = this.ready[blend.from];
+        if (!this.ensureCanvas(picture))
             return;
         const context = this.context;
         const { width, height } = this.canvas;
         context.clearRect(0, 0, width, height);
-        context.drawImage(image, 0, 0, width, height);
         if (blend.mix > 0) {
+            // A true mix, (1 − mix)·from + mix·to, even where a see-through film has nothing on one side. Drawing `to` over
+            // an opaque `from` kept `from`'s outline whole until the next picture, so the subject's edge jumped a picture at
+            // a time instead of moving.
+            context.globalCompositeOperation = 'lighter';
+            context.globalAlpha = 1 - blend.mix;
+            context.drawImage(picture, 0, 0, width, height);
             context.globalAlpha = blend.mix;
-            context.drawImage(this.images[blend.to], 0, 0, width, height);
+            context.drawImage(this.ready[blend.to], 0, 0, width, height);
             context.globalAlpha = 1;
+            context.globalCompositeOperation = 'source-over';
+        }
+        else {
+            context.drawImage(picture, 0, 0, width, height);
         }
         // 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;
     }
-    ensureCanvas(image) {
+    ensureCanvas(picture) {
         if (this.canvas)
             return !!this.context;
+        const size = picture;
         const canvas = this.host.document.createElement('canvas');
         canvas.className = FramesClass.Canvas;
         canvas.setAttribute('aria-hidden', 'true');
-        canvas.width = image.naturalWidth || this.info.width;
-        canvas.height = image.naturalHeight || this.info.height;
+        canvas.width = size.naturalWidth || Number(size.width) || this.info.width;
+        canvas.height = size.naturalHeight || Number(size.height) || this.info.height;
         this.context = canvas.getContext('2d');
         if (!this.context)
             return false;
@@ -1039,5 +1080,5 @@ function videoRuntimeOf(el) {
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { CONSENT_GRANT_EVENT, CONSENT_PREFERENCES_EVENT, FRAMES_PHONE_MAX_WIDTH, FRAMES_SHOWING_ATTRIBUTE, FRAMES_UNPACKED_BYTES, 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, framesToHold, isThirdPartyPoster, nearestLoadedFrame, normalizeFrameSequence, parseVideoUrl, phoneFrameCount, phoneFrameSrcset, planVideo, readConsentRecord, sampledFrameIndexes, serializeVideoAttributes, sortFrameFiles, unpackedFrameCount, videoConsentCategory, videoEmbedUrl, videoFrameCount, videoInnerHtml, videoPlayLabel, videoPosterFileName, videoProp, videoRefOf, videoRootAttributes, videoRuntimeOf, videoSourceOf, videoThumbnailRequest, videoWords };
 //# sourceMappingURL=vectoriox-iox-ui-media-core.mjs.map