@bendyline/squisq-video-react 2.0.2 → 2.2.0

package/src/audioTrack.ts

@@ -1,332 +0,0 @@
-/**
- * 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).
- */
-
-import {
-  ffmpegAudioMuxArgs,
-  type AudioTimelineClip,
-  type FfmpegWasmLoadConfig,
-} from '@bendyline/squisq-video';
-
-/** Sample rate the export renders + encodes audio at. */
-export const EXPORT_AUDIO_SAMPLE_RATE = 48_000;
-/** Channel count the export renders + encodes audio at (stereo). */
-export const EXPORT_AUDIO_CHANNELS = 2;
-
-/** Tier-3 reason used when AAC encoding is impossible and no ffmpeg fallback. */
-export const REASON_NO_AAC_NO_SAB =
-  'This browser cannot encode AAC audio (WebCodecs AudioEncoder unavailable) ' +
-  'and the ffmpeg.wasm fallback requires cross-origin isolation (SharedArrayBuffer).';
-
-// ── Capability probe ───────────────────────────────────────────────
-
-/**
- * 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.
- */
-export async function supportsWebCodecsAac(
-  sampleRate: number = EXPORT_AUDIO_SAMPLE_RATE,
-  channels: number = EXPORT_AUDIO_CHANNELS,
-): Promise<boolean> {
-  if (typeof AudioEncoder === 'undefined') return false;
-  try {
-    const support = await AudioEncoder.isConfigSupported({
-      codec: 'mp4a.40.2',
-      sampleRate,
-      numberOfChannels: channels,
-      bitrate: 128_000,
-    });
-    return support.supported === true;
-  } catch {
-    return false;
-  }
-}
-
-// ── Tier selection (pure) ──────────────────────────────────────────
-
-export interface AudioTierInputs {
-  /** Whether the doc has any audio timeline clips to include at all. */
-  hasClips: boolean;
-  /** Whether WebCodecs AAC encoding is available. */
-  aacSupported: boolean;
-  /** Whether `SharedArrayBuffer` (ffmpeg.wasm path) is available. */
-  sharedArrayBufferAvailable: boolean;
-  /** Whether the main-thread WebCodecs H.264 encoder is in use (tier-1 host). */
-  canUseMainThreadWebCodecs: boolean;
-}
-
-export interface AudioTierDecision {
-  /**
-   * 1 → inline AAC into the video muxer.
-   * 2 → finalize video-only then ffmpeg.wasm mux pass.
-   * 3 → video-only (no audio).
-   */
-  tier: 1 | 2 | 3;
-  /**
-   * Reason audio will be absent, when tier 3. `null` means "there was simply
-   * no audio to include" (not a failure). Non-null for a genuine capability
-   * shortfall. Always `null` for tiers 1 and 2 (the attempt is expected to
-   * succeed; the caller downgrades with a fresh reason on runtime failure).
-   */
-  reason: string | null;
-}
-
-/**
- * Decide which audio tier to run from capability booleans. Pure — the single
- * source of truth for tier selection, shared with `useVideoExport`.
- */
-export function selectAudioTier(inputs: AudioTierInputs): AudioTierDecision {
-  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 };
-}
-
-// ── OfflineAudioContext rendering ──────────────────────────────────
-
-type OfflineCtor = new (
-  numberOfChannels: number,
-  length: number,
-  sampleRate: number,
-) => OfflineAudioContext;
-
-function resolveOfflineAudioContext(): OfflineCtor {
-  const g = globalThis as unknown as {
-    OfflineAudioContext?: OfflineCtor;
-    webkitOfflineAudioContext?: OfflineCtor;
-  };
-  const ctor = g.OfflineAudioContext ?? g.webkitOfflineAudioContext;
-  if (!ctor) {
-    throw new Error('OfflineAudioContext is not available in this environment.');
-  }
-  return ctor;
-}
-
-/**
- * Mix a list of timeline clips into one `AudioBuffer`.
- *
- * Decodes each unique source once, then schedules an `AudioBufferSourceNode`
- * per clip at its `startSec` with the trim window (`offset = sourceInSec`,
- * `duration = durationSec`). Undecodable sources are skipped rather than
- * failing the whole render.
- */
-export async function renderAudioTimeline(
-  clips: AudioTimelineClip[],
-  buffers: Map<string, ArrayBuffer>,
-  totalDurationSec: number,
-  sampleRate: number = EXPORT_AUDIO_SAMPLE_RATE,
-): Promise<AudioBuffer> {
-  const Ctor = resolveOfflineAudioContext();
-  const channels = EXPORT_AUDIO_CHANNELS;
-  const length = Math.max(1, Math.ceil(totalDurationSec * sampleRate));
-  const ctx = new Ctor(channels, length, sampleRate);
-
-  // Decode each unique source once. decodeAudioData detaches the buffer, so
-  // hand it a copy to keep the caller's ArrayBuffer reusable.
-  const decoded = new Map<string, AudioBuffer>();
-  for (const [src, data] of buffers) {
-    try {
-      decoded.set(src, await ctx.decodeAudioData(data.slice(0)));
-    } catch {
-      // Skip undecodable sources; the clip is simply omitted.
-    }
-  }
-
-  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();
-}
-
-// ── WebCodecs AAC encode (tier 1) ──────────────────────────────────
-
-/** Minimal muxer surface {@link encodeAacTrack} needs. */
-export interface AudioChunkSink {
-  addAudioChunk(chunk: EncodedAudioChunk, meta?: EncodedAudioChunkMetadata): void;
-}
-
-/**
- * Encode an `AudioBuffer` to AAC via WebCodecs and feed the chunks to `sink`.
- * Resolves once every chunk has been flushed to the muxer. Throws only if the
- * `AudioEncoder` errors — the caller wraps this so audio failure never aborts
- * the video export.
- */
-export async function encodeAacTrack(
-  audioBuffer: AudioBuffer,
-  sink: AudioChunkSink,
-  bitrate: number,
-): Promise<void> {
-  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: Error | null = null;
-  const encoder = new AudioEncoder({
-    output: (chunk, meta) => sink.addAudioChunk(chunk, meta ?? undefined),
-    error: (err) => {
-      encodeError = err instanceof Error ? err : new Error(String(err));
-    },
-  });
-
-  encoder.configure({ codec: 'mp4a.40.2', sampleRate, numberOfChannels: channels, bitrate });
-
-  const FRAME = 1024; // samples per AudioData chunk
-  const total = audioBuffer.length;
-  const channelData: Float32Array[] = [];
-  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);
-    // Planar layout: all of channel 0, then all of channel 1, …
-    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) * 1_000_000);
-    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;
-}
-
-// ── WAV serialization (tier 2 input) ───────────────────────────────
-
-/**
- * Serialize an `AudioBuffer` to a 16-bit PCM WAV byte array. Used to hand the
- * rendered audio to the ffmpeg.wasm fallback for muxing.
- */
-export function audioBufferToWav(buffer: AudioBuffer): Uint8Array {
-  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: number, str: string) => {
-    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); // PCM chunk size
-  view.setUint16(20, 1, true); // PCM format
-  view.setUint16(22, channels, true);
-  view.setUint32(24, sampleRate, true);
-  view.setUint32(28, sampleRate * blockAlign, true); // byte rate
-  view.setUint16(32, blockAlign, true);
-  view.setUint16(34, bytesPerSample * 8, true);
-  writeStr(36, 'data');
-  view.setUint32(40, dataSize, true);
-
-  const channelData: Float32Array[] = [];
-  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 * 0x8000 : sample * 0x7fff, true);
-      pos += 2;
-    }
-  }
-
-  return new Uint8Array(out);
-}
-
-// ── ffmpeg.wasm mux fallback (tier 2) ──────────────────────────────
-
-/**
- * Mux a pre-encoded video-only MP4 with a WAV audio track in a single
- * ffmpeg.wasm pass (`-c:v copy -c:a aac -af apad -shortest`). Requires
- * `SharedArrayBuffer` (cross-origin isolation). Returns the muxed MP4 bytes.
- */
-export async function muxAudioWithFfmpegWasm(
-  videoMp4: Uint8Array,
-  wav: Uint8Array,
-  audioBitrate: number,
-  loadConfig?: FfmpegWasmLoadConfig,
-): Promise<Uint8Array> {
-  const { FFmpeg } = await import('@ffmpeg/ffmpeg');
-  const ffmpeg = new FFmpeg();
-  try {
-    await ffmpeg.load({
-      ...loadConfig,
-      classWorkerURL:
-        loadConfig?.classWorkerURL ??
-        new URL('./workers/ffmpeg.class-worker.js', import.meta.url).href,
-    });
-    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 as string);
-  } finally {
-    ffmpeg.terminate();
-  }
-}

package/src/gifTranscode.ts

@@ -1,75 +0,0 @@
-/**
- * Animated GIF finalization for the browser export path.
- *
- * The frame-capture pipeline already produces a compact, video-only MP4. For
- * the GIF MVP we use that MP4 as a bounded-memory intermediate, then run a
- * palette generation/application pass through ffmpeg.wasm.
- */
-
-import {
-  ffmpegGifOutputArgs,
-  type FfmpegWasmLoadConfig,
-  type GifOutputOptions,
-} from '@bendyline/squisq-video';
-
-/** Build the deterministic ffmpeg arguments used for MP4 -> animated GIF. */
-export function buildGifFfmpegArgs(options: GifOutputOptions): string[] {
-  return ['-y', '-i', 'video.mp4', ...ffmpegGifOutputArgs(options), 'out.gif'];
-}
-
-/**
- * Convert a video-only MP4 into a looping animated GIF with a generated
- * palette. The ffmpeg runtime is always terminated, including on failure.
- */
-export async function transcodeMp4ToGifWithFfmpegWasm(
-  videoMp4: Uint8Array,
-  options: GifOutputOptions,
-  loadConfig?: FfmpegWasmLoadConfig,
-  signal?: AbortSignal,
-): Promise<Uint8Array> {
-  if (videoMp4.byteLength === 0) {
-    throw new Error('Cannot create an animated GIF from an empty MP4.');
-  }
-  if (signal?.aborted) {
-    throw new DOMException('Animated GIF export was cancelled.', 'AbortError');
-  }
-
-  const args = buildGifFfmpegArgs(options);
-  const { FFmpeg } = await import('@ffmpeg/ffmpeg');
-  const ffmpeg = new FFmpeg();
-  let terminated = false;
-  const terminate = () => {
-    if (terminated) return;
-    terminated = true;
-    ffmpeg.terminate();
-  };
-  const handleAbort = () => terminate();
-  signal?.addEventListener('abort', handleAbort, { once: true });
-  try {
-    await ffmpeg.load({
-      ...loadConfig,
-      classWorkerURL:
-        loadConfig?.classWorkerURL ??
-        new URL('./workers/ffmpeg.class-worker.js', import.meta.url).href,
-    });
-    if (signal?.aborted) {
-      throw new DOMException('Animated GIF export was cancelled.', 'AbortError');
-    }
-    await ffmpeg.writeFile('video.mp4', videoMp4);
-    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 data = await ffmpeg.readFile('out.gif');
-    return data instanceof Uint8Array ? data : new TextEncoder().encode(data as string);
-  } finally {
-    signal?.removeEventListener('abort', handleAbort);
-    terminate();
-  }
-}

package/src/hooks/useFrameCapture.ts

@@ -1,268 +0,0 @@
-/**
- * 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).
- */
-
-import { createElement } from 'react';
-import { createRoot, type Root } from 'react-dom/client';
-import { useRef, useCallback, useMemo } from 'react';
-import type { Doc, MediaProvider } from '@bendyline/squisq/schemas';
-import type { RenderHtmlOptions } from '@bendyline/squisq-video';
-import { DocPlayer, MediaContext } from '@bendyline/squisq-react';
-import type { SquisqRenderAPI, CaptionMode, CaptionStyle } from '@bendyline/squisq-react';
-import html2canvas from 'html2canvas';
-
-export 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;
-}
-
-/** Extension → MIME type map (hoisted to avoid per-image allocation). */
-const MIME_MAP: Record<string, string> = {
-  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',
-};
-
-/** Convert an ArrayBuffer to a base64 data URI using chunked encoding (O(n)). */
-function arrayBufferToDataUrl(buffer: ArrayBuffer, mime: string): string {
-  const bytes = new Uint8Array(buffer);
-  const chunks: string[] = [];
-  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(''))}`;
-}
-
-/**
- * Create an inline MediaProvider from a map of paths to ArrayBuffers.
- */
-function createInlineProvider(images: Map<string, ArrayBuffer>): MediaProvider {
-  const dataUrls = new Map<string, string>();
-  const mimeTypes = new Map<string, string>();
-  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: string): Promise<string> {
-      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() {},
-  };
-}
-
-/**
- * Hook that manages a hidden div for frame capture.
- */
-export function useFrameCapture(): FrameCaptureHandle {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const rootRef = useRef<Root | null>(null);
-  const renderAPIRef = useRef<SquisqRenderAPI | null>(null);
-  const dimensionsRef = useRef<{ width: number; height: number }>({ width: 1920, height: 1080 });
-
-  const init = useCallback(
-    async (
-      doc: Doc,
-      renderOptions: Omit<RenderHtmlOptions, 'playerScript'>,
-      captionMode?: CaptionMode,
-    ): Promise<number> => {
-      // Clean up any existing container.
-      // Defer unmount to avoid "synchronously unmount a root while React
-      // was already rendering" when init() is called from a React handler.
-      if (rootRef.current || containerRef.current) {
-        const oldRoot = rootRef.current;
-        const oldContainer = containerRef.current;
-        rootRef.current = null;
-        containerRef.current = null;
-        renderAPIRef.current = null;
-        await new Promise<void>((resolve) => {
-          setTimeout(() => {
-            if (oldRoot) oldRoot.unmount();
-            if (oldContainer) oldContainer.remove();
-            resolve();
-          }, 0);
-        });
-      }
-
-      const width = renderOptions.width ?? 1920;
-      const height = renderOptions.height ?? 1080;
-      const animationsEnabled = renderOptions.animationsEnabled ?? true;
-      dimensionsRef.current = { width, height };
-
-      // Create a hidden container
-      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;
-
-      // Create render root
-      const renderRoot = document.createElement('div');
-      renderRoot.id = 'squisq-capture-root';
-      renderRoot.style.cssText = `width:${width}px;height:${height}px;`;
-      container.appendChild(renderRoot);
-
-      // Build media provider from images
-      const mediaProvider = renderOptions.images
-        ? createInlineProvider(renderOptions.images)
-        : null;
-
-      // Mount DocPlayer in renderMode via React
-      const root = createRoot(renderRoot);
-      rootRef.current = root;
-
-      // Derive caption props from captionMode
-      const captionsEnabled = captionMode !== undefined && captionMode !== 'off';
-      const captionStyle: CaptionStyle = captionMode === 'social' ? 'social' : 'standard';
-      let resolveRenderAPI!: (api: SquisqRenderAPI) => void;
-      const renderAPIReady = new Promise<SquisqRenderAPI>((resolve) => {
-        resolveRenderAPI = resolve;
-      });
-
-      const playerElement = createElement(DocPlayer, {
-        doc,
-        basePath: '.',
-        renderMode: true,
-        animationsEnabled,
-        showControls: false,
-        autoPlay: false,
-        forceViewport: { width, height, name: 'export' },
-        captionsEnabled,
-        captionStyle,
-        onRenderAPIReady: (api: SquisqRenderAPI | null) => {
-          if (containerRef.current !== container) return;
-          renderAPIRef.current = api;
-          if (api) resolveRenderAPI(api);
-        },
-      });
-
-      // Defer rendering to the next microtask to avoid "synchronously unmount
-      // a root while React was already rendering" when init() is called during
-      // a React render cycle (e.g., from startExport in VideoExportModal).
-      await new Promise<void>((resolve) => setTimeout(resolve, 0));
-
-      if (mediaProvider) {
-        root.render(createElement(MediaContext.Provider, { value: mediaProvider }, playerElement));
-      } else {
-        root.render(playerElement);
-      }
-
-      // Wait for this exact player's instance API.
-      return new Promise<number>((resolve, reject) => {
-        const timeout = setTimeout(() => {
-          const api = renderAPIRef.current;
-          const hasSeek = typeof api?.seekTo === 'function';
-          const hasDur = typeof api?.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}`,
-            ),
-          );
-        }, 15000);
-
-        void renderAPIReady.then((api) => {
-          clearTimeout(timeout);
-          resolve(api.getDuration());
-        });
-      });
-    },
-    [],
-  );
-
-  const captureFrame = useCallback(async (time: number): Promise<ImageBitmap> => {
-    const container = containerRef.current;
-    const api = renderAPIRef.current;
-    if (!container || !api) {
-      throw new Error('Frame capture not initialized — call init() first');
-    }
-
-    const { width, height } = dimensionsRef.current;
-
-    // Seek the player to the target time
-    await api.seekTo(time);
-
-    // Wait for the DOM to update after seek
-    await new Promise<void>((resolve) =>
-      requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
-    );
-
-    const root = container.querySelector('#squisq-capture-root') as HTMLElement;
-    if (!root) {
-      throw new Error('Capture root element not found');
-    }
-
-    // Render the DOM to a canvas via html2canvas.
-    // We're in the same document (no iframe), so COEP doesn't block cloning.
-    const canvas = await html2canvas(root, {
-      width,
-      height,
-      scale: 1,
-      useCORS: true,
-      allowTaint: true,
-      backgroundColor: '#000000',
-      logging: false,
-    });
-
-    // Convert to ImageBitmap (transferable to worker — zero-copy)
-    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;
-    }
-    renderAPIRef.current = null;
-  }, []);
-
-  // Return a stable object to prevent useEffect cleanup loops
-  // in consumers that depend on the handle reference.
-  return useMemo(() => ({ init, captureFrame, destroy }), [init, captureFrame, destroy]);
-}