@splinetool/viewer 2.0.8 → 2.0.10

package/build/hana-ui.js

@@ -1,5 +1,5 @@
 /* @ts-self-types="./hana.d.ts" */
-import { loadImageFromBytes, loadImageFromUrl, loadVideoFromBytes, loadVideoFromUrl } from './snippets/hana-82e9eb82a79dead4/js-imports.js';
+import { disposeVideo, loadImageFromBytes, loadImageFromUrl, loadVideoFromBytes, loadVideoFromUrl, videoFrameToken } from './snippets/hana-82e9eb82a79dead4/js-imports.js';
 
 
 export class DeviceLostPromise {
@@ -331,6 +331,22 @@ export class SceneController {
         const ret = wasm.scenecontroller_centerVectorData(this.__wbg_ptr);
         return takeObject(ret);
     }
+    /**
+     * Drop the export-time frame override for one video asset (see
+     * `setVideoExportFrame`): the renderer resumes sampling its `<video>`
+     * element and `seekVideos` drives it again. The export loop's per-video
+     * fallback for a WebCodecs source that stopped delivering mid-export.
+     * @param {ID} id
+     */
+    clearVideoExportFrame(id) {
+        wasm.scenecontroller_clearVideoExportFrame(this.__wbg_ptr, addHeapObject(id));
+    }
+    /**
+     * Drop every export-time video frame override (see `setVideoExportFrame`).
+     */
+    clearVideoExportFrames() {
+        wasm.scenecontroller_clearVideoExportFrames(this.__wbg_ptr);
+    }
     /**
      * @param {any} network
      * @param {Float2} size
@@ -898,8 +914,11 @@ export class SceneController {
         return takeObject(ret);
     }
     /**
+     * Resolves to whether any video seeked backward (wrapped across its
+     * loop point) — the export loop renders throwaway frames after a wrap
+     * to keep cold-path video→RGB conversion transients off captured frames.
      * @param {number} dt
-     * @returns {Promise<void>}
+     * @returns {Promise<boolean>}
      */
     seekVideos(dt) {
         const ret = wasm.scenecontroller_seekVideos(this.__wbg_ptr, dt);
@@ -983,6 +1002,20 @@ export class SceneController {
     setVectorTool(tool) {
         wasm.scenecontroller_setVectorTool(this.__wbg_ptr, addHeapObject(tool));
     }
+    /**
+     * Register an export-time frame override for a video asset: the renderer
+     * uploads this WebCodecs frame instead of sampling the `<video>` element,
+     * and `seekVideos` leaves the element alone. The caller keeps ownership
+     * of the frame — it must stay unclosed until the override is replaced or
+     * cleared, and `clearVideoExportFrames` must run before anything renders
+     * outside the export loop. WebGPU backend only (`isWebgpu`); the WebGL
+     * path still samples the element.
+     * @param {ID} id
+     * @param {VideoFrame} frame
+     */
+    setVideoExportFrame(id, frame) {
+        wasm.scenecontroller_setVideoExportFrame(this.__wbg_ptr, addHeapObject(id), addHeapObject(frame));
+    }
     /**
      * Snap a world-space resize handle position against other (non-selected) vertices.
      * `snap_x`/`snap_y` indicate which axes may snap. Returns the snapped world position.
@@ -1191,6 +1224,27 @@ export class SceneController {
     vectorStopContinueSubpath() {
         wasm.scenecontroller_vectorStopContinueSubpath(this.__wbg_ptr);
     }
+    /**
+     * The video fills the export loop should decode with WebCodecs, as
+     * `{ id, src }` objects (`src` is the loaded `<video>` element's source:
+     * the asset's own URL for streamed loads, a `blob:` URL for byte-loaded
+     * ones — either way the same URL the element itself fetched). Enumerated from the start events' video actions — the exact set
+     * `seekVideos` drives — so the WebCodecs path animates precisely the
+     * fills the element path would: a fill without a play action stays a
+     * static frame on both paths and both backends. Scoped to actions
+     * targeting `frame_id`'s subtree on purpose: enumerating the whole
+     * document put a live decoder behind every video in the file (74 in one
+     * real doc), turning a 5s export into 74 decode streams. Videos still
+     * loading are omitted, and videos outside the subtree stay on the
+     * seek-driven element path — both remain correct, just less
+     * stable/deterministic.
+     * @param {ID} frame_id
+     * @returns {Array<any>}
+     */
+    videoFillSources(frame_id) {
+        const ret = wasm.scenecontroller_videoFillSources(this.__wbg_ptr, addHeapObject(frame_id));
+        return takeObject(ret);
+    }
     /**
      * @param {Float2} pos
      * @returns {Float2}
@@ -1764,6 +1818,17 @@ function __wbg_get_imports() {
         __wbg_dispatchWorkgroups_afb2344298c62227: function(arg0, arg1, arg2, arg3) {
             getObject(arg0).dispatchWorkgroups(arg1 >>> 0, arg2 >>> 0, arg3 >>> 0);
         },
+        __wbg_displayHeight_465673c1823a1db3: function(arg0) {
+            const ret = getObject(arg0).displayHeight;
+            return ret;
+        },
+        __wbg_displayWidth_73729fd8eb965076: function(arg0) {
+            const ret = getObject(arg0).displayWidth;
+            return ret;
+        },
+        __wbg_disposeVideo_c94c1ccd57a63f68: function(arg0) {
+            disposeVideo(getObject(arg0));
+        },
         __wbg_document_aceb08cd6489baf5: function(arg0) {
             const ret = getObject(arg0).document;
             return isLikeNone(ret) ? 0 : addHeapObject(ret);
@@ -2410,7 +2475,7 @@ function __wbg_get_imports() {
                     const a = state0.a;
                     state0.a = 0;
                     try {
-                        return __wasm_bindgen_func_elem_14112(a, state0.b, arg0, arg1);
+                        return __wasm_bindgen_func_elem_14186(a, state0.b, arg0, arg1);
                     } finally {
                         state0.a = a;
                     }
@@ -2456,7 +2521,7 @@ function __wbg_get_imports() {
                     const a = state0.a;
                     state0.a = 0;
                     try {
-                        return __wasm_bindgen_func_elem_14112(a, state0.b, arg0, arg1);
+                        return __wasm_bindgen_func_elem_14186(a, state0.b, arg0, arg1);
                     } finally {
                         state0.a = a;
                     }
@@ -2583,6 +2648,10 @@ function __wbg_get_imports() {
         __wbg_readPixels_d00c1cae608273d8: function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7) {
             getObject(arg0).readPixels(arg1, arg2, arg3, arg4, arg5 >>> 0, arg6 >>> 0, arg7);
         }, arguments); },
+        __wbg_readyState_77b1b1db1b8c2a5f: function(arg0) {
+            const ret = getObject(arg0).readyState;
+            return ret;
+        },
         __wbg_reason_b02cd587d1a09948: function(arg0) {
             const ret = getObject(arg0).reason;
             return (__wbindgen_enum_GpuDeviceLostReason.indexOf(ret) + 1 || 3) - 1;
@@ -3313,6 +3382,13 @@ function __wbg_get_imports() {
             const ret = getObject(arg0).size;
             return ret;
         },
+        __wbg_src_f0e9281991fbd919: function(arg0, arg1) {
+            const ret = getObject(arg1).src;
+            const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_export, wasm.__wbindgen_export2);
+            const len1 = WASM_VECTOR_LEN;
+            getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true);
+            getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true);
+        },
         __wbg_stack_3b0d974bbf31e44f: function(arg0, arg1) {
             const ret = getObject(arg1).stack;
             const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_export, wasm.__wbindgen_export2);
@@ -3531,6 +3607,10 @@ function __wbg_get_imports() {
         __wbg_vertexAttribPointer_3bc50c0431082f73: function(arg0, arg1, arg2, arg3, arg4, arg5, arg6) {
             getObject(arg0).vertexAttribPointer(arg1 >>> 0, arg2, arg3 >>> 0, arg4 !== 0, arg5, arg6);
         },
+        __wbg_videoFrameToken_6f05524e85fa2b75: function(arg0) {
+            const ret = videoFrameToken(getObject(arg0));
+            return ret;
+        },
         __wbg_videoHeight_e267fd1e74bb1b06: function(arg0) {
             const ret = getObject(arg0).videoHeight;
             return ret;
@@ -3556,48 +3636,48 @@ function __wbg_get_imports() {
             getObject(arg0).writeTexture(getObject(arg1), getArrayU8FromWasm0(arg2, arg3), getObject(arg4), getObject(arg5));
         }, arguments); },
         __wbindgen_cast_0000000000000001: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [Externref], shim_idx: 1052, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_14110);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [Externref], shim_idx: 1054, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_14184);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000002: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("Event")], shim_idx: 32, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_5086);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("Event")], shim_idx: 34, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_5119);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000003: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("GPUComputePipeline")], shim_idx: 927, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_11070);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("GPUComputePipeline")], shim_idx: 929, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_11140);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000004: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("GPUDevice")], shim_idx: 927, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_11070_3);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("GPUDevice")], shim_idx: 929, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_11140_3);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000005: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("GPUDeviceLostInfo")], shim_idx: 928, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_11071);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("GPUDeviceLostInfo")], shim_idx: 930, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_11141);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000006: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("GPURenderPipeline")], shim_idx: 927, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_11070_5);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("GPURenderPipeline")], shim_idx: 929, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_11140_5);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000007: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("any")], shim_idx: 927, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_11070_6);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("any")], shim_idx: 929, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_11140_6);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000008: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("undefined")], shim_idx: 927, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_11070_7);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("undefined")], shim_idx: 929, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_11140_7);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000009: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [], shim_idx: 1035, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_12477);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [], shim_idx: 1037, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_12547);
             return addHeapObject(ret);
         },
         __wbindgen_cast_000000000000000a: function(arg0) {
@@ -3671,22 +3751,22 @@ function __wbg_get_imports() {
     };
 }
 
-function __wasm_bindgen_func_elem_12477(arg0, arg1) {
-    wasm.__wasm_bindgen_func_elem_12477(arg0, arg1);
+function __wasm_bindgen_func_elem_12547(arg0, arg1) {
+    wasm.__wasm_bindgen_func_elem_12547(arg0, arg1);
 }
 
-function __wasm_bindgen_func_elem_5086(arg0, arg1, arg2) {
-    wasm.__wasm_bindgen_func_elem_5086(arg0, arg1, addHeapObject(arg2));
+function __wasm_bindgen_func_elem_5119(arg0, arg1, arg2) {
+    wasm.__wasm_bindgen_func_elem_5119(arg0, arg1, addHeapObject(arg2));
 }
 
-function __wasm_bindgen_func_elem_11071(arg0, arg1, arg2) {
-    wasm.__wasm_bindgen_func_elem_11071(arg0, arg1, addHeapObject(arg2));
+function __wasm_bindgen_func_elem_11141(arg0, arg1, arg2) {
+    wasm.__wasm_bindgen_func_elem_11141(arg0, arg1, addHeapObject(arg2));
 }
 
-function __wasm_bindgen_func_elem_14110(arg0, arg1, arg2) {
+function __wasm_bindgen_func_elem_14184(arg0, arg1, arg2) {
     try {
         const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
-        wasm.__wasm_bindgen_func_elem_14110(retptr, arg0, arg1, addHeapObject(arg2));
+        wasm.__wasm_bindgen_func_elem_14184(retptr, arg0, arg1, addHeapObject(arg2));
         var r0 = getDataViewMemory0().getInt32(retptr + 4 * 0, true);
         var r1 = getDataViewMemory0().getInt32(retptr + 4 * 1, true);
         if (r1) {
@@ -3697,10 +3777,10 @@ function __wasm_bindgen_func_elem_14110(arg0, arg1, arg2) {
     }
 }
 
-function __wasm_bindgen_func_elem_11070(arg0, arg1, arg2) {
+function __wasm_bindgen_func_elem_11140(arg0, arg1, arg2) {
     try {
         const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
-        wasm.__wasm_bindgen_func_elem_11070(retptr, arg0, arg1, addHeapObject(arg2));
+        wasm.__wasm_bindgen_func_elem_11140(retptr, arg0, arg1, addHeapObject(arg2));
         var r0 = getDataViewMemory0().getInt32(retptr + 4 * 0, true);
         var r1 = getDataViewMemory0().getInt32(retptr + 4 * 1, true);
         if (r1) {
@@ -3711,10 +3791,10 @@ function __wasm_bindgen_func_elem_11070(arg0, arg1, arg2) {
     }
 }
 
-function __wasm_bindgen_func_elem_11070_3(arg0, arg1, arg2) {
+function __wasm_bindgen_func_elem_11140_3(arg0, arg1, arg2) {
     try {
         const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
-        wasm.__wasm_bindgen_func_elem_11070_3(retptr, arg0, arg1, addHeapObject(arg2));
+        wasm.__wasm_bindgen_func_elem_11140_3(retptr, arg0, arg1, addHeapObject(arg2));
         var r0 = getDataViewMemory0().getInt32(retptr + 4 * 0, true);
         var r1 = getDataViewMemory0().getInt32(retptr + 4 * 1, true);
         if (r1) {
@@ -3725,10 +3805,10 @@ function __wasm_bindgen_func_elem_11070_3(arg0, arg1, arg2) {
     }
 }
 
-function __wasm_bindgen_func_elem_11070_5(arg0, arg1, arg2) {
+function __wasm_bindgen_func_elem_11140_5(arg0, arg1, arg2) {
     try {
         const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
-        wasm.__wasm_bindgen_func_elem_11070_5(retptr, arg0, arg1, addHeapObject(arg2));
+        wasm.__wasm_bindgen_func_elem_11140_5(retptr, arg0, arg1, addHeapObject(arg2));
         var r0 = getDataViewMemory0().getInt32(retptr + 4 * 0, true);
         var r1 = getDataViewMemory0().getInt32(retptr + 4 * 1, true);
         if (r1) {
@@ -3739,10 +3819,10 @@ function __wasm_bindgen_func_elem_11070_5(arg0, arg1, arg2) {
     }
 }
 
-function __wasm_bindgen_func_elem_11070_6(arg0, arg1, arg2) {
+function __wasm_bindgen_func_elem_11140_6(arg0, arg1, arg2) {
     try {
         const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
-        wasm.__wasm_bindgen_func_elem_11070_6(retptr, arg0, arg1, addHeapObject(arg2));
+        wasm.__wasm_bindgen_func_elem_11140_6(retptr, arg0, arg1, addHeapObject(arg2));
         var r0 = getDataViewMemory0().getInt32(retptr + 4 * 0, true);
         var r1 = getDataViewMemory0().getInt32(retptr + 4 * 1, true);
         if (r1) {
@@ -3753,10 +3833,10 @@ function __wasm_bindgen_func_elem_11070_6(arg0, arg1, arg2) {
     }
 }
 
-function __wasm_bindgen_func_elem_11070_7(arg0, arg1, arg2) {
+function __wasm_bindgen_func_elem_11140_7(arg0, arg1, arg2) {
     try {
         const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
-        wasm.__wasm_bindgen_func_elem_11070_7(retptr, arg0, arg1, addHeapObject(arg2));
+        wasm.__wasm_bindgen_func_elem_11140_7(retptr, arg0, arg1, addHeapObject(arg2));
         var r0 = getDataViewMemory0().getInt32(retptr + 4 * 0, true);
         var r1 = getDataViewMemory0().getInt32(retptr + 4 * 1, true);
         if (r1) {
@@ -3767,8 +3847,8 @@ function __wasm_bindgen_func_elem_11070_7(arg0, arg1, arg2) {
     }
 }
 
-function __wasm_bindgen_func_elem_14112(arg0, arg1, arg2, arg3) {
-    wasm.__wasm_bindgen_func_elem_14112(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
+function __wasm_bindgen_func_elem_14186(arg0, arg1, arg2, arg3) {
+    wasm.__wasm_bindgen_func_elem_14186(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
 }
 
 

package/build/snippets/hana-82e9eb82a79dead4/js-imports.js

@@ -1,93 +1,220 @@
-
 export async function loadImageFromBytes(bytes) {
-    const blob = new Blob([bytes])
-    const url = URL.createObjectURL(blob)
-    return createImageBitmap(blob).finally(() => {
-      URL.revokeObjectURL(url)
-    })
+  return createImageBitmap(new Blob([bytes]))
 }
 
 export async function loadImageFromUrl(url) {
-    return fetch(url)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`Failed to fetch image: ${response.statusText}`);
-            }
-            return response.blob();
-        })
-        .then(blob => createImageBitmap(blob));
+  return fetch(url)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`Failed to fetch image: ${response.statusText}`)
+      }
+      return response.blob()
+    })
+    .then((blob) => createImageBitmap(blob))
 }
 
 // Video Imports
-function setupVideo(video) {
-    video.preload = "auto"; 
-    video.autoplay = true; //iOs hack to show the first frame
-    video.loop = true;
-    video.muted = true;
-    video.playsInline = true;
-    video.currentTime = 0.01;
-    video.load();
-
-    video.onloadeddata = () => {
-        video.muted = true;
-        // DOMException: The play() request was interrupted by a new load request.
-        // https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
-        const playPromise = video.play();
-
-        if (playPromise !== undefined) {
-            playPromise
-                .then((_) => {
-                    // Automatic playback started! Do nothing all good!
-                })
-                .catch(() => {
-                    // for some reason the video could not be played (The play() request was interrupted by a new load request.)
-                    // so let's try to play it again
-                    video.play();
-                }).finally(() => {
-                    video.pause();
-                });
-        }
-    };
-
-    let copyVideo = false;
-    video.addEventListener("playing", function() {
-        copyVideo = true;
-    }, true);
-
-    return new Promise((resolve) => {
-        const checkVideo = () => {
-            if (copyVideo) {
-                resolve(video);
-            } else {
-                setTimeout(checkVideo, 10);
-            }
-        };
-        checkVideo();
-    });
-} 
 
+let videoFrameSeq = 0
 
-export async function loadVideoFromBytes(bytes) {
-    const blob = new Blob([bytes])
-    const video = document.createElement('video');
-    video.src = URL.createObjectURL(blob);
-    return setupVideo(video);
+// Fallback tokens (see `videoFrameToken`) are the media clock offset per element
+// by this stride, so two elements' ranges stay disjoint for any media under ~11.5 days.
+const MEDIA_CLOCK_STRIDE = 1e6
+
+// `HTMLMediaElement.HAVE_CURRENT_DATA` — a decoded frame the renderer can sample.
+const HAVE_CURRENT_DATA = 2
+
+// Generous, because a slow decode is not a failure — but bounded, because a source
+// the browser silently declines must not wedge the load forever.
+const VIDEO_READY_TIMEOUT_MS = 30000
+
+// Maintains a token that changes exactly when the element presents a new frame,
+// so the renderer can tell whether a GPU copy is needed at all.
+//
+// The callback chain re-arms itself and keeps `video` reachable until
+// `disposeVideo` cancels it. It only fires on a presented frame, so a paused or
+// stalled element costs nothing.
+function trackPresentedFrames(video) {
+  if (typeof video.requestVideoFrameCallback !== 'function') {
+    // No presented-frame signal: `videoFrameToken` falls back to the media clock,
+    // offset per element to keep the guarantee below.
+    video.hanaClockBase = ++videoFrameSeq * MEDIA_CLOCK_STRIDE
+    return
+  }
+
+  // One global sequence, so no two elements ever report the same token: when an
+  // asset is replaced, the token the renderer still holds for the displaced
+  // element cannot collide with the replacement's.
+  video.hanaPresentedFrames = ++videoFrameSeq
+  const bump = () => {
+    // Disposal detaches the source, which fires `seeked` on the way out.
+    if (video.hanaDisposed) return
+    video.hanaPresentedFrames = ++videoFrameSeq
+  }
+
+  // A seek repaints a paused element without necessarily running the frame
+  // callback, and the video export seeks frame by frame with the element paused —
+  // it must never be handed the texture from the previous seek.
+  video.addEventListener('seeked', bump)
+
+  const onFrame = () => {
+    bump()
+    // Never re-arm a disposed element: that resurrects the cancelled chain.
+    if (video.hanaDisposed) return
+    video.hanaFrameCallback = video.requestVideoFrameCallback(onFrame)
+  }
+  video.hanaFrameCallback = video.requestVideoFrameCallback(onFrame)
 }
 
+// Read by the renderer once per frame per video. Where
+// `requestVideoFrameCallback` is missing, falls back to the media clock: browsers
+// advance `currentTime` at frame granularity, so it answers the same question. The
+// per-element base keeps the cross-element guarantee across a reload, where
+// `Assets::insert_video` replaces the element under the same id.
+export function videoFrameToken(video) {
+  const presented = video.hanaPresentedFrames
+  return presented === undefined ? video.hanaClockBase + video.currentTime : presented
+}
 
-export async function loadVideoFromUrl(url) {
-    return fetch(url)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`Failed to fetch video: ${response.statusText}`);
-            }
-            return response.blob();
+// Only for `Local(bytes)`, which has no URL to stream from. A blob: URL pins its
+// Blob — the whole file — until revoked, so keep it on the element for
+// `disposeVideo` to release.
+function setVideoSourceFromBlob(video, blob) {
+  video.hanaObjectUrl = URL.createObjectURL(blob)
+  video.src = video.hanaObjectUrl
+}
+
+// Releases everything the element holds: the frame-callback chain, the blob: URL
+// mapping, and the buffered media and decoder behind it. Runs from `OwnedVideo`'s
+// `Drop` in `assets.rs`. Idempotent, and each step is independently conditional —
+// an element loaded without a blob: URL still gets the rest of the teardown.
+export function disposeVideo(video) {
+  if (video.hanaDisposed) return
+  // Set first: the steps below fire events that must not read as a live element.
+  video.hanaDisposed = true
+
+  const callback = video.hanaFrameCallback
+  if (callback !== undefined) {
+    video.hanaFrameCallback = undefined
+    // A throw here must not skip the rest of the teardown.
+    if (typeof video.cancelVideoFrameCallback === 'function') {
+      video.cancelVideoFrameCallback(callback)
+    }
+  }
+
+  const url = video.hanaObjectUrl
+  if (url !== undefined) {
+    video.hanaObjectUrl = undefined
+    URL.revokeObjectURL(url)
+  }
+
+  video.pause()
+  // Revoking only drops the URL -> Blob mapping. Detaching the source is what
+  // actually releases the media the element has buffered and its decoder.
+  video.removeAttribute('src')
+  video.load()
+}
+
+// Resolves once the element holds a frame the renderer can sample, rejects if it
+// never will. Every branch settles: an unsettled load holds its `PendingLoadGuard`,
+// and headless hosts poll `Assets::pending_loads` to know a document is ready.
+//
+// Readiness is `loadeddata`, not `playing`: the video export drives the element
+// paused, so `playing` never fires there, and a blocked autoplay is not a failure.
+function whenSampleable(video) {
+  const mediaError = (prefix) => {
+    const err = video.error
+    return new Error(err === null ? prefix : `${prefix} (code ${err.code}: ${err.message})`)
+  }
+  // A rejected load never becomes an `OwnedVideo`, so nothing else releases the
+  // element: it would pin its blob: URL for the page lifetime and, if it buffers
+  // after a timeout, decode invisibly on loop (`autoplay` and `loop` stay set). The
+  // error is built first — `disposeVideo`'s `load()` clears `video.error`.
+  const failure = (prefix) => {
+    const err = mediaError(prefix)
+    disposeVideo(video)
+    return err
+  }
+
+  if (video.error !== null) return Promise.reject(failure('video failed to load'))
+  if (video.readyState >= HAVE_CURRENT_DATA) return Promise.resolve(video)
+
+  return new Promise((resolve, reject) => {
+    // Armed first so `settle` can clear it; nothing below runs this tick.
+    const timer = setTimeout(
+      () => settle(reject, failure('video timed out before presenting a frame')),
+      VIDEO_READY_TIMEOUT_MS,
+    )
+    const settle = (finish, value) => {
+      clearTimeout(timer)
+      video.removeEventListener('loadeddata', onReady)
+      video.removeEventListener('canplay', onReady)
+      video.removeEventListener('error', onError)
+      finish(value)
+    }
+    const onReady = () => settle(resolve, video)
+    const onError = () => settle(reject, failure('video failed to load'))
+
+    video.addEventListener('loadeddata', onReady)
+    // A partly-loaded source can become sampleable without a fresh `loadeddata`.
+    video.addEventListener('canplay', onReady)
+    video.addEventListener('error', onError)
+  })
+}
+
+function setupVideo(video) {
+  video.preload = 'auto'
+  video.autoplay = true //iOs hack to show the first frame
+  video.loop = true
+  video.muted = true
+  video.playsInline = true
+  video.currentTime = 0.01
+  video.load()
+
+  video.onloadeddata = () => {
+    video.muted = true
+    // DOMException: The play() request was interrupted by a new load request.
+    // https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
+    const playPromise = video.play()
+
+    if (playPromise !== undefined) {
+      playPromise
+        .then((_) => {
+          // Automatic playback started! Do nothing all good!
+        })
+        .catch(() => {
+          // for some reason the video could not be played (The play() request was interrupted by a new load request.)
+          // so let's try to play it again
+          video.play()
+        })
+        .finally(() => {
+          video.pause()
         })
-        .then(async blob => {
-            const video = document.createElement('video');
-            video.src = URL.createObjectURL(blob);
-            return setupVideo(video);
-        });
+    }
+  }
+
+  trackPresentedFrames(video)
+
+  return whenSampleable(video)
 }
 
+export async function loadVideoFromBytes(bytes) {
+  const video = document.createElement('video')
+  setVideoSourceFromBlob(video, new Blob([bytes]))
+  return setupVideo(video)
+}
 
+// Streams from `url` instead of fetching it into a Blob first, so the browser can
+// range-request it, playback starts before the last byte lands, and the file never
+// sits in memory whole.
+//
+// `crossOrigin` must be set before `src`: without it a cross-origin element is
+// tainted and every texture upload throws a SecurityError. It costs no reach — the
+// `fetch` this replaces was already a CORS request, so any URL that used to load
+// still does.
+export async function loadVideoFromUrl(url) {
+  const video = document.createElement('video')
+  video.crossOrigin = 'anonymous'
+  video.src = url
+  return setupVideo(video)
+}