@bendyline/squisq-video-react 1.0.0

package/dist/index.js

@@ -0,0 +1,816 @@
+// src/VideoExportModal.tsx
+import { useState as useState2, useCallback as useCallback3 } from "react";
+
+// src/hooks/useVideoExport.ts
+import { useState, useRef as useRef2, useCallback as useCallback2, useEffect } from "react";
+import { resolveDimensions } from "@bendyline/squisq-video";
+
+// src/mp4Mux.ts
+import { Muxer, ArrayBufferTarget } from "mp4-muxer";
+function createMp4Muxer(options) {
+  const target = new ArrayBufferTarget();
+  const muxer = new Muxer({
+    target,
+    video: {
+      codec: "avc",
+      width: options.width,
+      height: options.height
+    },
+    fastStart: "in-memory"
+  });
+  return {
+    addVideoChunk(chunk, meta) {
+      muxer.addVideoChunk(chunk, meta);
+    },
+    finalize() {
+      muxer.finalize();
+      return target.buffer;
+    }
+  };
+}
+
+// src/mainThreadEncoder.ts
+function supportsWebCodecs() {
+  return typeof VideoEncoder !== "undefined" && typeof VideoFrame !== "undefined";
+}
+function bitrateForQuality(quality, width, height) {
+  const pixels = width * height;
+  const baseBitrate = pixels * 4;
+  switch (quality) {
+    case "draft":
+      return Math.round(baseBitrate * 0.5);
+    case "high":
+      return Math.round(baseBitrate * 2);
+    default:
+      return baseBitrate;
+  }
+}
+function createEncoder(config) {
+  if (!supportsWebCodecs()) {
+    throw new Error(
+      "WebCodecs is not available in this browser. Video export requires Chrome 94+, Edge 94+, or another Chromium-based browser."
+    );
+  }
+  if (!config.fps || config.fps <= 0 || !config.width || !config.height) {
+    throw new Error(
+      `Invalid encoder config: fps=${config.fps}, width=${config.width}, height=${config.height}`
+    );
+  }
+  const muxer = createMp4Muxer({
+    width: config.width,
+    height: config.height,
+    fps: config.fps
+  });
+  let closed = false;
+  const frameDuration = 1e6 / config.fps;
+  const encoder = new VideoEncoder({
+    output(chunk, meta) {
+      if (closed) return;
+      muxer.addVideoChunk(chunk, meta ?? void 0);
+    },
+    error(err) {
+      console.error("WebCodecs encoder error:", err.message);
+    }
+  });
+  encoder.configure({
+    codec: "avc1.640028",
+    // H.264 High profile, level 4.0 (supports up to 1080p)
+    width: config.width,
+    height: config.height,
+    bitrate: bitrateForQuality(config.quality, config.width, config.height),
+    framerate: config.fps
+  });
+  return {
+    encodeFrame(bitmap, frameIndex) {
+      if (closed) {
+        bitmap.close();
+        return;
+      }
+      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();
+    },
+    async finalize() {
+      if (closed) throw new Error("Encoder already closed");
+      await encoder.flush();
+      encoder.close();
+      closed = true;
+      return muxer.finalize();
+    },
+    close() {
+      if (closed) return;
+      closed = true;
+      if (encoder.state !== "closed") {
+        encoder.close();
+      }
+    }
+  };
+}
+
+// src/hooks/useFrameCapture.ts
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { useRef, useCallback, useMemo } from "react";
+import { DocPlayer, MediaContext } from "@bendyline/squisq-react";
+import html2canvas from "html2canvas";
+var MIME_MAP = {
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  gif: "image/gif",
+  webp: "image/webp",
+  svg: "image/svg+xml",
+  bmp: "image/bmp",
+  avif: "image/avif"
+};
+function arrayBufferToDataUrl(buffer, mime) {
+  const bytes = new Uint8Array(buffer);
+  const chunks = [];
+  const CHUNK = 8192;
+  for (let i = 0; i < bytes.length; i += CHUNK) {
+    chunks.push(String.fromCharCode(...bytes.subarray(i, i + CHUNK)));
+  }
+  return `data:${mime};base64,${btoa(chunks.join(""))}`;
+}
+function createInlineProvider(images) {
+  const dataUrls = /* @__PURE__ */ new Map();
+  const mimeTypes = /* @__PURE__ */ new Map();
+  for (const [path, buffer] of images) {
+    const ext = path.split(".").pop()?.toLowerCase() ?? "";
+    const mime = MIME_MAP[ext] ?? "application/octet-stream";
+    dataUrls.set(path, arrayBufferToDataUrl(buffer, mime));
+    mimeTypes.set(path, mime);
+  }
+  return {
+    async resolveUrl(relativePath) {
+      return dataUrls.get(relativePath) ?? relativePath;
+    },
+    async listMedia() {
+      return [...dataUrls.keys()].map((name) => ({
+        name,
+        mimeType: mimeTypes.get(name) ?? "application/octet-stream",
+        size: 0
+      }));
+    },
+    async addMedia() {
+      throw new Error("Read-only");
+    },
+    async removeMedia() {
+      throw new Error("Read-only");
+    },
+    dispose() {
+    }
+  };
+}
+function useFrameCapture() {
+  const containerRef = useRef(null);
+  const rootRef = useRef(null);
+  const dimensionsRef = useRef({ width: 1920, height: 1080 });
+  const init = useCallback(
+    async (doc, renderOptions, captionMode) => {
+      if (rootRef.current || containerRef.current) {
+        const oldRoot = rootRef.current;
+        const oldContainer = containerRef.current;
+        rootRef.current = null;
+        containerRef.current = null;
+        await new Promise((resolve) => {
+          setTimeout(() => {
+            if (oldRoot) oldRoot.unmount();
+            if (oldContainer) oldContainer.remove();
+            resolve();
+          }, 0);
+        });
+      }
+      const width = renderOptions.width ?? 1920;
+      const height = renderOptions.height ?? 1080;
+      dimensionsRef.current = { width, height };
+      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);
+      containerRef.current = container;
+      const renderRoot = document.createElement("div");
+      renderRoot.id = "squisq-capture-root";
+      renderRoot.style.cssText = `width:${width}px;height:${height}px;`;
+      container.appendChild(renderRoot);
+      const mediaProvider = renderOptions.images ? createInlineProvider(renderOptions.images) : null;
+      const root = createRoot(renderRoot);
+      rootRef.current = root;
+      const captionsEnabled = captionMode !== void 0 && captionMode !== "off";
+      const captionStyle = captionMode === "social" ? "social" : "standard";
+      const playerElement = createElement(DocPlayer, {
+        script: doc,
+        basePath: ".",
+        renderMode: true,
+        showControls: false,
+        autoPlay: false,
+        forceViewport: { width, height, name: "export" },
+        captionsEnabled,
+        captionStyle
+      });
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      if (mediaProvider) {
+        root.render(createElement(MediaContext.Provider, { value: mediaProvider }, playerElement));
+      } else {
+        root.render(playerElement);
+      }
+      return new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          const w = window;
+          const hasSeek = typeof w.seekTo === "function";
+          const hasDur = typeof w.getDuration === "function";
+          const rootEl = containerRef.current?.querySelector("#squisq-capture-root");
+          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}`
+            )
+          );
+        }, 15e3);
+        const checkApi = () => {
+          const w = window;
+          if (typeof w.getDuration === "function" && typeof w.seekTo === "function") {
+            clearTimeout(timeout);
+            const duration = w.getDuration();
+            resolve(duration);
+          } else {
+            requestAnimationFrame(checkApi);
+          }
+        };
+        setTimeout(checkApi, 500);
+      });
+    },
+    []
+  );
+  const captureFrame = useCallback(async (time) => {
+    const container = containerRef.current;
+    const w = window;
+    if (!container || typeof w.seekTo !== "function") {
+      throw new Error("Frame capture not initialized \u2014 call init() first");
+    }
+    const { width, height } = dimensionsRef.current;
+    await w.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 destroy = useCallback(() => {
+    if (rootRef.current) {
+      rootRef.current.unmount();
+      rootRef.current = null;
+    }
+    if (containerRef.current) {
+      containerRef.current.remove();
+      containerRef.current = null;
+    }
+  }, []);
+  return useMemo(() => ({ init, captureFrame, destroy }), [init, captureFrame, destroy]);
+}
+
+// src/hooks/useVideoExport.ts
+function useVideoExport() {
+  const [state, setState] = useState("idle");
+  const [progress, setProgress] = useState(0);
+  const [phase, setPhase] = useState("");
+  const [duration, setDuration] = useState(0);
+  const [backend, setBackend] = useState(null);
+  const [downloadUrl, setDownloadUrl] = useState(null);
+  const [fileSize, setFileSize] = useState(0);
+  const [error, setError] = useState(null);
+  const [elapsed, setElapsed] = useState(0);
+  const [estimatedRemaining, setEstimatedRemaining] = useState(0);
+  const encoderRef = useRef2(null);
+  const cancelledRef = useRef2(false);
+  const downloadUrlRef = useRef2(null);
+  const startTimeRef = useRef2(0);
+  const elapsedTimerRef = useRef2(null);
+  const frameCapture = useFrameCapture();
+  useEffect(() => {
+    return () => {
+      if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
+      if (downloadUrlRef.current) {
+        URL.revokeObjectURL(downloadUrlRef.current);
+      }
+      if (encoderRef.current) {
+        encoderRef.current.close();
+      }
+      frameCapture.destroy();
+    };
+  }, [frameCapture]);
+  const reset = useCallback2(() => {
+    if (downloadUrlRef.current) {
+      URL.revokeObjectURL(downloadUrlRef.current);
+      downloadUrlRef.current = null;
+    }
+    if (encoderRef.current) {
+      encoderRef.current.close();
+      encoderRef.current = null;
+    }
+    frameCapture.destroy();
+    setState("idle");
+    setProgress(0);
+    setPhase("");
+    setDuration(0);
+    setBackend(null);
+    setDownloadUrl(null);
+    setFileSize(0);
+    setError(null);
+    setElapsed(0);
+    setEstimatedRemaining(0);
+    if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
+    cancelledRef.current = false;
+  }, [frameCapture]);
+  const cancel = useCallback2(() => {
+    cancelledRef.current = true;
+    if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
+    if (encoderRef.current) {
+      encoderRef.current.close();
+      encoderRef.current = null;
+    }
+    frameCapture.destroy();
+    setState("idle");
+    setProgress(0);
+    setPhase("Cancelled");
+  }, [frameCapture]);
+  const startExport = useCallback2(
+    async (doc, config) => {
+      cancelledRef.current = false;
+      if (downloadUrlRef.current) {
+        URL.revokeObjectURL(downloadUrlRef.current);
+        downloadUrlRef.current = null;
+      }
+      setDownloadUrl(null);
+      setFileSize(0);
+      setError(null);
+      const quality = config.quality ?? "normal";
+      const fps = config.fps ?? 30;
+      const orientation = config.orientation ?? "landscape";
+      const { width, height } = resolveDimensions({ orientation });
+      try {
+        if (!supportsWebCodecs()) {
+          throw new Error(
+            "WebCodecs is not available in this browser. Video export requires Chrome 94+, Edge 94+, or another Chromium-based browser."
+          );
+        }
+        setState("preparing");
+        setPhase("Loading document\u2026");
+        setProgress(0);
+        setElapsed(0);
+        setEstimatedRemaining(0);
+        startTimeRef.current = performance.now();
+        if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
+        elapsedTimerRef.current = setInterval(() => {
+          setElapsed(Math.floor((performance.now() - startTimeRef.current) / 1e3));
+        }, 1e3);
+        let images = config.images;
+        if (!images && config.mediaProvider) {
+          images = /* @__PURE__ */ new Map();
+          const entries = await config.mediaProvider.listMedia();
+          for (const entry of entries) {
+            const url2 = await config.mediaProvider.resolveUrl(entry.name);
+            const res = await fetch(url2);
+            if (res.ok) {
+              const data = await res.arrayBuffer();
+              images.set(entry.name, data);
+            }
+          }
+        }
+        const docDuration = await frameCapture.init(
+          doc,
+          { images, audio: config.audio, width, height },
+          config.captionMode
+        );
+        if (cancelledRef.current) return;
+        setDuration(docDuration);
+        if (docDuration <= 0) {
+          throw new Error("Document has zero duration \u2014 nothing to export");
+        }
+        setPhase("Starting encoder\u2026");
+        setProgress(5);
+        const encoder = createEncoder({ width, height, fps, quality });
+        encoderRef.current = encoder;
+        setBackend("webcodecs");
+        if (cancelledRef.current) return;
+        setState("capturing");
+        const totalFrames = Math.ceil(docDuration * fps);
+        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);
+          if (cancelledRef.current) {
+            bitmap.close();
+            return;
+          }
+          encoder.encodeFrame(bitmap, i);
+        }
+        if (cancelledRef.current) return;
+        setState("encoding");
+        setPhase("Finalizing video\u2026");
+        setProgress(95);
+        const mp4Buffer = await encoder.finalize();
+        encoderRef.current = null;
+        if (cancelledRef.current) return;
+        const blob = new Blob([mp4Buffer], { type: "video/mp4" });
+        const url = URL.createObjectURL(blob);
+        downloadUrlRef.current = url;
+        setDownloadUrl(url);
+        setFileSize(mp4Buffer.byteLength);
+        setState("complete");
+        setProgress(100);
+        setPhase("Export complete");
+        setEstimatedRemaining(0);
+        if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
+        frameCapture.destroy();
+      } catch (err) {
+        if (elapsedTimerRef.current) clearInterval(elapsedTimerRef.current);
+        if (cancelledRef.current) return;
+        const message = err instanceof Error ? err.message : String(err);
+        setState("error");
+        setError(message);
+        setPhase("Export failed");
+        if (encoderRef.current) {
+          encoderRef.current.close();
+          encoderRef.current = null;
+        }
+        frameCapture.destroy();
+      }
+    },
+    [frameCapture]
+  );
+  return {
+    state,
+    progress,
+    phase,
+    duration,
+    backend,
+    downloadUrl,
+    fileSize,
+    error,
+    elapsed,
+    estimatedRemaining,
+    startExport,
+    cancel,
+    reset
+  };
+}
+
+// src/VideoExportModal.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function formatDuration(seconds) {
+  if (seconds < 60) return `${seconds}s`;
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}m ${s}s`;
+}
+var overlayStyle = {
+  position: "fixed",
+  inset: 0,
+  background: "rgba(0, 0, 0, 0.5)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 1e4
+};
+var modalStyle = {
+  background: "#FFFDF7",
+  border: "1px solid #c9b98a",
+  borderRadius: 0,
+  padding: "24px 28px",
+  minWidth: 380,
+  maxWidth: 480,
+  boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  color: "#4a3c1f"
+};
+var titleStyle = {
+  margin: "0 0 16px 0",
+  fontSize: 18,
+  fontWeight: 600,
+  color: "#2d2310"
+};
+var labelStyle = {
+  display: "block",
+  fontSize: 13,
+  fontWeight: 500,
+  marginBottom: 4,
+  color: "#5a4a2a"
+};
+var selectStyle = {
+  width: "100%",
+  padding: "6px 8px",
+  fontSize: 13,
+  fontFamily: "inherit",
+  border: "1px solid #c9b98a",
+  borderRadius: 0,
+  background: "#fff",
+  color: "#4a3c1f",
+  marginBottom: 12
+};
+var btnPrimary = {
+  padding: "8px 20px",
+  fontSize: 14,
+  fontFamily: "inherit",
+  fontWeight: 500,
+  cursor: "pointer",
+  background: "#8B6914",
+  color: "#fff",
+  border: "1px solid #7a5c10",
+  borderRadius: 0
+};
+var btnSecondary = {
+  padding: "8px 20px",
+  fontSize: 14,
+  fontFamily: "inherit",
+  fontWeight: 500,
+  cursor: "pointer",
+  background: "#E8DFC6",
+  color: "#4a3c1f",
+  border: "1px solid #c9b98a",
+  borderRadius: 0
+};
+var progressBarOuterStyle = {
+  width: "100%",
+  height: 8,
+  background: "#E8DFC6",
+  borderRadius: 0,
+  overflow: "hidden",
+  marginBottom: 8
+};
+var footerStyle = {
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: 8,
+  marginTop: 20
+};
+function VideoExportModal({
+  doc,
+  playerScript,
+  mediaProvider,
+  images,
+  audio,
+  onClose
+}) {
+  const [quality, setQuality] = useState2("normal");
+  const [fps, setFps] = useState2(24);
+  const [orientation, setOrientation] = useState2("landscape");
+  const [captionMode, setCaptionMode] = useState2("off");
+  const exportHook = useVideoExport();
+  const {
+    state,
+    progress,
+    backend,
+    downloadUrl,
+    fileSize,
+    error,
+    elapsed,
+    estimatedRemaining,
+    startExport,
+    cancel: cancelExport,
+    reset: resetExport
+  } = exportHook;
+  const handleExport = useCallback3(async () => {
+    const config = {
+      quality,
+      fps,
+      orientation,
+      captionMode,
+      images,
+      audio,
+      mediaProvider,
+      playerScript
+    };
+    await startExport(doc, config);
+  }, [
+    doc,
+    quality,
+    fps,
+    orientation,
+    captionMode,
+    images,
+    audio,
+    mediaProvider,
+    playerScript,
+    startExport
+  ]);
+  const handleDownload = useCallback3(() => {
+    if (!downloadUrl) return;
+    const a = document.createElement("a");
+    a.href = downloadUrl;
+    const ts = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+    a.download = `document-${ts}.mp4`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }, [downloadUrl]);
+  const handleClose = useCallback3(() => {
+    if (state === "capturing" || state === "encoding" || state === "preparing") {
+      cancelExport();
+    }
+    resetExport();
+    onClose();
+  }, [state, cancelExport, resetExport, onClose]);
+  const isExporting = state === "preparing" || state === "capturing" || state === "encoding";
+  return /* @__PURE__ */ jsx("div", { style: overlayStyle, onClick: handleClose, children: /* @__PURE__ */ jsxs("div", { style: modalStyle, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx("h2", { style: titleStyle, children: "Export Video" }),
+    state === "idle" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Quality" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            style: selectStyle,
+            value: quality,
+            onChange: (e) => setQuality(e.target.value),
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "draft", children: "Draft \u2014 fast, lower quality" }),
+              /* @__PURE__ */ jsx("option", { value: "normal", children: "Normal \u2014 balanced" }),
+              /* @__PURE__ */ jsx("option", { value: "high", children: "High \u2014 best quality, slower" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Frame Rate" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            style: selectStyle,
+            value: fps,
+            onChange: (e) => setFps(Number(e.target.value)),
+            children: [
+              /* @__PURE__ */ jsx("option", { value: 15, children: "15 fps \u2014 fast export" }),
+              /* @__PURE__ */ jsx("option", { value: 24, children: "24 fps \u2014 cinematic" }),
+              /* @__PURE__ */ jsx("option", { value: 30, children: "30 fps \u2014 smooth" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Orientation" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            style: selectStyle,
+            value: orientation,
+            onChange: (e) => setOrientation(e.target.value),
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "landscape", children: "Landscape (1920 \xD7 1080)" }),
+              /* @__PURE__ */ jsx("option", { value: "portrait", children: "Portrait (1080 \xD7 1920)" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Captions" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            style: selectStyle,
+            value: captionMode,
+            onChange: (e) => setCaptionMode(e.target.value),
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "off", children: "None" }),
+              /* @__PURE__ */ jsx("option", { value: "standard", children: "Standard (top bar)" }),
+              /* @__PURE__ */ jsx("option", { value: "social", children: "Social media (large words)" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
+        /* @__PURE__ */ jsx("button", { style: btnSecondary, onClick: handleClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx("button", { style: btnPrimary, onClick: handleExport, children: "Export Video" })
+      ] })
+    ] }),
+    isExporting && /* @__PURE__ */ jsxs(Fragment, { children: [
+      backend && /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: "#8a7a5a", margin: "0 0 8px 0" }, children: "Encoder: WebCodecs (H.264)" }),
+      /* @__PURE__ */ jsx("div", { style: progressBarOuterStyle, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: `${progress}%`,
+            height: "100%",
+            background: "#8B6914",
+            transition: "width 0.3s ease"
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, margin: "0 0 4px 0" }, children: [
+        progress,
+        "% complete"
+      ] }),
+      /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: "#8a7a5a", margin: 0 }, children: [
+        formatDuration(elapsed),
+        " elapsed",
+        estimatedRemaining > 0 && ` \xB7 ~${formatDuration(estimatedRemaining)} remaining`
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: footerStyle, children: /* @__PURE__ */ jsx("button", { style: btnSecondary, onClick: cancelExport, children: "Cancel" }) })
+    ] }),
+    state === "complete" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { style: { fontSize: 14, margin: "0 0 8px 0", color: "#2d6a10" }, children: "Export complete!" }),
+      /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, color: "#5a4a2a", margin: "0 0 4px 0" }, children: [
+        "File size: ",
+        (fileSize / (1024 * 1024)).toFixed(1),
+        " MB"
+      ] }),
+      backend && /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: "#8a7a5a", margin: "0 0 12px 0" }, children: "Encoded with WebCodecs (H.264)" }),
+      /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
+        /* @__PURE__ */ jsx("button", { style: btnSecondary, onClick: handleClose, children: "Close" }),
+        /* @__PURE__ */ jsx("button", { style: btnPrimary, onClick: handleDownload, children: "Download MP4" })
+      ] })
+    ] }),
+    state === "error" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { style: { fontSize: 14, margin: "0 0 8px 0", color: "#a03020" }, children: "Export failed" }),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          style: {
+            fontSize: 13,
+            color: "#5a4a2a",
+            margin: "0 0 12px 0",
+            wordBreak: "break-word"
+          },
+          children: error
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
+        /* @__PURE__ */ jsx("button", { style: btnSecondary, onClick: handleClose, children: "Close" }),
+        /* @__PURE__ */ jsx("button", { style: btnPrimary, onClick: handleExport, children: "Retry" })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/VideoExportButton.tsx
+import { useState as useState3, useCallback as useCallback4 } from "react";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function VideoExportButton({
+  doc,
+  playerScript,
+  mediaProvider,
+  images,
+  audio,
+  label = "Export Video",
+  style,
+  disabled
+}) {
+  const [showModal, setShowModal] = useState3(false);
+  const handleOpen = useCallback4(() => setShowModal(true), []);
+  const handleClose = useCallback4(() => setShowModal(false), []);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("button", { onClick: handleOpen, disabled, style, children: label }),
+    showModal && createPortal(
+      /* @__PURE__ */ jsx2(
+        VideoExportModal,
+        {
+          doc,
+          playerScript,
+          mediaProvider,
+          images,
+          audio,
+          onClose: handleClose
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+export {
+  VideoExportButton,
+  VideoExportModal,
+  createEncoder,
+  supportsWebCodecs,
+  useFrameCapture,
+  useVideoExport
+};
+//# sourceMappingURL=index.js.map