@bendyline/squisq-video-react 1.2.0 → 1.2.2

package/dist/index.js

@@ -1,15 +1,16 @@
 import {
   createMp4Muxer
-} from "./chunk-LZYWP4HB.js";
+} from "./chunk-6DKLHXX3.js";
 
 // 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";
+import { resolveDimensions, computeAudioTimeline, QUALITY_PRESETS } from "@bendyline/squisq-video";
 
 // src/mainThreadEncoder.ts
+import { bitrateForQuality } from "@bendyline/squisq-video";
 function supportsWebCodecs() {
   return typeof VideoEncoder !== "undefined" && typeof VideoFrame !== "undefined";
 }
@@ -28,18 +29,6 @@ async function supportsWebCodecsH264(config) {
     return false;
   }
 }
-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(
@@ -54,7 +43,8 @@ function createEncoder(config) {
   const muxer = createMp4Muxer({
     width: config.width,
     height: config.height,
-    fps: config.fps
+    fps: config.fps,
+    ...config.audio ? { audio: config.audio } : {}
   });
   let closed = false;
   const frameDuration = 1e6 / config.fps;
@@ -68,6 +58,9 @@ function createEncoder(config) {
     }
   });
   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,
@@ -88,6 +81,10 @@ function createEncoder(config) {
       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");
       await encoder.flush();
@@ -198,6 +195,178 @@ function createWorkerEncoder(config) {
   };
 }
 
+// src/audioTrack.ts
+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) {
+  const { FFmpeg } = await import("@ffmpeg/ffmpeg");
+  const ffmpeg = new FFmpeg();
+  await ffmpeg.load();
+  try {
+    await ffmpeg.writeFile("video.mp4", videoMp4);
+    await ffmpeg.writeFile("audio.wav", wav);
+    await ffmpeg.exec([
+      "-i",
+      "video.mp4",
+      "-i",
+      "audio.wav",
+      "-c:v",
+      "copy",
+      "-c:a",
+      "aac",
+      "-b:a",
+      String(audioBitrate),
+      "-shortest",
+      "out.mp4"
+    ]);
+    const data = await ffmpeg.readFile("out.mp4");
+    return data instanceof Uint8Array ? data : new TextEncoder().encode(data);
+  } finally {
+    ffmpeg.terminate();
+  }
+}
+
 // src/hooks/useFrameCapture.ts
 import { createElement } from "react";
 import { createRoot } from "react-dom/client";
@@ -289,7 +458,7 @@ function useFrameCapture() {
       const captionsEnabled = captionMode !== void 0 && captionMode !== "off";
       const captionStyle = captionMode === "social" ? "social" : "standard";
       const playerElement = createElement(DocPlayer, {
-        script: doc,
+        doc,
         basePath: ".",
         renderMode: true,
         showControls: false,
@@ -373,6 +542,23 @@ function useFrameCapture() {
 }
 
 // src/hooks/useVideoExport.ts
+async function resolveAudioBuffers(clips, sources) {
+  const srcs = new Set(clips.map((c) => c.src));
+  const out = /* @__PURE__ */ new Map();
+  for (const src of srcs) {
+    let data = sources.audio?.get(src) ?? sources.images?.get(src);
+    if (!data && sources.mediaProvider) {
+      try {
+        const url = await sources.mediaProvider.resolveUrl(src);
+        const res = await fetch(url);
+        if (res.ok) data = await res.arrayBuffer();
+      } catch {
+      }
+    }
+    if (data) out.set(src, data);
+  }
+  return out;
+}
 function useVideoExport() {
   const [state, setState] = useState("idle");
   const [progress, setProgress] = useState(0);
@@ -381,6 +567,8 @@ function useVideoExport() {
   const [backend, setBackend] = useState(null);
   const [downloadUrl, setDownloadUrl] = useState(null);
   const [fileSize, setFileSize] = useState(0);
+  const [audioIncluded, setAudioIncluded] = useState(false);
+  const [audioSkippedReason, setAudioSkippedReason] = useState(null);
   const [error, setError] = useState(null);
   const [elapsed, setElapsed] = useState(0);
   const [estimatedRemaining, setEstimatedRemaining] = useState(0);
@@ -419,6 +607,8 @@ function useVideoExport() {
     setBackend(null);
     setDownloadUrl(null);
     setFileSize(0);
+    setAudioIncluded(false);
+    setAudioSkippedReason(null);
     setError(null);
     setElapsed(0);
     setEstimatedRemaining(0);
@@ -446,6 +636,8 @@ function useVideoExport() {
       }
       setDownloadUrl(null);
       setFileSize(0);
+      setAudioIncluded(false);
+      setAudioSkippedReason(null);
       setError(null);
       const quality = config.quality ?? "normal";
       const fps = config.fps ?? 30;
@@ -495,9 +687,62 @@ function useVideoExport() {
         setPhase("Starting encoder\u2026");
         setProgress(5);
         const canUseWebCodecs = webCodecsAvailable && await supportsWebCodecsH264({ width, height, fps, quality });
+        const audioBitrate = (QUALITY_PRESETS[quality] ?? QUALITY_PRESETS.normal).audioBitrate;
+        const timeline = computeAudioTimeline(doc, 0);
+        const aacSupported = timeline.length > 0 ? await supportsWebCodecsAac(EXPORT_AUDIO_SAMPLE_RATE, EXPORT_AUDIO_CHANNELS) : false;
+        const tierDecision = selectAudioTier({
+          hasClips: timeline.length > 0,
+          aacSupported,
+          sharedArrayBufferAvailable,
+          canUseMainThreadWebCodecs: canUseWebCodecs
+        });
+        let renderedAudio = null;
+        let audioIncludedLocal = false;
+        let audioReasonLocal = tierDecision.reason;
+        if (tierDecision.tier === 1 || tierDecision.tier === 2) {
+          setPhase("Preparing audio\u2026");
+          try {
+            const buffers = await resolveAudioBuffers(timeline, {
+              audio: config.audio,
+              images,
+              mediaProvider: config.mediaProvider
+            });
+            if (buffers.size === 0) {
+              audioReasonLocal = "Audio files for this document could not be loaded.";
+            } else {
+              const totalAudioDur = timeline.reduce(
+                (max, c) => Math.max(max, c.startSec + c.durationSec),
+                docDuration
+              );
+              renderedAudio = await renderAudioTimeline(
+                timeline,
+                buffers,
+                totalAudioDur,
+                EXPORT_AUDIO_SAMPLE_RATE
+              );
+            }
+          } catch (audioErr) {
+            renderedAudio = null;
+            audioReasonLocal = `Audio could not be prepared: ${audioErr instanceof Error ? audioErr.message : String(audioErr)}`;
+          }
+        }
+        const useInlineAudio = renderedAudio !== null && tierDecision.tier === 1;
+        const useFfmpegAudio = renderedAudio !== null && tierDecision.tier === 2;
+        if (cancelledRef.current) return;
         let encoder;
         if (canUseWebCodecs) {
-          encoder = createEncoder({ width, height, fps, quality });
+          encoder = createEncoder({
+            width,
+            height,
+            fps,
+            quality,
+            ...useInlineAudio && renderedAudio ? {
+              audio: {
+                numberOfChannels: renderedAudio.numberOfChannels,
+                sampleRate: renderedAudio.sampleRate
+              }
+            } : {}
+          });
           setBackend("webcodecs");
         } else if (sharedArrayBufferAvailable) {
           const workerEncoder = createWorkerEncoder({ width, height, fps, quality });
@@ -540,17 +785,48 @@ function useVideoExport() {
           encoder.encodeFrame(bitmap, i);
         }
         if (cancelledRef.current) return;
+        if (useInlineAudio && renderedAudio && encoder.addAudioChunk) {
+          setState("encoding");
+          setPhase("Encoding audio\u2026");
+          try {
+            await encodeAacTrack(
+              renderedAudio,
+              { addAudioChunk: encoder.addAudioChunk.bind(encoder) },
+              audioBitrate
+            );
+            audioIncludedLocal = true;
+          } catch (audioErr) {
+            audioIncludedLocal = false;
+            audioReasonLocal = `Audio encoding failed: ${audioErr instanceof Error ? audioErr.message : String(audioErr)}`;
+          }
+        }
         setState("encoding");
         setPhase("Finalizing video\u2026");
         setProgress(95);
-        const mp4Buffer = await encoder.finalize();
+        let outputBytes = await encoder.finalize();
         encoderRef.current = null;
         if (cancelledRef.current) return;
-        const blob = new Blob([mp4Buffer], { type: "video/mp4" });
+        if (useFfmpegAudio && renderedAudio) {
+          setPhase("Muxing audio\u2026");
+          try {
+            const wav = audioBufferToWav(renderedAudio);
+            const videoOnly = outputBytes instanceof Uint8Array ? outputBytes : new Uint8Array(outputBytes);
+            outputBytes = await muxAudioWithFfmpegWasm(videoOnly, wav, audioBitrate);
+            audioIncludedLocal = true;
+          } catch (audioErr) {
+            audioIncludedLocal = false;
+            audioReasonLocal = `Audio muxing failed: ${audioErr instanceof Error ? audioErr.message : String(audioErr)}`;
+          }
+        }
+        if (cancelledRef.current) return;
+        const finalBytes = outputBytes instanceof Uint8Array ? outputBytes.slice() : new Uint8Array(outputBytes);
+        const blob = new Blob([finalBytes], { type: "video/mp4" });
         const url = URL.createObjectURL(blob);
         downloadUrlRef.current = url;
         setDownloadUrl(url);
-        setFileSize(mp4Buffer.byteLength);
+        setFileSize(finalBytes.byteLength);
+        setAudioIncluded(audioIncludedLocal);
+        setAudioSkippedReason(audioIncludedLocal ? null : audioReasonLocal);
         setState("complete");
         setProgress(100);
         setPhase("Export complete");
@@ -581,6 +857,8 @@ function useVideoExport() {
     backend,
     downloadUrl,
     fileSize,
+    audioIncluded,
+    audioSkippedReason,
     error,
     elapsed,
     estimatedRemaining,
@@ -684,12 +962,15 @@ function VideoExportModal({
   mediaProvider,
   images,
   audio,
+  defaultConfig,
   onClose
 }) {
-  const [quality, setQuality] = useState2("normal");
-  const [fps, setFps] = useState2(24);
-  const [orientation, setOrientation] = useState2("landscape");
-  const [captionMode, setCaptionMode] = useState2("off");
+  const [quality, setQuality] = useState2(defaultConfig?.quality ?? "normal");
+  const [fps, setFps] = useState2(defaultConfig?.fps ?? 24);
+  const [orientation, setOrientation] = useState2(
+    defaultConfig?.orientation ?? "landscape"
+  );
+  const [captionMode, setCaptionMode] = useState2(defaultConfig?.captionMode ?? "off");
   const exportHook = useVideoExport();
   const {
     state,
@@ -697,6 +978,8 @@ function VideoExportModal({
     backend,
     downloadUrl,
     fileSize,
+    audioIncluded,
+    audioSkippedReason,
     error,
     elapsed,
     estimatedRemaining,
@@ -706,6 +989,8 @@ function VideoExportModal({
   } = exportHook;
   const handleExport = useCallback3(async () => {
     const config = {
+      // defaultConfig is the base; explicit props/selections win over it.
+      ...defaultConfig,
       quality,
       fps,
       orientation,
@@ -713,7 +998,8 @@ function VideoExportModal({
       images,
       audio,
       mediaProvider,
-      playerScript
+      // Only thread the bundle through when the host actually supplied one.
+      ...playerScript !== void 0 ? { playerScript } : {}
     };
     await startExport(doc, config);
   }, [
@@ -726,6 +1012,7 @@ function VideoExportModal({
     audio,
     mediaProvider,
     playerScript,
+    defaultConfig,
     startExport
   ]);
   const handleDownload = useCallback3(() => {
@@ -848,6 +1135,10 @@ function VideoExportModal({
         (fileSize / (1024 * 1024)).toFixed(1),
         " MB"
       ] }),
+      audioIncluded ? /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: "#2d6a10", margin: "0 0 4px 0" }, children: "Audio included \u2713" }) : /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: "#8a7a5a", margin: "0 0 4px 0" }, children: [
+        "Video only",
+        audioSkippedReason ? ` \u2014 ${audioSkippedReason}` : ""
+      ] }),
       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" }),
@@ -886,6 +1177,7 @@ function VideoExportButton({
   mediaProvider,
   images,
   audio,
+  defaultConfig,
   label = "Export Video",
   style,
   disabled
@@ -904,6 +1196,7 @@ function VideoExportButton({
           mediaProvider,
           images,
           audio,
+          defaultConfig,
           onClose: handleClose
         }
       ),
@@ -916,6 +1209,8 @@ export {
   VideoExportModal,
   createEncoder,
   supportsWebCodecs,
+  supportsWebCodecsAac,
+  supportsWebCodecsH264,
   useFrameCapture,
   useVideoExport
 };