@vectoriox/iox-ui 5.76.0 → 5.77.0

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

@@ -20,8 +20,12 @@ var FrameExtension;
     FrameExtension["Webp"] = "webp";
     FrameExtension["Jpeg"] = "jpg";
 })(FrameExtension || (FrameExtension = {}));
-/** The most pictures one set may hold. Past this a phone runs out of memory before the visitor runs out of scroll. */
-const MAX_FRAMES = 300;
+/**
+ * The most pictures one set may hold. A film's smoothness is its density, pictures per screen of scrolling: 210 over 18
+ * screens stepped on Doron's iPhone as a glide slowed, 1050 did not (2026-11-05). Memory is not what limits it: the player
+ * keeps the downloaded files (about 10 kB a phone picture) and only a window of them unpacked (`unpackedFrameCount`).
+ */
+const MAX_FRAMES = 1200;
 /** The most one picture may weigh when uploaded. */
 const MAX_FRAME_BYTES = 3 * 1024 * 1024;
 /** A sequence's name in storage: what the browser generates and what the server accepts in a key. */
@@ -140,14 +144,38 @@ 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;
 const PHONE_LONG_SIDE = 1100;
-/** How many pictures a second of video becomes, before the cap. */
-const VIDEO_FRAMES_PER_SECOND = 24;
-/** A video's cap: the pictures a scroll can show, at a weight a page can carry. A set of pictures is the author's own count. */
-const VIDEO_MAX_FRAMES = 180;
+/** How many pictures a second of video becomes, before the cap: what most recordings hold, so few are the same twice. */
+const VIDEO_FRAMES_PER_SECOND = 30;
+/** A video's cap: half a minute at that rate. A set of pictures is the author's own count, up to `MAX_FRAMES`. */
+const VIDEO_MAX_FRAMES = 900;
 /** `width`×`height` fitted inside `longSide`, never enlarged. */
 function fittedFrameSize(width, height, longSide) {
     const scale = Math.min(1, longSide / Math.max(width, height));
@@ -165,10 +193,6 @@ function sampledFrameIndexes(sourceCount, count) {
         return [0];
     return Array.from({ length: count }, (_, i) => Math.round((i * (sourceCount - 1)) / (count - 1)));
 }
-/** A phone plays half the pictures: it has less memory, and half is plenty on a small screen. */
-function phoneFrameCount(wideCount) {
-    return Math.max(2, Math.ceil(wideCount / 2));
-}
 const NATURAL = new Intl.Collator('en', { numeric: true, sensitivity: 'base' });
 /** Rendered frames in their real order: `frame2` before `frame10`. */
 function sortFrameFiles(files) {
@@ -183,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']);
@@ -190,6 +215,11 @@ 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 = {}) {
@@ -204,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;
@@ -232,6 +270,7 @@ class FramePlayer {
         if (played === this.played)
             return;
         this.played = played;
+        this.hold();
         this.draw();
     }
     /** Whether a re-render took the canvas away with the markup it sat in. */
@@ -243,12 +282,16 @@ class FramePlayer {
         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;
@@ -267,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)
@@ -294,19 +366,58 @@ 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.destroyed || this.played === null)
             return;
-        const blend = frameBlendAt(this.images, framePosition(this.played, this.info.count));
+        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;
@@ -317,28 +428,29 @@ class FramePlayer {
             // a time instead of moving.
             context.globalCompositeOperation = 'lighter';
             context.globalAlpha = 1 - blend.mix;
-            context.drawImage(image, 0, 0, width, height);
+            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(image, 0, 0, width, height);
+            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;
@@ -968,5 +1080,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, 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, 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