@remotion/studio 4.0.452 → 4.0.454

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -9,6 +9,7 @@ const frame_database_1 = require("../../helpers/frame-database");
 const resize_video_frame_1 = require("../../helpers/resize-video-frame");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
+const looped_media_timeline_1 = require("../looped-media-timeline");
 const FILMSTRIP_HEIGHT = timeline_layout_1.TIMELINE_LAYER_HEIGHT_IMAGE - 2;
 const outerStyle = {
     width: '100%',
@@ -146,7 +147,7 @@ const fillFrameWhereItFits = ({ frame, filledSlots, ctx, visualizationWidth, seg
         });
     }
 };
-const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, }) => {
+const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, }) => {
     const { fps } = (0, remotion_1.useVideoConfig)();
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -169,28 +170,63 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
             return;
         }
         current.appendChild(canvas);
+        const loopWidth = (0, looped_media_timeline_1.getLoopDisplayWidth)({
+            visualizationWidth: naturalWidth,
+            loopDisplay,
+        });
+        const shouldRepeatVideo = (0, looped_media_timeline_1.shouldTileLoopDisplay)(loopDisplay);
+        const targetCanvas = shouldRepeatVideo
+            ? document.createElement('canvas')
+            : canvas;
+        targetCanvas.width = shouldRepeatVideo
+            ? Math.max(1, Math.ceil(loopWidth))
+            : canvas.width;
+        targetCanvas.height = canvas.height;
+        const targetCtx = shouldRepeatVideo ? targetCanvas.getContext('2d') : ctx;
+        if (!targetCtx) {
+            current.removeChild(canvas);
+            return;
+        }
+        const repeatTarget = () => {
+            if (!shouldRepeatVideo) {
+                return;
+            }
+            const pattern = ctx.createPattern(targetCanvas, 'repeat-x');
+            if (!pattern) {
+                return;
+            }
+            pattern.setTransform(new DOMMatrix().scaleSelf(loopWidth / targetCanvas.width, 1));
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = pattern;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        };
         // desired-timestamp -> filled-timestamp
         const filledSlots = new Map();
         const fromSeconds = trimBefore / fps;
+        const visibleDurationInFrames = shouldRepeatVideo && loopDisplay
+            ? loopDisplay.durationInFrames
+            : durationInFrames;
         // Trim is applied first, then playbackRate. Each composition frame
         // advances the source video by `playbackRate` source frames.
-        const toSeconds = fromSeconds + (durationInFrames * playbackRate) / fps;
+        const toSeconds = fromSeconds + (visibleDurationInFrames * playbackRate) / fps;
+        const targetWidth = shouldRepeatVideo ? targetCanvas.width : naturalWidth;
         if (aspectRatio.current !== null) {
             ensureSlots({
                 filledSlots,
-                naturalWidth,
+                naturalWidth: targetWidth,
                 fromSeconds,
                 toSeconds,
                 aspectRatio: aspectRatio.current,
             });
             fillWithCachedFrames({
-                ctx,
-                naturalWidth,
+                ctx: targetCtx,
+                naturalWidth: targetWidth,
                 filledSlots,
                 src,
                 segmentDuration: toSeconds - fromSeconds,
                 fromSeconds,
             });
+            repeatTarget();
             const unfilled = Array.from(filledSlots.keys()).filter((timestamp) => !filledSlots.get(timestamp));
             // Don't extract frames if all slots are filled
             if (unfilled.length === 0) {
@@ -207,7 +243,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                     filledSlots,
                     fromSeconds,
                     toSeconds,
-                    naturalWidth,
+                    naturalWidth: targetWidth,
                     aspectRatio: aspectRatio.current,
                 });
                 return Array.from(filledSlots.keys()).map((timestamp) => timestamp / WEBCODECS_TIMESCALE);
@@ -235,17 +271,18 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                         filledSlots,
                         fromSeconds,
                         toSeconds,
-                        naturalWidth,
+                        naturalWidth: targetWidth,
                         aspectRatio: aspectRatio.current,
                     });
                     fillFrameWhereItFits({
-                        ctx,
+                        ctx: targetCtx,
                         filledSlots,
-                        visualizationWidth: naturalWidth,
+                        visualizationWidth: targetWidth,
                         frame: transformed,
                         segmentDuration: toSeconds - fromSeconds,
                         fromSeconds,
                     });
+                    repeatTarget();
                 }
                 catch (e) {
                     if (frame) {
@@ -264,13 +301,14 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                 return;
             }
             fillWithCachedFrames({
-                ctx,
-                naturalWidth,
+                ctx: targetCtx,
+                naturalWidth: targetWidth,
                 filledSlots,
                 src,
                 segmentDuration: toSeconds - fromSeconds,
                 fromSeconds,
             });
+            repeatTarget();
         })
             .catch((e) => {
             setError(e);
@@ -283,6 +321,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         durationInFrames,
         error,
         fps,
+        loopDisplay,
         naturalWidth,
         playbackRate,
         src,
@@ -299,7 +338,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         };
     }, [audioWidth, premountWidth]);
     return (jsx_runtime_1.jsxs("div", { style: outerStyle, children: [
-            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripContainerStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, visualizationWidth: audioWidth, startFrom: trimBefore, durationInFrames: durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, playbackRate: playbackRate }) })
+            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripContainerStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, visualizationWidth: audioWidth, startFrom: trimBefore, durationInFrames: durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, playbackRate: playbackRate, loopDisplay: loopDisplay }) })
         ] }));
 };
 exports.TimelineVideoInfo = TimelineVideoInfo;

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

@@ -0,0 +1,28 @@
+import type { LoopDisplay } from 'remotion';
+export type AudioWaveformWorkerInitMessage = {
+    readonly type: 'init';
+    readonly canvas: OffscreenCanvas;
+};
+export type AudioWaveformWorkerRenderMessage = {
+    readonly type: 'render';
+    readonly requestId: number;
+    readonly src: string;
+    readonly width: number;
+    readonly height: number;
+    readonly volume: number;
+    readonly startFrom: number;
+    readonly durationInFrames: number;
+    readonly fps: number;
+    readonly playbackRate: number;
+    readonly loopDisplay: LoopDisplay | undefined;
+};
+export type AudioWaveformWorkerDisposeMessage = {
+    readonly type: 'dispose';
+};
+export type AudioWaveformWorkerIncomingMessage = AudioWaveformWorkerInitMessage | AudioWaveformWorkerRenderMessage | AudioWaveformWorkerDisposeMessage;
+export type AudioWaveformWorkerErrorMessage = {
+    readonly type: 'error';
+    readonly requestId: number;
+    readonly message: string;
+};
+export type AudioWaveformWorkerOutgoingMessage = AudioWaveformWorkerErrorMessage;

package/dist/components/audio-waveform-worker-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/draw-peaks.d.ts

@@ -1 +1 @@
-export declare const drawBars: (canvas: HTMLCanvasElement, peaks: Float32Array<ArrayBufferLike>, color: string, volume: number, width: number) => void;
+export declare const drawBars: (canvas: HTMLCanvasElement | OffscreenCanvas, peaks: Float32Array<ArrayBufferLike>, color: string, volume: number, width: number) => void;

package/dist/components/load-waveform-peaks.d.ts

@@ -1,3 +1,13 @@
 declare const TARGET_SAMPLE_RATE = 100;
 export { TARGET_SAMPLE_RATE };
-export declare function loadWaveformPeaks(url: string, signal: AbortSignal): Promise<Float32Array>;
+type Progress = {
+    readonly peaks: Float32Array;
+    readonly completedPeaks: number;
+    readonly totalPeaks: number;
+    readonly final: boolean;
+};
+type LoadWaveformPeaksOptions = {
+    readonly onProgress?: (progress: Progress) => void;
+    readonly progressIntervalInMs?: number;
+};
+export declare function loadWaveformPeaks(url: string, signal: AbortSignal, options?: LoadWaveformPeaksOptions): Promise<Float32Array>;

package/dist/components/load-waveform-peaks.js

@@ -3,14 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TARGET_SAMPLE_RATE = void 0;
 exports.loadWaveformPeaks = loadWaveformPeaks;
 const mediabunny_1 = require("mediabunny");
+const waveform_peak_processor_1 = require("./waveform-peak-processor");
 const TARGET_SAMPLE_RATE = 100;
 exports.TARGET_SAMPLE_RATE = TARGET_SAMPLE_RATE;
+const DEFAULT_PROGRESS_INTERVAL_IN_MS = 50;
 const peaksCache = new Map();
-async function loadWaveformPeaks(url, signal) {
-    var _a;
+async function loadWaveformPeaks(url, signal, options) {
+    var _a, _b;
     const cached = peaksCache.get(url);
-    if (cached)
+    if (cached) {
+        (0, waveform_peak_processor_1.emitWaveformProgress)({
+            peaks: cached,
+            completedPeaks: cached.length,
+            totalPeaks: cached.length,
+            final: true,
+            onProgress: options === null || options === void 0 ? void 0 : options.onProgress,
+        });
         return cached;
+    }
     const input = new mediabunny_1.Input({
         formats: mediabunny_1.ALL_FORMATS,
         source: new mediabunny_1.UrlSource(url),
@@ -20,15 +30,26 @@ async function loadWaveformPeaks(url, signal) {
         if (!audioTrack) {
             return new Float32Array(0);
         }
-        const { sampleRate } = audioTrack;
-        const durationInSeconds = await audioTrack.computeDuration();
+        if (await audioTrack.isLive()) {
+            throw new Error('Live streams are not currently supported by Remotion. Sorry! Source: ' +
+                url);
+        }
+        if (await audioTrack.isRelativeToUnixEpoch()) {
+            throw new Error('Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: ' +
+                url);
+        }
+        const sampleRate = await audioTrack.getSampleRate();
+        const durationInSeconds = (_a = (await audioTrack.getDurationFromMetadata({ skipLiveWait: true }))) !== null && _a !== void 0 ? _a : (await audioTrack.computeDuration({ skipLiveWait: true }));
         const totalPeaks = Math.ceil(durationInSeconds * TARGET_SAMPLE_RATE);
         const samplesPerPeak = Math.max(1, Math.floor(sampleRate / TARGET_SAMPLE_RATE));
-        const peaks = new Float32Array(totalPeaks);
-        let peakIndex = 0;
-        let peakMax = 0;
-        let sampleInPeak = 0;
         const sink = new mediabunny_1.AudioSampleSink(audioTrack);
+        const processor = (0, waveform_peak_processor_1.createWaveformPeakProcessor)({
+            totalPeaks,
+            samplesPerPeak,
+            onProgress: options === null || options === void 0 ? void 0 : options.onProgress,
+            progressIntervalInMs: (_b = options === null || options === void 0 ? void 0 : options.progressIntervalInMs) !== null && _b !== void 0 ? _b : DEFAULT_PROGRESS_INTERVAL_IN_MS,
+            now: () => Date.now(),
+        });
         for await (const sample of sink.samples()) {
             if (signal.aborted) {
                 sample.close();
@@ -41,35 +62,11 @@ async function loadWaveformPeaks(url, signal) {
             const floats = new Float32Array(bytesNeeded / 4);
             sample.copyTo(floats, { format: 'f32', planeIndex: 0 });
             const channels = Math.max(1, sample.numberOfChannels);
-            const frames = sample.numberOfFrames;
             sample.close();
-            for (let frame = 0; frame < frames; frame++) {
-                // `f32` copies are interleaved, so timing must advance per frame, not per float.
-                let framePeak = 0;
-                for (let channel = 0; channel < channels; channel++) {
-                    const sampleIndex = frame * channels + channel;
-                    const abs = Math.abs((_a = floats[sampleIndex]) !== null && _a !== void 0 ? _a : 0);
-                    if (abs > framePeak) {
-                        framePeak = abs;
-                    }
-                }
-                if (framePeak > peakMax) {
-                    peakMax = framePeak;
-                }
-                sampleInPeak++;
-                if (sampleInPeak >= samplesPerPeak) {
-                    if (peakIndex < totalPeaks) {
-                        peaks[peakIndex] = peakMax;
-                    }
-                    peakIndex++;
-                    peakMax = 0;
-                    sampleInPeak = 0;
-                }
-            }
-        }
-        if (sampleInPeak > 0 && peakIndex < totalPeaks) {
-            peaks[peakIndex] = peakMax;
+            processor.processSampleChunk(floats, channels);
         }
+        processor.finalize();
+        const { peaks } = processor;
         peaksCache.set(url, peaks);
         return peaks;
     }

package/dist/components/looped-media-timeline.d.ts

@@ -0,0 +1,6 @@
+import type { LoopDisplay } from 'remotion';
+export declare const shouldTileLoopDisplay: (loopDisplay: LoopDisplay | undefined) => loopDisplay is LoopDisplay;
+export declare const getLoopDisplayWidth: ({ visualizationWidth, loopDisplay, }: {
+    visualizationWidth: number;
+    loopDisplay: LoopDisplay | undefined;
+}) => number;

package/dist/components/looped-media-timeline.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLoopDisplayWidth = exports.shouldTileLoopDisplay = void 0;
+const shouldTileLoopDisplay = (loopDisplay) => {
+    return loopDisplay !== undefined && loopDisplay.numberOfTimes > 1;
+};
+exports.shouldTileLoopDisplay = shouldTileLoopDisplay;
+const getLoopDisplayWidth = ({ visualizationWidth, loopDisplay, }) => {
+    if (!(0, exports.shouldTileLoopDisplay)(loopDisplay)) {
+        return visualizationWidth;
+    }
+    return visualizationWidth / loopDisplay.numberOfTimes;
+};
+exports.getLoopDisplayWidth = getLoopDisplayWidth;

package/dist/components/slice-waveform-peaks.d.ts

@@ -0,0 +1,7 @@
+export declare const sliceWaveformPeaks: ({ durationInFrames, fps, peaks, playbackRate, startFrom, }: {
+    readonly peaks: Float32Array<ArrayBufferLike>;
+    readonly startFrom: number;
+    readonly durationInFrames: number;
+    readonly fps: number;
+    readonly playbackRate: number;
+}) => Float32Array<ArrayBufferLike>;

package/dist/components/slice-waveform-peaks.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sliceWaveformPeaks = void 0;
+const load_waveform_peaks_1 = require("./load-waveform-peaks");
+const 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 * load_waveform_peaks_1.TARGET_SAMPLE_RATE);
+    const endPeakIndex = Math.ceil((startTimeInSeconds + durationInSeconds) * load_waveform_peaks_1.TARGET_SAMPLE_RATE);
+    return peaks.subarray(Math.max(0, startPeakIndex), Math.min(peaks.length, endPeakIndex));
+};
+exports.sliceWaveformPeaks = sliceWaveformPeaks;

package/dist/components/waveform-peak-processor.d.ts

@@ -0,0 +1,23 @@
+type Progress = {
+    readonly peaks: Float32Array;
+    readonly completedPeaks: number;
+    readonly totalPeaks: number;
+    readonly final: boolean;
+};
+type WaveformPeakProcessorOptions = {
+    readonly totalPeaks: number;
+    readonly samplesPerPeak: number;
+    readonly onProgress?: (progress: Progress) => void;
+    readonly progressIntervalInMs: number;
+    readonly now: () => number;
+};
+type WaveformPeakProcessor = {
+    readonly peaks: Float32Array;
+    processSampleChunk: (floats: Float32Array, channels: number) => void;
+    finalize: () => void;
+};
+export declare const emitWaveformProgress: ({ completedPeaks, final, onProgress, peaks, totalPeaks, }: Progress & {
+    readonly onProgress?: ((progress: Progress) => void) | undefined;
+}) => void;
+export declare const createWaveformPeakProcessor: ({ totalPeaks, samplesPerPeak, onProgress, progressIntervalInMs, now, }: WaveformPeakProcessorOptions) => WaveformPeakProcessor;
+export {};

package/dist/components/waveform-peak-processor.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createWaveformPeakProcessor = exports.emitWaveformProgress = void 0;
+const emitWaveformProgress = ({ completedPeaks, final, onProgress, peaks, totalPeaks, }) => {
+    onProgress === null || onProgress === void 0 ? void 0 : onProgress({
+        peaks,
+        completedPeaks,
+        totalPeaks,
+        final,
+    });
+};
+exports.emitWaveformProgress = emitWaveformProgress;
+const createWaveformPeakProcessor = ({ totalPeaks, samplesPerPeak, onProgress, progressIntervalInMs, now, }) => {
+    const peaks = new Float32Array(totalPeaks);
+    let peakIndex = 0;
+    let peakMax = 0;
+    let sampleInPeak = 0;
+    let lastProgressAt = 0;
+    let lastProgressPeak = 0;
+    const emitProgress = (force) => {
+        const timestamp = now();
+        if (!force && peakIndex === lastProgressPeak && sampleInPeak === 0) {
+            return;
+        }
+        if (!force && timestamp - lastProgressAt < progressIntervalInMs) {
+            return;
+        }
+        lastProgressAt = timestamp;
+        lastProgressPeak = peakIndex;
+        (0, exports.emitWaveformProgress)({
+            peaks,
+            completedPeaks: peakIndex,
+            totalPeaks,
+            final: force,
+            onProgress,
+        });
+    };
+    return {
+        peaks,
+        processSampleChunk: (floats, channels) => {
+            var _a;
+            const frameCount = Math.floor(floats.length / Math.max(1, channels));
+            for (let frame = 0; frame < frameCount; frame++) {
+                // `f32` copies are interleaved, so timing advances per frame.
+                let framePeak = 0;
+                for (let channel = 0; channel < channels; channel++) {
+                    const sampleIndex = frame * channels + channel;
+                    const abs = Math.abs((_a = floats[sampleIndex]) !== null && _a !== void 0 ? _a : 0);
+                    if (abs > framePeak) {
+                        framePeak = abs;
+                    }
+                }
+                if (framePeak > peakMax) {
+                    peakMax = framePeak;
+                }
+                sampleInPeak++;
+                if (sampleInPeak >= samplesPerPeak) {
+                    if (peakIndex < totalPeaks) {
+                        peaks[peakIndex] = peakMax;
+                    }
+                    peakIndex++;
+                    peakMax = 0;
+                    sampleInPeak = 0;
+                }
+            }
+            emitProgress(false);
+        },
+        finalize: () => {
+            if (sampleInPeak > 0 && peakIndex < totalPeaks) {
+                peaks[peakIndex] = peakMax;
+                peakIndex++;
+            }
+            emitProgress(true);
+        },
+    };
+};
+exports.createWaveformPeakProcessor = createWaveformPeakProcessor;