@bendyline/squisq-video-react 2.3.3 → 2.3.5

package/dist/{chunk-UXTYD6U5.js → chunk-DIWB5BH4.js}

@@ -1,6 +1,6 @@
 import {
   useFrameCapture
-} from "./chunk-I5PNMCSZ.js";
+} from "./chunk-UYJ7G34U.js";
 import {
   EXPORT_AUDIO_CHANNELS,
   EXPORT_AUDIO_SAMPLE_RATE,

package/dist/{chunk-FX5CHFGY.js → chunk-J2O4TPEO.js}

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

package/dist/{chunk-I5PNMCSZ.js → chunk-UYJ7G34U.js}

@@ -19,6 +19,7 @@ var MIME_MAP = {
   mp4: "video/mp4",
   webm: "video/webm"
 };
+var VISUAL_UPDATE_FALLBACK_MS = 100;
 var CAPTURE_ASSET_TIMEOUT_MS = 15e3;
 var RENDER_TIME_EPSILON_SECONDS = 1e-6;
 var POTENTIALLY_ANIMATED_IMAGE_URL = /(?:^data:image\/(?:gif|webp|avif)[;,]|\.(?:gif|webp|avif)(?:[?#]|$))/i;
@@ -29,6 +30,31 @@ var SCHEDULED_MEDIA_SELECTOR = ".doc-player__media-clips";
 var SCHEDULED_VIDEO_SELECTOR = `${SCHEDULED_MEDIA_SELECTOR} video[data-clip-id]`;
 var CAPTION_OVERLAY_SELECTOR = ".caption-overlay, .social-caption-overlay";
 var COVER_BLOCK_SELECTOR = ".doc-player__block--cover";
+function waitForVisualUpdate(frameCount = 1) {
+  return new Promise((resolve) => {
+    let settled = false;
+    let animationFrame = null;
+    const finish = () => {
+      if (settled) return;
+      settled = true;
+      window.clearTimeout(fallback);
+      if (animationFrame !== null) window.cancelAnimationFrame(animationFrame);
+      resolve();
+    };
+    const fallback = window.setTimeout(
+      finish,
+      document.visibilityState === "visible" ? VISUAL_UPDATE_FALLBACK_MS : 0
+    );
+    if (document.visibilityState !== "visible") return;
+    const waitForFrame = (remaining) => {
+      animationFrame = window.requestAnimationFrame(() => {
+        if (remaining <= 1) finish();
+        else waitForFrame(remaining - 1);
+      });
+    };
+    waitForFrame(Math.max(1, frameCount));
+  });
+}
 async function waitForImageDecode(image) {
   const src = image.currentSrc || image.src;
   if (!src) return;
@@ -211,6 +237,50 @@ function createInlineProvider(images) {
     }
   };
 }
+function createCaptureMediaResolutionTracker(provider) {
+  const pending = /* @__PURE__ */ new Set();
+  let resolutionGeneration = 0;
+  let observedGeneration = 0;
+  const trackedProvider = {
+    resolveUrl(relativePath) {
+      resolutionGeneration += 1;
+      const resolution = provider.resolveUrl(relativePath);
+      const completion = resolution.then(
+        () => {
+          pending.delete(completion);
+        },
+        () => {
+          pending.delete(completion);
+        }
+      );
+      pending.add(completion);
+      return resolution;
+    },
+    listMedia: () => provider.listMedia(),
+    addMedia: (name, data, mimeType) => provider.addMedia(name, data, mimeType),
+    removeMedia: (relativePath) => provider.removeMedia(relativePath),
+    // The frame-capture hook retains ownership of inline providers and callers
+    // retain ownership of supplied providers. Context consumers must never
+    // dispose the wrapper and accidentally revoke the caller's live URLs.
+    dispose: () => void 0
+  };
+  return {
+    provider: trackedProvider,
+    async waitForSettled() {
+      while (pending.size > 0) {
+        await Promise.all([...pending]);
+      }
+      const changed = resolutionGeneration !== observedGeneration;
+      observedGeneration = resolutionGeneration;
+      return changed;
+    }
+  };
+}
+async function waitForCaptureMediaResolutions(tracker) {
+  while (await tracker?.waitForSettled()) {
+    await waitForVisualUpdate();
+  }
+}
 function shouldIgnoreCaptureSibling(element, captureRoot) {
   const { head } = captureRoot.ownerDocument;
   const isInDocumentHead = element === head || head.contains(element);
@@ -805,6 +875,7 @@ function useFrameCapture() {
   const rootRef = useRef(null);
   const renderAPIRef = useRef(null);
   const mediaProviderRef = useRef(null);
+  const mediaResolutionTrackerRef = useRef(null);
   const ownsMediaProviderRef = useRef(false);
   const captureCanvasRef = useRef(null);
   const captureBaseCanvasRef = useRef(null);
@@ -832,6 +903,7 @@ function useFrameCapture() {
         containerRef.current = null;
         renderAPIRef.current = null;
         mediaProviderRef.current = null;
+        mediaResolutionTrackerRef.current = null;
         ownsMediaProviderRef.current = false;
         captureCanvasRef.current = null;
         captureBaseCanvasRef.current = null;
@@ -901,6 +973,8 @@ function useFrameCapture() {
       container.appendChild(renderRoot);
       const mediaProvider = renderOptions.images ? createInlineProvider(renderOptions.images) : renderOptions.mediaProvider ?? null;
       mediaProviderRef.current = mediaProvider;
+      const mediaResolutionTracker = mediaProvider ? createCaptureMediaResolutionTracker(mediaProvider) : null;
+      mediaResolutionTrackerRef.current = mediaResolutionTracker;
       ownsMediaProviderRef.current = !!renderOptions.images;
       const root = createRoot(renderRoot);
       rootRef.current = root;
@@ -935,7 +1009,13 @@ function useFrameCapture() {
       });
       await new Promise((resolve) => setTimeout(resolve, 0));
       if (mediaProvider) {
-        root.render(createElement(MediaContext.Provider, { value: mediaProvider }, playerElement));
+        root.render(
+          createElement(
+            MediaContext.Provider,
+            { value: mediaResolutionTracker.provider },
+            playerElement
+          )
+        );
       } else {
         root.render(playerElement);
       }
@@ -958,6 +1038,7 @@ function useFrameCapture() {
             if (!(captureRoot instanceof HTMLElement)) {
               throw new Error("Capture root element not found after player initialization.");
             }
+            await waitForCaptureMediaResolutions(mediaResolutionTrackerRef.current);
             await waitForCaptureAssets(captureRoot, decodedImagesRef.current);
             await primeIndeterminateCaptureVideos(captureRoot, primedCaptureVideosRef.current);
             clearTimeout(timeout);
@@ -1010,6 +1091,7 @@ function useFrameCapture() {
           `Player committed ${renderedTime.toFixed(6)}s while capture requested ${time.toFixed(6)}s.`
         );
       }
+      await waitForCaptureMediaResolutions(mediaResolutionTrackerRef.current);
       await waitForCaptureAssets(root, decodedImagesRef.current);
       const compositePlan = resolveScheduledVideoCompositePlan(root, {
         includeFullFrameOverlays: true
@@ -1160,6 +1242,7 @@ function useFrameCapture() {
     }
     if (ownsMediaProviderRef.current) mediaProviderRef.current?.dispose();
     mediaProviderRef.current = null;
+    mediaResolutionTrackerRef.current = null;
     ownsMediaProviderRef.current = false;
     if (captureCanvasRef.current) {
       captureCanvasRef.current.width = 0;

package/dist/{chunk-YZN7URUB.js → chunk-ZMDTR472.js}

@@ -1,6 +1,6 @@
 import {
   useFrameCapture
-} from "./chunk-I5PNMCSZ.js";
+} from "./chunk-UYJ7G34U.js";
 
 // src/CoverImageExportModal.tsx
 import { useCallback, useId, useRef, useState } from "react";

package/dist/components/index.js

@@ -1,14 +1,14 @@
 import {
   VideoExportButton,
   VideoExportModal
-} from "../chunk-FX5CHFGY.js";
+} from "../chunk-J2O4TPEO.js";
 import {
   CoverImageExportModal,
   coverImageFilename,
   validateCoverImageDimensions
-} from "../chunk-YZN7URUB.js";
-import "../chunk-UXTYD6U5.js";
-import "../chunk-I5PNMCSZ.js";
+} from "../chunk-ZMDTR472.js";
+import "../chunk-DIWB5BH4.js";
+import "../chunk-UYJ7G34U.js";
 import "../chunk-32QCPFXE.js";
 import "../chunk-5MFQMJ5Z.js";
 export {

package/dist/cover-image/index.js

@@ -2,8 +2,8 @@ import {
   CoverImageExportModal,
   coverImageFilename,
   validateCoverImageDimensions
-} from "../chunk-YZN7URUB.js";
-import "../chunk-I5PNMCSZ.js";
+} from "../chunk-ZMDTR472.js";
+import "../chunk-UYJ7G34U.js";
 export {
   CoverImageExportModal,
   coverImageFilename,

package/dist/hooks/index.js

@@ -3,10 +3,10 @@ import {
   resolveVideoCoverFramePlan,
   resolveVideoExportCover,
   useVideoExport
-} from "../chunk-UXTYD6U5.js";
+} from "../chunk-DIWB5BH4.js";
 import {
   useFrameCapture
-} from "../chunk-I5PNMCSZ.js";
+} from "../chunk-UYJ7G34U.js";
 import "../chunk-32QCPFXE.js";
 import "../chunk-5MFQMJ5Z.js";
 export {

package/dist/index.js

@@ -1,21 +1,21 @@
 import {
   VideoExportButton,
   VideoExportModal
-} from "./chunk-FX5CHFGY.js";
+} from "./chunk-J2O4TPEO.js";
 import {
   CoverImageExportModal,
   coverImageFilename,
   validateCoverImageDimensions
-} from "./chunk-YZN7URUB.js";
+} from "./chunk-ZMDTR472.js";
 import {
   DEFAULT_VIDEO_COVER_PRE_ROLL_SECONDS,
   resolveVideoCoverFramePlan,
   resolveVideoExportCover,
   useVideoExport
-} from "./chunk-UXTYD6U5.js";
+} from "./chunk-DIWB5BH4.js";
 import {
   useFrameCapture
-} from "./chunk-I5PNMCSZ.js";
+} from "./chunk-UYJ7G34U.js";
 import {
   createEncoder,
   supportsWebCodecs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-video-react",
-  "version": "2.3.3",
+  "version": "2.3.5",
   "description": "React components for browser-based MP4 and animated-GIF export of Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -71,7 +71,7 @@
   "dependencies": {
     "@bendyline/squisq": "2.7.1",
     "@bendyline/squisq-video": "2.2.12",
-    "@bendyline/squisq-react": "2.7.1",
+    "@bendyline/squisq-react": "2.7.2",
     "@ffmpeg/core": "0.12.9",
     "@ffmpeg/ffmpeg": "0.12.15",
     "@ffmpeg/util": "0.12.2",