@remotion/timeline-utils 4.0.513 → 4.0.515

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

@@ -1,29 +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 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/get-visible-waveform-volume.d.ts

@@ -0,0 +1,8 @@
+import { type TimelineLoopDisplay } from '../loop-display';
+import type { WaveformVolume } from './draw-peaks';
+export declare const getVisibleWaveformVolume: ({ displayDurationInFrames, displayOffsetInFrames, loopDisplay, volume, }: {
+    readonly displayDurationInFrames: number;
+    readonly displayOffsetInFrames: number;
+    readonly loopDisplay: TimelineLoopDisplay | undefined;
+    readonly volume: WaveformVolume;
+}) => WaveformVolume;

package/dist/audio-waveform/get-visible-waveform-volume.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVisibleWaveformVolume = void 0;
+const loop_display_1 = require("../loop-display");
+const getVisibleWaveformVolume = ({ displayDurationInFrames, displayOffsetInFrames, loopDisplay, volume, }) => {
+    if (!Array.isArray(volume)) {
+        return volume;
+    }
+    if (!Number.isFinite(displayDurationInFrames) ||
+        displayDurationInFrames <= 0) {
+        return [];
+    }
+    if (!(0, loop_display_1.shouldTileLoopDisplay)(loopDisplay) ||
+        loopDisplay.durationInFrames <= 0) {
+        const start = Math.max(0, Math.floor(displayOffsetInFrames));
+        const end = Math.min(volume.length, Math.ceil(displayOffsetInFrames + displayDurationInFrames));
+        return volume.slice(start, end);
+    }
+    const segments = (0, loop_display_1.getLoopDisplaySegments)({
+        displayDurationInFrames,
+        displayOffsetInFrames,
+        loopDurationInFrames: loopDisplay.durationInFrames,
+    });
+    const result = [];
+    for (const segment of segments) {
+        const start = Math.max(0, Math.floor(segment.loopOffsetInFrames));
+        const end = Math.min(volume.length, Math.ceil(segment.loopOffsetInFrames + segment.durationInFrames));
+        // Do not `push(...slice)`: Chrome throws RangeError: Invalid array length
+        // once a loop segment is longer than ~65k frames.
+        for (let index = start; index < end; index++) {
+            result.push(volume[index]);
+        }
+    }
+    return result;
+};
+exports.getVisibleWaveformVolume = getVisibleWaveformVolume;

package/dist/audio-waveform/slice-visible-waveform-peaks.d.ts

@@ -0,0 +1,11 @@
+import type { TimelineLoopDisplay } from '../loop-display';
+export declare const sliceVisibleWaveformPeaks: ({ displayDurationInFrames, displayOffsetInFrames, durationInFrames, fps, loopDisplay, peaks, playbackRate, startFrom, }: {
+    readonly displayDurationInFrames: number;
+    readonly displayOffsetInFrames: number;
+    readonly durationInFrames: number;
+    readonly fps: number;
+    readonly loopDisplay: TimelineLoopDisplay | undefined;
+    readonly peaks: Float32Array<ArrayBufferLike>;
+    readonly playbackRate: number;
+    readonly startFrom: number;
+}) => Float32Array<ArrayBufferLike>;

package/dist/audio-waveform/slice-visible-waveform-peaks.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sliceVisibleWaveformPeaks = void 0;
+const loop_display_1 = require("../loop-display");
+const slice_waveform_peaks_1 = require("./slice-waveform-peaks");
+const sliceVisibleWaveformPeaks = ({ displayDurationInFrames, displayOffsetInFrames, durationInFrames, fps, loopDisplay, peaks, playbackRate, startFrom, }) => {
+    if (!(0, loop_display_1.shouldTileLoopDisplay)(loopDisplay) ||
+        loopDisplay.durationInFrames <= 0) {
+        return (0, slice_waveform_peaks_1.sliceWaveformPeaks)({
+            durationInFrames: Math.min(displayDurationInFrames, Math.max(0, durationInFrames - displayOffsetInFrames)),
+            fps,
+            peaks,
+            playbackRate,
+            startFrom: startFrom + displayOffsetInFrames * playbackRate,
+        });
+    }
+    const segments = (0, loop_display_1.getLoopDisplaySegments)({
+        displayDurationInFrames,
+        displayOffsetInFrames,
+        loopDurationInFrames: loopDisplay.durationInFrames,
+    });
+    const parts = [];
+    let totalLength = 0;
+    for (const segment of segments) {
+        const part = (0, slice_waveform_peaks_1.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;
+};
+exports.sliceVisibleWaveformPeaks = sliceVisibleWaveformPeaks;

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,15 +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_waveform_peaks_1 = require("./audio-waveform/slice-waveform-peaks");
-const loop_display_1 = require("./loop-display");
-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,
@@ -17,100 +22,20 @@ const postError = (requestId, error) => {
     };
     self.postMessage(payload);
 };
-const drawPartialWaveform = (message, peaks) => {
-    if (!canvas) {
-        return;
-    }
-    const portionPeaks = (0, slice_waveform_peaks_1.sliceWaveformPeaks)({
-        durationInFrames: (0, loop_display_1.shouldTileLoopDisplay)(message.loopDisplay)
-            ? message.loopDisplay.durationInFrames
-            : message.durationInFrames,
-        fps: message.fps,
-        peaks,
-        playbackRate: message.playbackRate,
-        startFrom: message.startFrom,
-    });
-    if (!(0, loop_display_1.shouldTileLoopDisplay)(message.loopDisplay)) {
-        (0, draw_peaks_1.drawBars)({
-            canvas,
-            peaks: portionPeaks,
-            color: 'rgba(255, 255, 255, 0.6)',
-            volume: message.volume,
-            width: message.width,
-        });
-        return;
-    }
-    const loopWidth = (0, loop_display_1.getLoopDisplayWidth)({
-        visualizationWidth: message.width,
-        loopDisplay: message.loopDisplay,
-    });
-    const targetCanvas = new OffscreenCanvas(Math.max(1, Math.ceil(loopWidth)), message.height);
-    (0, draw_peaks_1.drawBars)({
-        canvas: targetCanvas,
-        peaks: portionPeaks,
-        color: 'rgba(255, 255, 255, 0.6)',
-        volume: message.volume,
-        width: targetCanvas.width,
-    });
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-        throw new Error('Failed to get canvas context');
-    }
-    const pattern = ctx.createPattern(targetCanvas, 'repeat-x');
-    if (!pattern) {
-        return;
-    }
-    pattern.setTransform(new DOMMatrix().scaleSelf(loopWidth / targetCanvas.width, 1));
-    ctx.clearRect(0, 0, message.width, message.height);
-    ctx.fillStyle = pattern;
-    ctx.fillRect(0, 0, message.width, message.height);
-};
-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);
     });
 });