@bendyline/squisq-video-react 2.4.16 → 2.4.18

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

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

package/dist/{chunk-SLLH2RTX.js → chunk-JKWCZION.js}

@@ -426,7 +426,13 @@ function useProcessedAudio(manager) {
     manager ? manager.getIndexVersion : zero,
     zero
   );
-  return useCallback((clip) => manager?.processedAudio(clip), [manager, indexVersion]);
+  return useCallback(
+    (clip) => {
+      void indexVersion;
+      return manager?.processedAudio(clip);
+    },
+    [manager, indexVersion]
+  );
 }
 function useMediaEditStatus(manager) {
   const version = useSyncExternalStore(
@@ -434,7 +440,13 @@ function useMediaEditStatus(manager) {
     manager ? manager.getVersion : zero,
     zero
   );
-  return useCallback((clip) => manager?.status(clip) ?? null, [manager, version]);
+  return useCallback(
+    (clip) => {
+      void version;
+      return manager?.status(clip) ?? null;
+    },
+    [manager, version]
+  );
 }
 function useMediaEditRenders(manager, doc) {
   useEffect(() => {

package/dist/{chunk-M5AK4MMV.js → chunk-KJQVUVOG.js}

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

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

@@ -1,6 +1,6 @@
 import {
   useFrameCapture
-} from "./chunk-2C4BEAWT.js";
+} from "./chunk-QJWEZRZS.js";
 import {
   EXPORT_AUDIO_CHANNELS,
   EXPORT_AUDIO_SAMPLE_RATE,
@@ -494,7 +494,7 @@ function useVideoExport(options = {}) {
   const [estimatedRemaining, setEstimatedRemaining] = useState(0);
   const encoderRef = useRef(null);
   const gifAbortRef = useRef(null);
-  const cancelledRef = useRef(false);
+  const runRef = useRef(null);
   const downloadUrlRef = useRef(null);
   const startTimeRef = useRef(0);
   const elapsedTimerRef = useRef(null);
@@ -503,6 +503,8 @@ function useVideoExport(options = {}) {
   const frameCapture = useFrameCapture();
   useEffect(() => {
     return () => {
+      runRef.current?.abort();
+      runRef.current = null;
       if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
       if (downloadUrlRef.current) {
         URL.revokeObjectURL(downloadUrlRef.current);
@@ -515,6 +517,8 @@ function useVideoExport(options = {}) {
     };
   }, [frameCapture]);
   const reset = useCallback(() => {
+    runRef.current?.abort();
+    runRef.current = null;
     if (downloadUrlRef.current) {
       URL.revokeObjectURL(downloadUrlRef.current);
       downloadUrlRef.current = null;
@@ -543,10 +547,10 @@ function useVideoExport(options = {}) {
     setElapsed(0);
     setEstimatedRemaining(0);
     if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
-    cancelledRef.current = false;
   }, [frameCapture]);
   const cancel = useCallback(() => {
-    cancelledRef.current = true;
+    runRef.current?.abort();
+    runRef.current = null;
     if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
     if (encoderRef.current) {
       encoderRef.current.close();
@@ -561,7 +565,10 @@ function useVideoExport(options = {}) {
   }, [frameCapture]);
   const startExport = useCallback(
     async (doc, config) => {
-      cancelledRef.current = false;
+      cancel();
+      const run = new AbortController();
+      runRef.current = run;
+      const cancelled = () => run.signal.aborted || runRef.current !== run;
       if (downloadUrlRef.current) {
         URL.revokeObjectURL(downloadUrlRef.current);
         downloadUrlRef.current = null;
@@ -623,6 +630,7 @@ function useVideoExport(options = {}) {
           images = /* @__PURE__ */ new Map();
           ownsLoadedImages = true;
           const entries = await config.mediaProvider.listMedia();
+          if (cancelled()) return;
           const references = collectDocumentMediaReferences(doc);
           const neededEntries = entries.filter(
             (entry) => references.has(entry.name) || references.has(`./${entry.name}`)
@@ -633,11 +641,14 @@ function useVideoExport(options = {}) {
             );
           }
           for (const entry of neededEntries) {
-            if (cancelledRef.current) return;
+            if (cancelled()) return;
             const url2 = await config.mediaProvider.resolveUrl(entry.name);
+            if (cancelled()) return;
             const resource = await fetchResourceBytes(url2, {
-              policy: resolveExportMediaResourcePolicy(entry.size, config.resourcePolicy)
+              policy: resolveExportMediaResourcePolicy(entry.size, config.resourcePolicy),
+              signal: run.signal
             });
+            if (cancelled()) return;
             const data = toArrayBuffer(resource.bytes);
             images.set(entry.name, data);
           }
@@ -659,7 +670,7 @@ function useVideoExport(options = {}) {
           },
           captionMode
         );
-        if (cancelledRef.current) return;
+        if (cancelled()) return;
         if (docDuration <= 0) {
           throw new Error("Document has zero duration \u2014 nothing to export");
         }
@@ -676,11 +687,13 @@ function useVideoExport(options = {}) {
           void 0,
           document
         ).catch(() => false);
+        if (cancelled()) return;
         const audioBitrate = (QUALITY_PRESETS[quality] ?? QUALITY_PRESETS.normal).audioBitrate;
         const timeline = effectiveOutputFormat === "mp4" && audioPolicy !== "omit" ? config.processedAudio ? computeAudioTimeline(doc, coverPlan.audioOffset, {
           processedAudio: config.processedAudio
         }) : computeAudioTimeline(doc, coverPlan.audioOffset) : [];
         const aacSupported = timeline.length > 0 ? await supportsWebCodecsAac(EXPORT_AUDIO_SAMPLE_RATE, EXPORT_AUDIO_CHANNELS) : false;
+        if (cancelled()) return;
         const tierDecision = selectAudioTier({
           hasClips: timeline.length > 0,
           aacSupported,
@@ -703,6 +716,7 @@ function useVideoExport(options = {}) {
               resourcePolicy: config.resourcePolicy
             });
             try {
+              if (cancelled()) return;
               const missingSources = [...new Set(timeline.map((clip) => clip.src))].filter(
                 (src) => !buffers.has(src)
               );
@@ -723,6 +737,7 @@ function useVideoExport(options = {}) {
                   totalAudioDur,
                   EXPORT_AUDIO_SAMPLE_RATE
                 );
+                if (cancelled()) return;
                 if (!renderedAudio) {
                   audioReasonLocal = "No included video source contained a decodable audio track.";
                 }
@@ -738,7 +753,7 @@ function useVideoExport(options = {}) {
         }
         const useInlineAudio = renderedAudio !== null && tierDecision.tier === 1;
         const useFfmpegAudio = renderedAudio !== null && tierDecision.tier === 2;
-        if (cancelledRef.current) return;
+        if (cancelled()) return;
         let encoder;
         if (canUseWebCodecs) {
           encoder = createEncoder({
@@ -779,6 +794,7 @@ function useVideoExport(options = {}) {
             void 0,
             document
           );
+          if (cancelled()) return;
           setBackend(selectedBackend);
         } else {
           throw new Error(
@@ -804,7 +820,7 @@ function useVideoExport(options = {}) {
         }
         if (ownsLoadedImages) images?.clear();
         images = void 0;
-        if (cancelledRef.current) return;
+        if (cancelled()) return;
         setProgress(CAPTURE_PROGRESS_START);
         setPhase(`Capturing frame 1/${totalFrames}`);
         setCurrentFrameTime(0);
@@ -813,9 +829,10 @@ function useVideoExport(options = {}) {
         const frameBoundaryTimes = [captureStartTime];
         if (coverFrameCount > 0) await frameCapture.setCoverVisible(true);
         for (let i = 0; i < totalFrames; i++) {
-          if (cancelledRef.current) return;
+          if (cancelled()) return;
           if (coverFrameCount > 0 && i === coverFrameCount) {
             await frameCapture.setCoverVisible(false);
+            if (cancelled()) return;
           }
           const time = i / fps;
           const captureTime = coverPlan.captureTimeForFrame(i);
@@ -826,9 +843,12 @@ function useVideoExport(options = {}) {
             totalFrames,
             onLateResult: releaseEncoderFrame,
             activityDocument: document,
-            onRecoveryWait: () => setPhase(`Frame ${i + 1}/${totalFrames} is taking unusually long \u2014 still waiting\u2026`)
+            onRecoveryWait: () => {
+              if (!cancelled())
+                setPhase(`Frame ${i + 1}/${totalFrames} is taking unusually long \u2014 still waiting\u2026`);
+            }
           });
-          if (cancelledRef.current) {
+          if (cancelled()) {
             releaseEncoderFrame(frame);
             return;
           }
@@ -849,6 +869,7 @@ function useVideoExport(options = {}) {
             void 0,
             document
           );
+          if (cancelled()) return;
           const completedFrames = i + 1;
           const completedAt = performance.now();
           frameBoundaryTimes.push(completedAt);
@@ -868,16 +889,17 @@ function useVideoExport(options = {}) {
           setEstimatedRemaining(Math.round(avgPerFrame * (totalFrames - completedFrames)));
           setElapsed(Math.floor((performance.now() - startTimeRef.current) / 1e3));
         }
-        if (cancelledRef.current) return;
+        if (cancelled()) return;
         setState("encoding");
         setPhase(effectiveOutputFormat === "gif" ? "Finalizing GIF frames\u2026" : "Finalizing video\u2026");
         setProgress(95);
         let outputBytes = effectiveOutputFormat === "mp4" && !useFfmpegAudio && encoder.finalizeBlob ? await encoder.finalizeBlob() : await encoder.finalize();
-        encoderRef.current = null;
-        if (cancelledRef.current) return;
+        if (cancelled()) return;
+        if (encoderRef.current === encoder) encoderRef.current = null;
         if (effectiveOutputFormat === "gif") {
           setPhase("Generating GIF palette\u2026");
           const videoOnly = outputBytes instanceof Blob ? new Uint8Array(await outputBytes.arrayBuffer()) : outputBytes instanceof Uint8Array ? outputBytes : new Uint8Array(outputBytes);
+          if (cancelled()) return;
           const gifAbort = new AbortController();
           gifAbortRef.current = gifAbort;
           try {
@@ -895,6 +917,7 @@ function useVideoExport(options = {}) {
           try {
             const wav = audioBufferToWav(renderedAudio);
             const videoOnly = outputBytes instanceof Blob ? new Uint8Array(await outputBytes.arrayBuffer()) : outputBytes instanceof Uint8Array ? outputBytes : new Uint8Array(outputBytes);
+            if (cancelled()) return;
             outputBytes = await muxAudioWithFfmpegWasm(
               videoOnly,
               wav,
@@ -908,7 +931,7 @@ function useVideoExport(options = {}) {
             if (audioPolicy === "require") throw new Error(audioReasonLocal);
           }
         }
-        if (cancelledRef.current) return;
+        if (cancelled()) return;
         const mimeType = effectiveOutputFormat === "gif" ? "image/gif" : "video/mp4";
         const blob = outputBytes instanceof Blob ? outputBytes : new Blob(
           [
@@ -932,8 +955,8 @@ function useVideoExport(options = {}) {
         if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
         frameCapture.destroy();
       } catch (err) {
+        if (cancelled()) return;
         if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
-        if (cancelledRef.current) return;
         const message = err instanceof Error ? err.message : String(err);
         setState("error");
         setError(message);
@@ -947,7 +970,7 @@ function useVideoExport(options = {}) {
         frameCapture.destroy();
       }
     },
-    [frameCapture]
+    [frameCapture, cancel]
   );
   return {
     state,

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

@@ -1186,6 +1186,7 @@ function getFrameVisualStateKey(captureRoot, timelineTime, options = {}) {
   });
 }
 function useFrameCapture() {
+  const generationRef = useRef(0);
   const containerRef = useRef(null);
   const rootRef = useRef(null);
   const renderAPIRef = useRef(null);
@@ -1207,6 +1208,11 @@ function useFrameCapture() {
   const captionLayerHasContentRef = useRef(false);
   const init = useCallback(
     async (doc, renderOptions, captionMode) => {
+      const generation = ++generationRef.current;
+      const assertActive = () => {
+        if (generationRef.current !== generation)
+          throw new Error("Frame capture initialization cancelled");
+      };
       if (rootRef.current || containerRef.current || mediaProviderRef.current || captureCanvasRef.current || captureBaseCanvasRef.current || videoFramesRef.current) {
         const oldVideoFrames = videoFramesRef.current;
         videoFramesRef.current = null;
@@ -1256,6 +1262,7 @@ function useFrameCapture() {
             resolve();
           }, 0);
         });
+        assertActive();
       }
       const width = renderOptions.width ?? 1920;
       const height = renderOptions.height ?? 1080;
@@ -1341,6 +1348,7 @@ function useFrameCapture() {
         }
       });
       await new Promise((resolve) => setTimeout(resolve, 0));
+      assertActive();
       if (mediaProvider) {
         root.render(
           createElement(
@@ -1376,17 +1384,22 @@ function useFrameCapture() {
             );
           }, CAPTURE_SETUP_TIMEOUT_MS);
           try {
+            assertActive();
             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, captureRoot);
+            assertActive();
             stage = "loading fonts and images";
             await waitForCaptureAssets(captureRoot, decodedImagesRef.current);
+            assertActive();
             stage = "opening video decoders";
             await videoFrames.attach(captureRoot);
+            assertActive();
             stage = "indexing video sources";
             await primeIndeterminateCaptureVideos(captureRoot, primedCaptureVideosRef.current);
+            assertActive();
             clearTimeout(setupTimeout);
             resolve(api.getDuration());
           } catch (assetError) {
@@ -1399,14 +1412,20 @@ function useFrameCapture() {
     []
   );
   const setCoverVisible = useCallback(async (visible) => {
+    const generation = generationRef.current;
     const api = renderAPIRef.current;
     if (!api) throw new Error("Frame capture not initialized \xE2\u20AC\u201D call init() first");
     if (visible) await api.showCover();
     else await api.hideCover();
+    if (generationRef.current !== generation) return;
     lastVisualStateKeyRef.current = null;
   }, []);
   const captureCanvasFrame = useCallback(
     async (time, options = {}) => {
+      const generation = generationRef.current;
+      const assertActive = () => {
+        if (generationRef.current !== generation) throw new Error("Frame capture cancelled");
+      };
       const container = containerRef.current;
       const api = renderAPIRef.current;
       const captureCanvas = captureCanvasRef.current;
@@ -1420,11 +1439,18 @@ function useFrameCapture() {
         throw new Error("Capture root element not found");
       }
       const videoFrames = videoFramesRef.current;
-      const prepareCaptureVideos = async () => (await videoFrames?.attach(root) ?? 0) + await primeIndeterminateCaptureVideos(root, primedCaptureVideosRef.current);
+      const prepareCaptureVideos = async () => {
+        const attached = await videoFrames?.attach(root) ?? 0;
+        assertActive();
+        const primed = await primeIndeterminateCaptureVideos(root, primedCaptureVideosRef.current);
+        assertActive();
+        return attached + primed;
+      };
       await prepareCaptureVideos();
       try {
         await api.seekTo(time);
       } catch (seekError) {
+        assertActive();
         if (!await prepareCaptureVideos()) {
           throw seekError;
         }
@@ -1440,7 +1466,9 @@ function useFrameCapture() {
         );
       }
       await waitForCaptureMediaResolutions(mediaResolutionTrackerRef.current, root);
+      assertActive();
       await waitForCaptureAssets(root, decodedImagesRef.current);
+      assertActive();
       const compositePlan = resolveScheduledVideoCompositePlan(root, {
         includeFullFrameOverlays: true
       });
@@ -1474,6 +1502,7 @@ function useFrameCapture() {
             backgroundColor: hasUnderlays ? null : "#000000",
             logging: false,
             onclone: async (_clonedDocument, clonedRoot) => {
+              assertActive();
               if (compositePlan) {
                 if (hasUnderlays) clearScheduledUnderlayBackdrops(clonedRoot);
                 clonedRoot.querySelectorAll(SCHEDULED_MEDIA_SELECTOR).forEach((element) => element.remove());
@@ -1496,6 +1525,7 @@ function useFrameCapture() {
         } finally {
           releaseCaptureCloneCanvases(transientCloneCanvases);
         }
+        assertActive();
         hasCapturedFrameRef.current = true;
         lastVisualStateKeyRef.current = visualStateKey;
       }
@@ -1551,6 +1581,7 @@ function useFrameCapture() {
                 },
                 ignoreElements: (element) => shouldIgnoreCaptureCaptionSibling(element, root, captionOverlays)
               });
+              assertActive();
             }
             captionLayerKeyRef.current = captionKey;
             captionLayerHasContentRef.current = hasCaptionText;
@@ -1580,6 +1611,7 @@ function useFrameCapture() {
     [captureCanvasFrame]
   );
   const destroy = useCallback(() => {
+    generationRef.current++;
     if (rootRef.current) {
       rootRef.current.unmount();
       rootRef.current = null;

package/dist/components/index.js

@@ -1,15 +1,15 @@
 import {
   VideoExportButton,
   VideoExportModal
-} from "../chunk-RO52S6GO.js";
+} from "../chunk-A6ED7EVY.js";
 import {
   CoverImageExportModal,
   coverImageFilename,
   validateCoverImageDimensions
-} from "../chunk-M5AK4MMV.js";
+} from "../chunk-KJQVUVOG.js";
 import "../chunk-3NJDHK62.js";
-import "../chunk-TUIVBMAK.js";
-import "../chunk-2C4BEAWT.js";
+import "../chunk-MI4EJXTD.js";
+import "../chunk-QJWEZRZS.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-M5AK4MMV.js";
+} from "../chunk-KJQVUVOG.js";
 import "../chunk-3NJDHK62.js";
-import "../chunk-2C4BEAWT.js";
+import "../chunk-QJWEZRZS.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-2C4BEAWT.js";
+} from "../chunk-QJWEZRZS.js";
 import "../chunk-4GFZ3GUE.js";
 
 // src/DashboardImageExportModal.tsx

package/dist/hooks/index.js

@@ -3,10 +3,10 @@ import {
   resolveVideoCoverFramePlan,
   resolveVideoExportCover,
   useVideoExport
-} from "../chunk-TUIVBMAK.js";
+} from "../chunk-MI4EJXTD.js";
 import {
   useFrameCapture
-} from "../chunk-2C4BEAWT.js";
+} from "../chunk-QJWEZRZS.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-RO52S6GO.js";
+} from "./chunk-A6ED7EVY.js";
 import {
   CoverImageExportModal,
   coverImageFilename,
   validateCoverImageDimensions
-} from "./chunk-M5AK4MMV.js";
+} from "./chunk-KJQVUVOG.js";
 import "./chunk-3NJDHK62.js";
 import {
   DEFAULT_VIDEO_COVER_PRE_ROLL_SECONDS,
   resolveVideoCoverFramePlan,
   resolveVideoExportCover,
   useVideoExport
-} from "./chunk-TUIVBMAK.js";
+} from "./chunk-MI4EJXTD.js";
 import {
   useFrameCapture
-} from "./chunk-2C4BEAWT.js";
+} from "./chunk-QJWEZRZS.js";
 import "./chunk-4GFZ3GUE.js";
 import {
   createEncoder,
@@ -30,7 +30,7 @@ import {
   useMediaEditRenders,
   useMediaEditStatus,
   useProcessedAudio
-} from "./chunk-SLLH2RTX.js";
+} from "./chunk-JKWCZION.js";
 import "./chunk-TL2IMDIZ.js";
 import "./chunk-5MFQMJ5Z.js";
 export {

package/dist/media-edit/index.js

@@ -4,7 +4,7 @@ import {
   useMediaEditRenders,
   useMediaEditStatus,
   useProcessedAudio
-} from "../chunk-SLLH2RTX.js";
+} from "../chunk-JKWCZION.js";
 import "../chunk-TL2IMDIZ.js";
 export {
   createMediaEditRenderManager,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-video-react",
-  "version": "2.4.16",
+  "version": "2.4.18",
   "description": "React components for browser-based MP4 and animated-GIF export of Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -77,9 +77,9 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "2.11.10",
-    "@bendyline/squisq-video": "2.3.14",
-    "@bendyline/squisq-react": "2.11.12",
+    "@bendyline/squisq": "2.11.12",
+    "@bendyline/squisq-video": "2.3.16",
+    "@bendyline/squisq-react": "2.11.14",
     "@ffmpeg/core": "0.12.9",
     "@ffmpeg/ffmpeg": "0.12.15",
     "@ffmpeg/util": "0.12.2",