@bendyline/squisq-video-react 2.0.2 → 2.2.0

package/dist/chunk-KQG6DZ7G.js

@@ -0,0 +1,549 @@
+import {
+  useVideoExport
+} from "./chunk-VILZP3GL.js";
+
+// src/VideoExportModal.tsx
+import { useState, useCallback, useId, useRef } from "react";
+import { useModalDialog } from "@bendyline/squisq-react";
+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`;
+}
+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)",
+    surface: "#FFFDF7",
+    control: "#ffffff",
+    border: "#c9b98a",
+    text: "#4a3c1f",
+    heading: "#2d2310",
+    label: "#5a4a2a",
+    muted: "#8a7a5a",
+    secondary: "#E8DFC6",
+    primary: "#8B6914",
+    primaryBorder: "#7a5c10",
+    primaryText: "#ffffff",
+    success: "#2d6a10",
+    danger: "#a03020"
+  },
+  dark: {
+    overlay: "rgba(2, 6, 23, 0.72)",
+    surface: "#111827",
+    control: "#0f172a",
+    border: "#475569",
+    text: "#e5e7eb",
+    heading: "#f8fafc",
+    label: "#cbd5e1",
+    muted: "#94a3b8",
+    secondary: "#1e293b",
+    primary: "#9a7416",
+    primaryBorder: "#d1a73b",
+    primaryText: "#ffffff",
+    success: "#86efac",
+    danger: "#fca5a5"
+  }
+};
+var overlayStyle = {
+  position: "fixed",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 1e4
+};
+var modalStyle = {
+  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"
+};
+var titleStyle = {
+  margin: "0 0 16px 0",
+  fontSize: 18,
+  fontWeight: 600
+};
+var labelStyle = {
+  display: "block",
+  fontSize: 13,
+  fontWeight: 500,
+  marginBottom: 4
+};
+var selectStyle = {
+  width: "100%",
+  padding: "6px 8px",
+  fontSize: 13,
+  fontFamily: "inherit",
+  borderRadius: 0,
+  marginBottom: 12
+};
+var btnPrimary = {
+  padding: "8px 20px",
+  fontSize: 14,
+  fontFamily: "inherit",
+  fontWeight: 500,
+  cursor: "pointer",
+  borderRadius: 0
+};
+var btnSecondary = {
+  padding: "8px 20px",
+  fontSize: 14,
+  fontFamily: "inherit",
+  fontWeight: 500,
+  cursor: "pointer",
+  borderRadius: 0
+};
+var progressBarOuterStyle = {
+  width: "100%",
+  height: 8,
+  borderRadius: 0,
+  overflow: "hidden",
+  marginBottom: 8
+};
+var footerStyle = {
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: 8,
+  marginTop: 20
+};
+function VideoExportModal({
+  doc,
+  playerScript,
+  mediaProvider,
+  images,
+  audio,
+  defaultConfig,
+  colorScheme = "light",
+  uiPalette,
+  onClose
+}) {
+  const overlayRef = useRef(null);
+  const dialogRef = useRef(null);
+  const titleId = useId();
+  const initialOutputFormat = defaultConfig?.outputFormat ?? "mp4";
+  const [outputFormat, setOutputFormat] = useState(initialOutputFormat);
+  const [quality, setQuality] = useState(defaultConfig?.quality ?? "normal");
+  const [fps, setFps] = useState(defaultConfig?.fps ?? (initialOutputFormat === "gif" ? 10 : 24));
+  const [orientation, setOrientation] = useState(
+    defaultConfig?.orientation ?? "landscape"
+  );
+  const [captionMode, setCaptionMode] = useState(defaultConfig?.captionMode ?? "off");
+  const [animationsEnabled, setAnimationsEnabled] = useState(
+    defaultConfig?.animationsEnabled ?? initialOutputFormat === "mp4"
+  );
+  const [audioPolicy, setAudioPolicy] = useState(
+    defaultConfig?.audioPolicy ?? "require"
+  );
+  const palette = {
+    ...VIDEO_EXPORT_PALETTES[colorScheme],
+    ...uiPalette
+  };
+  const themedModalStyle = {
+    ...modalStyle,
+    background: palette.surface,
+    border: `1px solid ${palette.border}`,
+    color: palette.text,
+    colorScheme
+  };
+  const themedTitleStyle = { ...titleStyle, color: palette.heading };
+  const themedLabelStyle = { ...labelStyle, color: palette.label };
+  const themedSelectStyle = {
+    ...selectStyle,
+    border: `1px solid ${palette.border}`,
+    background: palette.control,
+    color: palette.text,
+    colorScheme
+  };
+  const themedPrimaryButtonStyle = {
+    ...btnPrimary,
+    background: palette.primary,
+    border: `1px solid ${palette.primaryBorder}`,
+    color: palette.primaryText
+  };
+  const themedSecondaryButtonStyle = {
+    ...btnSecondary,
+    background: palette.secondary,
+    color: palette.text,
+    border: `1px solid ${palette.border}`
+  };
+  const exportHook = useVideoExport();
+  const {
+    state,
+    progress,
+    backend,
+    outputFormat: completedOutputFormat,
+    downloadUrl,
+    fileSize,
+    audioIncluded,
+    audioSkippedReason,
+    error,
+    elapsed,
+    estimatedRemaining,
+    startExport,
+    cancel: cancelExport,
+    reset: resetExport
+  } = exportHook;
+  const handleOutputFormatChange = useCallback((next) => {
+    setOutputFormat(next);
+    if (next === "gif") {
+      setFps(10);
+      setAnimationsEnabled(false);
+    } else {
+      setFps(24);
+      setAnimationsEnabled(true);
+    }
+  }, []);
+  const handleExport = useCallback(async () => {
+    const config = {
+      // defaultConfig is the base; explicit props/selections win over it.
+      ...defaultConfig,
+      outputFormat,
+      animationsEnabled,
+      quality,
+      fps,
+      orientation,
+      captionMode,
+      audioPolicy,
+      images,
+      audio,
+      mediaProvider,
+      // Only thread the bundle through when the host actually supplied one.
+      ...playerScript !== void 0 ? { playerScript } : {}
+    };
+    await startExport(doc, config);
+  }, [
+    doc,
+    outputFormat,
+    animationsEnabled,
+    quality,
+    fps,
+    orientation,
+    captionMode,
+    audioPolicy,
+    images,
+    audio,
+    mediaProvider,
+    playerScript,
+    defaultConfig,
+    startExport
+  ]);
+  const handleDownload = useCallback(() => {
+    if (!downloadUrl) return;
+    const a = document.createElement("a");
+    a.href = downloadUrl;
+    const ts = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+    a.download = `document-${ts}.${completedOutputFormat}`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }, [downloadUrl, completedOutputFormat]);
+  const handleClose = useCallback(() => {
+    if (state === "capturing" || state === "encoding" || state === "preparing") {
+      cancelExport();
+    }
+    resetExport();
+    onClose();
+  }, [state, cancelExport, resetExport, onClose]);
+  const isExporting = state === "preparing" || state === "capturing" || state === "encoding";
+  useModalDialog({ rootRef: overlayRef, dialogRef, onClose: handleClose });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: overlayRef,
+      style: { ...overlayStyle, background: palette.overlay },
+      "data-color-scheme": colorScheme,
+      onClick: handleClose,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: dialogRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          tabIndex: -1,
+          style: themedModalStyle,
+          "data-squisq-video-export-modal": true,
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx("h2", { id: titleId, style: themedTitleStyle, children: outputFormat === "gif" ? "Export Animated GIF" : "Export Video" }),
+            state === "idle" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Format" }),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    "aria-label": "Format",
+                    style: themedSelectStyle,
+                    value: outputFormat,
+                    onChange: (e) => handleOutputFormatChange(e.target.value),
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "mp4", children: "MP4 video" }),
+                      /* @__PURE__ */ jsx("option", { value: "gif", children: "Animated GIF" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Quality" }),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    "aria-label": "Quality",
+                    style: themedSelectStyle,
+                    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: themedLabelStyle, children: "Frame Rate" }),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    "aria-label": "Frame Rate",
+                    style: themedSelectStyle,
+                    value: fps,
+                    onChange: (e) => setFps(Number(e.target.value)),
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: 10, children: "10 fps \u2014 recommended for GIF" }),
+                      /* @__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: themedLabelStyle, children: "Orientation" }),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    "aria-label": "Orientation",
+                    style: themedSelectStyle,
+                    value: orientation,
+                    onChange: (e) => setOrientation(e.target.value),
+                    children: [
+                      /* @__PURE__ */ jsxs("option", { value: "landscape", children: [
+                        "Landscape (",
+                        outputFormat === "gif" ? "960 \xD7 540" : "1920 \xD7 1080",
+                        ")"
+                      ] }),
+                      /* @__PURE__ */ jsxs("option", { value: "portrait", children: [
+                        "Portrait (",
+                        outputFormat === "gif" ? "540 \xD7 960" : "1080 \xD7 1920",
+                        ")"
+                      ] })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Captions" }),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    "aria-label": "Captions",
+                    style: themedSelectStyle,
+                    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)" })
+                    ]
+                  }
+                )
+              ] }),
+              outputFormat === "mp4" && /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Audio" }),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    "aria-label": "Audio handling",
+                    style: themedSelectStyle,
+                    value: audioPolicy,
+                    onChange: (e) => setAudioPolicy(e.target.value),
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "require", children: "Require document audio" }),
+                      /* @__PURE__ */ jsx("option", { value: "best-effort", children: "Best effort \u2014 allow video-only fallback" }),
+                      /* @__PURE__ */ jsx("option", { value: "omit", children: "Omit audio intentionally" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("label", { style: themedLabelStyle, children: "Animations & transitions" }),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    "aria-label": "Animations and transitions",
+                    style: themedSelectStyle,
+                    value: animationsEnabled ? "enabled" : "disabled",
+                    onChange: (e) => setAnimationsEnabled(e.target.value === "enabled"),
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "enabled", children: "Enabled" }),
+                      /* @__PURE__ */ jsx("option", { value: "disabled", children: "Disabled \u2014 smaller files" })
+                    ]
+                  }
+                ),
+                outputFormat === "gif" && animationsEnabled && /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: palette.muted, margin: "-6px 0 12px" }, children: "Disabling motion is recommended for much smaller GIFs." })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
+                /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: handleClose, children: "Cancel" }),
+                /* @__PURE__ */ jsx("button", { style: themedPrimaryButtonStyle, onClick: handleExport, children: outputFormat === "gif" ? "Export GIF" : "Export Video" })
+              ] })
+            ] }),
+            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",
+                {
+                  role: "progressbar",
+                  "aria-label": "Video export progress",
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  "aria-valuenow": progress,
+                  style: { ...progressBarOuterStyle, background: palette.secondary },
+                  "data-squisq-video-export-progress-track": true,
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: `${progress}%`,
+                        height: "100%",
+                        background: palette.primary,
+                        transition: "width 0.3s ease"
+                      },
+                      "data-squisq-video-export-progress": true
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, margin: "0 0 4px 0" }, children: [
+                progress,
+                "% complete"
+              ] }),
+              /* @__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" }) })
+            ] }),
+            state === "complete" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("p", { style: { fontSize: 14, margin: "0 0 8px 0", color: palette.success }, children: "Export complete!" }),
+              /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, color: palette.label, margin: "0 0 4px 0" }, children: [
+                "File size: ",
+                (fileSize / (1024 * 1024)).toFixed(1),
+                " MB"
+              ] }),
+              completedOutputFormat === "gif" ? /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: palette.muted, margin: "0 0 4px 0" }, children: "Animated GIF does not include audio." }) : audioIncluded ? /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: palette.success, margin: "0 0 4px 0" }, children: "Audio included \u2713" }) : /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: palette.muted, margin: "0 0 4px 0" }, children: [
+                "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: [
+                  "Download ",
+                  completedOutputFormat.toUpperCase()
+                ] })
+              ] })
+            ] }),
+            state === "error" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("p", { style: { fontSize: 14, margin: "0 0 8px 0", color: palette.danger }, children: "Export failed" }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  style: {
+                    fontSize: 13,
+                    color: palette.label,
+                    margin: "0 0 12px 0",
+                    wordBreak: "break-word"
+                  },
+                  children: error
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
+                /* @__PURE__ */ jsx("button", { style: themedSecondaryButtonStyle, onClick: handleClose, children: "Close" }),
+                /* @__PURE__ */ jsxs("button", { style: themedPrimaryButtonStyle, onClick: handleExport, children: [
+                  "Retry ",
+                  outputFormat === "gif" ? "GIF" : "video"
+                ] })
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/VideoExportButton.tsx
+import { useState as useState2, useCallback as useCallback2 } 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,
+  defaultConfig,
+  colorScheme,
+  uiPalette,
+  label,
+  style,
+  disabled
+}) {
+  const [showModal, setShowModal] = useState2(false);
+  const resolvedLabel = label ?? (defaultConfig?.outputFormat === "gif" ? "Export GIF" : "Export Video");
+  const handleOpen = useCallback2(() => setShowModal(true), []);
+  const handleClose = useCallback2(() => setShowModal(false), []);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("button", { onClick: handleOpen, disabled, style, children: resolvedLabel }),
+    showModal && createPortal(
+      /* @__PURE__ */ jsx2(
+        VideoExportModal,
+        {
+          doc,
+          playerScript,
+          mediaProvider,
+          images,
+          audio,
+          defaultConfig,
+          colorScheme,
+          uiPalette,
+          onClose: handleClose
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+
+export {
+  VideoExportModal,
+  VideoExportButton
+};