@bendyline/squisq-video-react 2.4.10 → 2.4.12

package/dist/{chunk-4NI2QIFE.js → chunk-7ZMJ25DC.js}

@@ -1,10 +1,256 @@
+import {
+  BlobSource,
+  Input,
+  MATROSKA,
+  MP4,
+  QTFF,
+  VideoSampleSink,
+  WEBM
+} from "./chunk-4GFZ3GUE.js";
+
 // src/hooks/useFrameCapture.ts
 import { createElement } from "react";
 import { createRoot } from "react-dom/client";
 import { useRef, useCallback, useMemo } from "react";
+import { parseMediaCrop } from "@bendyline/squisq/mediaEdit";
 import { resolveDashboardStyleId } from "@bendyline/squisq/doc";
 import { DocPlayer, MediaContext } from "@bendyline/squisq-react";
 import html2canvas from "html2canvas";
+
+// src/hooks/captureVideoFrames.ts
+var FRAME_TIME_EPSILON_SECONDS = 1e-4;
+var MAX_SEQUENTIAL_DECODE_GAP_SECONDS = 3;
+var DECODABLE_SOURCE_URL = /^(?:blob|data):/i;
+var INPUT_FORMATS = [MP4, QTFF, WEBM, MATROSKA];
+var decodedFrames = /* @__PURE__ */ new WeakMap();
+function getDecodedCaptureFrame(video) {
+  const frame = decodedFrames.get(video);
+  if (!frame || frame.timestamp === null) return null;
+  return {
+    canvas: frame.canvas,
+    width: frame.width,
+    height: frame.height,
+    timestamp: frame.timestamp
+  };
+}
+function resolveCaptureVideoImage(video) {
+  const decoded = getDecodedCaptureFrame(video);
+  if (decoded) return { source: decoded.canvas, width: decoded.width, height: decoded.height };
+  return { source: video, width: video.videoWidth, height: video.videoHeight };
+}
+function captureVideoSource(video) {
+  return video.currentSrc || video.src;
+}
+var DecodedVideoCursor = class _DecodedVideoCursor {
+  /**
+   * @param source Sequential sample iterator factory for one video track.
+   * @param releaseSource Frees the demuxer behind `source`.
+   */
+  constructor(source, releaseSource, canvas, width, height) {
+    this.source = source;
+    this.releaseSource = releaseSource;
+    this.iterator = null;
+    this.lookahead = null;
+    /** True while showing a track's first frame for a target before it. */
+    this.showingLeadingFrame = false;
+    this.queue = Promise.resolve();
+    this.disposed = false;
+    canvas.width = width;
+    canvas.height = height;
+    this.frame = { canvas, width, height, timestamp: null };
+  }
+  /** Open a local source, or null when it has no decodable video track. */
+  static async open(blob, ownerDocument) {
+    const input = new Input({ source: new BlobSource(blob), formats: INPUT_FORMATS });
+    try {
+      const track = await input.getPrimaryVideoTrack();
+      if (!track || !await track.canDecode()) {
+        input.dispose();
+        return null;
+      }
+      const width = track.displayWidth;
+      const height = track.displayHeight;
+      if (width <= 0 || height <= 0) {
+        input.dispose();
+        return null;
+      }
+      return new _DecodedVideoCursor(
+        new VideoSampleSink(track),
+        () => input.dispose(),
+        ownerDocument.createElement("canvas"),
+        width,
+        height
+      );
+    } catch {
+      input.dispose();
+      return null;
+    }
+  }
+  /** Draw the frame displayed at `targetTime` (seconds). Calls run in order. */
+  selectFrame(targetTime) {
+    const selection = this.queue.then(() => this.advanceTo(targetTime));
+    this.queue = selection.catch(() => void 0);
+    return selection;
+  }
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    this.lookahead?.close();
+    this.lookahead = null;
+    void this.iterator?.return();
+    this.iterator = null;
+    this.releaseSource();
+    this.frame.canvas.width = 0;
+    this.frame.canvas.height = 0;
+    this.frame.timestamp = null;
+  }
+  async advanceTo(targetTime) {
+    if (this.disposed) throw new Error("Decoded capture video was released.");
+    const target = targetTime + FRAME_TIME_EPSILON_SECONDS;
+    const shown = this.frame.timestamp;
+    const continues = this.iterator !== null && shown !== null && target - shown <= MAX_SEQUENTIAL_DECODE_GAP_SECONDS && (target >= shown || this.showingLeadingFrame);
+    if (continues && target < shown) return;
+    let candidate = null;
+    try {
+      if (!continues) {
+        await this.restartAt(target);
+        candidate = await this.pull();
+        if (!candidate) return;
+      }
+      for (; ; ) {
+        const next = this.lookahead ?? await this.pull();
+        this.lookahead = null;
+        if (!next) break;
+        if (next.timestamp > target) {
+          this.lookahead = next;
+          break;
+        }
+        candidate?.close();
+        candidate = next;
+      }
+      if (candidate && !this.disposed) {
+        this.present(candidate);
+        this.showingLeadingFrame = candidate.timestamp > target;
+      }
+    } finally {
+      candidate?.close();
+    }
+  }
+  async restartAt(target) {
+    this.lookahead?.close();
+    this.lookahead = null;
+    await this.iterator?.return();
+    this.iterator = this.source.samples(target);
+  }
+  async pull() {
+    const result = await this.iterator?.next();
+    return result && !result.done ? result.value : null;
+  }
+  present(sample) {
+    const { frame } = this;
+    if (sample.displayWidth !== frame.width || sample.displayHeight !== frame.height) {
+      frame.width = sample.displayWidth;
+      frame.height = sample.displayHeight;
+      frame.canvas.width = frame.width;
+      frame.canvas.height = frame.height;
+    }
+    const context = frame.canvas.getContext("2d");
+    if (!context) throw new Error("Could not create the decoded video frame canvas context");
+    sample.draw(context, 0, 0, frame.width, frame.height);
+    frame.timestamp = sample.timestamp;
+  }
+};
+var CaptureVideoFrameRegistry = class {
+  constructor() {
+    this.bindings = /* @__PURE__ */ new Map();
+    this.blobs = /* @__PURE__ */ new Map();
+    /** Sources that failed to open or decode; they keep the element path. */
+    this.undecodableSources = /* @__PURE__ */ new Set();
+    this.opening = /* @__PURE__ */ new Map();
+    this.disposed = false;
+    this.selectFrame = async (video, targetTime) => {
+      const binding = this.bindings.get(video);
+      if (!binding || binding.src !== captureVideoSource(video)) return false;
+      try {
+        await binding.cursor.selectFrame(targetTime);
+        return true;
+      } catch {
+        this.undecodableSources.add(binding.src);
+        this.release(video);
+        return false;
+      }
+    };
+  }
+  /**
+   * Bind decoders to every video under `root` that lacks one for its current
+   * source, and release bindings whose element left the DOM or changed
+   * source. Returns how many elements were newly bound: their pixels now
+   * come from the decoder, so a caller must re-run its seek barrier.
+   */
+  async attach(root) {
+    for (const [video, binding] of this.bindings) {
+      if (!video.isConnected || captureVideoSource(video) !== binding.src) this.release(video);
+    }
+    const results = await Promise.all(
+      Array.from(root.querySelectorAll("video")).filter((video) => !this.bindings.has(video)).map((video) => this.bind(video))
+    );
+    return results.filter(Boolean).length;
+  }
+  /** Whether capture draws this element from decoded frames. */
+  isDecoded(video) {
+    return this.bindings.has(video);
+  }
+  dispose() {
+    this.disposed = true;
+    for (const video of [...this.bindings.keys()]) this.release(video);
+    this.blobs.clear();
+    this.opening.clear();
+  }
+  bind(video) {
+    const pending = this.opening.get(video);
+    if (pending) return pending;
+    const opening = this.open(video).finally(() => this.opening.delete(video));
+    this.opening.set(video, opening);
+    return opening;
+  }
+  async open(video) {
+    const src = captureVideoSource(video);
+    if (!src || !DECODABLE_SOURCE_URL.test(src) || this.undecodableSources.has(src)) return false;
+    const blob = await this.loadBlob(src);
+    const cursor = blob ? await DecodedVideoCursor.open(blob, video.ownerDocument) : null;
+    if (!cursor) {
+      this.undecodableSources.add(src);
+      return false;
+    }
+    if (this.disposed || !video.isConnected || captureVideoSource(video) !== src) {
+      cursor.dispose();
+      return false;
+    }
+    this.bindings.set(video, { src, cursor });
+    decodedFrames.set(video, cursor.frame);
+    video.pause();
+    video.dataset.captureDecoded = "true";
+    return true;
+  }
+  loadBlob(src) {
+    let blob = this.blobs.get(src);
+    if (!blob) {
+      blob = fetch(src).then((response) => response.ok ? response.blob() : null).catch(() => null);
+      this.blobs.set(src, blob);
+    }
+    return blob;
+  }
+  release(video) {
+    const binding = this.bindings.get(video);
+    if (!binding) return;
+    this.bindings.delete(video);
+    if (decodedFrames.get(video) === binding.cursor.frame) decodedFrames.delete(video);
+    delete video.dataset.captureDecoded;
+    binding.cursor.dispose();
+  }
+};
+
+// src/hooks/useFrameCapture.ts
 var MIME_MAP = {
   jpg: "image/jpeg",
   jpeg: "image/jpeg",
@@ -147,6 +393,7 @@ function waitForCaptureVideoState(video, description, isReady, update) {
   });
 }
 function captureVideoNeedsPriming(video, primedVideos) {
+  if (video.dataset.captureDecoded === "true") return false;
   if (video.readyState >= HTMLMediaElement.HAVE_METADATA && video.videoWidth <= 0 && video.videoHeight <= 0) {
     return false;
   }
@@ -350,6 +597,30 @@ function videoFrameRect(sourceWidth, sourceHeight, destinationWidth, destination
     dh: destinationHeight
   };
 }
+function croppedVideoFrameRect(sourceWidth, sourceHeight, crop, destinationWidth, destinationHeight, objectFit) {
+  if (!crop) {
+    return videoFrameRect(
+      sourceWidth,
+      sourceHeight,
+      destinationWidth,
+      destinationHeight,
+      objectFit
+    );
+  }
+  const cx = crop.x * sourceWidth;
+  const cy = crop.y * sourceHeight;
+  const rect = videoFrameRect(
+    crop.w * sourceWidth,
+    crop.h * sourceHeight,
+    destinationWidth,
+    destinationHeight,
+    objectFit
+  );
+  return { ...rect, sx: rect.sx + cx, sy: rect.sy + cy };
+}
+function videoCrop(video) {
+  return parseMediaCrop(video.getAttribute("data-crop") ?? void 0);
+}
 function prepareScheduledVideoClones(originalRoot, clonedRoot) {
   const captureFamilies = [
     {
@@ -381,15 +652,17 @@ function prepareScheduledVideoClones(originalRoot, clonedRoot) {
     canvas.dataset.videoCaptureClone = "true";
     const destinationWidth = Math.round(video.clientWidth || video.offsetWidth);
     const destinationHeight = Math.round(video.clientHeight || video.offsetHeight);
-    if (video.videoWidth <= 0 || video.videoHeight <= 0 || destinationWidth <= 0 || destinationHeight <= 0) {
+    const image = resolveCaptureVideoImage(video);
+    if (image.width <= 0 || image.height <= 0 || destinationWidth <= 0 || destinationHeight <= 0) {
       return;
     }
     try {
       const view = video.ownerDocument.defaultView;
       const objectFit = video.style.objectFit || view?.getComputedStyle(video).objectFit || "fill";
-      const frame = videoFrameRect(
-        video.videoWidth,
-        video.videoHeight,
+      const frame = croppedVideoFrameRect(
+        image.width,
+        image.height,
+        videoCrop(video),
         destinationWidth,
         destinationHeight,
         objectFit
@@ -399,7 +672,7 @@ function prepareScheduledVideoClones(originalRoot, clonedRoot) {
       canvas.width = destinationWidth;
       canvas.height = destinationHeight;
       context.drawImage(
-        video,
+        image.source,
         frame.sx,
         frame.sy,
         frame.sw,
@@ -650,7 +923,8 @@ function releaseCaptureCloneCanvases(canvases) {
   });
 }
 function scheduledVideoIsVisual(video) {
-  return video.videoWidth > 0 && video.videoHeight > 0 && video.dataset.active === "true";
+  const { width, height } = resolveCaptureVideoImage(video);
+  return width > 0 && height > 0 && video.dataset.active === "true";
 }
 function scheduledVideoPresentation(video) {
   return video.closest(SCHEDULED_MEDIA_SELECTOR)?.dataset.presentation;
@@ -786,9 +1060,11 @@ function drawScheduledVideosOnto(destination, captureRoot, videos) {
       0,
       outerRadius - Math.max(borderLeft * scaleX, borderTop * scaleY)
     );
-    const source = videoFrameRect(
-      video.videoWidth,
-      video.videoHeight,
+    const image = resolveCaptureVideoImage(video);
+    const source = croppedVideoFrameRect(
+      image.width,
+      image.height,
+      videoCrop(video),
       contentWidth,
       contentHeight,
       style.objectFit || "fill"
@@ -806,7 +1082,7 @@ function drawScheduledVideosOnto(destination, captureRoot, videos) {
     addRoundedRect(context, innerX, innerY, innerWidth, innerHeight, innerRadius);
     context.clip();
     context.drawImage(
-      video,
+      image.source,
       source.sx,
       source.sy,
       source.sw,
@@ -852,10 +1128,20 @@ function getFrameVisualStateKey(captureRoot, timelineTime, options = {}) {
   });
   if (POTENTIALLY_ANIMATED_IMAGE_URL.test(markup)) needsTimelineKey = true;
   const videoStates = Array.from(captureRoot.querySelectorAll("video")).filter(
-    (video) => video.videoWidth > 0 && video.videoHeight > 0 && (!options.ignoreScheduledVideoFrames || !video.closest(SCHEDULED_MEDIA_SELECTOR))
-  ).map(
-    (video) => `${video.currentSrc || video.src}:${finiteMediaTime(video.currentTime)}:${video.readyState}:${video.videoWidth}x${video.videoHeight}`
-  );
+    (video) => !options.ignoreScheduledVideoFrames || !video.closest(SCHEDULED_MEDIA_SELECTOR)
+  ).flatMap((video) => {
+    const src = video.currentSrc || video.src;
+    const decoded = getDecodedCaptureFrame(video);
+    if (decoded) {
+      return [
+        `${src}:decoded:${finiteMediaTime(decoded.timestamp)}:${decoded.width}x${decoded.height}`
+      ];
+    }
+    if (video.videoWidth <= 0 || video.videoHeight <= 0) return [];
+    return [
+      `${src}:${finiteMediaTime(video.currentTime)}:${video.readyState}:${video.videoWidth}x${video.videoHeight}`
+    ];
+  });
   if (captureRoot.querySelector(
     "canvas, iframe, object, embed, animate, animateMotion, animateTransform, set"
   )) {
@@ -886,13 +1172,16 @@ function useFrameCapture() {
   const captureImageDataUrlsRef = useRef(/* @__PURE__ */ new Map());
   const captureSvgRasterCacheRef = useRef(createCaptureSvgRasterCache());
   const primedCaptureVideosRef = useRef(/* @__PURE__ */ new WeakSet());
+  const videoFramesRef = useRef(null);
   const dimensionsRef = useRef({ width: 1920, height: 1080 });
   const captionLayerCanvasRef = useRef(null);
   const captionLayerKeyRef = useRef(null);
   const captionLayerHasContentRef = useRef(false);
   const init = useCallback(
     async (doc, renderOptions, captionMode) => {
-      if (rootRef.current || containerRef.current || mediaProviderRef.current || captureCanvasRef.current || captureBaseCanvasRef.current) {
+      if (rootRef.current || containerRef.current || mediaProviderRef.current || captureCanvasRef.current || captureBaseCanvasRef.current || videoFramesRef.current) {
+        const oldVideoFrames = videoFramesRef.current;
+        videoFramesRef.current = null;
         const oldRoot = rootRef.current;
         const oldContainer = containerRef.current;
         const oldMediaProvider = mediaProviderRef.current;
@@ -922,6 +1211,7 @@ function useFrameCapture() {
           setTimeout(() => {
             if (oldRoot) oldRoot.unmount();
             if (oldContainer) oldContainer.remove();
+            oldVideoFrames?.dispose();
             if (oldOwnsMediaProvider) oldMediaProvider?.dispose();
             if (oldCaptureCanvas) {
               oldCaptureCanvas.width = 0;
@@ -979,6 +1269,8 @@ function useFrameCapture() {
       ownsMediaProviderRef.current = !!renderOptions.images;
       const root = createRoot(renderRoot);
       rootRef.current = root;
+      const videoFrames = new CaptureVideoFrameRegistry();
+      videoFramesRef.current = videoFrames;
       const captionsEnabled = captionMode !== void 0 && captionMode !== "off";
       const captionStyle = captionMode === "social" ? "social" : "standard";
       let resolveRenderAPI;
@@ -1013,6 +1305,7 @@ function useFrameCapture() {
         coverSlideTemplate: renderOptions.coverSlideTemplate,
         captionsEnabled,
         captionStyle,
+        renderVideoFrameSelector: videoFrames.selectFrame,
         onRenderAPIReady: (api) => {
           if (containerRef.current !== container) return;
           renderAPIRef.current = api;
@@ -1052,6 +1345,7 @@ function useFrameCapture() {
             }
             await waitForCaptureMediaResolutions(mediaResolutionTrackerRef.current);
             await waitForCaptureAssets(captureRoot, decodedImagesRef.current);
+            await videoFrames.attach(captureRoot);
             await primeIndeterminateCaptureVideos(captureRoot, primedCaptureVideosRef.current);
             clearTimeout(timeout);
             resolve(api.getDuration());
@@ -1085,16 +1379,18 @@ function useFrameCapture() {
       if (!root) {
         throw new Error("Capture root element not found");
       }
-      await primeIndeterminateCaptureVideos(root, primedCaptureVideosRef.current);
+      const videoFrames = videoFramesRef.current;
+      const prepareCaptureVideos = async () => (await videoFrames?.attach(root) ?? 0) + await primeIndeterminateCaptureVideos(root, primedCaptureVideosRef.current);
+      await prepareCaptureVideos();
       try {
         await api.seekTo(time);
       } catch (seekError) {
-        if (!await primeIndeterminateCaptureVideos(root, primedCaptureVideosRef.current)) {
+        if (!await prepareCaptureVideos()) {
           throw seekError;
         }
         await api.seekTo(time);
       }
-      if (await primeIndeterminateCaptureVideos(root, primedCaptureVideosRef.current)) {
+      if (await prepareCaptureVideos()) {
         await api.seekTo(time);
       }
       const renderedTime = api.getRenderedTime();
@@ -1280,6 +1576,8 @@ function useFrameCapture() {
     releaseCaptureSvgRasterCache(captureSvgRasterCacheRef.current);
     captureSvgRasterCacheRef.current = createCaptureSvgRasterCache();
     primedCaptureVideosRef.current = /* @__PURE__ */ new WeakSet();
+    videoFramesRef.current?.dispose();
+    videoFramesRef.current = null;
     renderAPIRef.current = null;
   }, []);
   return useMemo(

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

@@ -1,9 +1,9 @@
 import {
   useVideoExport
-} from "./chunk-BGS2NEYC.js";
+} from "./chunk-ED7QK6VC.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: [

package/dist/{chunk-BGS2NEYC.js → chunk-ED7QK6VC.js}

@@ -1,6 +1,6 @@
 import {
   useFrameCapture
-} from "./chunk-4NI2QIFE.js";
+} from "./chunk-7ZMJ25DC.js";
 import {
   EXPORT_AUDIO_CHANNELS,
   EXPORT_AUDIO_SAMPLE_RATE,
@@ -13,7 +13,7 @@ import {
   supportsWebCodecs,
   supportsWebCodecsAac,
   supportsWebCodecsH264
-} from "./chunk-32QCPFXE.js";
+} from "./chunk-GBIYYDMY.js";
 
 // src/hooks/useVideoExport.ts
 import { useState, useRef, useCallback, useEffect } from "react";
@@ -677,7 +677,9 @@ function useVideoExport(options = {}) {
           document
         ).catch(() => false);
         const audioBitrate = (QUALITY_PRESETS[quality] ?? QUALITY_PRESETS.normal).audioBitrate;
-        const timeline = effectiveOutputFormat === "mp4" && audioPolicy !== "omit" ? computeAudioTimeline(doc, coverPlan.audioOffset) : [];
+        const timeline = effectiveOutputFormat === "mp4" && audioPolicy !== "omit" ? config.processedAudio ? computeAudioTimeline(doc, coverPlan.audioOffset, {
+          processedAudio: config.processedAudio
+        }) : computeAudioTimeline(doc, coverPlan.audioOffset) : [];
         const aacSupported = timeline.length > 0 ? await supportsWebCodecsAac(EXPORT_AUDIO_SAMPLE_RATE, EXPORT_AUDIO_CHANNELS) : false;
         const tierDecision = selectAudioTier({
           hasClips: timeline.length > 0,

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);
     }