@bendyline/squisq-video 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,134 @@
+import { Doc } from '@bendyline/squisq/schemas';
+export { fetchFile } from '@ffmpeg/util';
+
+/**
+ * Video Export Types
+ *
+ * Shared type definitions for video encoding and render HTML generation.
+ * Used by both the browser-based encoder and the CLI native encoder.
+ */
+/**
+ * Video quality preset.
+ * Controls the H.264 encoding speed/quality trade-off and constant rate factor.
+ *
+ * - draft:  ultrafast preset, CRF 28 — fast encode, lower quality (~1-2 Mbps)
+ * - normal: medium preset, CRF 23 — balanced (~3-5 Mbps)
+ * - high:   slow preset, CRF 18 — best quality, slowest (~8-12 Mbps)
+ */
+type VideoQuality = 'draft' | 'normal' | 'high';
+/** Viewport orientation for video output. */
+type VideoOrientation = 'landscape' | 'portrait';
+/** Encoding preset parameters mapped from VideoQuality. */
+interface QualityPreset {
+    /** FFmpeg -preset value (ultrafast, medium, slow) */
+    preset: string;
+    /** FFmpeg -crf value (lower = higher quality, 0-51 range) */
+    crf: number;
+}
+/** Quality preset lookup — shared between wasm and native encoders. */
+declare const QUALITY_PRESETS: Record<VideoQuality, QualityPreset>;
+/** Viewport dimensions for each orientation. */
+declare const ORIENTATION_DIMENSIONS: Record<VideoOrientation, {
+    width: number;
+    height: number;
+}>;
+/** Options for video export encoding. */
+interface VideoExportOptions {
+    /** Frames per second (default: 30) */
+    fps?: number;
+    /** Video width in pixels (default: based on orientation) */
+    width?: number;
+    /** Video height in pixels (default: based on orientation) */
+    height?: number;
+    /** Encoding quality preset (default: 'normal') */
+    quality?: VideoQuality;
+    /** Viewport orientation (default: 'landscape') */
+    orientation?: VideoOrientation;
+    /**
+     * Progress callback. Called during encoding with completion percentage and phase description.
+     * @param percent - 0-100 completion percentage
+     * @param phase - Human-readable description of current phase (e.g., 'encoding', 'muxing')
+     */
+    onProgress?: (percent: number, phase: string) => void;
+}
+/** Result from the wasm encoder. */
+interface EncoderResult {
+    /** MP4 file bytes */
+    data: Uint8Array;
+    /** Video duration in seconds */
+    duration: number;
+}
+/**
+ * Resolve dimensions from options, applying orientation defaults.
+ */
+declare function resolveDimensions(options: VideoExportOptions): {
+    width: number;
+    height: number;
+};
+
+/**
+ * Render HTML Generation for Video Frame Capture
+ *
+ * Generates a self-contained HTML document that loads the SquisqPlayer standalone
+ * bundle in renderMode, embedding all images and audio as base64 data URIs.
+ *
+ * The generated page exposes `window.seekTo(time)`, `window.getDuration()`, etc.
+ * via the SquisqRenderAPI, enabling Playwright (or any headless browser) to step
+ * through frames and capture screenshots.
+ *
+ * Browser-pure: uses only btoa() and Uint8Array — no Node.js APIs.
+ */
+
+interface RenderHtmlOptions {
+    /** The IIFE player bundle source code (from PLAYER_BUNDLE) */
+    playerScript: string;
+    /**
+     * Map of relative image paths (as they appear in the Doc) to binary data.
+     * Converted to base64 data URIs and embedded in the HTML.
+     */
+    images?: Map<string, ArrayBuffer>;
+    /**
+     * Map of audio segment names/paths to binary audio data.
+     * Converted to base64 data URIs and embedded in the HTML.
+     */
+    audio?: Map<string, ArrayBuffer>;
+    /** Viewport width in CSS pixels (default: 1920) */
+    width?: number;
+    /** Viewport height in CSS pixels (default: 1080) */
+    height?: number;
+    /** Caption style for the rendered video. Omit for no captions. */
+    captionStyle?: 'standard' | 'social';
+}
+/**
+ * Generate a self-contained HTML document for headless video frame capture.
+ *
+ * The page mounts the SquisqPlayer in renderMode, which exposes the
+ * SquisqRenderAPI on `window` (seekTo, getDuration, getCaptions, etc.).
+ *
+ * @param doc - The Doc to render
+ * @param options - Render HTML options including player script and media
+ * @returns Complete HTML string ready to be loaded in a headless browser
+ */
+declare function generateRenderHtml(doc: Doc, options: RenderHtmlOptions): string;
+
+/**
+ * WASM Video Encoder
+ *
+ * Encodes PNG frame screenshots into an MP4 video using ffmpeg.wasm.
+ * Browser-pure — no Node.js APIs. Works in any environment with SharedArrayBuffer
+ * support (browsers with COOP/COEP headers, or Node 18+).
+ *
+ * Uses @ffmpeg/ffmpeg for H.264 encoding and optional AAC audio muxing.
+ */
+
+/**
+ * Encode an array of PNG frame screenshots into an MP4 video.
+ *
+ * @param frames - Array of PNG image bytes (one per frame, in order)
+ * @param audio - Optional WAV/MP3/AAC audio bytes to mux into the video
+ * @param options - Encoding options (fps, quality, dimensions, progress)
+ * @returns Encoded MP4 data and duration metadata
+ */
+declare function framesToMp4Wasm(frames: Uint8Array[], audio: Uint8Array | null, options?: VideoExportOptions): Promise<EncoderResult>;
+
+export { type EncoderResult, ORIENTATION_DIMENSIONS, QUALITY_PRESETS, type QualityPreset, type RenderHtmlOptions, type VideoExportOptions, type VideoOrientation, type VideoQuality, framesToMp4Wasm, generateRenderHtml, resolveDimensions };

package/dist/index.js

@@ -0,0 +1,187 @@
+// src/types.ts
+var QUALITY_PRESETS = {
+  draft: { preset: "ultrafast", crf: 28 },
+  normal: { preset: "medium", crf: 23 },
+  high: { preset: "slow", crf: 18 }
+};
+var ORIENTATION_DIMENSIONS = {
+  landscape: { width: 1920, height: 1080 },
+  portrait: { width: 1080, height: 1920 }
+};
+function resolveDimensions(options) {
+  const orientation = options.orientation ?? "landscape";
+  const defaults = ORIENTATION_DIMENSIONS[orientation];
+  return {
+    width: options.width ?? defaults.width,
+    height: options.height ?? defaults.height
+  };
+}
+
+// src/renderHtml.ts
+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",
+  mp3: "audio/mpeg",
+  wav: "audio/wav",
+  ogg: "audio/ogg",
+  mp4: "video/mp4",
+  webm: "video/webm"
+};
+function inferMimeType(filename) {
+  const ext = filename.split(".").pop()?.toLowerCase() ?? "";
+  return MIME_MAP[ext] ?? "application/octet-stream";
+}
+function arrayBufferToDataUrl(buffer, mimeType) {
+  const bytes = new Uint8Array(buffer);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return `data:${mimeType};base64,${btoa(binary)}`;
+}
+function escapeForScript(str) {
+  return str.replace(/<\/(script)/gi, "<\\/$1");
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function generateRenderHtml(doc, options) {
+  const { playerScript, images, audio, width = 1920, height = 1080, captionStyle } = options;
+  const imageMap = {};
+  if (images) {
+    for (const [path, buffer] of images.entries()) {
+      imageMap[path] = arrayBufferToDataUrl(buffer, inferMimeType(path));
+    }
+  }
+  const audioMap = {};
+  let hasAudio = false;
+  if (audio) {
+    for (const [name, buffer] of audio.entries()) {
+      audioMap[name] = arrayBufferToDataUrl(buffer, inferMimeType(name));
+      hasAudio = true;
+    }
+  }
+  const docJson = escapeForScript(JSON.stringify(doc));
+  const imageMapJson = escapeForScript(JSON.stringify(imageMap));
+  const audioMapJson = hasAudio ? escapeForScript(JSON.stringify(audioMap)) : "null";
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=${width}, height=${height}">
+<title>${escapeHtml("Squisq Video Render")}</title>
+<style>
+*,*::before,*::after{box-sizing:border-box}
+html,body{margin:0;padding:0;width:${width}px;height:${height}px;overflow:hidden;background:#000}
+#squisq-root{width:${width}px;height:${height}px;display:flex;align-items:center;justify-content:center}
+</style>
+</head>
+<body>
+<div id="squisq-root"></div>
+<script>${escapeForScript(playerScript)}</script>
+<script>
+(function(){
+  var doc = JSON.parse(${JSON.stringify(docJson)});
+  var images = JSON.parse(${JSON.stringify(imageMapJson)});
+  var audio = ${audioMapJson === "null" ? "null" : "JSON.parse(" + JSON.stringify(audioMapJson) + ")"};
+  SquisqPlayer.mount(document.getElementById("squisq-root"), doc, {
+    mode: "slideshow",
+    images: images,
+    audio: audio,
+    autoPlay: false,
+    basePath: ".",
+    renderMode: true${captionStyle ? `,
+    captionStyle: ${JSON.stringify(captionStyle)}` : ""}
+  });
+})();
+</script>
+</body>
+</html>`;
+}
+
+// src/wasmEncoder.ts
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+import { fetchFile } from "@ffmpeg/util";
+async function framesToMp4Wasm(frames, audio, options = {}) {
+  const fps = options.fps ?? 30;
+  const quality = options.quality ?? "normal";
+  const { width, height } = resolveDimensions(options);
+  const preset = QUALITY_PRESETS[quality];
+  const onProgress = options.onProgress;
+  if (frames.length === 0) {
+    throw new Error("No frames provided for encoding");
+  }
+  const duration = frames.length / fps;
+  const ffmpeg = new FFmpeg();
+  ffmpeg.on("progress", ({ progress }) => {
+    if (onProgress) {
+      const percent = Math.round(progress * 100);
+      onProgress(Math.min(percent, 99), "encoding");
+    }
+  });
+  await ffmpeg.load();
+  onProgress?.(0, "writing frames");
+  const padLen = String(frames.length).length;
+  for (let i = 0; i < frames.length; i++) {
+    const name = `frame-${String(i + 1).padStart(padLen, "0")}.png`;
+    await ffmpeg.writeFile(name, frames[i]);
+    if (onProgress && i % 10 === 0) {
+      onProgress(Math.round(i / frames.length * 40), "writing frames");
+    }
+  }
+  if (audio) {
+    await ffmpeg.writeFile("audio-input", audio);
+  }
+  onProgress?.(40, "encoding");
+  const padPattern = `frame-%0${padLen}d.png`;
+  const args = ["-y", "-framerate", String(fps), "-i", padPattern];
+  if (audio) {
+    args.push("-i", "audio-input");
+  }
+  args.push(
+    "-c:v",
+    "libx264",
+    "-preset",
+    preset.preset,
+    "-crf",
+    String(preset.crf),
+    "-pix_fmt",
+    "yuv420p",
+    "-vf",
+    `scale=${width}:${height}:force_original_aspect_ratio=decrease,pad=${width}:${height}:(ow-iw)/2:(oh-ih)/2`
+  );
+  if (audio) {
+    args.push("-c:a", "aac", "-b:a", "128k", "-shortest");
+  }
+  args.push("output.mp4");
+  await ffmpeg.exec(args);
+  onProgress?.(95, "reading output");
+  const data = await ffmpeg.readFile("output.mp4");
+  for (let i = 0; i < frames.length; i++) {
+    const name = `frame-${String(i + 1).padStart(padLen, "0")}.png`;
+    await ffmpeg.deleteFile(name);
+  }
+  if (audio) {
+    await ffmpeg.deleteFile("audio-input");
+  }
+  await ffmpeg.deleteFile("output.mp4");
+  ffmpeg.terminate();
+  onProgress?.(100, "done");
+  const outputData = data instanceof Uint8Array ? data : new TextEncoder().encode(data);
+  return { data: outputData, duration };
+}
+export {
+  ORIENTATION_DIMENSIONS,
+  QUALITY_PRESETS,
+  fetchFile,
+  framesToMp4Wasm,
+  generateRenderHtml,
+  resolveDimensions
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/types.ts","../src/renderHtml.ts","../src/wasmEncoder.ts"],"sourcesContent":["/**\n * Video Export Types\n *\n * Shared type definitions for video encoding and render HTML generation.\n * Used by both the browser-based encoder and the CLI native encoder.\n */\n\n/**\n * Video quality preset.\n * Controls the H.264 encoding speed/quality trade-off and constant rate factor.\n *\n * - draft:  ultrafast preset, CRF 28 — fast encode, lower quality (~1-2 Mbps)\n * - normal: medium preset, CRF 23 — balanced (~3-5 Mbps)\n * - high:   slow preset, CRF 18 — best quality, slowest (~8-12 Mbps)\n */\nexport type VideoQuality = 'draft' | 'normal' | 'high';\n\n/** Viewport orientation for video output. */\nexport type VideoOrientation = 'landscape' | 'portrait';\n\n/** Encoding preset parameters mapped from VideoQuality. */\nexport interface QualityPreset {\n  /** FFmpeg -preset value (ultrafast, medium, slow) */\n  preset: string;\n  /** FFmpeg -crf value (lower = higher quality, 0-51 range) */\n  crf: number;\n}\n\n/** Quality preset lookup — shared between wasm and native encoders. */\nexport const QUALITY_PRESETS: Record<VideoQuality, QualityPreset> = {\n  draft: { preset: 'ultrafast', crf: 28 },\n  normal: { preset: 'medium', crf: 23 },\n  high: { preset: 'slow', crf: 18 },\n};\n\n/** Viewport dimensions for each orientation. */\nexport const ORIENTATION_DIMENSIONS: Record<VideoOrientation, { width: number; height: number }> = {\n  landscape: { width: 1920, height: 1080 },\n  portrait: { width: 1080, height: 1920 },\n};\n\n/** Options for video export encoding. */\nexport interface VideoExportOptions {\n  /** Frames per second (default: 30) */\n  fps?: number;\n  /** Video width in pixels (default: based on orientation) */\n  width?: number;\n  /** Video height in pixels (default: based on orientation) */\n  height?: number;\n  /** Encoding quality preset (default: 'normal') */\n  quality?: VideoQuality;\n  /** Viewport orientation (default: 'landscape') */\n  orientation?: VideoOrientation;\n  /**\n   * Progress callback. Called during encoding with completion percentage and phase description.\n   * @param percent - 0-100 completion percentage\n   * @param phase - Human-readable description of current phase (e.g., 'encoding', 'muxing')\n   */\n  onProgress?: (percent: number, phase: string) => void;\n}\n\n/** Result from the wasm encoder. */\nexport interface EncoderResult {\n  /** MP4 file bytes */\n  data: Uint8Array;\n  /** Video duration in seconds */\n  duration: number;\n}\n\n/**\n * Resolve dimensions from options, applying orientation defaults.\n */\nexport function resolveDimensions(options: VideoExportOptions): {\n  width: number;\n  height: number;\n} {\n  const orientation = options.orientation ?? 'landscape';\n  const defaults = ORIENTATION_DIMENSIONS[orientation];\n  return {\n    width: options.width ?? defaults.width,\n    height: options.height ?? defaults.height,\n  };\n}\n","/**\n * Render HTML Generation for Video Frame Capture\n *\n * Generates a self-contained HTML document that loads the SquisqPlayer standalone\n * bundle in renderMode, embedding all images and audio as base64 data URIs.\n *\n * The generated page exposes `window.seekTo(time)`, `window.getDuration()`, etc.\n * via the SquisqRenderAPI, enabling Playwright (or any headless browser) to step\n * through frames and capture screenshots.\n *\n * Browser-pure: uses only btoa() and Uint8Array — no Node.js APIs.\n */\n\nimport type { Doc } from '@bendyline/squisq/schemas';\n\n// ── Types ──────────────────────────────────────────────────────────\n\nexport interface RenderHtmlOptions {\n  /** The IIFE player bundle source code (from PLAYER_BUNDLE) */\n  playerScript: string;\n\n  /**\n   * Map of relative image paths (as they appear in the Doc) to binary data.\n   * Converted to base64 data URIs and embedded in the HTML.\n   */\n  images?: Map<string, ArrayBuffer>;\n\n  /**\n   * Map of audio segment names/paths to binary audio data.\n   * Converted to base64 data URIs and embedded in the HTML.\n   */\n  audio?: Map<string, ArrayBuffer>;\n\n  /** Viewport width in CSS pixels (default: 1920) */\n  width?: number;\n\n  /** Viewport height in CSS pixels (default: 1080) */\n  height?: number;\n\n  /** Caption style for the rendered video. Omit for no captions. */\n  captionStyle?: 'standard' | 'social';\n}\n\n// ── MIME Detection ─────────────────────────────────────────────────\n\nconst MIME_MAP: Record<string, string> = {\n  jpg: 'image/jpeg',\n  jpeg: 'image/jpeg',\n  png: 'image/png',\n  gif: 'image/gif',\n  webp: 'image/webp',\n  svg: 'image/svg+xml',\n  bmp: 'image/bmp',\n  avif: 'image/avif',\n  mp3: 'audio/mpeg',\n  wav: 'audio/wav',\n  ogg: 'audio/ogg',\n  mp4: 'video/mp4',\n  webm: 'video/webm',\n};\n\nfunction inferMimeType(filename: string): string {\n  const ext = filename.split('.').pop()?.toLowerCase() ?? '';\n  return MIME_MAP[ext] ?? 'application/octet-stream';\n}\n\n// ── Base64 Encoding (browser-pure) ────────────────────────────────\n\n/**\n * Convert an ArrayBuffer to a base64 data URI.\n * Uses only standard Web APIs (Uint8Array + btoa).\n */\nfunction arrayBufferToDataUrl(buffer: ArrayBuffer, mimeType: string): string {\n  const bytes = new Uint8Array(buffer);\n  let binary = '';\n  for (let i = 0; i < bytes.length; i++) {\n    binary += String.fromCharCode(bytes[i]);\n  }\n  return `data:${mimeType};base64,${btoa(binary)}`;\n}\n\n// ── Escaping ───────────────────────────────────────────────────────\n\n/**\n * Prevent `</script>` from prematurely closing the script tag.\n */\nfunction escapeForScript(str: string): string {\n  return str.replace(/<\\/(script)/gi, '<\\\\/$1');\n}\n\n/** Escape HTML special characters. */\nfunction escapeHtml(str: string): string {\n  return str\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;');\n}\n\n// ── HTML Generation ────────────────────────────────────────────────\n\n/**\n * Generate a self-contained HTML document for headless video frame capture.\n *\n * The page mounts the SquisqPlayer in renderMode, which exposes the\n * SquisqRenderAPI on `window` (seekTo, getDuration, getCaptions, etc.).\n *\n * @param doc - The Doc to render\n * @param options - Render HTML options including player script and media\n * @returns Complete HTML string ready to be loaded in a headless browser\n */\nexport function generateRenderHtml(doc: Doc, options: RenderHtmlOptions): string {\n  const { playerScript, images, audio, width = 1920, height = 1080, captionStyle } = options;\n\n  // Build base64 image map\n  const imageMap: Record<string, string> = {};\n  if (images) {\n    for (const [path, buffer] of images.entries()) {\n      imageMap[path] = arrayBufferToDataUrl(buffer, inferMimeType(path));\n    }\n  }\n\n  // Build base64 audio map\n  const audioMap: Record<string, string> = {};\n  let hasAudio = false;\n  if (audio) {\n    for (const [name, buffer] of audio.entries()) {\n      audioMap[name] = arrayBufferToDataUrl(buffer, inferMimeType(name));\n      hasAudio = true;\n    }\n  }\n\n  const docJson = escapeForScript(JSON.stringify(doc));\n  const imageMapJson = escapeForScript(JSON.stringify(imageMap));\n  const audioMapJson = hasAudio ? escapeForScript(JSON.stringify(audioMap)) : 'null';\n\n  return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=${width}, height=${height}\">\n<title>${escapeHtml('Squisq Video Render')}</title>\n<style>\n*,*::before,*::after{box-sizing:border-box}\nhtml,body{margin:0;padding:0;width:${width}px;height:${height}px;overflow:hidden;background:#000}\n#squisq-root{width:${width}px;height:${height}px;display:flex;align-items:center;justify-content:center}\n</style>\n</head>\n<body>\n<div id=\"squisq-root\"></div>\n<script>${escapeForScript(playerScript)}</script>\n<script>\n(function(){\n  var doc = JSON.parse(${JSON.stringify(docJson)});\n  var images = JSON.parse(${JSON.stringify(imageMapJson)});\n  var audio = ${audioMapJson === 'null' ? 'null' : 'JSON.parse(' + JSON.stringify(audioMapJson) + ')'};\n  SquisqPlayer.mount(document.getElementById(\"squisq-root\"), doc, {\n    mode: \"slideshow\",\n    images: images,\n    audio: audio,\n    autoPlay: false,\n    basePath: \".\",\n    renderMode: true${captionStyle ? `,\\n    captionStyle: ${JSON.stringify(captionStyle)}` : ''}\n  });\n})();\n</script>\n</body>\n</html>`;\n}\n","/**\n * WASM Video Encoder\n *\n * Encodes PNG frame screenshots into an MP4 video using ffmpeg.wasm.\n * Browser-pure — no Node.js APIs. Works in any environment with SharedArrayBuffer\n * support (browsers with COOP/COEP headers, or Node 18+).\n *\n * Uses @ffmpeg/ffmpeg for H.264 encoding and optional AAC audio muxing.\n */\n\nimport { FFmpeg } from '@ffmpeg/ffmpeg';\nimport { fetchFile } from '@ffmpeg/util';\n\nimport type { VideoExportOptions, EncoderResult } from './types.js';\nimport { QUALITY_PRESETS, resolveDimensions } from './types.js';\n\n/**\n * Encode an array of PNG frame screenshots into an MP4 video.\n *\n * @param frames - Array of PNG image bytes (one per frame, in order)\n * @param audio - Optional WAV/MP3/AAC audio bytes to mux into the video\n * @param options - Encoding options (fps, quality, dimensions, progress)\n * @returns Encoded MP4 data and duration metadata\n */\nexport async function framesToMp4Wasm(\n  frames: Uint8Array[],\n  audio: Uint8Array | null,\n  options: VideoExportOptions = {},\n): Promise<EncoderResult> {\n  const fps = options.fps ?? 30;\n  const quality = options.quality ?? 'normal';\n  const { width, height } = resolveDimensions(options);\n  const preset = QUALITY_PRESETS[quality];\n  const onProgress = options.onProgress;\n\n  if (frames.length === 0) {\n    throw new Error('No frames provided for encoding');\n  }\n\n  const duration = frames.length / fps;\n\n  // Initialize ffmpeg.wasm\n  const ffmpeg = new FFmpeg();\n\n  ffmpeg.on('progress', ({ progress }) => {\n    if (onProgress) {\n      const percent = Math.round(progress * 100);\n      onProgress(Math.min(percent, 99), 'encoding');\n    }\n  });\n\n  await ffmpeg.load();\n\n  onProgress?.(0, 'writing frames');\n\n  // Write frame PNGs to virtual filesystem\n  const padLen = String(frames.length).length;\n  for (let i = 0; i < frames.length; i++) {\n    const name = `frame-${String(i + 1).padStart(padLen, '0')}.png`;\n    await ffmpeg.writeFile(name, frames[i]);\n\n    // Report frame-write progress (0-40% of total)\n    if (onProgress && i % 10 === 0) {\n      onProgress(Math.round((i / frames.length) * 40), 'writing frames');\n    }\n  }\n\n  // Write audio if provided\n  if (audio) {\n    await ffmpeg.writeFile('audio-input', audio);\n  }\n\n  onProgress?.(40, 'encoding');\n\n  // Build ffmpeg command\n  const padPattern = `frame-%0${padLen}d.png`;\n  const args = ['-y', '-framerate', String(fps), '-i', padPattern];\n\n  // Add audio input\n  if (audio) {\n    args.push('-i', 'audio-input');\n  }\n\n  // Video encoding settings\n  args.push(\n    '-c:v',\n    'libx264',\n    '-preset',\n    preset.preset,\n    '-crf',\n    String(preset.crf),\n    '-pix_fmt',\n    'yuv420p',\n    '-vf',\n    `scale=${width}:${height}:force_original_aspect_ratio=decrease,pad=${width}:${height}:(ow-iw)/2:(oh-ih)/2`,\n  );\n\n  // Audio encoding\n  if (audio) {\n    args.push('-c:a', 'aac', '-b:a', '128k', '-shortest');\n  }\n\n  args.push('output.mp4');\n\n  // Run encoding\n  await ffmpeg.exec(args);\n\n  onProgress?.(95, 'reading output');\n\n  // Read the output file\n  const data = await ffmpeg.readFile('output.mp4');\n\n  // Cleanup virtual filesystem\n  for (let i = 0; i < frames.length; i++) {\n    const name = `frame-${String(i + 1).padStart(padLen, '0')}.png`;\n    await ffmpeg.deleteFile(name);\n  }\n  if (audio) {\n    await ffmpeg.deleteFile('audio-input');\n  }\n  await ffmpeg.deleteFile('output.mp4');\n\n  ffmpeg.terminate();\n\n  onProgress?.(100, 'done');\n\n  // ffmpeg.readFile returns Uint8Array for binary files\n  const outputData = data instanceof Uint8Array ? data : new TextEncoder().encode(data as string);\n\n  return { data: outputData, duration };\n}\n\n// Re-export fetchFile for convenience — consumers may need it to prepare audio bytes\nexport { fetchFile };\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@bendyline/squisq-video",
+  "version": "1.0.0",
+  "description": "Video encoding and render HTML generation for Squisq documents — browser-pure, works in Node and browser",
+  "license": "MIT",
+  "author": "Bendyline",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bendyline/squisq.git",
+    "directory": "packages/video"
+  },
+  "homepage": "https://github.com/bendyline/squisq",
+  "keywords": [
+    "squisq",
+    "video",
+    "mp4",
+    "ffmpeg",
+    "wasm",
+    "export"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@bendyline/squisq": "1.1.0",
+    "@bendyline/squisq-react": "1.0.2",
+    "@ffmpeg/ffmpeg": "^0.12.15",
+    "@ffmpeg/util": "^0.12.2"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  }
+}