@vectoriox/iox-ui 5.73.4 → 5.74.1

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

@@ -13,6 +13,8 @@ var FrameSet;
     FrameSet["Wide"] = "w";
     FrameSet["Phone"] = "p";
 })(FrameSet || (FrameSet = {}));
+/** At or under this width a screen is a phone. Scene's own limit says the same: scene-core reads media-core, never the reverse. */
+const FRAMES_PHONE_MAX_WIDTH = 767;
 var FrameExtension;
 (function (FrameExtension) {
     FrameExtension["Webp"] = "webp";
@@ -41,11 +43,13 @@ function normalizeFrameSequence(raw) {
     if (!wide || typeof value.base !== 'string' || !SAFE_BASE.test(value.base) || !ALL_EXTENSIONS.has(String(value.ext)))
         return null;
     const phone = setInfo(value.phone);
+    const phoneBase = phone && typeof value.phoneBase === 'string' && SAFE_BASE.test(value.phoneBase) ? value.phoneBase.replace(/\/+$/, '') : '';
     return {
         base: value.base.replace(/\/+$/, ''),
         ext: value.ext,
         wide,
         ...(phone ? { phone } : {}),
+        ...(phoneBase ? { phoneBase } : {}),
         ...(Number.isFinite(value.bytes) && value.bytes > 0 ? { bytes: value.bytes } : {}),
     };
 }
@@ -63,7 +67,8 @@ function frameFileName(index, ext) {
 }
 /** Picture `index` (from 0) of a set. */
 function frameUrl(sequence, set, index) {
-    return `${sequence.base}/${set}/${frameFileName(index, sequence.ext)}`;
+    const base = set === FrameSet.Phone && sequence.phoneBase ? sequence.phoneBase : sequence.base;
+    return `${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) {
@@ -75,6 +80,31 @@ function phoneFrameSrcset(sequence) {
 function frameSetFor(sequence, phone) {
     return phone && sequence.phone ? { set: FrameSet.Phone, info: sequence.phone } : { set: FrameSet.Wide, info: sequence.wide };
 }
+/** Where `played` % stands in a set of `count`: 2.5 is half way from the third picture to the fourth. */
+function framePosition(played, count) {
+    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. */
+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. */
+const FRAME_BLEND_STEPS = 32;
+/**
+ * The moment between two pictures. A long Scene gives a picture 50px of scroll or more, so a slow scroll would otherwise
+ * show the film stepping. Blending the two neighbours keeps it moving under the finger, at the cost of one more drawImage.
+ * A neighbour still loading never blends: the nearest arrived picture stands in, and null means none has.
+ */
+function frameBlendAt(loaded, position) {
+    const from = Math.floor(position);
+    const to = from + 1;
+    const mix = Math.round((position - from) * FRAME_BLEND_STEPS) / FRAME_BLEND_STEPS;
+    if (mix > 0 && mix < 1 && loaded[from] && loaded[to])
+        return { from, to, mix };
+    const nearest = nearestLoadedFrame(loaded, Math.round(position));
+    return nearest < 0 ? null : { from: nearest, to: nearest, mix: 0 };
+}
 /** The picture at `played` % of a set of `count`. */
 function frameIndexAt(played, count) {
     if (count <= 1)
@@ -168,11 +198,14 @@ class FramePlayer {
     constructor(el, sequence, options = {}) {
         this.el = el;
         this.sequence = sequence;
+        this.played = null;
+        this.restTimer = null;
+        this.restFrame = null;
         this.observer = null;
         this.canvas = null;
         this.context = null;
-        this.wanted = 0;
-        this.drawn = -1;
+        this.position = 0;
+        this.drawn = null;
         this.nextToLoad = 0;
         this.loading = 0;
         this.started = false;
@@ -199,8 +232,37 @@ class FramePlayer {
     }
     /** Stand at `played` %. */
     seek(played) {
-        this.wanted = frameIndexAt(played, this.info.count);
+        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. */
+    rest() {
+        this.restTimer = null;
+        const target = Math.round(this.position);
+        const step = () => {
+            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();
+    }
+    stopResting() {
+        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. */
     get detached() {
@@ -208,6 +270,8 @@ class FramePlayer {
     }
     destroy() {
         this.destroyed = true;
+        this.stopResting();
+        this.el.removeAttribute(FRAMES_SHOWING_ATTRIBUTE);
         this.observer?.disconnect();
         this.observer = null;
         for (const image of this.pending) {
@@ -266,15 +330,26 @@ class FramePlayer {
         image.src = frameUrl(this.sequence, this.set, index);
     }
     draw() {
-        const index = nearestLoadedFrame(this.images, this.wanted);
-        if (index < 0 || index === this.drawn)
+        const blend = frameBlendAt(this.images, this.position);
+        const last = this.drawn;
+        if (!blend || (last && last.from === blend.from && last.to === blend.to && last.mix === blend.mix))
             return;
-        const image = this.images[index];
+        const image = this.images[blend.from];
         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;
+        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) {
+            context.globalAlpha = blend.mix;
+            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;
     }
     ensureCanvas(image) {
         if (this.canvas)
@@ -639,7 +714,13 @@ function videoInnerHtml(plan, options) {
         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 image = (attrs) => `<img class="${VideoClass.Poster}" src="${esc(plan.poster)}"${attrs} alt="${esc(plan.title)}" decoding="async">`;
+        // A phone film is framed for a tall screen, so it is chosen by the screen, never by the pixels a high-density phone asks for.
+        if (own && plan.frames.phoneBase) {
+            const { width, height } = plan.frames.phone;
+            return `<picture><source media="(max-width: ${FRAMES_PHONE_MAX_WIDTH}px)" srcset="${esc(frameUrl(plan.frames, FrameSet.Phone, 0))}" width="${width}" height="${height}">${image(size)}</picture>`;
+        }
+        return image(`${srcset ? ` srcset="${esc(srcset)}" sizes="100vw"` : ''}${size}`);
     }
     const poster = plan.poster ? `<img class="${VideoClass.Poster}" src="${esc(plan.poster)}" alt="" loading="lazy" decoding="async">` : '';
     const label = esc(videoPlayLabel(plan, words));
@@ -907,5 +988,5 @@ function videoRuntimeOf(el) {
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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 };
 //# sourceMappingURL=vectoriox-iox-ui-media-core.mjs.map