@bendyline/squisq-video-react 2.4.12 → 2.4.13

package/dist/{chunk-7ZMJ25DC.js → chunk-2C4BEAWT.js}

@@ -267,7 +267,10 @@ var MIME_MAP = {
   webm: "video/webm"
 };
 var VISUAL_UPDATE_FALLBACK_MS = 100;
+var CAPTURE_URL_COMMIT_MAX_WAITS = 10;
 var CAPTURE_ASSET_TIMEOUT_MS = 15e3;
+var RENDER_API_TIMEOUT_MS = 15e3;
+var CAPTURE_SETUP_TIMEOUT_MS = 6e4;
 var RENDER_TIME_EPSILON_SECONDS = 1e-6;
 var POTENTIALLY_ANIMATED_IMAGE_URL = /(?:^data:image\/(?:gif|webp|avif)[;,]|\.(?:gif|webp|avif)(?:[?#]|$))/i;
 var CAPTURE_SVG_SELECTOR = "svg.block-svg";
@@ -419,8 +422,8 @@ async function primeIndeterminateCaptureVideos(captureRoot, primedVideos = /* @_
         primedVideos.add(video);
         return;
       }
+      video.dataset.captureSequential = "true";
       if (Number.isFinite(video.duration)) {
-        video.dataset.captureSequential = "true";
         primedVideos.add(video);
         return;
       }
@@ -443,7 +446,6 @@ async function primeIndeterminateCaptureVideos(captureRoot, primedVideos = /* @_
           video.currentTime = reachableRestoreTime;
         }
       );
-      video.dataset.captureSequential = "true";
       primedVideos.add(video);
       primedCount += 1;
     })
@@ -487,6 +489,7 @@ function createInlineProvider(images) {
 }
 function createCaptureMediaResolutionTracker(provider) {
   const pending = /* @__PURE__ */ new Set();
+  const resolvedUrls = /* @__PURE__ */ new Map();
   let resolutionGeneration = 0;
   let observedGeneration = 0;
   const trackedProvider = {
@@ -494,7 +497,8 @@ function createCaptureMediaResolutionTracker(provider) {
       resolutionGeneration += 1;
       const resolution = provider.resolveUrl(relativePath);
       const completion = resolution.then(
-        () => {
+        (url) => {
+          resolvedUrls.set(relativePath, url);
           pending.delete(completion);
         },
         () => {
@@ -521,12 +525,36 @@ function createCaptureMediaResolutionTracker(provider) {
       const changed = resolutionGeneration !== observedGeneration;
       observedGeneration = resolutionGeneration;
       return changed;
-    }
+    },
+    resolvedUrls: () => resolvedUrls
   };
 }
-async function waitForCaptureMediaResolutions(tracker) {
-  while (await tracker?.waitForSettled()) {
+function stripRelativePrefix(path) {
+  return path.replace(/^(?:\.\/)+/, "");
+}
+function showsUncommittedMediaUrl(root, resolved) {
+  const mapped = /* @__PURE__ */ new Set();
+  for (const [path, url] of resolved) {
+    if (url !== path) mapped.add(stripRelativePrefix(path));
+  }
+  if (mapped.size === 0) return false;
+  return Array.from(root.querySelectorAll("img[src], video[src], audio[src], source[src]")).some(
+    (element) => mapped.has(stripRelativePrefix(element.getAttribute("src") ?? ""))
+  );
+}
+async function waitForCaptureMediaResolutions(tracker, captureRoot) {
+  if (!tracker) return;
+  let changed = false;
+  while (await tracker.waitForSettled()) {
+    changed = true;
+    await waitForVisualUpdate();
+  }
+  if (!changed || !captureRoot) return;
+  for (let attempt = 0; attempt < CAPTURE_URL_COMMIT_MAX_WAITS && showsUncommittedMediaUrl(captureRoot, tracker.resolvedUrls()); attempt++) {
     await waitForVisualUpdate();
+    while (await tracker.waitForSettled()) {
+      await waitForVisualUpdate();
+    }
   }
 }
 function shouldIgnoreCaptureSibling(element, captureRoot) {
@@ -1325,7 +1353,7 @@ function useFrameCapture() {
         root.render(playerElement);
       }
       return new Promise((resolve, reject) => {
-        const timeout = setTimeout(() => {
+        const apiTimeout = setTimeout(() => {
           const api = renderAPIRef.current;
           const hasSeek = typeof api?.seekTo === "function";
           const hasDur = typeof api?.getDuration === "function";
@@ -1333,24 +1361,36 @@ function useFrameCapture() {
           const hasPlayer = rootEl ? rootEl.querySelector(".doc-player") !== null : false;
           reject(
             new Error(
-              `Render API did not initialize within 15s. seekTo=${hasSeek}, getDuration=${hasDur}, player=${hasPlayer}, root=${!!rootEl}`
+              `Render API did not initialize within ${RENDER_API_TIMEOUT_MS / 1e3}s. seekTo=${hasSeek}, getDuration=${hasDur}, player=${hasPlayer}, root=${!!rootEl}`
             )
           );
-        }, 15e3);
+        }, RENDER_API_TIMEOUT_MS);
         void renderAPIReady.then(async (api) => {
+          clearTimeout(apiTimeout);
+          let stage = "resolving media URLs";
+          const setupTimeout = setTimeout(() => {
+            reject(
+              new Error(
+                `Frame capture setup did not finish within ${CAPTURE_SETUP_TIMEOUT_MS / 1e3}s while ${stage}.`
+              )
+            );
+          }, CAPTURE_SETUP_TIMEOUT_MS);
           try {
             const captureRoot = container.querySelector("#squisq-capture-root");
             if (!(captureRoot instanceof HTMLElement)) {
               throw new Error("Capture root element not found after player initialization.");
             }
-            await waitForCaptureMediaResolutions(mediaResolutionTrackerRef.current);
+            await waitForCaptureMediaResolutions(mediaResolutionTrackerRef.current, captureRoot);
+            stage = "loading fonts and images";
             await waitForCaptureAssets(captureRoot, decodedImagesRef.current);
+            stage = "opening video decoders";
             await videoFrames.attach(captureRoot);
+            stage = "indexing video sources";
             await primeIndeterminateCaptureVideos(captureRoot, primedCaptureVideosRef.current);
-            clearTimeout(timeout);
+            clearTimeout(setupTimeout);
             resolve(api.getDuration());
           } catch (assetError) {
-            clearTimeout(timeout);
+            clearTimeout(setupTimeout);
             reject(assetError);
           }
         });
@@ -1399,7 +1439,7 @@ function useFrameCapture() {
           `Player committed ${renderedTime.toFixed(6)}s while capture requested ${time.toFixed(6)}s.`
         );
       }
-      await waitForCaptureMediaResolutions(mediaResolutionTrackerRef.current);
+      await waitForCaptureMediaResolutions(mediaResolutionTrackerRef.current, root);
       await waitForCaptureAssets(root, decodedImagesRef.current);
       const compositePlan = resolveScheduledVideoCompositePlan(root, {
         includeFullFrameOverlays: true

package/dist/{chunk-3EJKBFEK.js → chunk-M5AK4MMV.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-3NJDHK62.js";
 import {
   useFrameCapture
-} from "./chunk-7ZMJ25DC.js";
+} from "./chunk-2C4BEAWT.js";
 
 // src/CoverImageExportModal.tsx
 import { useCallback, useId, useRef, useState } from "react";

package/dist/{chunk-BNUM3BXO.js → chunk-RO52S6GO.js}

@@ -1,6 +1,6 @@
 import {
   useVideoExport
-} from "./chunk-ED7QK6VC.js";
+} from "./chunk-TUIVBMAK.js";
 
 // src/VideoExportModal.tsx
 import { useState, useCallback, useEffect, useId, useRef } from "react";

package/dist/{chunk-ED7QK6VC.js → chunk-TUIVBMAK.js}

@@ -1,6 +1,6 @@
 import {
   useFrameCapture
-} from "./chunk-7ZMJ25DC.js";
+} from "./chunk-2C4BEAWT.js";
 import {
   EXPORT_AUDIO_CHANNELS,
   EXPORT_AUDIO_SAMPLE_RATE,

package/dist/components/index.js

@@ -1,15 +1,15 @@
 import {
   VideoExportButton,
   VideoExportModal
-} from "../chunk-BNUM3BXO.js";
+} from "../chunk-RO52S6GO.js";
 import {
   CoverImageExportModal,
   coverImageFilename,
   validateCoverImageDimensions
-} from "../chunk-3EJKBFEK.js";
+} from "../chunk-M5AK4MMV.js";
 import "../chunk-3NJDHK62.js";
-import "../chunk-ED7QK6VC.js";
-import "../chunk-7ZMJ25DC.js";
+import "../chunk-TUIVBMAK.js";
+import "../chunk-2C4BEAWT.js";
 import "../chunk-4GFZ3GUE.js";
 import "../chunk-GBIYYDMY.js";
 import "../chunk-5MFQMJ5Z.js";

package/dist/cover-image/index.js

@@ -2,9 +2,9 @@ import {
   CoverImageExportModal,
   coverImageFilename,
   validateCoverImageDimensions
-} from "../chunk-3EJKBFEK.js";
+} from "../chunk-M5AK4MMV.js";
 import "../chunk-3NJDHK62.js";
-import "../chunk-7ZMJ25DC.js";
+import "../chunk-2C4BEAWT.js";
 import "../chunk-4GFZ3GUE.js";
 export {
   CoverImageExportModal,

package/dist/dashboard-image/index.js

@@ -7,7 +7,7 @@ import {
 } from "../chunk-3NJDHK62.js";
 import {
   useFrameCapture
-} from "../chunk-7ZMJ25DC.js";
+} from "../chunk-2C4BEAWT.js";
 import "../chunk-4GFZ3GUE.js";
 
 // src/DashboardImageExportModal.tsx

package/dist/hooks/index.js

@@ -3,10 +3,10 @@ import {
   resolveVideoCoverFramePlan,
   resolveVideoExportCover,
   useVideoExport
-} from "../chunk-ED7QK6VC.js";
+} from "../chunk-TUIVBMAK.js";
 import {
   useFrameCapture
-} from "../chunk-7ZMJ25DC.js";
+} from "../chunk-2C4BEAWT.js";
 import "../chunk-4GFZ3GUE.js";
 import "../chunk-GBIYYDMY.js";
 import "../chunk-5MFQMJ5Z.js";

package/dist/index.js

@@ -1,22 +1,22 @@
 import {
   VideoExportButton,
   VideoExportModal
-} from "./chunk-BNUM3BXO.js";
+} from "./chunk-RO52S6GO.js";
 import {
   CoverImageExportModal,
   coverImageFilename,
   validateCoverImageDimensions
-} from "./chunk-3EJKBFEK.js";
+} from "./chunk-M5AK4MMV.js";
 import "./chunk-3NJDHK62.js";
 import {
   DEFAULT_VIDEO_COVER_PRE_ROLL_SECONDS,
   resolveVideoCoverFramePlan,
   resolveVideoExportCover,
   useVideoExport
-} from "./chunk-ED7QK6VC.js";
+} from "./chunk-TUIVBMAK.js";
 import {
   useFrameCapture
-} from "./chunk-7ZMJ25DC.js";
+} from "./chunk-2C4BEAWT.js";
 import "./chunk-4GFZ3GUE.js";
 import {
   createEncoder,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-video-react",
-  "version": "2.4.12",
+  "version": "2.4.13",
   "description": "React components for browser-based MP4 and animated-GIF export of Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -79,7 +79,7 @@
   "dependencies": {
     "@bendyline/squisq": "2.11.8",
     "@bendyline/squisq-video": "2.3.11",
-    "@bendyline/squisq-react": "2.11.8",
+    "@bendyline/squisq-react": "2.11.9",
     "@ffmpeg/core": "0.12.9",
     "@ffmpeg/ffmpeg": "0.12.15",
     "@ffmpeg/util": "0.12.2",