@bendyline/squisq-video-react 2.4.11 → 2.4.13

package/dist/{chunk-32QCPFXE.js → chunk-GBIYYDMY.js}

@@ -247,6 +247,25 @@ function resolveOfflineAudioContext() {
   }
   return ctor;
 }
+function clipGainEnvelope(clip, when, duration) {
+  const level = clip.gainDb ? Math.pow(10, clip.gainDb / 20) : 1;
+  let fadeIn = Math.max(0, clip.fadeInSec ?? 0);
+  let fadeOut = Math.max(0, clip.fadeOutSec ?? 0);
+  if (level === 1 && fadeIn === 0 && fadeOut === 0) return null;
+  if (duration <= 0) return [{ time: when, value: level }];
+  if (fadeIn + fadeOut > duration) {
+    const scale = duration / (fadeIn + fadeOut);
+    fadeIn *= scale;
+    fadeOut *= scale;
+  }
+  const points = [{ time: when, value: fadeIn > 0 ? 0 : level }];
+  if (fadeIn > 0) points.push({ time: when + fadeIn, value: level });
+  if (fadeOut > 0) {
+    points.push({ time: when + duration - fadeOut, value: level });
+    points.push({ time: when + duration, value: 0 });
+  }
+  return points;
+}
 async function renderAudioTimeline(clips, buffers, totalDurationSec, sampleRate = EXPORT_AUDIO_SAMPLE_RATE) {
   const Ctor = resolveOfflineAudioContext();
   const channels = EXPORT_AUDIO_CHANNELS;
@@ -277,10 +296,21 @@ async function renderAudioTimeline(clips, buffers, totalDurationSec, sampleRate
       }
       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);
+      const envelope = clipGainEnvelope(clip, when, duration);
+      if (envelope) {
+        const gain = ctx.createGain();
+        gain.gain.setValueAtTime(envelope[0].value, envelope[0].time);
+        for (const point of envelope.slice(1)) {
+          gain.gain.linearRampToValueAtTime(point.value, point.time);
+        }
+        node.connect(gain);
+        gain.connect(ctx.destination);
+      } else {
+        node.connect(ctx.destination);
+      }
       node.start(when, offset, duration);
       scheduledNodes.push(node);
     }

package/dist/chunk-IFQJAW4V.js

@@ -0,0 +1,321 @@
+import {
+  ADTS,
+  AudioSample,
+  AudioSampleSink,
+  AudioSampleSource,
+  BlobSource,
+  BufferTarget,
+  FLAC,
+  Input,
+  MATROSKA,
+  MP3,
+  MP4,
+  OGG,
+  Output,
+  QTFF,
+  WAVE,
+  WEBM,
+  WavOutputFormat,
+  WebMOutputFormat,
+  canEncodeAudio
+} from "./chunk-4GFZ3GUE.js";
+
+// src/mediaEdit/mediaEditEngine.ts
+import {
+  MEDIA_FX_ENGINE,
+  analyzeMediaFx,
+  correctedLoudnessAnalysis,
+  createBreathAnalyzer,
+  detectPauseCuts,
+  parseMediaFx,
+  renderMediaFx
+} from "@bendyline/squisq/mediaEdit";
+
+// src/mediaEdit/audioRenderSink.ts
+var OPUS_BITRATE_PER_CHANNEL = 96e3;
+async function createAudioRenderSink(channels, sampleRate) {
+  const bitrate = OPUS_BITRATE_PER_CHANNEL * channels;
+  const opus = await canEncodeAudio("opus", { numberOfChannels: channels, sampleRate, bitrate });
+  const target = new BufferTarget();
+  const output = new Output({
+    format: opus ? new WebMOutputFormat() : new WavOutputFormat(),
+    target
+  });
+  const source = new AudioSampleSource(opus ? { codec: "opus", bitrate } : { codec: "pcm-s16" });
+  output.addAudioTrack(source);
+  await output.start();
+  let written = 0;
+  return {
+    async write(block) {
+      const frames = block[0]?.length ?? 0;
+      if (frames === 0) return;
+      const data = new Float32Array(frames * channels);
+      for (let c = 0; c < channels; c++) data.set(block[c], c * frames);
+      const sample = new AudioSample({
+        data,
+        format: "f32-planar",
+        numberOfChannels: channels,
+        sampleRate,
+        timestamp: written / sampleRate
+      });
+      try {
+        await source.add(sample);
+      } finally {
+        sample.close();
+      }
+      written += frames;
+    },
+    async finish() {
+      source.close();
+      await output.finalize();
+      if (!target.buffer) throw new Error("The audio render produced no output.");
+      return opus ? { bytes: target.buffer, mimeType: "audio/webm", extension: "webm" } : { bytes: target.buffer, mimeType: "audio/wav", extension: "wav" };
+    },
+    cancel: () => output.cancel()
+  };
+}
+
+// src/mediaEdit/mediaAudioSource.ts
+import {
+  MEDIA_FX_SAMPLE_RATE,
+  createResampler
+} from "@bendyline/squisq/mediaEdit";
+var INPUT_FORMATS = [MP4, QTFF, WEBM, MATROSKA, WAVE, MP3, OGG, FLAC, ADTS];
+async function openMediaAudio(blob, options = {}) {
+  const input = new Input({ source: new BlobSource(blob), formats: INPUT_FORMATS });
+  const track = await input.getPrimaryAudioTrack();
+  if (!track) {
+    input.dispose();
+    return null;
+  }
+  const trackDurationSec = await track.computeDuration();
+  const sourceRate = track.sampleRate;
+  const channels = Math.min(2, Math.max(1, track.numberOfChannels));
+  const startSec = Math.max(0, options.startSec ?? 0);
+  const endSec = Math.max(startSec, Math.min(options.endSec ?? trackDurationSec, trackDurationSec));
+  const durationSec = endSec - startSec;
+  const frames = Math.round(durationSec * MEDIA_FX_SAMPLE_RATE);
+  const sourceFrames = Math.round(durationSec * sourceRate);
+  async function* open() {
+    const sink = new AudioSampleSink(track);
+    const resamplers = Array.from(
+      { length: channels },
+      () => createResampler(sourceRate, MEDIA_FX_SAMPLE_RATE)
+    );
+    let placed = 0;
+    let emitted = 0;
+    const feed = (planes) => {
+      const out = resamplers.map((r, c) => r.process(planes[c]));
+      const room2 = frames - emitted;
+      const take = Math.min(out[0].length, room2);
+      if (take <= 0) return null;
+      emitted += take;
+      return out.map((ch) => ch.length === take ? ch : ch.subarray(0, take));
+    };
+    for await (const sample of sink.samples(startSec, endSec)) {
+      try {
+        const at = Math.round((sample.timestamp - startSec) * sourceRate);
+        let planes = Array.from({ length: channels }, (_, c) => {
+          const plane = new Float32Array(sample.numberOfFrames);
+          sample.copyTo(plane, {
+            planeIndex: Math.min(c, sample.numberOfChannels - 1),
+            format: "f32-planar"
+          });
+          return plane;
+        });
+        if (at > placed) {
+          const gap = Math.min(at - placed, sourceFrames - placed);
+          if (gap > 0) {
+            const out2 = feed(Array.from({ length: channels }, () => new Float32Array(gap)));
+            placed += gap;
+            if (out2) yield out2;
+          }
+        }
+        const overlap = placed - at;
+        if (overlap > 0) planes = planes.map((p) => p.subarray(Math.min(overlap, p.length)));
+        const room2 = sourceFrames - placed;
+        if (room2 <= 0) break;
+        if (planes[0].length > room2) planes = planes.map((p) => p.subarray(0, room2));
+        if (planes[0].length === 0) continue;
+        placed += planes[0].length;
+        const out = feed(planes);
+        if (out) yield out;
+      } finally {
+        sample.close();
+      }
+    }
+    if (placed < sourceFrames) {
+      const out = feed(
+        Array.from({ length: channels }, () => new Float32Array(sourceFrames - placed))
+      );
+      if (out) yield out;
+    }
+    const tail = resamplers.map((r) => r.flush());
+    const room = frames - emitted;
+    if (room > 0) {
+      const padded = tail.map((ch) => {
+        const full = new Float32Array(room);
+        full.set(ch.subarray(0, room));
+        return full;
+      });
+      emitted += room;
+      yield padded;
+    }
+  }
+  return {
+    sampleRate: MEDIA_FX_SAMPLE_RATE,
+    channels,
+    frames,
+    durationSec,
+    trackDurationSec,
+    sourceSampleRate: sourceRate,
+    open,
+    dispose: () => input.dispose()
+  };
+}
+
+// src/mediaEdit/mediaEditEngine.ts
+var PREVIEW_PREROLL_SEC = 1;
+var FIRST_PASS_SHARE = 0.67;
+function chainOf(fx) {
+  const chain = parseMediaFx(fx);
+  if (!chain || chain.ops.length === 0) throw new Error(`Nothing to render in fx "${fx}".`);
+  return chain;
+}
+function concatBlocks(blocks, channels) {
+  return Array.from({ length: channels }, (_, c) => {
+    const total = blocks.reduce((n, b) => n + b[c].length, 0);
+    const out = new Float32Array(total);
+    let at = 0;
+    for (const b of blocks) {
+      out.set(b[c], at);
+      at += b[c].length;
+    }
+    return out;
+  });
+}
+async function renderMediaEditAudio(request, options = {}) {
+  const fx = chainOf(request.fx);
+  const source = await openMediaAudio(request.source);
+  if (!source) throw new Error("This media has no audio track to process.");
+  try {
+    let analysis;
+    for (let attempt = 0; ; attempt++) {
+      const from = attempt === 0 ? 0 : FIRST_PASS_SHARE;
+      const span = attempt === 0 ? FIRST_PASS_SHARE : 1 - FIRST_PASS_SHARE;
+      const sink = await createAudioRenderSink(source.channels, source.sampleRate);
+      try {
+        const result = await renderMediaFx({
+          fx,
+          source,
+          denoiser: options.denoiser,
+          write: (block) => sink.write(block),
+          onProgress: (f) => options.onProgress?.(from + f * span),
+          signal: options.signal,
+          ...analysis ? { analysis } : {}
+        });
+        const corrected = attempt === 0 ? correctedLoudnessAnalysis(fx, result) : null;
+        if (corrected) {
+          await sink.cancel();
+          analysis = corrected;
+          continue;
+        }
+        const encoded = await sink.finish();
+        options.onProgress?.(1);
+        return {
+          ...encoded,
+          analysis: result.analysis,
+          ignoredOps: result.ignoredOps,
+          sourceDuration: source.trackDurationSec,
+          engine: MEDIA_FX_ENGINE
+        };
+      } catch (err) {
+        await sink.cancel().catch(() => {
+        });
+        throw err;
+      }
+    }
+  } finally {
+    source.dispose();
+  }
+}
+async function analyzeMediaEditAudio(request, options = {}) {
+  const fx = chainOf(request.fx);
+  const source = await openMediaAudio(request.source);
+  if (!source) return null;
+  try {
+    return await analyzeMediaFx({
+      fx,
+      source,
+      denoiser: options.denoiser,
+      onProgress: options.onProgress,
+      signal: options.signal
+    });
+  } finally {
+    source.dispose();
+  }
+}
+async function previewMediaEditAudio(request, options = {}) {
+  const fx = chainOf(request.fx);
+  const decodeFrom = Math.max(0, request.startSec - PREVIEW_PREROLL_SEC);
+  const source = await openMediaAudio(request.source, {
+    startSec: decodeFrom,
+    endSec: request.endSec
+  });
+  if (!source) throw new Error("This media has no audio track to process.");
+  try {
+    const originalBlocks = [];
+    for await (const block of source.open()) originalBlocks.push(block.map((ch) => ch.slice()));
+    const processedBlocks = [];
+    await renderMediaFx({
+      fx,
+      source,
+      startSec: decodeFrom,
+      denoiser: options.denoiser,
+      write: (block) => {
+        processedBlocks.push(block.map((ch) => ch.slice()));
+      },
+      onProgress: options.onProgress,
+      signal: options.signal,
+      ...request.analysis ? { analysis: request.analysis } : {}
+    });
+    const skip = Math.round((request.startSec - decodeFrom) * source.sampleRate);
+    const trim = (channels) => channels.map((ch) => ch.slice(skip));
+    return {
+      sampleRate: source.sampleRate,
+      startSec: request.startSec,
+      original: trim(concatBlocks(originalBlocks, source.channels)),
+      processed: trim(concatBlocks(processedBlocks, source.channels))
+    };
+  } finally {
+    source.dispose();
+  }
+}
+async function analyzeMediaEditPauses(request, options = {}) {
+  const source = await openMediaAudio(request.source);
+  if (!source) throw new Error("This media has no audio track to analyze.");
+  try {
+    const analyzer = createBreathAnalyzer(source.sampleRate);
+    let seen = 0;
+    for await (const block of source.open()) {
+      options.signal?.throwIfAborted();
+      const mono = block.length === 1 ? block[0] : block[0].map((_, i) => block.reduce((sum, ch) => sum + ch[i], 0) / block.length);
+      analyzer.push(mono);
+      seen += block[0].length;
+      options.onProgress?.(Math.min(1, seen / Math.max(1, source.frames)));
+    }
+    return {
+      cuts: detectPauseCuts(analyzer.frames(), request.options),
+      durationSec: source.trackDurationSec
+    };
+  } finally {
+    source.dispose();
+  }
+}
+
+export {
+  renderMediaEditAudio,
+  analyzeMediaEditAudio,
+  previewMediaEditAudio,
+  analyzeMediaEditPauses
+};

package/dist/{chunk-BRE3IRIM.js → chunk-M5AK4MMV.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-3NJDHK62.js";
 import {
   useFrameCapture
-} from "./chunk-4NI2QIFE.js";
+} from "./chunk-2C4BEAWT.js";
 
 // src/CoverImageExportModal.tsx
 import { useCallback, useId, useRef, useState } from "react";

package/dist/{chunk-JGSJQZGU.js → chunk-RO52S6GO.js}

@@ -1,9 +1,9 @@
 import {
   useVideoExport
-} from "./chunk-BGS2NEYC.js";
+} from "./chunk-TUIVBMAK.js";
 
 // src/VideoExportModal.tsx
-import { useState, useCallback, useId, useRef } from "react";
+import { useState, useCallback, useEffect, useId, useRef } from "react";
 import { useModalDialog } from "@bendyline/squisq-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function formatDuration(seconds) {
@@ -160,6 +160,7 @@ function VideoExportModal({
   mediaProvider,
   images,
   audio,
+  mediaEditRenders,
   defaultConfig,
   colorScheme = "light",
   uiPalette,
@@ -256,7 +257,23 @@ function VideoExportModal({
       setCaptionMode("off");
     }
   }, []);
+  const [preparingEdits, setPreparingEdits] = useState(false);
+  const editsWaitRef = useRef(null);
+  useEffect(() => () => editsWaitRef.current?.abort(), []);
   const handleExport = useCallback(async () => {
+    if (includeAudio && mediaEditRenders) {
+      const controller = new AbortController();
+      editsWaitRef.current = controller;
+      setPreparingEdits(true);
+      try {
+        await mediaEditRenders.whenReady(doc, controller.signal);
+      } catch {
+        return;
+      } finally {
+        editsWaitRef.current = null;
+        setPreparingEdits(false);
+      }
+    }
     const previewCanvas = previewCanvasRef.current;
     const previewContext = previewCanvas?.getContext("2d");
     if (previewCanvas && previewContext) {
@@ -276,6 +293,7 @@ function VideoExportModal({
       images,
       audio,
       mediaProvider,
+      ...mediaEditRenders ? { processedAudio: mediaEditRenders.processedAudio } : {},
       // Only thread the bundle through when the host actually supplied one.
       ...playerScript !== void 0 ? { playerScript } : {}
     };
@@ -292,6 +310,7 @@ function VideoExportModal({
     images,
     audio,
     mediaProvider,
+    mediaEditRenders,
     playerScript,
     defaultConfig,
     startExport
@@ -505,9 +524,26 @@ function VideoExportModal({
                 ),
                 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." })
               ] }),
+              preparingEdits && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  role: "status",
+                  "data-squisq-video-export-preparing-edits": true,
+                  style: { fontSize: 12, color: palette.muted, margin: "0 0 12px" },
+                  children: "Processing audio edits\u2026"
+                }
+              ),
               /* @__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" })
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    style: themedPrimaryButtonStyle,
+                    onClick: handleExport,
+                    disabled: preparingEdits,
+                    children: outputFormat === "gif" ? "Export GIF" : "Export Video"
+                  }
+                )
               ] })
             ] }),
             isExporting && /* @__PURE__ */ jsxs(Fragment, { children: [