@remotion/studio 4.0.451 → 4.0.453

package/dist/Studio.js

@@ -17,7 +17,7 @@ const getServerDisconnectedDomElement = () => {
 };
 const StudioInner = ({ rootComponent, readOnly, visualModeEnabled }) => {
     var _a, _b;
-    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { visualModeEnabled: visualModeEnabled, frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'interactive', children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [
+    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { visualModeEnabled: visualModeEnabled, frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: window.remotion_numberOfAudioTags, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { readOnlyStudio: readOnly, children: [
                             jsx_runtime_1.jsx(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
                                 ? null
                                 : (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }) }) }) }));

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

@@ -0,0 +1 @@
+export {};

package/dist/audio-waveform-worker.js

@@ -0,0 +1,102 @@
+"use strict";
+/// <reference lib="webworker" />
+Object.defineProperty(exports, "__esModule", { value: true });
+const draw_peaks_1 = require("./components/draw-peaks");
+const load_waveform_peaks_1 = require("./components/load-waveform-peaks");
+const looped_media_timeline_1 = require("./components/looped-media-timeline");
+const slice_waveform_peaks_1 = require("./components/slice-waveform-peaks");
+let canvas = null;
+let currentController = null;
+let latestRequestId = 0;
+const postError = (requestId, error) => {
+    const message = error instanceof Error ? error.message : 'Failed to render waveform';
+    const payload = {
+        type: 'error',
+        requestId,
+        message,
+    };
+    self.postMessage(payload);
+};
+const drawPartialWaveform = (message, peaks) => {
+    if (!canvas) {
+        return;
+    }
+    const portionPeaks = (0, slice_waveform_peaks_1.sliceWaveformPeaks)({
+        durationInFrames: (0, looped_media_timeline_1.shouldTileLoopDisplay)(message.loopDisplay)
+            ? message.loopDisplay.durationInFrames
+            : message.durationInFrames,
+        fps: message.fps,
+        peaks,
+        playbackRate: message.playbackRate,
+        startFrom: message.startFrom,
+    });
+    if (!(0, looped_media_timeline_1.shouldTileLoopDisplay)(message.loopDisplay)) {
+        (0, draw_peaks_1.drawBars)(canvas, portionPeaks, 'rgba(255, 255, 255, 0.6)', message.volume, message.width);
+        return;
+    }
+    const loopWidth = (0, looped_media_timeline_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)(targetCanvas, portionPeaks, 'rgba(255, 255, 255, 0.6)', message.volume, 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);
+});

package/dist/components/AudioWaveform.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { LoopDisplay } from 'remotion';
 export declare const AudioWaveform: React.FC<{
     readonly src: string;
     readonly visualizationWidth: number;
@@ -7,4 +8,5 @@ export declare const AudioWaveform: React.FC<{
     readonly volume: string | number;
     readonly doesVolumeChange: boolean;
     readonly playbackRate: number;
+    readonly loopDisplay: LoopDisplay | undefined;
 }>;

package/dist/components/AudioWaveform.js

@@ -6,8 +6,25 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
+const make_audio_waveform_worker_1 = require("../make-audio-waveform-worker");
 const draw_peaks_1 = require("./draw-peaks");
 const load_waveform_peaks_1 = require("./load-waveform-peaks");
+const looped_media_timeline_1 = require("./looped-media-timeline");
+const slice_waveform_peaks_1 = require("./slice-waveform-peaks");
+const EMPTY_PEAKS = new Float32Array(0);
+// Recreate the canvas after Fast Refresh because an already transferred canvas
+// cannot be handed to OffscreenCanvas again.
+const canRetryCanvasTransfer = (err) => {
+    return err instanceof DOMException && err.name === 'InvalidStateError';
+};
+const canUseAudioWaveformWorker = () => {
+    if (typeof Worker === 'undefined' ||
+        typeof OffscreenCanvas === 'undefined' ||
+        typeof HTMLCanvasElement === 'undefined') {
+        return false;
+    }
+    return 'transferControlToOffscreen' in HTMLCanvasElement.prototype;
+};
 const container = {
     display: 'flex',
     flexDirection: 'row',
@@ -27,13 +44,39 @@ const errorMessage = {
 };
 const waveformCanvasStyle = {
     pointerEvents: 'none',
+    width: '100%',
+    height: '100%',
 };
 const volumeCanvasStyle = {
     position: 'absolute',
 };
-const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, volume, doesVolumeChange, playbackRate, }) => {
+const drawLoopedWaveform = ({ canvas, peaks, volume, visualizationWidth, loopWidth, }) => {
+    const h = canvas.height;
+    const w = Math.ceil(visualizationWidth);
+    const targetCanvas = document.createElement('canvas');
+    targetCanvas.width = Math.max(1, Math.ceil(loopWidth));
+    targetCanvas.height = h;
+    (0, draw_peaks_1.drawBars)(targetCanvas, peaks, 'rgba(255, 255, 255, 0.6)', volume, targetCanvas.width);
+    canvas.width = w;
+    canvas.height = h;
+    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, w, h);
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, w, h);
+};
+const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, volume, doesVolumeChange, playbackRate, loopDisplay, }) => {
     const [peaks, setPeaks] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
+    const [waveformCanvasKey, setWaveformCanvasKey] = (0, react_1.useState)(0);
+    const canUseWorkerPath = (0, react_1.useMemo)(() => canUseAudioWaveformWorker(), []);
     const vidConf = remotion_1.Internals.useUnsafeVideoConfig();
     if (vidConf === null) {
         throw new Error('Expected video config');
@@ -41,8 +84,15 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
     const containerRef = (0, react_1.useRef)(null);
     const waveformCanvas = (0, react_1.useRef)(null);
     const volumeCanvas = (0, react_1.useRef)(null);
+    const waveformWorker = (0, react_1.useRef)(null);
+    const hasTransferredCanvas = (0, react_1.useRef)(false);
+    const latestRequestId = (0, react_1.useRef)(0);
     (0, react_1.useEffect)(() => {
+        if (canUseWorkerPath) {
+            return;
+        }
         const controller = new AbortController();
+        setPeaks(null);
         setError(null);
         (0, load_waveform_peaks_1.loadWaveformPeaks)(src, controller.signal)
             .then((p) => {
@@ -56,33 +106,131 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
             }
         });
         return () => controller.abort();
-    }, [src]);
+    }, [canUseWorkerPath, src]);
+    (0, react_1.useEffect)(() => {
+        if (!canUseWorkerPath) {
+            return;
+        }
+        const canvasElement = waveformCanvas.current;
+        if (!canvasElement || hasTransferredCanvas.current) {
+            return;
+        }
+        const worker = (0, make_audio_waveform_worker_1.makeAudioWaveformWorker)();
+        waveformWorker.current = worker;
+        worker.addEventListener('message', (event) => {
+            if (event.data.type === 'error') {
+                if (event.data.requestId !== latestRequestId.current) {
+                    return;
+                }
+                setError(new Error(event.data.message));
+            }
+        });
+        let offscreen;
+        try {
+            offscreen = canvasElement.transferControlToOffscreen();
+        }
+        catch (err) {
+            worker.terminate();
+            waveformWorker.current = null;
+            if (canRetryCanvasTransfer(err)) {
+                setWaveformCanvasKey((key) => key + 1);
+                return;
+            }
+            throw err;
+        }
+        hasTransferredCanvas.current = true;
+        worker.postMessage({ type: 'init', canvas: offscreen }, [offscreen]);
+        return () => {
+            worker.postMessage({ type: 'dispose' });
+            worker.terminate();
+            waveformWorker.current = null;
+            hasTransferredCanvas.current = false;
+        };
+    }, [canUseWorkerPath, waveformCanvasKey]);
     const portionPeaks = (0, react_1.useMemo)(() => {
-        if (!peaks || peaks.length === 0) {
+        if (canUseWorkerPath || !peaks) {
             return null;
         }
-        const startTimeInSeconds = startFrom / vidConf.fps;
-        const durationInSeconds = (durationInFrames / vidConf.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.slice(Math.max(0, startPeakIndex), Math.min(peaks.length, endPeakIndex));
-    }, [peaks, startFrom, durationInFrames, vidConf.fps, playbackRate]);
+        return (0, slice_waveform_peaks_1.sliceWaveformPeaks)({
+            durationInFrames: (0, looped_media_timeline_1.shouldTileLoopDisplay)(loopDisplay)
+                ? loopDisplay.durationInFrames
+                : durationInFrames,
+            fps: vidConf.fps,
+            peaks,
+            playbackRate,
+            startFrom,
+        });
+    }, [
+        canUseWorkerPath,
+        durationInFrames,
+        loopDisplay,
+        peaks,
+        playbackRate,
+        startFrom,
+        vidConf.fps,
+    ]);
     (0, react_1.useEffect)(() => {
         const { current: canvasElement } = waveformCanvas;
         const { current: containerElement } = containerRef;
-        if (!canvasElement ||
-            !containerElement ||
-            !portionPeaks ||
-            portionPeaks.length === 0) {
+        if (!canvasElement || !containerElement) {
             return;
         }
         const h = containerElement.clientHeight;
         const w = Math.ceil(visualizationWidth);
+        const vol = typeof volume === 'number' ? volume : 1;
+        if (canUseWorkerPath) {
+            const worker = waveformWorker.current;
+            if (!worker || !hasTransferredCanvas.current) {
+                return;
+            }
+            latestRequestId.current += 1;
+            setError(null);
+            const message = {
+                type: 'render',
+                requestId: latestRequestId.current,
+                src,
+                width: w,
+                height: h,
+                volume: vol,
+                startFrom,
+                durationInFrames,
+                fps: vidConf.fps,
+                playbackRate,
+                loopDisplay,
+            };
+            worker.postMessage(message);
+            return;
+        }
         canvasElement.width = w;
         canvasElement.height = h;
-        const vol = typeof volume === 'number' ? volume : 1;
-        (0, draw_peaks_1.drawBars)(canvasElement, portionPeaks, 'rgba(255, 255, 255, 0.6)', vol, w);
-    }, [portionPeaks, visualizationWidth, volume]);
+        if ((0, looped_media_timeline_1.shouldTileLoopDisplay)(loopDisplay)) {
+            drawLoopedWaveform({
+                canvas: canvasElement,
+                peaks: portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS,
+                volume: vol,
+                visualizationWidth,
+                loopWidth: (0, looped_media_timeline_1.getLoopDisplayWidth)({
+                    visualizationWidth,
+                    loopDisplay,
+                }),
+            });
+        }
+        else {
+            (0, draw_peaks_1.drawBars)(canvasElement, portionPeaks !== null && portionPeaks !== void 0 ? portionPeaks : EMPTY_PEAKS, 'rgba(255, 255, 255, 0.6)', vol, w);
+        }
+    }, [
+        canUseWorkerPath,
+        durationInFrames,
+        loopDisplay,
+        playbackRate,
+        portionPeaks,
+        src,
+        startFrom,
+        vidConf.fps,
+        visualizationWidth,
+        volume,
+        waveformCanvasKey,
+    ]);
     (0, react_1.useEffect)(() => {
         const { current: volumeCanvasElement } = volumeCanvas;
         const { current: containerElement } = containerRef;
@@ -119,11 +267,11 @@ const AudioWaveform = ({ src, startFrom, durationInFrames, visualizationWidth, v
     if (error) {
         return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("div", { style: errorMessage, children: "No waveform available. Audio might not support CORS." }) }));
     }
-    if (!peaks) {
+    if (!canUseWorkerPath && !peaks) {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { ref: containerRef, style: container, children: [
-            jsx_runtime_1.jsx("canvas", { ref: waveformCanvas, style: waveformCanvasStyle }), jsx_runtime_1.jsx("canvas", { ref: volumeCanvas, style: volumeCanvasStyle })
+            jsx_runtime_1.jsx("canvas", { ref: waveformCanvas, style: waveformCanvasStyle }, waveformCanvasKey), jsx_runtime_1.jsx("canvas", { ref: volumeCanvas, style: volumeCanvasStyle })
         ] }));
 };
 exports.AudioWaveform = AudioWaveform;

package/dist/components/Timeline/LoopedIndicator.js

@@ -12,35 +12,21 @@ const width = {
 };
 const icon = {
     height: 12,
+    filter: 'drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8))',
 };
 const Icon = () => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: icon, children: jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_COLOR, d: "M512 256c0 88.224-71.775 160-160 160H170.067l34.512 32.419c9.875 9.276 10.119 24.883.539 34.464l-10.775 10.775c-9.373 9.372-24.568 9.372-33.941 0l-92.686-92.686c-9.373-9.373-9.373-24.568 0-33.941l92.686-92.686c9.373-9.373 24.568-9.373 33.941 0l10.775 10.775c9.581 9.581 9.337 25.187-.539 34.464L170.067 352H352c52.935 0 96-43.065 96-96 0-13.958-2.996-27.228-8.376-39.204-4.061-9.039-2.284-19.626 4.723-26.633l12.183-12.183c11.499-11.499 30.965-8.526 38.312 5.982C505.814 205.624 512 230.103 512 256zM72.376 295.204C66.996 283.228 64 269.958 64 256c0-52.935 43.065-96 96-96h181.933l-34.512 32.419c-9.875 9.276-10.119 24.883-.539 34.464l10.775 10.775c9.373 9.372 24.568 9.372 33.941 0l92.686-92.686c9.373-9.373 9.373-24.568 0-33.941l-92.686-92.686c-9.373-9.373-24.568-9.373-33.941 0L306.882 29.12c-9.581 9.581-9.337 25.187.539 34.464L341.933 96H160C71.775 96 0 167.776 0 256c0 25.897 6.186 50.376 17.157 72.039 7.347 14.508 26.813 17.481 38.312 5.982l12.183-12.183c7.008-7.008 8.786-17.595 4.724-26.634z" }) }));
-const topLine = {
-    top: 0,
-    height: 2,
+const verticalLine = {
+    height: '100%',
     width: 1,
-    background: colors_1.LIGHT_COLOR,
-};
-const bottomLine = {
-    top: 0,
-    height: 2,
-    width: 1,
-    background: colors_1.LIGHT_COLOR,
-};
-const topContainer = {
-    justifyContent: 'flex-start',
-    alignItems: 'center',
+    background: 'rgb(255,255,255, 0.5)',
 };
 const centerContainer = {
     justifyContent: 'center',
     alignItems: 'center',
 };
-const bottomContainer = {
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-};
 const LoopedIndicator = () => {
     return (jsx_runtime_1.jsxs("div", { style: width, children: [
-            jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: topContainer, children: jsx_runtime_1.jsx("div", { style: topLine }) }), jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: bottomContainer, children: jsx_runtime_1.jsx("div", { style: bottomLine }) }), jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: centerContainer, children: jsx_runtime_1.jsx(Icon, {}) })
+            jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: centerContainer, children: jsx_runtime_1.jsx("div", { style: verticalLine }) }), jsx_runtime_1.jsx(remotion_1.AbsoluteFill, { style: centerContainer, children: jsx_runtime_1.jsx(Icon, {}) })
         ] }));
 };
 exports.LoopedIndicator = LoopedIndicator;

package/dist/components/Timeline/TimelineSequence.js

@@ -32,35 +32,43 @@ const Inner = ({ s, windowWidth }) => {
     var _a, _b, _c;
     const video = remotion_1.Internals.useVideo();
     const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_a = video === null || video === void 0 ? void 0 : video.fps) !== null && _a !== void 0 ? _a : 30);
+    const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
     if (!video) {
         throw new TypeError('Expected video config');
     }
     const frame = (0, remotion_1.useCurrentFrame)();
     const relativeFrame = frame - s.from;
+    const displayDurationInFrames = s.loopDisplay
+        ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes
+        : s.duration;
     const relativeFrameWithPremount = relativeFrame + ((_b = s.premountDisplay) !== null && _b !== void 0 ? _b : 0);
-    const relativeFrameWithPostmount = relativeFrame - s.duration;
+    const relativeFrameWithPostmount = relativeFrame - displayDurationInFrames;
     const roundedFrame = Math.round(relativeFrame * 100) / 100;
-    const isInRange = relativeFrame >= 0 && relativeFrame < s.duration;
+    const isInRange = relativeFrame >= 0 && relativeFrame < displayDurationInFrames;
     const isPremounting = relativeFrameWithPremount >= 0 &&
-        relativeFrameWithPremount < s.duration &&
+        relativeFrameWithPremount < displayDurationInFrames &&
         !isInRange;
     const isPostmounting = relativeFrameWithPostmount >= 0 &&
         relativeFrameWithPostmount < ((_c = s.postmountDisplay) !== null && _c !== void 0 ? _c : 0) &&
         !isInRange;
     const { marginLeft, width, naturalWidth, premountWidth, postmountWidth } = (0, react_1.useMemo)(() => {
         return (0, get_timeline_sequence_layout_1.getTimelineSequenceLayout)({
-            durationInFrames: s.loopDisplay
-                ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes
-                : s.duration,
+            durationInFrames: displayDurationInFrames,
             startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
             startFromMedia: s.type === 'sequence' || s.type === 'image' ? 0 : s.startMediaFrom,
-            maxMediaDuration,
+            maxMediaDuration: effectiveMaxMediaDuration,
             video,
             windowWidth,
             premountDisplay: s.premountDisplay,
             postmountDisplay: s.postmountDisplay,
         });
-    }, [maxMediaDuration, s, video, windowWidth]);
+    }, [
+        displayDurationInFrames,
+        effectiveMaxMediaDuration,
+        s,
+        video,
+        windowWidth,
+    ]);
     const style = (0, react_1.useMemo)(() => {
         return {
             background: s.type === 'audio'
@@ -81,7 +89,7 @@ const Inner = ({ s, windowWidth }) => {
             opacity: isInRange ? 1 : 0.5,
         };
     }, [isInRange, marginLeft, s.type, width]);
-    if (maxMediaDuration === null) {
+    if (maxMediaDuration === null && !s.loopDisplay) {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: style, title: s.displayName, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
@@ -107,7 +115,7 @@ const Inner = ({ s, windowWidth }) => {
 						)`,
                     position: 'absolute',
                     right: 0,
-                } })) : null, s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0 })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
+                } })) : null, s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), s.type !== 'audio' &&
                 s.type !== 'video' &&
                 s.type !== 'image' &&
                 s.loopDisplay === undefined &&

package/dist/components/Timeline/TimelineVideoInfo.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { LoopDisplay } from 'remotion';
 export declare const TimelineVideoInfo: React.FC<{
     readonly src: string;
     readonly visualizationWidth: number;
@@ -10,4 +11,5 @@ export declare const TimelineVideoInfo: React.FC<{
     readonly doesVolumeChange: boolean;
     readonly premountWidth: number;
     readonly postmountWidth: number;
+    readonly loopDisplay: LoopDisplay | undefined;
 }>;

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;