@vectoriox/iox-ui 5.72.1 → 5.73.1

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

@@ -1,5 +1,298 @@
 import { ConsentCategory, hasConsent, CONSENT_COOKIE_NAME, decode, setCategoryDecision, encode, cookieAttributes } from '@vectoriox/iox-ui/consent-core';
 
+/**
+ * A video played by the scroll, as pictures (premium sites SC4). Every source, a video file or a folder of rendered frames,
+ * becomes the same numbered set of pictures, prepared once in the author's browser, one set for wide screens and a lighter
+ * one for phones. So there is one player and it is the same on every browser: a `<video>` seeked by the scroll needs a
+ * dense-keyframe encode no pod here can run, and on an iPhone it accepts seeks it never answers.
+ *
+ * The saved value is a small description, never a list of addresses: a page holding 300 URLs would ship them in its HTML.
+ */
+var FrameSet;
+(function (FrameSet) {
+    FrameSet["Wide"] = "w";
+    FrameSet["Phone"] = "p";
+})(FrameSet || (FrameSet = {}));
+var FrameExtension;
+(function (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 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. */
+const FRAME_SEQUENCE_ID = /^[a-z0-9]{8,40}$/;
+const SAFE_BASE = /^https:\/\/[^\s"'<>\\]+$/;
+const PAD = 4;
+const ALL_EXTENSIONS = new Set(Object.values(FrameExtension));
+function setInfo(raw) {
+    const { count, width, height } = (raw ?? {});
+    const valid = (v, max) => Number.isInteger(v) && v > 0 && v <= max;
+    return valid(count, MAX_FRAMES) && valid(width, 8192) && valid(height, 8192) ? { count, width, height } : null;
+}
+/** The sequence a saved value really describes, or null. Never throws on what a page document holds. */
+function normalizeFrameSequence(raw) {
+    const value = (typeof raw === 'string' ? parseJson(raw) : raw);
+    if (!value || typeof value !== 'object')
+        return null;
+    const wide = setInfo(value.wide);
+    if (!wide || typeof value.base !== 'string' || !SAFE_BASE.test(value.base) || !ALL_EXTENSIONS.has(String(value.ext)))
+        return null;
+    const phone = setInfo(value.phone);
+    return {
+        base: value.base.replace(/\/+$/, ''),
+        ext: value.ext,
+        wide,
+        ...(phone ? { phone } : {}),
+        ...(Number.isFinite(value.bytes) && value.bytes > 0 ? { bytes: value.bytes } : {}),
+    };
+}
+function parseJson(raw) {
+    try {
+        return JSON.parse(raw);
+    }
+    catch {
+        return null;
+    }
+}
+/** The name a picture is stored under: its place in the set, from 1. */
+function frameFileName(index, ext) {
+    return `${String(index + 1).padStart(PAD, '0')}.${ext}`;
+}
+/** Picture `index` (from 0) of a set. */
+function frameUrl(sequence, set, index) {
+    return `${sequence.base}/${set}/${frameFileName(index, sequence.ext)}`;
+}
+/** The first picture of each set, for a poster's `srcset`; '' when there is only one set. */
+function phoneFrameSrcset(sequence) {
+    if (!sequence.phone)
+        return '';
+    return `${frameUrl(sequence, FrameSet.Phone, 0)} ${sequence.phone.width}w, ${frameUrl(sequence, FrameSet.Wide, 0)} ${sequence.wide.width}w`;
+}
+/** Which set plays: the phone's on a phone, when there is one. */
+function frameSetFor(sequence, phone) {
+    return phone && sequence.phone ? { set: FrameSet.Phone, info: sequence.phone } : { set: FrameSet.Wide, info: sequence.wide };
+}
+/** The picture at `played` % of a set of `count`. */
+function frameIndexAt(played, count) {
+    if (count <= 1)
+        return 0;
+    return Math.round((Math.min(100, Math.max(0, played)) / 100) * (count - 1));
+}
+/**
+ * The order to fetch a set in: the two ends, then every 16th, every 8th and so on down to all of them. Any scroll position
+ * then has a near picture almost at once, and the movement sharpens as the rest arrive. Fetching in sequence would leave a
+ * visitor who scrolls fast looking at the first frames.
+ */
+function frameLoadOrder(count) {
+    const order = [];
+    const seen = new Set();
+    const add = (i) => {
+        if (i >= 0 && i < count && !seen.has(i)) {
+            seen.add(i);
+            order.push(i);
+        }
+    };
+    add(0);
+    add(count - 1);
+    for (let stride = 16; stride >= 1; stride /= 2) {
+        for (let i = 0; i < count; i += stride)
+            add(i);
+    }
+    return order;
+}
+/** The loaded picture nearest `index`, or -1 when none has arrived. Ties go backward: the picture already passed. */
+function nearestLoadedFrame(loaded, index) {
+    for (let distance = 0; distance < loaded.length; distance++) {
+        if (loaded[index - distance])
+            return index - distance;
+        if (loaded[index + distance])
+            return index + distance;
+    }
+    return -1;
+}
+/** 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;
+/** `width`×`height` fitted inside `longSide`, never enlarged. */
+function fittedFrameSize(width, height, longSide) {
+    const scale = Math.min(1, longSide / Math.max(width, height));
+    return { width: Math.max(1, Math.round(width * scale)), height: Math.max(1, Math.round(height * scale)) };
+}
+/** How many pictures a video of `seconds` becomes. */
+function videoFrameCount(seconds) {
+    return Math.min(VIDEO_MAX_FRAMES, Math.max(2, Math.ceil(seconds * VIDEO_FRAMES_PER_SECOND)));
+}
+/** Which of `sourceCount` pictures make a set of `count`, spread evenly, first and last always in. */
+function sampledFrameIndexes(sourceCount, count) {
+    if (count >= sourceCount)
+        return Array.from({ length: sourceCount }, (_, i) => i);
+    if (count <= 1)
+        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) {
+    return [...files].sort((a, b) => NATURAL.compare(a.name, b.name));
+}
+/** A sequence's weight, for the author. */
+function frameSummary(sequence) {
+    return { frames: sequence.wide.count, megabytes: sequence.bytes ? Math.round((sequence.bytes / (1024 * 1024)) * 10) / 10 : null };
+}
+var FramesClass;
+(function (FramesClass) {
+    FramesClass["Canvas"] = "iox-video__frames";
+})(FramesClass || (FramesClass = {}));
+const LOAD_CONCURRENCY = 6;
+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']);
+/**
+ * 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.
+ */
+class FramePlayer {
+    constructor(el, sequence, options = {}) {
+        this.el = el;
+        this.sequence = sequence;
+        this.observer = null;
+        this.canvas = null;
+        this.context = null;
+        this.wanted = 0;
+        this.drawn = -1;
+        this.nextToLoad = 0;
+        this.loading = 0;
+        this.started = false;
+        this.destroyed = false;
+        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.order = frameLoadOrder(info.count);
+        if (!this.allowed())
+            return;
+        const Observer = this.host.IntersectionObserver;
+        if (!Observer) {
+            this.start();
+            return;
+        }
+        this.observer = new Observer(entries => {
+            if (entries.some(entry => entry.isIntersecting))
+                this.start();
+        }, { rootMargin: NEAR_MARGIN });
+        this.observer.observe(options.near ?? el);
+    }
+    /** Stand at `played` %. */
+    seek(played) {
+        this.wanted = frameIndexAt(played, this.info.count);
+        this.draw();
+    }
+    /** Whether a re-render took the canvas away with the markup it sat in. */
+    get detached() {
+        return !!this.canvas && !this.canvas.isConnected;
+    }
+    destroy() {
+        this.destroyed = true;
+        this.observer?.disconnect();
+        this.observer = null;
+        for (const image of this.pending) {
+            image.onload = null;
+            image.onerror = null;
+            image.src = '';
+        }
+        this.pending.clear();
+        this.canvas?.remove();
+        this.canvas = null;
+        this.context = null;
+    }
+    allowed() {
+        const connection = this.host.navigator?.connection;
+        return !connection?.saveData && !SLOW_CONNECTIONS.has(connection?.effectiveType ?? '');
+    }
+    start() {
+        if (this.started)
+            return;
+        this.started = true;
+        this.observer?.disconnect();
+        this.observer = null;
+        this.pump();
+    }
+    pump() {
+        while (!this.destroyed && this.loading < LOAD_CONCURRENCY && this.nextToLoad < this.order.length) {
+            this.load(this.order[this.nextToLoad++]);
+        }
+    }
+    load(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();
+        };
+        // Decoded before it counts, or the first draw of each picture decodes on the driver's frame and the scroll stutters.
+        image.onload = () => {
+            const decoded = image.decode?.();
+            if (decoded)
+                void decoded.then(() => done(true), () => done(true));
+            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);
+    }
+    draw() {
+        const index = nearestLoadedFrame(this.images, this.wanted);
+        if (index < 0 || index === this.drawn)
+            return;
+        const image = this.images[index];
+        if (!this.ensureCanvas(image))
+            return;
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.context.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
+        this.drawn = index;
+    }
+    ensureCanvas(image) {
+        if (this.canvas)
+            return !!this.context;
+        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;
+        this.context = canvas.getContext('2d');
+        if (!this.context)
+            return false;
+        this.canvas = canvas;
+        this.el.appendChild(canvas);
+        return true;
+    }
+}
+
 /**
  * VIDEO (CC3 — complex-components plan §7b, board 5). A LEAF type with two sources:
  * - an uploaded FILE renders as a real `<video>` (poster, `preload="metadata"`, captions, controls);
@@ -38,6 +331,8 @@ var VideoTrait;
     VideoTrait["Captions"] = "captions";
     VideoTrait["CaptionsLang"] = "captionsLang";
     VideoTrait["Consent"] = "consentCategory";
+    /** Pictures the scroll plays (SC4): a `FrameSequence`. Written by the Scene panel, never typed. */
+    VideoTrait["Frames"] = "frames";
 })(VideoTrait || (VideoTrait = {}));
 /** What a plan renders. */
 var VideoKind;
@@ -48,6 +343,8 @@ var VideoKind;
     VideoKind["Facade"] = "facade";
     /** No address yet: the poster blank (DS3) and nothing to play. */
     VideoKind["Empty"] = "empty";
+    /** Pictures the scroll plays: the poster, and the driver's canvas over it. No player, no controls. */
+    VideoKind["Frames"] = "frames";
 })(VideoKind || (VideoKind = {}));
 const VIDEO_PROVIDER_LABEL = {
     [VideoSource.YouTube]: 'YouTube',
@@ -160,6 +457,9 @@ function videoConsentCategory(node, source = videoSourceOf(videoProp(node, Video
  * studio's own image (or the thumbnail the server fetched and stored for it), never a request to a third party.
  */
 function planVideo(node, consent) {
+    const frames = normalizeFrameSequence(videoProp(node, VideoTrait.Frames));
+    if (frames)
+        return planFrames(node, frames);
     const rawSrc = str(videoProp(node, VideoTrait.Src));
     const source = videoSourceOf(rawSrc, videoProp(node, VideoTrait.Source));
     const ref = source === VideoSource.File ? null : parseVideoUrl(rawSrc);
@@ -187,6 +487,32 @@ function planVideo(node, consent) {
         granted,
         embedUrl: kind === VideoKind.Facade && granted && ref ? videoEmbedUrl(ref) : null,
         providerLabel: ref ? VIDEO_PROVIDER_LABEL[ref.source] : '',
+        frames: null,
+    };
+}
+/** Pictures win over any address the node also holds: it was turned into them. No player, no consent, nothing to press. */
+function planFrames(node, frames) {
+    const poster = str(videoProp(node, VideoTrait.Poster));
+    return {
+        kind: VideoKind.Frames,
+        source: VideoSource.File,
+        ref: null,
+        src: '',
+        poster: poster && !isThirdPartyPoster(poster) ? poster : frameUrl(frames, FrameSet.Wide, 0),
+        title: str(videoProp(node, VideoTrait.Title)),
+        mode: VideoMode.Inline,
+        background: false,
+        autoplay: false,
+        muted: false,
+        loop: false,
+        controls: false,
+        captions: '',
+        captionsLang: 'en',
+        consentCategory: null,
+        granted: true,
+        embedUrl: null,
+        providerLabel: '',
+        frames,
     };
 }
 const THIRD_PARTY_POSTER_HOSTS = ['ytimg.com', 'youtube.com', 'vimeocdn.com', 'vimeo.com', 'googleusercontent.com'];
@@ -270,6 +596,8 @@ var VideoAttribute;
     VideoAttribute["Playing"] = "data-iox-video-playing";
     /** The consent prompt is showing. */
     VideoAttribute["Asking"] = "data-iox-video-asking";
+    /** The pictures the scroll plays, as JSON: what the driver reads, so it needs no node tree. */
+    VideoAttribute["Frames"] = "data-iox-video-frames";
 })(VideoAttribute || (VideoAttribute = {}));
 var VideoIcon;
 (function (VideoIcon) {
@@ -294,6 +622,8 @@ function videoRootAttributes(plan) {
         attrs[VideoAttribute.Title] = plan.title;
     if (!plan.poster)
         attrs[VideoAttribute.PosterEmpty] = '';
+    if (plan.frames)
+        attrs[VideoAttribute.Frames] = JSON.stringify(plan.frames);
     return attrs;
 }
 const iconHtml = (cls) => `<i class="${cls}" aria-hidden="true"></i>`;
@@ -302,6 +632,15 @@ const iconHtml = (cls) => `<i class="${cls}" aria-hidden="true"></i>`;
 function videoInnerHtml(plan, options) {
     const { esc } = options;
     const words = options.words ?? VIDEO_WORDS.en;
+    // The same on the canvas and on the site: the first picture is real content, so it is fetched at once, named, and the
+    // size a phone needs. A driver's canvas covers it when pictures arrive; with no script it is what there is.
+    if (plan.kind === VideoKind.Frames) {
+        const own = !!plan.frames && !isAuthoredPoster(plan);
+        const srcset = own ? phoneFrameSrcset(plan.frames) : '';
+        // Its real size, so where a Scene flows (reduced motion, no script) the picture holds its height before it loads.
+        const size = own ? ` width="${plan.frames.wide.width}" height="${plan.frames.wide.height}"` : '';
+        return `<img class="${VideoClass.Poster}" src="${esc(plan.poster)}"${srcset ? ` srcset="${esc(srcset)}" sizes="100vw"` : ''}${size} alt="${esc(plan.title)}" decoding="async">`;
+    }
     const poster = plan.poster ? `<img class="${VideoClass.Poster}" src="${esc(plan.poster)}" alt="" loading="lazy" decoding="async">` : '';
     const label = esc(videoPlayLabel(plan, words));
     const playSpan = `<span class="${VideoClass.Play}" aria-hidden="true">${iconHtml(VideoIcon.Play)}</span>`;
@@ -341,6 +680,7 @@ function videoInnerHtml(plan, options) {
         `</div></div>`;
     return `${poster}<button type="button" class="${VideoClass.Play}" aria-label="${label}">${iconHtml(VideoIcon.Play)}</button>${badge}${prompt}`;
 }
+const isAuthoredPoster = (plan) => !!plan.frames && plan.poster !== frameUrl(plan.frames, FrameSet.Wide, 0);
 /** Serialise attributes for a string renderer (a present boolean attribute is written bare). */
 function serializeVideoAttributes(attrs, esc) {
     return Object.entries(attrs).map(([name, value]) => (value === '' ? ` ${name}` : ` ${name}="${esc(value)}"`)).join('');
@@ -567,5 +907,5 @@ function videoRuntimeOf(el) {
  * Generated bundle index. Do not edit.
  */
 
-export { CONSENT_GRANT_EVENT, CONSENT_PREFERENCES_EVENT, VIDEO_EMBED_ORIGINS, VIDEO_NODE_TYPE, VIDEO_PROVIDER_COMPANY, VIDEO_PROVIDER_LABEL, VIDEO_WORDS, VideoAttribute, VideoClass, VideoIcon, VideoKind, VideoMode, VideoRuntime, VideoSource, VideoTrait, attachVideoAt, attachVideos, documentConsentTransport, isThirdPartyPoster, parseVideoUrl, planVideo, readConsentRecord, serializeVideoAttributes, videoConsentCategory, videoEmbedUrl, videoInnerHtml, videoPlayLabel, videoPosterFileName, videoProp, videoRefOf, videoRootAttributes, videoRuntimeOf, videoSourceOf, videoThumbnailRequest, videoWords };
+export { CONSENT_GRANT_EVENT, CONSENT_PREFERENCES_EVENT, 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, frameFileName, frameIndexAt, frameLoadOrder, 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 };
 //# sourceMappingURL=vectoriox-iox-ui-media-core.mjs.map