@bendyline/squisq-video-react 2.2.1 → 2.2.2

package/README.md

@@ -33,6 +33,10 @@ To open directly in the compact GIF preset:
 <VideoExportButton doc={myDoc} defaultConfig={{ outputFormat: 'gif' }} />
 ```
 
+Animated GIF export defaults to standard captions when the document has a
+caption track. Pass `captionMode: 'off'` in `defaultConfig` to disable them, or
+choose None in the export modal. MP4 continues to default to captions off.
+
 **v1.5:** `playerScript` is now **optional** — the browser export captures frames
 from a live in-page `DocPlayer`, so the standalone bundle is only needed for
 CLI/Playwright-style pipelines. A new `defaultConfig?: Partial<VideoExportConfig>`
@@ -69,10 +73,10 @@ function App() {
 
 ## Components
 
-| Component           | Description                                                              |
-| ------------------- | ------------------------------------------------------------------------ |
-| `VideoExportModal`  | Full modal UI — configure MP4/GIF, motion, quality, fps, and orientation |
-| `VideoExportButton` | Drop-in button that opens the export modal via portal                    |
+| Component           | Description                                                                        |
+| ------------------- | ---------------------------------------------------------------------------------- |
+| `VideoExportModal`  | Full modal UI — configure MP4/GIF, captions, motion, quality, fps, and orientation |
+| `VideoExportButton` | Drop-in button that opens the export modal via portal                              |
 
 ## Hooks
 

package/dist/{chunk-VILZP3GL.js → chunk-IDY64F4K.js}

@@ -10,7 +10,7 @@ import {
   supportsWebCodecs,
   supportsWebCodecsAac,
   supportsWebCodecsH264
-} from "./chunk-YZN7D4IC.js";
+} from "./chunk-ZQJBUX75.js";
 
 // src/hooks/useFrameCapture.ts
 import { createElement } from "react";
@@ -28,6 +28,33 @@ var MIME_MAP = {
   bmp: "image/bmp",
   avif: "image/avif"
 };
+var VISUAL_UPDATE_FALLBACK_MS = 100;
+var POTENTIALLY_ANIMATED_IMAGE_URL = /(?:^data:image\/(?:gif|webp|avif)[;,]|\.(?:gif|webp|avif)(?:[?#]|$))/i;
+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));
+  });
+}
 function createInlineProvider(images) {
   const blobUrls = /* @__PURE__ */ new Map();
   const mimeTypes = /* @__PURE__ */ new Map();
@@ -60,27 +87,96 @@ function createInlineProvider(images) {
     }
   };
 }
+function shouldIgnoreCaptureSibling(element, captureRoot) {
+  const { head } = captureRoot.ownerDocument;
+  const isInDocumentHead = element === head || head.contains(element);
+  const isInCaptureBranch = element === captureRoot || element.contains(captureRoot) || captureRoot.contains(element);
+  return !isInDocumentHead && !isInCaptureBranch;
+}
+function finiteMediaTime(value) {
+  return Number.isFinite(value) ? value.toFixed(6) : "unknown";
+}
+function getFrameVisualStateKey(captureRoot, timelineTime) {
+  const markup = captureRoot.innerHTML;
+  let needsTimelineKey = false;
+  const animationStates = [];
+  if (typeof captureRoot.getAnimations === "function") {
+    const animations = captureRoot.getAnimations({ subtree: true });
+    animations.forEach((animation, index) => {
+      try {
+        const timing = animation.effect?.getComputedTiming();
+        if (!timing) {
+          needsTimelineKey = true;
+          return;
+        }
+        animationStates.push(
+          `${index}:${animation.playState}:${String(timing.progress)}:${String(
+            timing.currentIteration
+          )}`
+        );
+      } catch {
+        needsTimelineKey = true;
+      }
+    });
+  } else if (/\b(?:anim-|transition-)|animation(?:-name)?\s*:/i.test(markup)) {
+    needsTimelineKey = true;
+  }
+  const imageStates = Array.from(captureRoot.querySelectorAll("img")).map((image) => {
+    const src = image.currentSrc || image.src;
+    if (POTENTIALLY_ANIMATED_IMAGE_URL.test(src)) needsTimelineKey = true;
+    return `${src}:${image.complete}:${image.naturalWidth}x${image.naturalHeight}`;
+  });
+  if (POTENTIALLY_ANIMATED_IMAGE_URL.test(markup)) needsTimelineKey = true;
+  const videoStates = Array.from(captureRoot.querySelectorAll("video")).map(
+    (video) => `${video.currentSrc || video.src}:${finiteMediaTime(video.currentTime)}:${video.readyState}:${video.videoWidth}x${video.videoHeight}`
+  );
+  if (captureRoot.querySelector(
+    "canvas, iframe, object, embed, animate, animateMotion, animateTransform, set"
+  )) {
+    needsTimelineKey = true;
+  }
+  const fontStatus = captureRoot.ownerDocument.fonts?.status ?? "unsupported";
+  return JSON.stringify({
+    markup,
+    animationStates,
+    imageStates,
+    videoStates,
+    fontStatus,
+    timelineTime: needsTimelineKey ? timelineTime.toFixed(6) : null
+  });
+}
 function useFrameCapture() {
   const containerRef = useRef(null);
   const rootRef = useRef(null);
   const renderAPIRef = useRef(null);
   const mediaProviderRef = useRef(null);
+  const captureCanvasRef = useRef(null);
+  const lastVisualStateKeyRef = useRef(null);
+  const hasCapturedFrameRef = useRef(false);
   const dimensionsRef = useRef({ width: 1920, height: 1080 });
   const init = useCallback(
     async (doc, renderOptions, captionMode) => {
-      if (rootRef.current || containerRef.current || mediaProviderRef.current) {
+      if (rootRef.current || containerRef.current || mediaProviderRef.current || captureCanvasRef.current) {
         const oldRoot = rootRef.current;
         const oldContainer = containerRef.current;
         const oldMediaProvider = mediaProviderRef.current;
+        const oldCaptureCanvas = captureCanvasRef.current;
         rootRef.current = null;
         containerRef.current = null;
         renderAPIRef.current = null;
         mediaProviderRef.current = null;
+        captureCanvasRef.current = null;
+        lastVisualStateKeyRef.current = null;
+        hasCapturedFrameRef.current = false;
         await new Promise((resolve) => {
           setTimeout(() => {
             if (oldRoot) oldRoot.unmount();
             if (oldContainer) oldContainer.remove();
             oldMediaProvider?.dispose();
+            if (oldCaptureCanvas) {
+              oldCaptureCanvas.width = 0;
+              oldCaptureCanvas.height = 0;
+            }
             resolve();
           }, 0);
         });
@@ -89,6 +185,14 @@ function useFrameCapture() {
       const height = renderOptions.height ?? 1080;
       const animationsEnabled = renderOptions.animationsEnabled ?? true;
       dimensionsRef.current = { width, height };
+      const captureCanvas = document.createElement("canvas");
+      captureCanvas.width = width;
+      captureCanvas.height = height;
+      captureCanvas.style.width = `${width}px`;
+      captureCanvas.style.height = `${height}px`;
+      captureCanvasRef.current = captureCanvas;
+      lastVisualStateKeyRef.current = null;
+      hasCapturedFrameRef.current = false;
       const container = document.createElement("div");
       container.style.cssText = `position:fixed;left:0;top:0;width:${width}px;height:${height}px;opacity:0;pointer-events:none;z-index:-1;overflow:hidden;`;
       document.body.appendChild(container);
@@ -150,33 +254,56 @@ function useFrameCapture() {
     },
     []
   );
-  const captureFrame = useCallback(async (time) => {
-    const container = containerRef.current;
-    const api = renderAPIRef.current;
-    if (!container || !api) {
-      throw new Error("Frame capture not initialized \u2014 call init() first");
-    }
-    const { width, height } = dimensionsRef.current;
-    await api.seekTo(time);
-    await new Promise(
-      (resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
-    );
-    const root = container.querySelector("#squisq-capture-root");
-    if (!root) {
-      throw new Error("Capture root element not found");
-    }
-    const canvas = await html2canvas(root, {
-      width,
-      height,
-      scale: 1,
-      useCORS: true,
-      allowTaint: true,
-      backgroundColor: "#000000",
-      logging: false
-    });
-    const bitmap = await createImageBitmap(canvas);
-    return bitmap;
-  }, []);
+  const captureCanvasFrame = useCallback(
+    async (time, options = {}) => {
+      const container = containerRef.current;
+      const api = renderAPIRef.current;
+      const captureCanvas = captureCanvasRef.current;
+      if (!container || !api || !captureCanvas) {
+        throw new Error("Frame capture not initialized \u2014 call init() first");
+      }
+      const { width, height } = dimensionsRef.current;
+      await api.seekTo(time);
+      await waitForVisualUpdate(2);
+      const root = container.querySelector("#squisq-capture-root");
+      if (!root) {
+        throw new Error("Capture root element not found");
+      }
+      const visualStateKey = options.reuseIfUnchanged ? getFrameVisualStateKey(root, time) : null;
+      if (visualStateKey !== null && hasCapturedFrameRef.current && lastVisualStateKeyRef.current === visualStateKey) {
+        return captureCanvas;
+      }
+      const captureContext = captureCanvas.getContext("2d");
+      if (!captureContext) throw new Error("Could not create the frame capture canvas context");
+      captureContext.setTransform(1, 0, 0, 1, 0, 0);
+      captureContext.clearRect(0, 0, width, height);
+      const canvas = await html2canvas(root, {
+        canvas: captureCanvas,
+        width,
+        height,
+        scale: 1,
+        useCORS: true,
+        allowTaint: true,
+        backgroundColor: "#000000",
+        logging: false,
+        // html2canvas starts cloning at documentElement. Do not clone the rest
+        // of the editor/site UI on every frame; only the capture root, its
+        // ancestors, descendants, and document styles can affect this render.
+        ignoreElements: (element) => shouldIgnoreCaptureSibling(element, root)
+      });
+      hasCapturedFrameRef.current = true;
+      lastVisualStateKeyRef.current = visualStateKey;
+      return canvas;
+    },
+    []
+  );
+  const captureFrame = useCallback(
+    async (time, options = {}) => {
+      const canvas = await captureCanvasFrame(time, options);
+      return createImageBitmap(canvas);
+    },
+    [captureCanvasFrame]
+  );
   const destroy = useCallback(() => {
     if (rootRef.current) {
       rootRef.current.unmount();
@@ -188,9 +315,19 @@ function useFrameCapture() {
     }
     mediaProviderRef.current?.dispose();
     mediaProviderRef.current = null;
+    if (captureCanvasRef.current) {
+      captureCanvasRef.current.width = 0;
+      captureCanvasRef.current.height = 0;
+      captureCanvasRef.current = null;
+    }
+    lastVisualStateKeyRef.current = null;
+    hasCapturedFrameRef.current = false;
     renderAPIRef.current = null;
   }, []);
-  return useMemo(() => ({ init, captureFrame, destroy }), [init, captureFrame, destroy]);
+  return useMemo(
+    () => ({ init, captureFrame, captureCanvasFrame, destroy }),
+    [init, captureFrame, captureCanvasFrame, destroy]
+  );
 }
 
 // src/hooks/useVideoExport.ts
@@ -290,7 +427,11 @@ function createWorkerEncoder(config) {
   });
   return {
     ready,
-    encodeFrame(bitmap, frameIndex) {
+    encodeFrame(frame, frameIndex) {
+      if (typeof HTMLCanvasElement !== "undefined" && frame instanceof HTMLCanvasElement) {
+        return Promise.reject(new Error("Worker encoding requires a transferable ImageBitmap"));
+      }
+      const bitmap = frame;
       if (state !== "open" || fatalError) {
         bitmap.close();
         return Promise.reject(fatalError ?? new Error("Encoder is not accepting frames"));
@@ -345,11 +486,37 @@ function createWorkerEncoder(config) {
 
 // src/gifTranscode.ts
 import {
-  ffmpegGifOutputArgs,
+  ffmpegGifPaletteApplicationArgs,
+  ffmpegGifPaletteGenerationFilter,
   resolveFfmpegWasmLoad
 } from "@bendyline/squisq-video";
+function buildGifPaletteFfmpegArgs(options) {
+  return [
+    "-y",
+    "-i",
+    "video.mp4",
+    "-vf",
+    ffmpegGifPaletteGenerationFilter(options),
+    "-frames:v",
+    "1",
+    "palette.png"
+  ];
+}
 function buildGifFfmpegArgs(options) {
-  return ["-y", "-i", "video.mp4", ...ffmpegGifOutputArgs(options), "out.gif"];
+  return [
+    "-y",
+    "-i",
+    "video.mp4",
+    "-i",
+    "palette.png",
+    ...ffmpegGifPaletteApplicationArgs(options),
+    "out.gif"
+  ];
+}
+var FFMPEG_ERRORISH = /error|invalid|failed|out of memory|memory access|abort|unable to/i;
+function ffmpegFailureDetail(logs) {
+  const lines = logs.map((line) => line.trim()).filter(Boolean);
+  return lines.find((line) => FFMPEG_ERRORISH.test(line)) ?? lines.at(-1) ?? null;
 }
 async function transcodeMp4ToGifWithFfmpegWasm(videoMp4, options, loadConfig, signal) {
   if (videoMp4.byteLength === 0) {
@@ -361,9 +528,16 @@ async function transcodeMp4ToGifWithFfmpegWasm(videoMp4, options, loadConfig, si
   const load = resolveFfmpegWasmLoad(loadConfig, "Animated GIF export", {
     classWorkerURL: new URL("./workers/ffmpeg.class-worker.js", import.meta.url).href
   });
-  const args = buildGifFfmpegArgs(options);
+  const paletteArgs = buildGifPaletteFfmpegArgs(options);
+  const gifArgs = buildGifFfmpegArgs(options);
   const { FFmpeg } = await import("@ffmpeg/ffmpeg");
   const ffmpeg = new FFmpeg();
+  const recentLogs = [];
+  const handleLog = ({ message }) => {
+    recentLogs.push(message);
+    if (recentLogs.length > 40) recentLogs.shift();
+  };
+  ffmpeg.on("log", handleLog);
   let terminated = false;
   const terminate = () => {
     if (terminated) return;
@@ -381,17 +555,38 @@ async function transcodeMp4ToGifWithFfmpegWasm(videoMp4, options, loadConfig, si
     if (signal?.aborted) {
       throw new DOMException("Animated GIF export was cancelled.", "AbortError");
     }
-    const exitCode = await ffmpeg.exec(args);
-    if (signal?.aborted) {
-      throw new DOMException("Animated GIF export was cancelled.", "AbortError");
-    }
-    if (exitCode !== 0) {
-      throw new Error(`ffmpeg.wasm GIF transcode failed with exit code ${exitCode}`);
-    }
+    const execPhase = async (args, phase) => {
+      recentLogs.length = 0;
+      let exitCode;
+      try {
+        exitCode = await ffmpeg.exec(args);
+      } catch (caught) {
+        if (signal?.aborted) {
+          throw new DOMException("Animated GIF export was cancelled.", "AbortError");
+        }
+        const detail = ffmpegFailureDetail(recentLogs);
+        const fallback = caught instanceof Error ? caught.message : String(caught);
+        throw new Error(`ffmpeg.wasm GIF transcode failed during ${phase}: ${detail ?? fallback}`);
+      }
+      if (signal?.aborted) {
+        throw new DOMException("Animated GIF export was cancelled.", "AbortError");
+      }
+      if (exitCode !== 0) {
+        const detail = ffmpegFailureDetail(recentLogs);
+        throw new Error(
+          `ffmpeg.wasm GIF transcode failed during ${phase} with exit code ${exitCode}` + (detail ? `: ${detail}` : "")
+        );
+      }
+    };
+    await execPhase(paletteArgs, "palette generation");
+    await execPhase(gifArgs, "palette application");
+    await ffmpeg.deleteFile("video.mp4").catch(() => false);
+    await ffmpeg.deleteFile("palette.png").catch(() => false);
     const data = await ffmpeg.readFile("out.gif");
     return data instanceof Uint8Array ? data : new TextEncoder().encode(data);
   } finally {
     signal?.removeEventListener("abort", handleAbort);
+    ffmpeg.off("log", handleLog);
     terminate();
   }
 }
@@ -400,6 +595,41 @@ async function transcodeMp4ToGifWithFfmpegWasm(videoMp4, options, loadConfig, si
 var MAX_EXPORT_MEDIA_FILES = 256;
 var MAX_EXPORT_MEDIA_FILE_BYTES = 64 * 1024 * 1024;
 var MAX_EXPORT_MEDIA_TOTAL_BYTES = 256 * 1024 * 1024;
+var ENCODER_PROBE_TIMEOUT_MS = 5e3;
+var ENCODER_START_TIMEOUT_MS = 6e4;
+var FRAME_CAPTURE_TIMEOUT_MS = 6e4;
+var FRAME_ENCODE_TIMEOUT_MS = 6e4;
+var CAPTURE_PROGRESS_START = 7;
+var CAPTURE_PROGRESS_END = 95;
+function releaseEncoderFrame(frame) {
+  if ("close" in frame) frame.close();
+}
+function settleWithin(operation, timeoutMs, timeoutMessage, onLateResult) {
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    const timeout = globalThis.setTimeout(() => {
+      settled = true;
+      reject(new Error(timeoutMessage));
+    }, timeoutMs);
+    void operation.then(
+      (value) => {
+        if (settled) {
+          onLateResult?.(value);
+          return;
+        }
+        settled = true;
+        globalThis.clearTimeout(timeout);
+        resolve(value);
+      },
+      (caught) => {
+        if (settled) return;
+        settled = true;
+        globalThis.clearTimeout(timeout);
+        reject(caught);
+      }
+    );
+  });
+}
 function toArrayBuffer(bytes) {
   return bytes.slice().buffer;
 }
@@ -535,6 +765,7 @@ function useVideoExport() {
       const fps = config.fps ?? (effectiveOutputFormat === "gif" ? 10 : 30);
       const orientation = config.orientation ?? "landscape";
       const animationsEnabled = config.animationsEnabled ?? effectiveOutputFormat === "mp4";
+      const captionMode = config.captionMode ?? (effectiveOutputFormat === "gif" ? "standard" : "off");
       const audioPolicy = config.audioPolicy ?? "require";
       setOutputFormat(effectiveOutputFormat);
       try {
@@ -612,7 +843,7 @@ function useVideoExport() {
         const docDuration = await frameCapture.init(
           doc,
           { images, audio: config.audio, width, height, animationsEnabled },
-          config.captionMode
+          captionMode
         );
         if (cancelledRef.current) return;
         setDuration(docDuration);
@@ -620,9 +851,13 @@ function useVideoExport() {
           throw new Error("Document has zero duration \u2014 nothing to export");
         }
         const totalFrames = Math.ceil(docDuration * fps);
-        setPhase("Starting encoder\u2026");
+        setPhase("Checking video encoder\u2026");
         setProgress(5);
-        const canUseWebCodecs = webCodecsAvailable && await supportsWebCodecsH264({ width, height, fps, quality });
+        const canUseWebCodecs = webCodecsAvailable && await settleWithin(
+          supportsWebCodecsH264({ width, height, fps, quality }),
+          ENCODER_PROBE_TIMEOUT_MS,
+          "The browser did not finish checking WebCodecs support."
+        ).catch(() => false);
         const audioBitrate = (QUALITY_PRESETS[quality] ?? QUALITY_PRESETS.normal).audioBitrate;
         const timeline = effectiveOutputFormat === "mp4" && audioPolicy !== "omit" ? computeAudioTimeline(doc, 0) : [];
         const aacSupported = timeline.length > 0 ? await supportsWebCodecsAac(EXPORT_AUDIO_SAMPLE_RATE, EXPORT_AUDIO_CHANNELS) : false;
@@ -691,8 +926,11 @@ function useVideoExport() {
               }
             } : {}
           });
+          encoderRef.current = encoder;
           setBackend("webcodecs");
         } else if (sharedArrayBufferAvailable) {
+          setProgress(6);
+          setPhase("Loading export engine\u2026");
           const workerEncoder = createWorkerEncoder({
             width,
             height,
@@ -702,41 +940,54 @@ function useVideoExport() {
             ffmpegWasm: config.ffmpegWasm
           });
           encoder = workerEncoder;
-          const selectedBackend = await workerEncoder.ready;
-          setBackend(selectedBackend);
-          setPhase(
-            selectedBackend === "ffmpeg-wasm" ? "Starting encoder (ffmpeg.wasm)\u2026" : "Starting encoder\u2026"
+          encoderRef.current = workerEncoder;
+          const selectedBackend = await settleWithin(
+            workerEncoder.ready,
+            ENCODER_START_TIMEOUT_MS,
+            "The browser export engine did not start within 60 seconds."
           );
+          setBackend(selectedBackend);
         } else {
           throw new Error(
             "WebCodecs H.264 is unavailable in this browser and the ffmpeg.wasm fallback requires SharedArrayBuffer (Cross-Origin-Isolation headers)."
           );
         }
-        encoderRef.current = encoder;
         if (cancelledRef.current) return;
+        setProgress(CAPTURE_PROGRESS_START);
+        setPhase(`Capturing frame 1/${totalFrames} (0.0s)`);
         setState("capturing");
         const captureStartTime = performance.now();
-        const UI_UPDATE_INTERVAL = 10;
         for (let i = 0; i < totalFrames; i++) {
           if (cancelledRef.current) return;
           const time = i / fps;
-          if (i % UI_UPDATE_INTERVAL === 0 || i === totalFrames - 1) {
-            const captureProgress = Math.round(i / totalFrames * 90);
-            setProgress(5 + captureProgress);
-            setPhase(`Capturing frame ${i + 1}/${totalFrames} (${time.toFixed(1)}s)`);
-            if (i > 0) {
-              const elapsedCapture = (performance.now() - captureStartTime) / 1e3;
-              const avgPerFrame = elapsedCapture / i;
-              const remaining = Math.round(avgPerFrame * (totalFrames - i));
-              setEstimatedRemaining(remaining);
-            }
-          }
-          const bitmap = await frameCapture.captureFrame(time);
+          const captureOperation = canUseWebCodecs ? frameCapture.captureCanvasFrame(time, { reuseIfUnchanged: true }) : frameCapture.captureFrame(time, { reuseIfUnchanged: true });
+          const frame = await settleWithin(
+            captureOperation,
+            FRAME_CAPTURE_TIMEOUT_MS,
+            `Frame capture stopped responding at frame ${i + 1}/${totalFrames}.`,
+            releaseEncoderFrame
+          );
           if (cancelledRef.current) {
-            bitmap.close();
+            releaseEncoderFrame(frame);
             return;
           }
-          await encoder.encodeFrame(bitmap, i);
+          setPhase(`Encoding frame ${i + 1}/${totalFrames} (${time.toFixed(1)}s)`);
+          await settleWithin(
+            encoder.encodeFrame(frame, i),
+            FRAME_ENCODE_TIMEOUT_MS,
+            `Video encoding stopped responding at frame ${i + 1}/${totalFrames}.`
+          );
+          const completedFrames = i + 1;
+          setPhase(
+            completedFrames < totalFrames ? `Capturing frame ${completedFrames + 1}/${totalFrames} (${(completedFrames / fps).toFixed(1)}s)` : `Captured ${totalFrames.toLocaleString()} frames\u2026`
+          );
+          const captureRatio = completedFrames / totalFrames;
+          const captureProgress = CAPTURE_PROGRESS_START + captureRatio * (CAPTURE_PROGRESS_END - CAPTURE_PROGRESS_START);
+          setProgress(Math.round(captureProgress * 10) / 10);
+          const elapsedCapture = (performance.now() - captureStartTime) / 1e3;
+          const avgPerFrame = elapsedCapture / completedFrames;
+          setEstimatedRemaining(Math.round(avgPerFrame * (totalFrames - completedFrames)));
+          setElapsed(Math.floor((performance.now() - startTimeRef.current) / 1e3));
         }
         if (cancelledRef.current) return;
         if (useInlineAudio && renderedAudio && encoder.addAudioChunk) {

package/dist/{chunk-VI5AIVOQ.js → chunk-MEPETH5V.js}

@@ -1923,7 +1923,12 @@ function createMp4Muxer(options) {
         sampleRate: options.audio.sampleRate
       }
     } : {},
-    fastStart: "in-memory"
+    // The result is already complete before it is downloaded or passed to the
+    // GIF transcode, so browser-style fast start provides no benefit here.
+    // `in-memory` retains every encoded sample until finalize; regular MP4
+    // layout writes each compressed chunk into the output as it arrives and
+    // releases the sample payload immediately.
+    fastStart: false
   });
   return {
     hasAudioTrack: options.audio !== void 0,
@@ -1946,6 +1951,30 @@ function createMp4Muxer(options) {
   };
 }
 
+// src/encoderMemory.ts
+var MAX_WEBCODECS_QUEUE_BYTES = 64 * 1024 * 1024;
+var MAX_WEBCODECS_QUEUE_SECONDS = 1;
+var MAX_FFMPEG_FRAME_BATCH_BYTES = 64 * 1024 * 1024;
+var MAX_FFMPEG_FRAME_BATCH_SECONDS = 6;
+function resolveWebCodecsQueueLimit({ width, height, fps }) {
+  const bytesPerFrame = Math.max(1, width * height * 4);
+  const framesByBytes = Math.max(1, Math.floor(MAX_WEBCODECS_QUEUE_BYTES / bytesPerFrame));
+  const framesByTime = Math.max(1, Math.ceil(fps * MAX_WEBCODECS_QUEUE_SECONDS));
+  return Math.min(framesByBytes, framesByTime);
+}
+async function applyWebCodecsBackpressure(encoder, queueLimit, submittedSinceFlush = encoder.encodeQueueSize) {
+  if (encoder.encodeQueueSize < queueLimit && submittedSinceFlush < queueLimit) return false;
+  await encoder.flush();
+  return true;
+}
+function shouldEncodeFfmpegBatch(frameCount, byteLength, fps) {
+  const framesByTime = Math.max(1, Math.ceil(fps * MAX_FFMPEG_FRAME_BATCH_SECONDS));
+  return frameCount >= framesByTime || byteLength >= MAX_FFMPEG_FRAME_BATCH_BYTES;
+}
+
 export {
-  createMp4Muxer
+  createMp4Muxer,
+  resolveWebCodecsQueueLimit,
+  applyWebCodecsBackpressure,
+  shouldEncodeFfmpegBatch
 };

package/dist/{chunk-KQG6DZ7G.js → chunk-ULNKIV4A.js}

@@ -1,6 +1,6 @@
 import {
   useVideoExport
-} from "./chunk-VILZP3GL.js";
+} from "./chunk-IDY64F4K.js";
 
 // src/VideoExportModal.tsx
 import { useState, useCallback, useId, useRef } from "react";
@@ -12,12 +12,6 @@ function formatDuration(seconds) {
   const s = seconds % 60;
   return `${m}m ${s}s`;
 }
-function encoderLabel(outputFormat, backend) {
-  if (outputFormat === "gif") {
-    return backend === "webcodecs" ? "WebCodecs (H.264) \u2192 ffmpeg.wasm (GIF)" : "ffmpeg.wasm (H.264 \u2192 GIF)";
-  }
-  return backend === "webcodecs" ? "WebCodecs (H.264)" : "ffmpeg.wasm (H.264)";
-}
 var VIDEO_EXPORT_PALETTES = {
   light: {
     overlay: "rgba(0, 0, 0, 0.5)",
@@ -61,6 +55,7 @@ var overlayStyle = {
   zIndex: 1e4
 };
 var modalStyle = {
+  position: "relative",
   borderRadius: 0,
   padding: "24px 28px",
   minWidth: 380,
@@ -70,9 +65,24 @@ var modalStyle = {
 };
 var titleStyle = {
   margin: "0 0 16px 0",
+  paddingRight: 32,
   fontSize: 18,
   fontWeight: 600
 };
+var closeButtonStyle = {
+  position: "absolute",
+  top: 12,
+  right: 12,
+  width: 32,
+  height: 32,
+  padding: 0,
+  border: 0,
+  background: "transparent",
+  fontFamily: "inherit",
+  fontSize: 24,
+  lineHeight: 1,
+  cursor: "pointer"
+};
 var labelStyle = {
   display: "block",
   fontSize: 13,
@@ -137,7 +147,9 @@ function VideoExportModal({
   const [orientation, setOrientation] = useState(
     defaultConfig?.orientation ?? "landscape"
   );
-  const [captionMode, setCaptionMode] = useState(defaultConfig?.captionMode ?? "off");
+  const [captionMode, setCaptionMode] = useState(
+    defaultConfig?.captionMode ?? (initialOutputFormat === "gif" ? "standard" : "off")
+  );
   const [animationsEnabled, setAnimationsEnabled] = useState(
     defaultConfig?.animationsEnabled ?? initialOutputFormat === "mp4"
   );
@@ -180,7 +192,7 @@ function VideoExportModal({
   const {
     state,
     progress,
-    backend,
+    phase,
     outputFormat: completedOutputFormat,
     downloadUrl,
     fileSize,
@@ -198,9 +210,11 @@ function VideoExportModal({
     if (next === "gif") {
       setFps(10);
       setAnimationsEnabled(false);
+      setCaptionMode("standard");
     } else {
       setFps(24);
       setAnimationsEnabled(true);
+      setCaptionMode("off");
     }
   }, []);
   const handleExport = useCallback(async () => {
@@ -250,19 +264,25 @@ function VideoExportModal({
   const handleClose = useCallback(() => {
     if (state === "capturing" || state === "encoding" || state === "preparing") {
       cancelExport();
+    } else {
+      resetExport();
     }
-    resetExport();
     onClose();
   }, [state, cancelExport, resetExport, onClose]);
   const isExporting = state === "preparing" || state === "capturing" || state === "encoding";
-  useModalDialog({ rootRef: overlayRef, dialogRef, onClose: handleClose });
+  useModalDialog({
+    rootRef: overlayRef,
+    dialogRef,
+    closeOnEscape: false,
+    onClose: handleClose
+  });
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref: overlayRef,
       style: { ...overlayStyle, background: palette.overlay },
       "data-color-scheme": colorScheme,
-      onClick: handleClose,
+      onClick: (event) => event.stopPropagation(),
       children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -276,6 +296,16 @@ function VideoExportModal({
           onClick: (e) => e.stopPropagation(),
           children: [
             /* @__PURE__ */ jsx("h2", { id: titleId, style: themedTitleStyle, children: outputFormat === "gif" ? "Export Animated GIF" : "Export Video" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Close export dialog",
+                style: { ...closeButtonStyle, color: palette.label },
+                onClick: handleClose,
+                children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
+              }
+            ),
             state === "idle" && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Format" }),
@@ -409,10 +439,6 @@ function VideoExportModal({
               ] })
             ] }),
             isExporting && /* @__PURE__ */ jsxs(Fragment, { children: [
-              backend && /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: palette.muted, margin: "0 0 8px 0" }, children: [
-                "Encoder: ",
-                encoderLabel(completedOutputFormat, backend)
-              ] }),
               /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -441,12 +467,20 @@ function VideoExportModal({
                 progress,
                 "% complete"
               ] }),
+              phase && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  style: { fontSize: 12, color: palette.label, margin: "0 0 4px 0" },
+                  "data-squisq-video-export-phase": true,
+                  children: phase
+                }
+              ),
               /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: palette.muted, margin: 0 }, children: [
                 formatDuration(elapsed),
                 " elapsed",
                 estimatedRemaining > 0 && ` \xB7 ~${formatDuration(estimatedRemaining)} remaining`
               ] }),
-              /* @__PURE__ */ jsx("div", { style: footerStyle, children: /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: cancelExport, children: "Cancel" }) })
+              /* @__PURE__ */ jsx("div", { style: footerStyle, children: /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: handleClose, children: "Cancel" }) })
             ] }),
             state === "complete" && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("p", { style: { fontSize: 14, margin: "0 0 8px 0", color: palette.success }, children: "Export complete!" }),
@@ -459,10 +493,6 @@ function VideoExportModal({
                 "Video only",
                 audioSkippedReason ? ` \u2014 ${audioSkippedReason}` : ""
               ] }),
-              backend && /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: palette.muted, margin: "0 0 12px 0" }, children: [
-                "Encoded with ",
-                encoderLabel(completedOutputFormat, backend)
-              ] }),
               /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
                 /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: handleClose, children: "Close" }),
                 /* @__PURE__ */ jsxs("button", { style: themedPrimaryButtonStyle, onClick: handleDownload, children: [

package/dist/{chunk-YZN7D4IC.js → chunk-ZQJBUX75.js}

@@ -1,6 +1,8 @@
 import {
-  createMp4Muxer
-} from "./chunk-VI5AIVOQ.js";
+  applyWebCodecsBackpressure,
+  createMp4Muxer,
+  resolveWebCodecsQueueLimit
+} from "./chunk-MEPETH5V.js";
 
 // src/mainThreadEncoder.ts
 import { bitrateForQuality, validateVideoExportOptions } from "@bendyline/squisq-video";
@@ -38,6 +40,8 @@ function createEncoder(config) {
   let closed = false;
   let fatalError = null;
   const frameDuration = 1e6 / config.fps;
+  const queueLimit = resolveWebCodecsQueueLimit(config);
+  let framesSinceFlush = 0;
   function fail(err) {
     closed = true;
     if (encoder.state !== "closed") encoder.close();
@@ -64,21 +68,34 @@ function createEncoder(config) {
     framerate: config.fps
   });
   return {
-    async encodeFrame(bitmap, frameIndex) {
+    async encodeFrame(source, frameIndex) {
       if (fatalError) {
-        bitmap.close();
+        if ("close" in source) source.close();
         throw fail(fatalError);
       }
       if (closed) {
-        bitmap.close();
+        if ("close" in source) source.close();
         throw new Error("Encoder already closed");
       }
-      const timestamp = Math.round(frameIndex * frameDuration);
-      const frame = new VideoFrame(bitmap, { timestamp });
-      const keyFrame = frameIndex % 30 === 0;
-      encoder.encode(frame, { keyFrame });
-      frame.close();
-      bitmap.close();
+      try {
+        const drained = await applyWebCodecsBackpressure(encoder, queueLimit, framesSinceFlush);
+        if (drained) framesSinceFlush = 0;
+        if (fatalError) throw fail(fatalError);
+        if (closed) throw new Error("Encoder already closed");
+        const timestamp = Math.round(frameIndex * frameDuration);
+        const frame = new VideoFrame(source, { timestamp });
+        try {
+          const keyFrame = frameIndex % 30 === 0;
+          encoder.encode(frame, { keyFrame });
+          framesSinceFlush++;
+        } finally {
+          frame.close();
+        }
+      } catch (err) {
+        throw fail(err instanceof Error ? err : new Error(String(err)));
+      } finally {
+        if ("close" in source) source.close();
+      }
     },
     addAudioChunk(chunk, meta) {
       if (closed || !muxer.hasAudioTrack) return;

package/dist/components/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Doc, MediaProvider } from '@bendyline/squisq/schemas';
-import { a as VideoExportConfig } from '../useVideoExport-NtqZVgaz.js';
+import { a as VideoExportConfig } from '../useVideoExport-DAEglCva.js';
 import '@bendyline/squisq/markdown';
 import '@bendyline/squisq-video';
 import '@bendyline/squisq-react';

package/dist/components/index.js

@@ -1,10 +1,10 @@
 import {
   VideoExportButton,
   VideoExportModal
-} from "../chunk-KQG6DZ7G.js";
-import "../chunk-VILZP3GL.js";
-import "../chunk-YZN7D4IC.js";
-import "../chunk-VI5AIVOQ.js";
+} from "../chunk-ULNKIV4A.js";
+import "../chunk-IDY64F4K.js";
+import "../chunk-ZQJBUX75.js";
+import "../chunk-MEPETH5V.js";
 export {
   VideoExportButton,
   VideoExportModal

package/dist/encoder/index.d.ts

@@ -34,9 +34,10 @@ interface EncoderConfig {
         sampleRate: number;
     };
 }
+type EncoderFrameSource = ImageBitmap | HTMLCanvasElement;
 interface MainThreadEncoder {
-    /** Encode a single frame. The bitmap is closed after encoding. */
-    encodeFrame(bitmap: ImageBitmap, frameIndex: number): Promise<void>;
+    /** Encode a single frame. ImageBitmap sources are closed after encoding. */
+    encodeFrame(frame: EncoderFrameSource, frameIndex: number): Promise<void>;
     /**
      * Hand an encoded audio chunk (from a WebCodecs `AudioEncoder`) to the muxer.
      * Only valid when the encoder was created with an `audio` config; otherwise a
@@ -92,4 +93,4 @@ declare function createEncoder(config: EncoderConfig): MainThreadEncoder;
  */
 declare function supportsWebCodecsAac(sampleRate?: number, channels?: number): Promise<boolean>;
 
-export { type EncoderConfig, type MainThreadEncoder, createEncoder, supportsWebCodecs, supportsWebCodecsAac, supportsWebCodecsH264 };
+export { type EncoderConfig, type EncoderFrameSource, type MainThreadEncoder, createEncoder, supportsWebCodecs, supportsWebCodecsAac, supportsWebCodecsH264 };

package/dist/encoder/index.js

@@ -3,8 +3,8 @@ import {
   supportsWebCodecs,
   supportsWebCodecsAac,
   supportsWebCodecsH264
-} from "../chunk-YZN7D4IC.js";
-import "../chunk-VI5AIVOQ.js";
+} from "../chunk-ZQJBUX75.js";
+import "../chunk-MEPETH5V.js";
 export {
   createEncoder,
   supportsWebCodecs,

package/dist/hooks/index.d.ts

@@ -1,4 +1,4 @@
-export { V as VideoAudioPolicy, a as VideoExportConfig, b as VideoExportResult, c as VideoExportState, d as VideoOutputFormat, u as useVideoExport } from '../useVideoExport-NtqZVgaz.js';
+export { V as VideoAudioPolicy, a as VideoExportConfig, b as VideoExportResult, c as VideoExportState, d as VideoOutputFormat, u as useVideoExport } from '../useVideoExport-DAEglCva.js';
 import { Doc } from '@bendyline/squisq/schemas';
 import { RenderHtmlOptions } from '@bendyline/squisq-video';
 import { CaptionMode } from '@bendyline/squisq-react';
@@ -13,14 +13,27 @@ import '@bendyline/squisq/markdown';
  *
  * Uses React directly — no script injection, no iframes, no eval.
  *
- * Returns an ImageBitmap for each frame (transferable to a Worker).
+ * Returns either a reusable canvas or an ImageBitmap snapshot for a Worker.
  */
 
+interface FrameCaptureOptions {
+    /**
+     * Reuse the previous raster when seeking produced the same visual state.
+     * The timeline is still advanced so animations, captions, and media remain
+     * correct; only the expensive html2canvas pass is skipped.
+     */
+    reuseIfUnchanged?: boolean;
+}
 interface FrameCaptureHandle {
     /** Initialize the hidden player. Returns the video duration in seconds. */
     init: (doc: Doc, renderOptions: Omit<RenderHtmlOptions, 'playerScript'>, captionMode?: CaptionMode) => Promise<number>;
     /** Capture a single frame at the given time (seconds). Returns an ImageBitmap. */
-    captureFrame: (time: number) => Promise<ImageBitmap>;
+    captureFrame: (time: number, options?: FrameCaptureOptions) => Promise<ImageBitmap>;
+    /**
+     * Render into the hook's reusable canvas without allocating an ImageBitmap.
+     * The canvas remains valid until the next capture or destroy call.
+     */
+    captureCanvasFrame: (time: number, options?: FrameCaptureOptions) => Promise<HTMLCanvasElement>;
     /** Clean up resources. */
     destroy: () => void;
 }
@@ -29,4 +42,4 @@ interface FrameCaptureHandle {
  */
 declare function useFrameCapture(): FrameCaptureHandle;
 
-export { type FrameCaptureHandle, useFrameCapture };
+export { type FrameCaptureHandle, type FrameCaptureOptions, useFrameCapture };

package/dist/hooks/index.js

@@ -1,9 +1,9 @@
 import {
   useFrameCapture,
   useVideoExport
-} from "../chunk-VILZP3GL.js";
-import "../chunk-YZN7D4IC.js";
-import "../chunk-VI5AIVOQ.js";
+} from "../chunk-IDY64F4K.js";
+import "../chunk-ZQJBUX75.js";
+import "../chunk-MEPETH5V.js";
 export {
   useFrameCapture,
   useVideoExport

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { VideoExportButton, VideoExportButtonProps, VideoExportModal, VideoExportModalProps, VideoExportPalette } from './components/index.js';
-export { V as VideoAudioPolicy, a as VideoExportConfig, b as VideoExportResult, c as VideoExportState, d as VideoOutputFormat, u as useVideoExport } from './useVideoExport-NtqZVgaz.js';
-export { FrameCaptureHandle, useFrameCapture } from './hooks/index.js';
-export { EncoderConfig, MainThreadEncoder, createEncoder, supportsWebCodecs, supportsWebCodecsAac, supportsWebCodecsH264 } from './encoder/index.js';
+export { V as VideoAudioPolicy, a as VideoExportConfig, b as VideoExportResult, c as VideoExportState, d as VideoOutputFormat, u as useVideoExport } from './useVideoExport-DAEglCva.js';
+export { FrameCaptureHandle, FrameCaptureOptions, useFrameCapture } from './hooks/index.js';
+export { EncoderConfig, EncoderFrameSource, MainThreadEncoder, createEncoder, supportsWebCodecs, supportsWebCodecsAac, supportsWebCodecsH264 } from './encoder/index.js';
 export { FfmpegWasmLoadConfig } from '@bendyline/squisq-video';
 import 'react/jsx-runtime';
 import '@bendyline/squisq/schemas';

package/dist/index.js

@@ -1,18 +1,18 @@
 import {
   VideoExportButton,
   VideoExportModal
-} from "./chunk-KQG6DZ7G.js";
+} from "./chunk-ULNKIV4A.js";
 import {
   useFrameCapture,
   useVideoExport
-} from "./chunk-VILZP3GL.js";
+} from "./chunk-IDY64F4K.js";
 import {
   createEncoder,
   supportsWebCodecs,
   supportsWebCodecsAac,
   supportsWebCodecsH264
-} from "./chunk-YZN7D4IC.js";
-import "./chunk-VI5AIVOQ.js";
+} from "./chunk-ZQJBUX75.js";
+import "./chunk-MEPETH5V.js";
 export {
   VideoExportButton,
   VideoExportModal,

package/dist/{useVideoExport-NtqZVgaz.d.ts → useVideoExport-DAEglCva.d.ts}

@@ -60,7 +60,7 @@ interface VideoExportConfig {
     mediaProvider?: MediaProvider;
     /** Policy and byte/time limits for MediaProvider URLs. */
     resourcePolicy?: ResourcePolicy;
-    /** Caption mode for the exported video (default: 'off') */
+    /** Caption mode for the exported video (default: 'off' for MP4, 'standard' for GIF). */
     captionMode?: CaptionMode;
     /** Player IIFE bundle (unused in browser export, kept for CLI/Playwright path) */
     playerScript?: string;

package/dist/workers/encode.worker.js

@@ -1,6 +1,9 @@
 import {
-  createMp4Muxer
-} from "../chunk-VI5AIVOQ.js";
+  applyWebCodecsBackpressure,
+  createMp4Muxer,
+  resolveWebCodecsQueueLimit,
+  shouldEncodeFfmpegBatch
+} from "../chunk-MEPETH5V.js";
 
 // src/workers/encode.worker.ts
 import {
@@ -12,8 +15,11 @@ var backend = null;
 var cancelled = false;
 var videoEncoder = null;
 var muxer = null;
+var webCodecsQueueLimit = 1;
+var webCodecsFramesSinceFlush = 0;
 var ffmpegInstance = null;
 var ffmpegFrames = [];
+var ffmpegFrameBytes = 0;
 var ffmpegConfig = null;
 var totalFramesReceived = 0;
 var totalFramesExpected = 0;
@@ -84,18 +90,34 @@ function initWebCodecs(config) {
     bitrate: bitrateForQuality(config.quality, config.width, config.height),
     framerate: config.fps
   });
+  webCodecsQueueLimit = resolveWebCodecsQueueLimit(config);
+  webCodecsFramesSinceFlush = 0;
 }
 async function encodeFrameWebCodecs(msg) {
   if (!videoEncoder || cancelled) {
     msg.bitmap.close();
     return;
   }
-  const frame = new VideoFrame(msg.bitmap, { timestamp: msg.timestamp });
-  const keyFrame = msg.frameIndex % 30 === 0;
-  videoEncoder.encode(frame, { keyFrame });
-  frame.close();
-  msg.bitmap.close();
-  totalFramesReceived++;
+  try {
+    const drained = await applyWebCodecsBackpressure(
+      videoEncoder,
+      webCodecsQueueLimit,
+      webCodecsFramesSinceFlush
+    );
+    if (drained) webCodecsFramesSinceFlush = 0;
+    if (cancelled || videoEncoder.state === "closed") return;
+    const frame = new VideoFrame(msg.bitmap, { timestamp: msg.timestamp });
+    try {
+      const keyFrame = msg.frameIndex % 30 === 0;
+      videoEncoder.encode(frame, { keyFrame });
+      webCodecsFramesSinceFlush++;
+    } finally {
+      frame.close();
+    }
+    totalFramesReceived++;
+  } finally {
+    msg.bitmap.close();
+  }
   postFrameProgress(50, frameLabel("Encoding"));
 }
 function frameLabel(verb) {
@@ -115,6 +137,7 @@ async function finalizeWebCodecs() {
 async function initFfmpegWasm(config) {
   ffmpegConfig = config;
   ffmpegFrames = [];
+  ffmpegFrameBytes = 0;
   ffmpegSegments.length = 0;
   totalFramesReceived = 0;
   const load = resolveFfmpegWasmLoad(config.ffmpegWasm, "The ffmpeg.wasm encoder fallback", {
@@ -150,11 +173,12 @@ async function encodeFrameFfmpeg(msg) {
   msg.bitmap.close();
   const blob = await canvas.convertToBlob({ type: "image/png" });
   const arrayBuffer = await blob.arrayBuffer();
-  ffmpegFrames.push({ data: new Uint8Array(arrayBuffer), index: msg.frameIndex });
+  const frameData = new Uint8Array(arrayBuffer);
+  ffmpegFrames.push({ data: frameData, index: msg.frameIndex });
+  ffmpegFrameBytes += frameData.byteLength;
   totalFramesReceived++;
   postFrameProgress(80, frameLabel("Collecting"));
-  const batchSize = (ffmpegConfig?.fps ?? 30) * 10;
-  if (ffmpegFrames.length >= batchSize) {
+  if (shouldEncodeFfmpegBatch(ffmpegFrames.length, ffmpegFrameBytes, ffmpegConfig?.fps ?? 30)) {
     await encodeFfmpegBatch();
   }
 }
@@ -212,6 +236,7 @@ async function encodeFfmpegBatch() {
   }
   await ffmpeg.deleteFile(segmentName);
   ffmpegFrames = [];
+  ffmpegFrameBytes = 0;
 }
 async function finalizeFfmpeg() {
   if (!ffmpegInstance || cancelled) return;
@@ -305,6 +330,7 @@ async function handleMessage(msg) {
       muxer = null;
       disposeFfmpeg();
       ffmpegFrames = [];
+      ffmpegFrameBytes = 0;
       ffmpegSegments.length = 0;
       totalFramesExpected = 0;
       backend = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-video-react",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "React components for browser-based MP4 and animated-GIF export of Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -65,9 +65,9 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "2.3.1",
-    "@bendyline/squisq-video": "2.2.1",
-    "@bendyline/squisq-react": "2.3.1",
+    "@bendyline/squisq": "2.3.2",
+    "@bendyline/squisq-video": "2.2.2",
+    "@bendyline/squisq-react": "2.3.2",
     "@ffmpeg/core": "0.12.9",
     "@ffmpeg/ffmpeg": "0.12.15",
     "@ffmpeg/util": "0.12.2",