@remotion/timeline-utils 4.0.514 → 4.0.515

package/dist/audio-waveform/audio-waveform-worker-types.d.ts

@@ -1,31 +1,18 @@
-import type { TimelineLoopDisplay } from '../loop-display';
-import type { WaveformVolume } from './draw-peaks';
-export type AudioWaveformWorkerInitMessage = {
-    readonly type: 'init';
-    readonly canvas: OffscreenCanvas;
-};
-export type AudioWaveformWorkerRenderMessage = {
-    readonly type: 'render';
+export type AudioWaveformWorkerLoadMessage = {
+    readonly type: 'load';
     readonly requestId: number;
     readonly src: string;
-    readonly width: number;
-    readonly height: number;
-    readonly volume: WaveformVolume;
-    readonly startFrom: number;
-    readonly durationInFrames: number;
-    readonly displayOffsetInFrames: number;
-    readonly displayDurationInFrames: number;
-    readonly fps: number;
-    readonly playbackRate: number;
-    readonly loopDisplay: TimelineLoopDisplay | undefined;
 };
-export type AudioWaveformWorkerDisposeMessage = {
-    readonly type: 'dispose';
+export type AudioWaveformWorkerIncomingMessage = AudioWaveformWorkerLoadMessage;
+export type AudioWaveformWorkerPeaksMessage = {
+    readonly type: 'peaks';
+    readonly requestId: number;
+    readonly peaks: Float32Array;
+    readonly final: boolean;
 };
-export type AudioWaveformWorkerIncomingMessage = AudioWaveformWorkerInitMessage | AudioWaveformWorkerRenderMessage | AudioWaveformWorkerDisposeMessage;
 export type AudioWaveformWorkerErrorMessage = {
     readonly type: 'error';
     readonly requestId: number;
     readonly message: string;
 };
-export type AudioWaveformWorkerOutgoingMessage = AudioWaveformWorkerErrorMessage;
+export type AudioWaveformWorkerOutgoingMessage = AudioWaveformWorkerPeaksMessage | AudioWaveformWorkerErrorMessage;

package/dist/audio-waveform/subscribe-to-waveform-peaks.d.ts

@@ -0,0 +1,5 @@
+export declare const subscribeToWaveformPeaks: ({ src, onPeaks, onError, }: {
+    readonly src: string;
+    readonly onPeaks: (peaks: Float32Array<ArrayBufferLike>, final: boolean) => void;
+    readonly onError: (error: Error) => void;
+}) => () => void;

package/dist/audio-waveform/subscribe-to-waveform-peaks.js

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribeToWaveformPeaks = void 0;
+const load_waveform_peaks_1 = require("./load-waveform-peaks");
+const make_audio_waveform_worker_1 = require("./make-audio-waveform-worker");
+// All AudioWaveform instances share one decode worker and one peaks cache,
+// so remounts (timeline virtualization, zoom window cropping) and multiple
+// clips with the same src never re-fetch or re-decode the audio.
+const peaksCache = new Map();
+const inFlightBySrc = new Map();
+const inFlightByRequestId = new Map();
+let worker = null;
+let workerFailed = false;
+let nextRequestId = 0;
+const emitPeaks = (load, peaks, final) => {
+    if (final) {
+        peaksCache.set(load.src, peaks);
+        inFlightBySrc.delete(load.src);
+        if (load.requestId !== null) {
+            inFlightByRequestId.delete(load.requestId);
+        }
+    }
+    else {
+        load.latestPeaks = peaks;
+    }
+    for (const listener of load.listeners) {
+        listener.onPeaks(peaks, final);
+    }
+};
+const emitError = (load, error) => {
+    inFlightBySrc.delete(load.src);
+    if (load.requestId !== null) {
+        inFlightByRequestId.delete(load.requestId);
+    }
+    for (const listener of load.listeners) {
+        listener.onError(error);
+    }
+};
+const startMainThreadLoad = (load) => {
+    load.requestId = null;
+    // Never aborted: even if all subscribers unsubscribe, finishing the
+    // decode fills the cache for the next mount.
+    const controller = new AbortController();
+    (0, load_waveform_peaks_1.loadWaveformPeaks)(load.src, controller.signal, {
+        onProgress: ({ peaks, final }) => {
+            if (final) {
+                return;
+            }
+            // The processor mutates the same array in place; snapshot it so
+            // React state updates see a new reference.
+            emitPeaks(load, peaks.slice(), false);
+        },
+    })
+        .then((peaks) => {
+        emitPeaks(load, peaks, true);
+    })
+        .catch((error) => {
+        emitError(load, error instanceof Error
+            ? error
+            : new Error('Failed to load waveform peaks'));
+    });
+};
+const handleWorkerFailure = () => {
+    workerFailed = true;
+    worker === null || worker === void 0 ? void 0 : worker.terminate();
+    worker = null;
+    const pending = [...inFlightByRequestId.values()];
+    inFlightByRequestId.clear();
+    for (const load of pending) {
+        startMainThreadLoad(load);
+    }
+};
+const getOrCreateWorker = () => {
+    if (workerFailed || typeof Worker === 'undefined') {
+        return null;
+    }
+    if (worker) {
+        return worker;
+    }
+    try {
+        worker = (0, make_audio_waveform_worker_1.makeAudioWaveformWorker)();
+    }
+    catch (_a) {
+        workerFailed = true;
+        return null;
+    }
+    worker.addEventListener('message', (event) => {
+        const message = event.data;
+        const load = inFlightByRequestId.get(message.requestId);
+        if (!load) {
+            return;
+        }
+        if (message.type === 'error') {
+            emitError(load, new Error(message.message));
+            return;
+        }
+        emitPeaks(load, message.peaks, message.final);
+    });
+    worker.addEventListener('error', (event) => {
+        event.preventDefault();
+        handleWorkerFailure();
+    });
+    return worker;
+};
+const subscribeToWaveformPeaks = ({ src, onPeaks, onError, }) => {
+    const cached = peaksCache.get(src);
+    if (cached) {
+        onPeaks(cached, true);
+        return () => undefined;
+    }
+    const listener = { onPeaks, onError };
+    const existing = inFlightBySrc.get(src);
+    if (existing) {
+        existing.listeners.add(listener);
+        if (existing.latestPeaks) {
+            onPeaks(existing.latestPeaks, false);
+        }
+        return () => {
+            existing.listeners.delete(listener);
+        };
+    }
+    const load = {
+        src,
+        listeners: new Set([listener]),
+        latestPeaks: null,
+        requestId: null,
+    };
+    inFlightBySrc.set(src, load);
+    const workerInstance = getOrCreateWorker();
+    if (workerInstance) {
+        const requestId = nextRequestId++;
+        load.requestId = requestId;
+        inFlightByRequestId.set(requestId, load);
+        const message = {
+            type: 'load',
+            requestId,
+            src,
+        };
+        workerInstance.postMessage(message);
+    }
+    else {
+        startMainThreadLoad(load);
+    }
+    return () => {
+        load.listeners.delete(listener);
+    };
+};
+exports.subscribeToWaveformPeaks = subscribeToWaveformPeaks;

package/dist/audio-waveform-worker.js

@@ -1,14 +1,20 @@
 "use strict";
 /// <reference lib="webworker" />
 Object.defineProperty(exports, "__esModule", { value: true });
-const draw_peaks_1 = require("./audio-waveform/draw-peaks");
 const load_waveform_peaks_1 = require("./audio-waveform/load-waveform-peaks");
-const slice_visible_waveform_peaks_1 = require("./audio-waveform/slice-visible-waveform-peaks");
-let canvas = null;
-let currentController = null;
-let latestRequestId = 0;
+const postPeaks = (requestId, peaks, final) => {
+    // Structured cloning copies the array, so the decoder can keep
+    // mutating its buffer while the main thread reads the snapshot.
+    const payload = {
+        type: 'peaks',
+        requestId,
+        peaks,
+        final,
+    };
+    self.postMessage(payload);
+};
 const postError = (requestId, error) => {
-    const message = error instanceof Error ? error.message : 'Failed to render waveform';
+    const message = error instanceof Error ? error.message : 'Failed to load waveform';
     const payload = {
         type: 'error',
         requestId,
@@ -16,74 +22,20 @@ const postError = (requestId, error) => {
     };
     self.postMessage(payload);
 };
-const drawPartialWaveform = (message, peaks) => {
-    if (!canvas) {
-        return;
-    }
-    const portionPeaks = (0, slice_visible_waveform_peaks_1.sliceVisibleWaveformPeaks)({
-        displayDurationInFrames: message.displayDurationInFrames,
-        displayOffsetInFrames: message.displayOffsetInFrames,
-        durationInFrames: message.durationInFrames,
-        fps: message.fps,
-        loopDisplay: message.loopDisplay,
-        peaks,
-        playbackRate: message.playbackRate,
-        startFrom: message.startFrom,
-    });
-    (0, draw_peaks_1.drawBars)({
-        canvas,
-        peaks: portionPeaks,
-        color: 'rgba(255, 255, 255, 0.6)',
-        volume: message.volume,
-        width: message.width,
-    });
-};
-const renderWaveform = async (message) => {
-    if (!canvas) {
-        postError(message.requestId, new Error('Waveform canvas not initialized'));
-        return;
-    }
-    const controller = new AbortController();
-    currentController === null || currentController === void 0 ? void 0 : currentController.abort();
-    currentController = controller;
-    latestRequestId = message.requestId;
-    try {
-        canvas.width = message.width;
-        canvas.height = message.height;
-        const peaks = await (0, load_waveform_peaks_1.loadWaveformPeaks)(message.src, controller.signal, {
-            onProgress: ({ peaks: nextPeaks }) => {
-                if (controller.signal.aborted ||
-                    latestRequestId !== message.requestId) {
-                    return;
-                }
-                drawPartialWaveform(message, nextPeaks);
-            },
-        });
-        if (controller.signal.aborted || latestRequestId !== message.requestId) {
-            return;
-        }
-        drawPartialWaveform(message, peaks);
-    }
-    catch (error) {
-        if (controller.signal.aborted || latestRequestId !== message.requestId) {
-            return;
-        }
-        postError(message.requestId, error);
-    }
-};
 self.addEventListener('message', (event) => {
     const message = event.data;
-    if (message.type === 'init') {
-        canvas = message.canvas;
-        return;
-    }
-    if (message.type === 'dispose') {
-        currentController === null || currentController === void 0 ? void 0 : currentController.abort();
-        currentController = null;
-        canvas = null;
-        return;
-    }
-    renderWaveform(message).catch((error) => {
+    const controller = new AbortController();
+    (0, load_waveform_peaks_1.loadWaveformPeaks)(message.src, controller.signal, {
+        onProgress: ({ peaks, final }) => {
+            if (!final) {
+                postPeaks(message.requestId, peaks, false);
+            }
+        },
+    })
+        .then((peaks) => {
+        postPeaks(message.requestId, peaks, true);
+    })
+        .catch((error) => {
         postError(message.requestId, error);
     });
 });

package/dist/esm/audio-waveform-worker.mjs

@@ -1,101 +1,3 @@
-// src/audio-waveform/parse-color.ts
-var colorCache = new Map;
-var parseColor = (color) => {
-  const cached = colorCache.get(color);
-  if (cached)
-    return cached;
-  const ctx = new OffscreenCanvas(1, 1).getContext("2d");
-  ctx.fillStyle = color;
-  ctx.fillRect(0, 0, 1, 1);
-  const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
-  const result = [r, g, b, a];
-  colorCache.set(color, result);
-  return result;
-};
-
-// src/audio-waveform/draw-peaks.ts
-var CLIPPING_COLOR = "#FF7F50";
-var getVolumeAtBar = ({
-  barIndex,
-  numBars,
-  volume
-}) => {
-  if (typeof volume === "number") {
-    return volume;
-  }
-  if (volume.length === 0) {
-    return 1;
-  }
-  if (volume.length === 1 || numBars <= 1) {
-    return volume[0];
-  }
-  const volumeIndex = Math.round(barIndex / (numBars - 1) * (volume.length - 1));
-  return volume[volumeIndex] ?? 1;
-};
-var drawBars = ({
-  canvas,
-  color,
-  peaks,
-  volume,
-  width
-}) => {
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    throw new Error("Failed to get canvas context");
-  }
-  const { height } = canvas;
-  const w = canvas.width;
-  if (w === 0 || height === 0) {
-    return;
-  }
-  ctx.clearRect(0, 0, w, height);
-  const [r, g, b, a] = parseColor(color);
-  const [cr, cg, cb, ca] = parseColor(CLIPPING_COLOR);
-  const imageData = ctx.createImageData(w, height);
-  const { data } = imageData;
-  const numBars = width;
-  for (let barIndex = 0;barIndex < numBars; barIndex++) {
-    const x = barIndex;
-    if (x >= w)
-      break;
-    const peakIndex = Math.floor(barIndex / numBars * peaks.length);
-    const peak = peaks[peakIndex] || 0;
-    const barVolume = getVolumeAtBar({ barIndex, numBars, volume });
-    const scaledPeak = peak * barVolume;
-    const halfBar = Math.max(0, Math.min(height / 2, scaledPeak * height / 2));
-    if (halfBar === 0)
-      continue;
-    const mid = height / 2;
-    const barY = Math.round(mid - halfBar);
-    const barEnd = Math.round(mid + halfBar);
-    const isClipping = scaledPeak > 1;
-    const clipTopEnd = isClipping ? Math.min(barY + 2, barEnd) : barY;
-    const clipBotStart = isClipping ? Math.max(barEnd - 2, barY) : barEnd;
-    for (let y = barY;y < clipTopEnd; y++) {
-      const idx = (y * w + x) * 4;
-      data[idx] = cr;
-      data[idx + 1] = cg;
-      data[idx + 2] = cb;
-      data[idx + 3] = ca;
-    }
-    for (let y = clipTopEnd;y < clipBotStart; y++) {
-      const idx = (y * w + x) * 4;
-      data[idx] = r;
-      data[idx + 1] = g;
-      data[idx + 2] = b;
-      data[idx + 3] = a;
-    }
-    for (let y = clipBotStart;y < barEnd; y++) {
-      const idx = (y * w + x) * 4;
-      data[idx] = cr;
-      data[idx + 1] = cg;
-      data[idx + 2] = cb;
-      data[idx + 3] = ca;
-    }
-  }
-  ctx.putImageData(imageData, 0, 0);
-};
-
 // src/audio-waveform/load-waveform-peaks.ts
 import { ALL_FORMATS, AudioSampleSink, Input, UrlSource } from "mediabunny";
 
@@ -280,135 +182,18 @@ async function loadWaveformPeaks(url, signal, options) {
   }
 }
 
-// src/loop-display.ts
-var shouldTileLoopDisplay = (loopDisplay) => {
-  return loopDisplay !== undefined && loopDisplay.numberOfTimes > 1;
-};
-var getLoopDisplaySegments = ({
-  displayDurationInFrames,
-  displayOffsetInFrames,
-  loopDurationInFrames
-}) => {
-  if (!Number.isFinite(displayDurationInFrames) || displayDurationInFrames <= 0 || !Number.isFinite(displayOffsetInFrames) || !Number.isFinite(loopDurationInFrames) || loopDurationInFrames <= 0) {
-    return [];
-  }
-  const displayEndInFrames = displayOffsetInFrames + displayDurationInFrames;
-  const firstLoopIndex = Math.floor(displayOffsetInFrames / loopDurationInFrames);
-  const lastLoopIndex = Math.floor(displayEndInFrames / loopDurationInFrames);
-  const segments = [];
-  for (let loopIndex = firstLoopIndex;loopIndex <= lastLoopIndex; loopIndex++) {
-    const loopStartInFrames = loopIndex * loopDurationInFrames;
-    const segmentStart = Math.max(displayOffsetInFrames, loopStartInFrames);
-    const segmentEnd = Math.min(displayEndInFrames, loopStartInFrames + loopDurationInFrames);
-    const durationInFrames = segmentEnd - segmentStart;
-    if (durationInFrames <= 0) {
-      continue;
-    }
-    segments.push({
-      loopIndex,
-      absoluteOffsetInFrames: segmentStart,
-      loopOffsetInFrames: segmentStart - loopStartInFrames,
-      durationInFrames
-    });
-  }
-  return segments;
-};
-var getLoopDisplayWidth = ({
-  visualizationWidth,
-  loopDisplay
-}) => {
-  if (!shouldTileLoopDisplay(loopDisplay)) {
-    return visualizationWidth;
-  }
-  return visualizationWidth / loopDisplay.numberOfTimes;
-};
-
-// src/audio-waveform/slice-waveform-peaks.ts
-var sliceWaveformPeaks = ({
-  durationInFrames,
-  fps,
-  peaks,
-  playbackRate,
-  startFrom
-}) => {
-  if (peaks.length === 0) {
-    return peaks;
-  }
-  const startTimeInSeconds = startFrom / fps;
-  const durationInSeconds = durationInFrames / fps * playbackRate;
-  const startPeakIndex = Math.floor(startTimeInSeconds * TARGET_SAMPLE_RATE);
-  const endPeakIndex = Math.ceil((startTimeInSeconds + durationInSeconds) * TARGET_SAMPLE_RATE);
-  if (!Number.isFinite(startPeakIndex) || !Number.isFinite(endPeakIndex)) {
-    return peaks.subarray(Math.max(0, startPeakIndex), Math.min(peaks.length, endPeakIndex));
-  }
-  if (startPeakIndex >= 0 && endPeakIndex <= peaks.length) {
-    return peaks.subarray(startPeakIndex, endPeakIndex);
-  }
-  const portion = new Float32Array(Math.max(0, endPeakIndex - startPeakIndex));
-  const sourceStart = Math.max(0, startPeakIndex);
-  const sourceEnd = Math.min(peaks.length, endPeakIndex);
-  if (sourceStart < sourceEnd) {
-    portion.set(peaks.subarray(sourceStart, sourceEnd), sourceStart - startPeakIndex);
-  }
-  return portion;
-};
-
-// src/audio-waveform/slice-visible-waveform-peaks.ts
-var sliceVisibleWaveformPeaks = ({
-  displayDurationInFrames,
-  displayOffsetInFrames,
-  durationInFrames,
-  fps,
-  loopDisplay,
-  peaks,
-  playbackRate,
-  startFrom
-}) => {
-  if (!shouldTileLoopDisplay(loopDisplay) || loopDisplay.durationInFrames <= 0) {
-    return sliceWaveformPeaks({
-      durationInFrames: Math.min(displayDurationInFrames, Math.max(0, durationInFrames - displayOffsetInFrames)),
-      fps,
-      peaks,
-      playbackRate,
-      startFrom: startFrom + displayOffsetInFrames * playbackRate
-    });
-  }
-  const segments = getLoopDisplaySegments({
-    displayDurationInFrames,
-    displayOffsetInFrames,
-    loopDurationInFrames: loopDisplay.durationInFrames
-  });
-  const parts = [];
-  let totalLength = 0;
-  for (const segment of segments) {
-    const part = sliceWaveformPeaks({
-      durationInFrames: segment.durationInFrames,
-      fps,
-      peaks,
-      playbackRate,
-      startFrom: startFrom + segment.loopOffsetInFrames * playbackRate
-    });
-    parts.push(part);
-    totalLength += part.length;
-  }
-  if (parts.length === 1) {
-    return parts[0];
-  }
-  const result = new Float32Array(totalLength);
-  let writeOffset = 0;
-  for (const part of parts) {
-    result.set(part, writeOffset);
-    writeOffset += part.length;
-  }
-  return result;
-};
-
 // src/audio-waveform-worker.ts
-var canvas = null;
-var currentController = null;
-var latestRequestId = 0;
+var postPeaks = (requestId, peaks, final) => {
+  const payload = {
+    type: "peaks",
+    requestId,
+    peaks,
+    final
+  };
+  self.postMessage(payload);
+};
 var postError = (requestId, error) => {
-  const message = error instanceof Error ? error.message : "Failed to render waveform";
+  const message = error instanceof Error ? error.message : "Failed to load waveform";
   const payload = {
     type: "error",
     requestId,
@@ -416,72 +201,18 @@ var postError = (requestId, error) => {
   };
   self.postMessage(payload);
 };
-var drawPartialWaveform = (message, peaks) => {
-  if (!canvas) {
-    return;
-  }
-  const portionPeaks = sliceVisibleWaveformPeaks({
-    displayDurationInFrames: message.displayDurationInFrames,
-    displayOffsetInFrames: message.displayOffsetInFrames,
-    durationInFrames: message.durationInFrames,
-    fps: message.fps,
-    loopDisplay: message.loopDisplay,
-    peaks,
-    playbackRate: message.playbackRate,
-    startFrom: message.startFrom
-  });
-  drawBars({
-    canvas,
-    peaks: portionPeaks,
-    color: "rgba(255, 255, 255, 0.6)",
-    volume: message.volume,
-    width: message.width
-  });
-};
-var renderWaveform = async (message) => {
-  if (!canvas) {
-    postError(message.requestId, new Error("Waveform canvas not initialized"));
-    return;
-  }
+self.addEventListener("message", (event) => {
+  const message = event.data;
   const controller = new AbortController;
-  currentController?.abort();
-  currentController = controller;
-  latestRequestId = message.requestId;
-  try {
-    canvas.width = message.width;
-    canvas.height = message.height;
-    const peaks = await loadWaveformPeaks(message.src, controller.signal, {
-      onProgress: ({ peaks: nextPeaks }) => {
-        if (controller.signal.aborted || latestRequestId !== message.requestId) {
-          return;
-        }
-        drawPartialWaveform(message, nextPeaks);
+  loadWaveformPeaks(message.src, controller.signal, {
+    onProgress: ({ peaks, final }) => {
+      if (!final) {
+        postPeaks(message.requestId, peaks, false);
       }
-    });
-    if (controller.signal.aborted || latestRequestId !== message.requestId) {
-      return;
     }
-    drawPartialWaveform(message, peaks);
-  } catch (error) {
-    if (controller.signal.aborted || latestRequestId !== message.requestId) {
-      return;
-    }
-    postError(message.requestId, error);
-  }
-};
-self.addEventListener("message", (event) => {
-  const message = event.data;
-  if (message.type === "init") {
-    canvas = message.canvas;
-    return;
-  }
-  if (message.type === "dispose") {
-    currentController?.abort();
-    currentController = null;
-    canvas = null;
-    return;
-  }
-  renderWaveform(message).catch((error) => {
+  }).then((peaks) => {
+    postPeaks(message.requestId, peaks, true);
+  }).catch((error) => {
     postError(message.requestId, error);
   });
 });

package/dist/esm/index.mjs

@@ -353,12 +353,6 @@ async function loadWaveformPeaks(url, signal, options) {
     input.dispose();
   }
 }
-// src/audio-waveform/make-audio-waveform-worker.ts
-var makeAudioWaveformWorker = () => {
-  return new Worker(new URL("./audio-waveform-worker.mjs", import.meta.url), {
-    type: "module"
-  });
-};
 // src/audio-waveform/slice-waveform-peaks.ts
 var sliceWaveformPeaks = ({
   durationInFrames,
@@ -438,6 +432,148 @@ var sliceVisibleWaveformPeaks = ({
   }
   return result;
 };
+// src/audio-waveform/make-audio-waveform-worker.ts
+var makeAudioWaveformWorker = () => {
+  return new Worker(new URL("./audio-waveform-worker.mjs", import.meta.url), {
+    type: "module"
+  });
+};
+
+// src/audio-waveform/subscribe-to-waveform-peaks.ts
+var peaksCache2 = new Map;
+var inFlightBySrc = new Map;
+var inFlightByRequestId = new Map;
+var worker = null;
+var workerFailed = false;
+var nextRequestId = 0;
+var emitPeaks = (load, peaks, final) => {
+  if (final) {
+    peaksCache2.set(load.src, peaks);
+    inFlightBySrc.delete(load.src);
+    if (load.requestId !== null) {
+      inFlightByRequestId.delete(load.requestId);
+    }
+  } else {
+    load.latestPeaks = peaks;
+  }
+  for (const listener of load.listeners) {
+    listener.onPeaks(peaks, final);
+  }
+};
+var emitError = (load, error) => {
+  inFlightBySrc.delete(load.src);
+  if (load.requestId !== null) {
+    inFlightByRequestId.delete(load.requestId);
+  }
+  for (const listener of load.listeners) {
+    listener.onError(error);
+  }
+};
+var startMainThreadLoad = (load) => {
+  load.requestId = null;
+  const controller = new AbortController;
+  loadWaveformPeaks(load.src, controller.signal, {
+    onProgress: ({ peaks, final }) => {
+      if (final) {
+        return;
+      }
+      emitPeaks(load, peaks.slice(), false);
+    }
+  }).then((peaks) => {
+    emitPeaks(load, peaks, true);
+  }).catch((error) => {
+    emitError(load, error instanceof Error ? error : new Error("Failed to load waveform peaks"));
+  });
+};
+var handleWorkerFailure = () => {
+  workerFailed = true;
+  worker?.terminate();
+  worker = null;
+  const pending = [...inFlightByRequestId.values()];
+  inFlightByRequestId.clear();
+  for (const load of pending) {
+    startMainThreadLoad(load);
+  }
+};
+var getOrCreateWorker = () => {
+  if (workerFailed || typeof Worker === "undefined") {
+    return null;
+  }
+  if (worker) {
+    return worker;
+  }
+  try {
+    worker = makeAudioWaveformWorker();
+  } catch {
+    workerFailed = true;
+    return null;
+  }
+  worker.addEventListener("message", (event) => {
+    const message = event.data;
+    const load = inFlightByRequestId.get(message.requestId);
+    if (!load) {
+      return;
+    }
+    if (message.type === "error") {
+      emitError(load, new Error(message.message));
+      return;
+    }
+    emitPeaks(load, message.peaks, message.final);
+  });
+  worker.addEventListener("error", (event) => {
+    event.preventDefault();
+    handleWorkerFailure();
+  });
+  return worker;
+};
+var subscribeToWaveformPeaks = ({
+  src,
+  onPeaks,
+  onError
+}) => {
+  const cached = peaksCache2.get(src);
+  if (cached) {
+    onPeaks(cached, true);
+    return () => {
+      return;
+    };
+  }
+  const listener = { onPeaks, onError };
+  const existing = inFlightBySrc.get(src);
+  if (existing) {
+    existing.listeners.add(listener);
+    if (existing.latestPeaks) {
+      onPeaks(existing.latestPeaks, false);
+    }
+    return () => {
+      existing.listeners.delete(listener);
+    };
+  }
+  const load = {
+    src,
+    listeners: new Set([listener]),
+    latestPeaks: null,
+    requestId: null
+  };
+  inFlightBySrc.set(src, load);
+  const workerInstance = getOrCreateWorker();
+  if (workerInstance) {
+    const requestId = nextRequestId++;
+    load.requestId = requestId;
+    inFlightByRequestId.set(requestId, load);
+    const message = {
+      type: "load",
+      requestId,
+      src
+    };
+    workerInstance.postMessage(message);
+  } else {
+    startMainThreadLoad(load);
+  }
+  return () => {
+    load.listeners.delete(listener);
+  };
+};
 // src/clamp-timestamps-to-duration.ts
 var LAST_FRAME_EPSILON_IN_SECONDS = 1 / 1e6;
 var clampTimestampsToDuration = ({
@@ -458,6 +594,7 @@ import {
   UrlSource as UrlSource2,
   VideoSampleSink
 } from "mediabunny";
+import { Internals } from "remotion";
 
 // src/get-duration-or-compute.ts
 var getDurationOrCompute = async (input) => {
@@ -474,22 +611,34 @@ async function extractFrames({
   signal,
   repeatLastFrame = false
 }) {
-  const input = new Input2({
-    formats: ALL_FORMATS2,
-    source: new UrlSource2(src)
+  const lease = Internals.globalMediaResourceManager.acquire({
+    key: Internals.getMediabunnyInputResourceKey({
+      src,
+      credentials: null,
+      requestInitFingerprint: null,
+      revision: null
+    }),
+    create: () => {
+      const createdInput = new Input2({
+        formats: ALL_FORMATS2,
+        source: new UrlSource2(src)
+      });
+      return {
+        resource: createdInput,
+        dispose: () => createdInput.dispose()
+      };
+    }
   });
-  const dispose = () => {
-    input.dispose();
-  };
-  if (signal) {
-    signal.addEventListener("abort", dispose, { once: true });
-  }
+  const input = lease.resource;
   try {
     const [durationInSeconds, format, videoTrack] = await Promise.all([
-      getDurationOrCompute(input),
+      lease.getOrCreateValue(Internals.MEDIABUNNY_DURATION_VALUE_KEY, () => getDurationOrCompute(input)),
       input.getFormat(),
       input.getPrimaryVideoTrack()
     ]);
+    if (signal?.aborted) {
+      return;
+    }
     if (!videoTrack) {
       throw new Error("No video track found in the input");
     }
@@ -538,10 +687,7 @@ async function extractFrames({
     }
     throw error;
   } finally {
-    dispose();
-    if (signal) {
-      signal.removeEventListener("abort", dispose);
-    }
+    lease.release();
   }
 }
 // src/frame-database.ts
@@ -1006,13 +1152,13 @@ var renderFrameStripToCanvas = async ({
   });
 };
 export {
+  subscribeToWaveformPeaks,
   sliceWaveformPeaks,
   sliceVisibleWaveformPeaks,
   shouldTileLoopDisplay,
   resizeVideoFrame,
   renderFrameStripToCanvas,
   makeFrameDatabaseKey,
-  makeAudioWaveformWorker,
   loadWaveformPeaks,
   getVisibleWaveformVolume,
   getTimestampFromFrameDatabaseKey,

package/dist/extract-frames.js

@@ -2,26 +2,39 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractFrames = extractFrames;
 const mediabunny_1 = require("mediabunny");
+const remotion_1 = require("remotion");
 const clamp_timestamps_to_duration_1 = require("./clamp-timestamps-to-duration");
 const get_duration_or_compute_1 = require("./get-duration-or-compute");
 async function extractFrames({ src, timestampsInSeconds, onVideoSample, signal, repeatLastFrame = false, }) {
     var _a;
-    const input = new mediabunny_1.Input({
-        formats: mediabunny_1.ALL_FORMATS,
-        source: new mediabunny_1.UrlSource(src),
+    const lease = remotion_1.Internals.globalMediaResourceManager.acquire({
+        key: remotion_1.Internals.getMediabunnyInputResourceKey({
+            src,
+            credentials: null,
+            requestInitFingerprint: null,
+            revision: null,
+        }),
+        create: () => {
+            const createdInput = new mediabunny_1.Input({
+                formats: mediabunny_1.ALL_FORMATS,
+                source: new mediabunny_1.UrlSource(src),
+            });
+            return {
+                resource: createdInput,
+                dispose: () => createdInput.dispose(),
+            };
+        },
     });
-    const dispose = () => {
-        input.dispose();
-    };
-    if (signal) {
-        signal.addEventListener('abort', dispose, { once: true });
-    }
+    const input = lease.resource;
     try {
         const [durationInSeconds, format, videoTrack] = await Promise.all([
-            (0, get_duration_or_compute_1.getDurationOrCompute)(input),
+            lease.getOrCreateValue(remotion_1.Internals.MEDIABUNNY_DURATION_VALUE_KEY, () => (0, get_duration_or_compute_1.getDurationOrCompute)(input)),
             input.getFormat(),
             input.getPrimaryVideoTrack(),
         ]);
+        if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+            return;
+        }
         if (!videoTrack) {
             throw new Error('No video track found in the input');
         }
@@ -84,9 +97,6 @@ async function extractFrames({ src, timestampsInSeconds, onVideoSample, signal,
         throw error;
     }
     finally {
-        dispose();
-        if (signal) {
-            signal.removeEventListener('abort', dispose);
-        }
+        lease.release();
     }
 }

package/dist/index.d.ts

@@ -1,10 +1,10 @@
-export type { AudioWaveformWorkerIncomingMessage, AudioWaveformWorkerOutgoingMessage, AudioWaveformWorkerRenderMessage, } from './audio-waveform/audio-waveform-worker-types';
+export type { AudioWaveformWorkerIncomingMessage, AudioWaveformWorkerOutgoingMessage, } from './audio-waveform/audio-waveform-worker-types';
 export { TARGET_SAMPLE_RATE } from './audio-waveform/constants';
 export { drawBars, type WaveformVolume } from './audio-waveform/draw-peaks';
 export { getVisibleWaveformVolume } from './audio-waveform/get-visible-waveform-volume';
 export { loadWaveformPeaks } from './audio-waveform/load-waveform-peaks';
-export { makeAudioWaveformWorker } from './audio-waveform/make-audio-waveform-worker';
 export { sliceVisibleWaveformPeaks } from './audio-waveform/slice-visible-waveform-peaks';
+export { subscribeToWaveformPeaks } from './audio-waveform/subscribe-to-waveform-peaks';
 export { sliceWaveformPeaks } from './audio-waveform/slice-waveform-peaks';
 export { createWaveformPeakProcessor, emitWaveformProgress, } from './audio-waveform/waveform-peak-processor';
 export { clampTimestampsToDuration } from './clamp-timestamps-to-duration';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resizeVideoFrame = exports.renderFrameStripToCanvas = exports.getDurationOfOneFrame = exports.fillWithCachedFrames = exports.fillFrameWhereItFits = exports.ensureSlots = exports.drawSlot = exports.calculateTimestampSlots = exports.WEBCODECS_TIMESCALE = exports.shouldTileLoopDisplay = exports.getLoopDisplayWidth = exports.getLoopDisplaySegments = exports.getScaledImageThumbnailDimensions = exports.drawRepeatingImageThumbnail = exports.makeFrameDatabaseKey = exports.getTimestampFromFrameDatabaseKey = exports.getFrameDatabaseKeyPrefix = exports.getAspectRatioFromCache = exports.frameDatabase = exports.aspectRatioCache = exports.addFrameToCache = exports.extractFrames = exports.clampTimestampsToDuration = exports.emitWaveformProgress = exports.createWaveformPeakProcessor = exports.sliceWaveformPeaks = exports.sliceVisibleWaveformPeaks = exports.makeAudioWaveformWorker = exports.loadWaveformPeaks = exports.getVisibleWaveformVolume = exports.drawBars = exports.TARGET_SAMPLE_RATE = void 0;
+exports.resizeVideoFrame = exports.renderFrameStripToCanvas = exports.getDurationOfOneFrame = exports.fillWithCachedFrames = exports.fillFrameWhereItFits = exports.ensureSlots = exports.drawSlot = exports.calculateTimestampSlots = exports.WEBCODECS_TIMESCALE = exports.shouldTileLoopDisplay = exports.getLoopDisplayWidth = exports.getLoopDisplaySegments = exports.getScaledImageThumbnailDimensions = exports.drawRepeatingImageThumbnail = exports.makeFrameDatabaseKey = exports.getTimestampFromFrameDatabaseKey = exports.getFrameDatabaseKeyPrefix = exports.getAspectRatioFromCache = exports.frameDatabase = exports.aspectRatioCache = exports.addFrameToCache = exports.extractFrames = exports.clampTimestampsToDuration = exports.emitWaveformProgress = exports.createWaveformPeakProcessor = exports.sliceWaveformPeaks = exports.subscribeToWaveformPeaks = exports.sliceVisibleWaveformPeaks = exports.loadWaveformPeaks = exports.getVisibleWaveformVolume = exports.drawBars = exports.TARGET_SAMPLE_RATE = void 0;
 const constants_1 = require("./audio-waveform/constants");
 Object.defineProperty(exports, "TARGET_SAMPLE_RATE", { enumerable: true, get: function () { return constants_1.TARGET_SAMPLE_RATE; } });
 const draw_peaks_1 = require("./audio-waveform/draw-peaks");
@@ -9,10 +9,10 @@ const get_visible_waveform_volume_1 = require("./audio-waveform/get-visible-wave
 Object.defineProperty(exports, "getVisibleWaveformVolume", { enumerable: true, get: function () { return get_visible_waveform_volume_1.getVisibleWaveformVolume; } });
 const load_waveform_peaks_1 = require("./audio-waveform/load-waveform-peaks");
 Object.defineProperty(exports, "loadWaveformPeaks", { enumerable: true, get: function () { return load_waveform_peaks_1.loadWaveformPeaks; } });
-const make_audio_waveform_worker_1 = require("./audio-waveform/make-audio-waveform-worker");
-Object.defineProperty(exports, "makeAudioWaveformWorker", { enumerable: true, get: function () { return make_audio_waveform_worker_1.makeAudioWaveformWorker; } });
 const slice_visible_waveform_peaks_1 = require("./audio-waveform/slice-visible-waveform-peaks");
 Object.defineProperty(exports, "sliceVisibleWaveformPeaks", { enumerable: true, get: function () { return slice_visible_waveform_peaks_1.sliceVisibleWaveformPeaks; } });
+const subscribe_to_waveform_peaks_1 = require("./audio-waveform/subscribe-to-waveform-peaks");
+Object.defineProperty(exports, "subscribeToWaveformPeaks", { enumerable: true, get: function () { return subscribe_to_waveform_peaks_1.subscribeToWaveformPeaks; } });
 const slice_waveform_peaks_1 = require("./audio-waveform/slice-waveform-peaks");
 Object.defineProperty(exports, "sliceWaveformPeaks", { enumerable: true, get: function () { return slice_waveform_peaks_1.sliceWaveformPeaks; } });
 const waveform_peak_processor_1 = require("./audio-waveform/waveform-peak-processor");

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/timeline-utils"
 	},
 	"name": "@remotion/timeline-utils",
-	"version": "4.0.514",
+	"version": "4.0.515",
 	"description": "Internal utilities for rendering Remotion timelines",
 	"main": "dist/index.js",
 	"scripts": {
@@ -21,11 +21,12 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"mediabunny": "1.55.1"
+		"mediabunny": "1.55.1",
+		"remotion": "4.0.515"
 	},
 	"devDependencies": {
 		"@mediabunny/server": "1.55.1",
-		"@remotion/eslint-config-internal": "4.0.514",
+		"@remotion/eslint-config-internal": "4.0.515",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},