@bendyline/squisq-video-react 2.0.2 → 2.2.0

package/dist/chunk-YZN7D4IC.js

@@ -0,0 +1,300 @@
+import {
+  createMp4Muxer
+} from "./chunk-VI5AIVOQ.js";
+
+// src/mainThreadEncoder.ts
+import { bitrateForQuality, validateVideoExportOptions } from "@bendyline/squisq-video";
+function supportsWebCodecs() {
+  return typeof VideoEncoder !== "undefined" && typeof VideoFrame !== "undefined";
+}
+async function supportsWebCodecsH264(config) {
+  if (!supportsWebCodecs()) return false;
+  try {
+    const support = await VideoEncoder.isConfigSupported({
+      codec: "avc1.640028",
+      width: config.width,
+      height: config.height,
+      bitrate: bitrateForQuality(config.quality, config.width, config.height),
+      framerate: config.fps
+    });
+    return support.supported === true;
+  } catch {
+    return false;
+  }
+}
+function createEncoder(config) {
+  validateVideoExportOptions(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."
+    );
+  }
+  const muxer = createMp4Muxer({
+    width: config.width,
+    height: config.height,
+    fps: config.fps,
+    ...config.audio ? { audio: config.audio } : {}
+  });
+  let closed = false;
+  let fatalError = null;
+  const frameDuration = 1e6 / config.fps;
+  function fail(err) {
+    closed = true;
+    if (encoder.state !== "closed") encoder.close();
+    return fatalError ?? err;
+  }
+  const encoder = new VideoEncoder({
+    output(chunk, meta) {
+      if (closed) return;
+      muxer.addVideoChunk(chunk, meta ?? void 0);
+    },
+    error(err) {
+      fatalError ?? (fatalError = new Error(`WebCodecs encoder error: ${err.message}`));
+    }
+  });
+  encoder.configure({
+    // Deliberate profile split from the fallback worker (avc1.42001f, Baseline):
+    // this primary WebCodecs path targets H.264 High@4.0 for better quality up
+    // to 1080p; the wasm-fallback worker uses Baseline for max decoder compat.
+    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 {
+    async encodeFrame(bitmap, frameIndex) {
+      if (fatalError) {
+        bitmap.close();
+        throw fail(fatalError);
+      }
+      if (closed) {
+        bitmap.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();
+    },
+    addAudioChunk(chunk, meta) {
+      if (closed || !muxer.hasAudioTrack) return;
+      muxer.addAudioChunk(chunk, meta);
+    },
+    async finalize() {
+      if (closed) throw new Error("Encoder already closed");
+      if (fatalError) throw fail(fatalError);
+      try {
+        await encoder.flush();
+      } catch (err) {
+        throw fail(err instanceof Error ? err : new Error(String(err)));
+      }
+      if (fatalError) throw fail(fatalError);
+      encoder.close();
+      closed = true;
+      return muxer.finalize();
+    },
+    close() {
+      if (closed) return;
+      closed = true;
+      if (encoder.state !== "closed") {
+        encoder.close();
+      }
+    }
+  };
+}
+
+// src/audioTrack.ts
+import {
+  ffmpegAudioMuxArgs,
+  resolveFfmpegWasmLoad
+} from "@bendyline/squisq-video";
+var EXPORT_AUDIO_SAMPLE_RATE = 48e3;
+var EXPORT_AUDIO_CHANNELS = 2;
+var REASON_NO_AAC_NO_SAB = "This browser cannot encode AAC audio (WebCodecs AudioEncoder unavailable) and the ffmpeg.wasm fallback requires cross-origin isolation (SharedArrayBuffer).";
+async function supportsWebCodecsAac(sampleRate = EXPORT_AUDIO_SAMPLE_RATE, channels = EXPORT_AUDIO_CHANNELS) {
+  if (typeof AudioEncoder === "undefined") return false;
+  try {
+    const support = await AudioEncoder.isConfigSupported({
+      codec: "mp4a.40.2",
+      sampleRate,
+      numberOfChannels: channels,
+      bitrate: 128e3
+    });
+    return support.supported === true;
+  } catch {
+    return false;
+  }
+}
+function selectAudioTier(inputs) {
+  if (!inputs.hasClips) {
+    return { tier: 3, reason: null };
+  }
+  if (inputs.aacSupported && inputs.canUseMainThreadWebCodecs) {
+    return { tier: 1, reason: null };
+  }
+  if (inputs.sharedArrayBufferAvailable) {
+    return { tier: 2, reason: null };
+  }
+  return { tier: 3, reason: REASON_NO_AAC_NO_SAB };
+}
+function resolveOfflineAudioContext() {
+  const g = globalThis;
+  const ctor = g.OfflineAudioContext ?? g.webkitOfflineAudioContext;
+  if (!ctor) {
+    throw new Error("OfflineAudioContext is not available in this environment.");
+  }
+  return ctor;
+}
+async function renderAudioTimeline(clips, buffers, totalDurationSec, sampleRate = EXPORT_AUDIO_SAMPLE_RATE) {
+  const Ctor = resolveOfflineAudioContext();
+  const channels = EXPORT_AUDIO_CHANNELS;
+  const length = Math.max(1, Math.ceil(totalDurationSec * sampleRate));
+  const ctx = new Ctor(channels, length, sampleRate);
+  const decoded = /* @__PURE__ */ new Map();
+  for (const [src, data] of buffers) {
+    try {
+      decoded.set(src, await ctx.decodeAudioData(data.slice(0)));
+    } catch {
+    }
+  }
+  for (const clip of clips) {
+    const buffer = decoded.get(clip.src);
+    if (!buffer) continue;
+    const node = ctx.createBufferSource();
+    node.buffer = buffer;
+    node.connect(ctx.destination);
+    const when = Math.max(0, clip.startSec);
+    const offset = Math.max(0, clip.sourceInSec);
+    const duration = Math.max(0, clip.durationSec);
+    node.start(when, offset, duration);
+  }
+  return ctx.startRendering();
+}
+async function encodeAacTrack(audioBuffer, sink, bitrate) {
+  if (typeof AudioEncoder === "undefined" || typeof AudioData === "undefined") {
+    throw new Error("WebCodecs AudioEncoder is not available.");
+  }
+  const sampleRate = audioBuffer.sampleRate;
+  const channels = audioBuffer.numberOfChannels;
+  let encodeError = null;
+  const encoder = new AudioEncoder({
+    output: (chunk, meta) => sink.addAudioChunk(chunk, meta ?? void 0),
+    error: (err) => {
+      encodeError = err instanceof Error ? err : new Error(String(err));
+    }
+  });
+  encoder.configure({ codec: "mp4a.40.2", sampleRate, numberOfChannels: channels, bitrate });
+  const FRAME = 1024;
+  const total = audioBuffer.length;
+  const channelData = [];
+  for (let ch = 0; ch < channels; ch++) {
+    channelData.push(audioBuffer.getChannelData(ch));
+  }
+  for (let offset = 0; offset < total; offset += FRAME) {
+    if (encodeError) break;
+    const count = Math.min(FRAME, total - offset);
+    const planar = new Float32Array(count * channels);
+    for (let ch = 0; ch < channels; ch++) {
+      planar.set(channelData[ch].subarray(offset, offset + count), ch * count);
+    }
+    const timestamp = Math.round(offset / sampleRate * 1e6);
+    const audioData = new AudioData({
+      format: "f32-planar",
+      sampleRate,
+      numberOfFrames: count,
+      numberOfChannels: channels,
+      timestamp,
+      data: planar
+    });
+    encoder.encode(audioData);
+    audioData.close();
+  }
+  await encoder.flush();
+  encoder.close();
+  if (encodeError) throw encodeError;
+}
+function audioBufferToWav(buffer) {
+  const channels = buffer.numberOfChannels;
+  const sampleRate = buffer.sampleRate;
+  const frames = buffer.length;
+  const bytesPerSample = 2;
+  const blockAlign = channels * bytesPerSample;
+  const dataSize = frames * blockAlign;
+  const out = new ArrayBuffer(44 + dataSize);
+  const view = new DataView(out);
+  const writeStr = (offset, str) => {
+    for (let i = 0; i < str.length; i++) view.setUint8(offset + i, str.charCodeAt(i));
+  };
+  writeStr(0, "RIFF");
+  view.setUint32(4, 36 + dataSize, true);
+  writeStr(8, "WAVE");
+  writeStr(12, "fmt ");
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);
+  view.setUint16(22, channels, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * blockAlign, true);
+  view.setUint16(32, blockAlign, true);
+  view.setUint16(34, bytesPerSample * 8, true);
+  writeStr(36, "data");
+  view.setUint32(40, dataSize, true);
+  const channelData = [];
+  for (let ch = 0; ch < channels; ch++) channelData.push(buffer.getChannelData(ch));
+  let pos = 44;
+  for (let i = 0; i < frames; i++) {
+    for (let ch = 0; ch < channels; ch++) {
+      let sample = channelData[ch][i];
+      sample = Math.max(-1, Math.min(1, sample));
+      view.setInt16(pos, sample < 0 ? sample * 32768 : sample * 32767, true);
+      pos += 2;
+    }
+  }
+  return new Uint8Array(out);
+}
+async function muxAudioWithFfmpegWasm(videoMp4, wav, audioBitrate, loadConfig) {
+  const load = resolveFfmpegWasmLoad(loadConfig, "ffmpeg.wasm audio muxing", {
+    classWorkerURL: new URL("./workers/ffmpeg.class-worker.js", import.meta.url).href
+  });
+  const { FFmpeg } = await import("@ffmpeg/ffmpeg");
+  const ffmpeg = new FFmpeg();
+  try {
+    await ffmpeg.load(load);
+    await ffmpeg.writeFile("video.mp4", videoMp4);
+    await ffmpeg.writeFile("audio.wav", wav);
+    const exitCode = await ffmpeg.exec([
+      "-i",
+      "video.mp4",
+      "-i",
+      "audio.wav",
+      "-c:v",
+      "copy",
+      ...ffmpegAudioMuxArgs(audioBitrate),
+      "out.mp4"
+    ]);
+    if (exitCode !== 0) {
+      throw new Error(`ffmpeg.wasm audio mux failed with exit code ${exitCode}`);
+    }
+    const data = await ffmpeg.readFile("out.mp4");
+    return data instanceof Uint8Array ? data : new TextEncoder().encode(data);
+  } finally {
+    ffmpeg.terminate();
+  }
+}
+
+export {
+  supportsWebCodecs,
+  supportsWebCodecsH264,
+  createEncoder,
+  EXPORT_AUDIO_SAMPLE_RATE,
+  EXPORT_AUDIO_CHANNELS,
+  supportsWebCodecsAac,
+  selectAudioTier,
+  renderAudioTimeline,
+  encodeAacTrack,
+  audioBufferToWav,
+  muxAudioWithFfmpegWasm
+};

package/dist/components/index.d.ts

@@ -0,0 +1,90 @@
+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 '@bendyline/squisq/markdown';
+import '@bendyline/squisq-video';
+import '@bendyline/squisq-react';
+
+interface VideoExportModalProps {
+    /** The document to export */
+    doc: Doc;
+    /**
+     * Player IIFE bundle source. Unused by the browser export path (frames
+     * are captured from a live in-page DocPlayer); only forwarded for
+     * CLI/Playwright-style pipelines that render standalone HTML.
+     */
+    playerScript?: string;
+    /** Optional media provider for resolving images/audio */
+    mediaProvider?: MediaProvider;
+    /** Pre-collected images map (alternative to mediaProvider) */
+    images?: Map<string, ArrayBuffer>;
+    /** Pre-collected audio map */
+    audio?: Map<string, ArrayBuffer>;
+    /**
+     * Seeds the modal's initial format, motion, quality, FPS, orientation, and
+     * caption selections. It is merged (as a base) into the config passed to the
+     * export hook, so a host can share one config shape with `useVideoExport`.
+     * The individual `images`/`audio`/`mediaProvider`/`playerScript` props still
+     * take precedence over any matching key here.
+     */
+    defaultConfig?: Partial<VideoExportConfig>;
+    /** Visual color scheme for the portaled dialog. Defaults to light. */
+    colorScheme?: 'light' | 'dark';
+    /** Optional host overrides for dialog surfaces, controls, status, and accent colors. */
+    uiPalette?: Partial<VideoExportPalette>;
+    /** Called when the modal should close */
+    onClose: () => void;
+}
+interface VideoExportPalette {
+    overlay: string;
+    surface: string;
+    control: string;
+    border: string;
+    text: string;
+    heading: string;
+    label: string;
+    muted: string;
+    secondary: string;
+    primary: string;
+    primaryBorder: string;
+    primaryText: string;
+    success: string;
+    danger: string;
+}
+declare function VideoExportModal({ doc, playerScript, mediaProvider, images, audio, defaultConfig, colorScheme, uiPalette, onClose, }: VideoExportModalProps): react_jsx_runtime.JSX.Element;
+
+interface VideoExportButtonProps {
+    /** The document to export */
+    doc: Doc;
+    /**
+     * Player IIFE bundle source. Unused by the browser export path (frames
+     * are captured from a live in-page DocPlayer); only forwarded for
+     * CLI/Playwright-style pipelines that render standalone HTML.
+     */
+    playerScript?: string;
+    /** Optional media provider for resolving images/audio */
+    mediaProvider?: MediaProvider;
+    /** Pre-collected images map */
+    images?: Map<string, ArrayBuffer>;
+    /** Pre-collected audio map */
+    audio?: Map<string, ArrayBuffer>;
+    /**
+     * Seeds the modal's initial output format and export settings and is merged
+     * as a base into the config passed to the export hook. Forwarded to
+     * {@link VideoExportModal}.
+     */
+    defaultConfig?: Partial<VideoExportConfig>;
+    /** Visual color scheme forwarded to the portaled modal. Defaults to light. */
+    colorScheme?: 'light' | 'dark';
+    /** Optional host palette overrides forwarded to the portaled modal. */
+    uiPalette?: Partial<VideoExportPalette>;
+    /** Button label (defaults to "Export Video", or "Export GIF" for a GIF default config) */
+    label?: string;
+    /** Additional inline styles for the button */
+    style?: React.CSSProperties;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+}
+declare function VideoExportButton({ doc, playerScript, mediaProvider, images, audio, defaultConfig, colorScheme, uiPalette, label, style, disabled, }: VideoExportButtonProps): react_jsx_runtime.JSX.Element;
+
+export { VideoExportButton, type VideoExportButtonProps, VideoExportModal, type VideoExportModalProps, type VideoExportPalette };

package/dist/components/index.js

@@ -0,0 +1,11 @@
+import {
+  VideoExportButton,
+  VideoExportModal
+} from "../chunk-KQG6DZ7G.js";
+import "../chunk-VILZP3GL.js";
+import "../chunk-YZN7D4IC.js";
+import "../chunk-VI5AIVOQ.js";
+export {
+  VideoExportButton,
+  VideoExportModal
+};

package/dist/encoder/index.d.ts

@@ -0,0 +1,95 @@
+export { FfmpegWasmLoadConfig } from '@bendyline/squisq-video';
+
+/**
+ * Main-thread WebCodecs encoder.
+ *
+ * Encodes video frames to MP4 using the WebCodecs API and mp4-muxer,
+ * running directly on the main thread. This is simpler and avoids
+ * worker module-resolution issues with bundlers. Since frame capture
+ * via html2canvas (~100-200ms per frame) is the bottleneck — not
+ * encoding (~1ms per frame with hardware-accelerated WebCodecs) —
+ * worker offloading provides minimal benefit.
+ *
+ * Requirements: Chrome 94+ / Edge 94+ (WebCodecs support).
+ */
+interface EncoderConfig {
+    width: number;
+    height: number;
+    fps: number;
+    quality: 'draft' | 'normal' | 'high';
+    /**
+     * Total frames the caller intends to submit, when known. Unused by the
+     * main-thread encoder (the caller owns the progress bar) but forwarded by
+     * {@link createWorkerEncoder} so the worker can report real progress instead
+     * of guessing from the frames it happens to have seen.
+     */
+    totalFrames?: number;
+    /**
+     * When present, the underlying muxer is configured with an AAC audio track
+     * and {@link MainThreadEncoder.addAudioChunk} becomes usable. Absent → the
+     * encoder produces a video-only MP4 exactly as before.
+     */
+    audio?: {
+        numberOfChannels: number;
+        sampleRate: number;
+    };
+}
+interface MainThreadEncoder {
+    /** Encode a single frame. The bitmap is closed after encoding. */
+    encodeFrame(bitmap: ImageBitmap, 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
+     * no-op. Must be called before {@link finalize}.
+     */
+    addAudioChunk?(chunk: EncodedAudioChunk, meta?: EncodedAudioChunkMetadata): void;
+    /** Flush pending frames and finalize the MP4. Returns the MP4 ArrayBuffer. */
+    finalize(): Promise<ArrayBuffer>;
+    /** Close the encoder without producing output (e.g., on cancel). */
+    close(): void;
+}
+/**
+ * Check whether the browser supports WebCodecs video encoding.
+ */
+declare function supportsWebCodecs(): boolean;
+/**
+ * Probe whether the WebCodecs encoder actually supports the H.264 profile
+ * we use. The `VideoEncoder` global can exist while the specific codec is
+ * unavailable — this is the case on Linux Chromium, which ships without
+ * the proprietary H.264 encoder.
+ */
+declare function supportsWebCodecsH264(config: EncoderConfig): Promise<boolean>;
+/**
+ * Create a main-thread WebCodecs encoder.
+ *
+ * Throws if WebCodecs is not available.
+ */
+declare function createEncoder(config: EncoderConfig): MainThreadEncoder;
+
+/**
+ * audioTrack — In-browser audio rendering + AAC encoding for MP4 export.
+ *
+ * Replaces the CLI's ffmpeg `adelay`/`atrim`/`amix` graph with browser-native
+ * primitives:
+ *
+ *  - {@link supportsWebCodecsAac} probes whether the browser can encode AAC
+ *    (WebCodecs `AudioEncoder`).
+ *  - {@link renderAudioTimeline} mixes an {@link AudioTimelineClip} list into a
+ *    single `AudioBuffer` using an `OfflineAudioContext` (decode → schedule →
+ *    render).
+ *  - {@link encodeAacTrack} feeds that buffer through a WebCodecs
+ *    `AudioEncoder` and hands the chunks to an mp4-muxer audio track (tier 1).
+ *  - {@link audioBufferToWav} + {@link muxAudioWithFfmpegWasm} cover the
+ *    ffmpeg.wasm fallback (tier 2).
+ *  - {@link selectAudioTier} is the pure capability→tier decision shared with
+ *    `useVideoExport` (and unit-tested at the module boundary).
+ */
+
+/**
+ * Whether the browser can encode AAC (`mp4a.40.2`) via WebCodecs.
+ * Returns false when `AudioEncoder` is undefined (e.g. Node/jsdom, Safari,
+ * older Chromium) or the config is unsupported.
+ */
+declare function supportsWebCodecsAac(sampleRate?: number, channels?: number): Promise<boolean>;
+
+export { type EncoderConfig, type MainThreadEncoder, createEncoder, supportsWebCodecs, supportsWebCodecsAac, supportsWebCodecsH264 };

package/dist/encoder/index.js

@@ -0,0 +1,13 @@
+import {
+  createEncoder,
+  supportsWebCodecs,
+  supportsWebCodecsAac,
+  supportsWebCodecsH264
+} from "../chunk-YZN7D4IC.js";
+import "../chunk-VI5AIVOQ.js";
+export {
+  createEncoder,
+  supportsWebCodecs,
+  supportsWebCodecsAac,
+  supportsWebCodecsH264
+};

package/dist/hooks/index.d.ts

@@ -0,0 +1,32 @@
+export { V as VideoAudioPolicy, a as VideoExportConfig, b as VideoExportResult, c as VideoExportState, d as VideoOutputFormat, u as useVideoExport } from '../useVideoExport-NtqZVgaz.js';
+import { Doc } from '@bendyline/squisq/schemas';
+import { RenderHtmlOptions } from '@bendyline/squisq-video';
+import { CaptionMode } from '@bendyline/squisq-react';
+import '@bendyline/squisq/markdown';
+
+/**
+ * useFrameCapture — Hidden div + html2canvas frame capture.
+ *
+ * Mounts a DocPlayer in renderMode inside a hidden div (same document),
+ * then captures individual frames by seeking the player and rendering
+ * the DOM to a canvas via html2canvas.
+ *
+ * Uses React directly — no script injection, no iframes, no eval.
+ *
+ * Returns an ImageBitmap for each frame (transferable to a Worker).
+ */
+
+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>;
+    /** Clean up resources. */
+    destroy: () => void;
+}
+/**
+ * Hook that manages a hidden div for frame capture.
+ */
+declare function useFrameCapture(): FrameCaptureHandle;
+
+export { type FrameCaptureHandle, useFrameCapture };

package/dist/hooks/index.js

@@ -0,0 +1,10 @@
+import {
+  useFrameCapture,
+  useVideoExport
+} from "../chunk-VILZP3GL.js";
+import "../chunk-YZN7D4IC.js";
+import "../chunk-VI5AIVOQ.js";
+export {
+  useFrameCapture,
+  useVideoExport
+};