From 7ea3a235dae502a6d1f36bebbfc086f6cb365fc1 Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Mon, 25 May 2026 11:21:38 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20filmstrip=20=E2=80=94=20fetch=20video=20?=
 =?UTF-8?q?chunk=20as=20Blob=20URL,=20append=20probe=20to=20DOM,=20add=20t?=
 =?UTF-8?q?imeout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 services/web-ui/public/screens-asset.jsx | 35 +++++++++++++++++-------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/services/web-ui/public/screens-asset.jsx b/services/web-ui/public/screens-asset.jsx
index 65d0966..8d8c22d 100644
--- a/services/web-ui/public/screens-asset.jsx
+++ b/services/web-ui/public/screens-asset.jsx
@@ -79,6 +79,10 @@ function AssetDetail({ asset, onClose }) {
   }, [streamUrl, streamType]);
 
   // Build filmstrip from real video frames. HLS streams use hls.js probe.
+  // For MP4, we fetch the first 10 MB as a Blob to feed the probe video —
+  // this works reliably even in headless browsers where <video> network loading
+  // often stalls, and ensures the moov atom (placed at the start by faststart)
+  // is already buffered when the probe element reads it.
   React.useEffect(() => {
     if (!streamUrl || totalMs <= 0) {
       setFilmFrames([]);
@@ -88,19 +92,23 @@ function AssetDetail({ asset, onClose }) {
     let cancelled = false;
     const build = async function() {
       setFilmstripLoading(true);
-      const probe = document.createElement('video');
-      probe.crossOrigin = 'anonymous';
-      probe.muted = true;
-      probe.playsInline = true;
-      probe.preload = 'auto';
-      probe.style.cssText = 'position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;pointer-events:none';
-      document.body.appendChild(probe);
+      let probe = null;
+      let blobUrl = null;
       const timeout = setTimeout(function() {
-        probe.remove();
+        if (blobUrl) URL.revokeObjectURL(blobUrl);
+        if (probe) probe.remove();
         if (!cancelled) { setFilmFrames([]); setFilmstripLoading(false); }
         cancelled = true;
       }, 15000);
       try {
+        probe = document.createElement('video');
+        probe.crossOrigin = 'anonymous';
+        probe.muted = true;
+        probe.playsInline = true;
+        probe.preload = 'auto';
+        probe.style.cssText = 'position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;pointer-events:none';
+        document.body.appendChild(probe);
+
         if (streamType === 'hls') {
           if (!window.Hls) throw new Error('hls.js not loaded');
           await new Promise(function(resolve, reject) {
@@ -114,10 +122,16 @@ function AssetDetail({ asset, onClose }) {
             hls.attachMedia(probe);
           });
         } else {
+          // Pre-buffer the first 10 MB as a Blob — proxies use faststart so
+          // the moov atom lives at the start, making this sufficient to parse
+          // the full duration and seek any frame.
+          const resp = await fetch(streamUrl, { headers: { Range: 'bytes=0-10485760' } });
+          const blob = await resp.blob();
+          blobUrl = URL.createObjectURL(blob);
           await new Promise(function(resolve, reject) {
             probe.onloadedmetadata = resolve;
             probe.onerror = reject;
-            probe.src = streamUrl;
+            probe.src = blobUrl;
           });
         }
         const frameCount = 28;
@@ -154,7 +168,8 @@ function AssetDetail({ asset, onClose }) {
         if (!cancelled) setFilmFrames([]);
       } finally {
         clearTimeout(timeout);
-        probe.remove();
+        if (blobUrl) URL.revokeObjectURL(blobUrl);
+        if (probe) probe.remove();
         if (!cancelled) setFilmstripLoading(false);
       }
     };