@remotion/media 4.0.356 → 4.0.357

package/dist/video/video-for-preview.js

@@ -1,50 +1,53 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ALL_FORMATS, Input, UrlSource } from 'mediabunny';
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Internals, Loop, useBufferState, useCurrentFrame, useVideoConfig, } from 'remotion';
+import { Internals, useBufferState, useCurrentFrame, Video } from 'remotion';
 import { MediaPlayer } from './media-player';
-const { useUnsafeVideoConfig, Timeline, SharedAudioContext, useMediaMutedState, useMediaVolumeState, useFrameForVolumeProp, evaluateVolume, warnAboutTooHighVolume, usePreload, } = Internals;
-const calculateLoopDuration = ({ endAt, mediaDuration, playbackRate, startFrom, }) => {
-    let duration = mediaDuration;
-    if (typeof endAt !== 'undefined') {
-        duration = endAt;
-    }
-    if (typeof startFrom !== 'undefined') {
-        duration -= startFrom;
-    }
-    const actualDuration = duration / playbackRate;
-    return Math.floor(actualDuration);
-};
-const NewVideoForPreview = ({ src, style, playbackRate, logLevel, className, muted, volume, loopVolumeCurveBehavior, onVideoFrame, }) => {
+const { useUnsafeVideoConfig, Timeline, SharedAudioContext, useMediaMutedState, useMediaVolumeState, useFrameForVolumeProp, evaluateVolume, warnAboutTooHighVolume, usePreload, useMediaInTimeline, SequenceContext, } = Internals;
+const NewVideoForPreview = ({ src, style, playbackRate, logLevel, className, muted, volume, loopVolumeCurveBehavior, onVideoFrame, showInTimeline, loop, name, trimAfter, trimBefore, stack, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, audioStreamIndex, }) => {
     const canvasRef = useRef(null);
     const videoConfig = useUnsafeVideoConfig();
     const frame = useCurrentFrame();
     const mediaPlayerRef = useRef(null);
     const [mediaPlayerReady, setMediaPlayerReady] = useState(false);
+    const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState(false);
     const [playing] = Timeline.usePlayingState();
     const timelineContext = useContext(Timeline.TimelineContext);
     const globalPlaybackRate = timelineContext.playbackRate;
     const sharedAudioContext = useContext(SharedAudioContext);
     const buffer = useBufferState();
-    const delayHandleRef = useRef(null);
     const [mediaMuted] = useMediaMutedState();
     const [mediaVolume] = useMediaVolumeState();
-    const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? 'repeat');
+    const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
     const userPreferredVolume = evaluateVolume({
         frame: volumePropFrame,
         volume,
         mediaVolume,
     });
     warnAboutTooHighVolume(userPreferredVolume);
+    const [timelineId] = useState(() => String(Math.random()));
+    const parentSequence = useContext(SequenceContext);
+    useMediaInTimeline({
+        volume,
+        mediaVolume,
+        mediaType: 'video',
+        src,
+        playbackRate,
+        displayName: name ?? null,
+        id: timelineId,
+        stack,
+        showInTimeline,
+        premountDisplay: parentSequence?.premountDisplay ?? null,
+        postmountDisplay: parentSequence?.postmountDisplay ?? null,
+    });
     if (!videoConfig) {
         throw new Error('No video config found');
     }
     if (!src) {
         throw new TypeError('No `src` was passed to <NewVideoForPreview>.');
     }
-    const actualFps = videoConfig.fps / playbackRate;
-    const currentTime = frame / actualFps;
-    const [initialTimestamp] = useState(currentTime);
+    const currentTime = frame / videoConfig.fps;
+    const currentTimeRef = useRef(currentTime);
+    currentTimeRef.current = currentTime;
     const preloadedSrc = usePreload(src);
     useEffect(() => {
         if (!canvasRef.current)
@@ -59,34 +62,84 @@ const NewVideoForPreview = ({ src, style, playbackRate, logLevel, className, mut
                 src: preloadedSrc,
                 logLevel,
                 sharedAudioContext: sharedAudioContext.audioContext,
+                loop,
+                trimAfterSeconds: trimAfter ? trimAfter / videoConfig.fps : undefined,
+                trimBeforeSeconds: trimBefore
+                    ? trimBefore / videoConfig.fps
+                    : undefined,
+                playbackRate,
+                audioStreamIndex,
             });
             mediaPlayerRef.current = player;
             player
-                .initialize(initialTimestamp)
-                .then(() => {
-                setMediaPlayerReady(true);
-                Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[NewVideoForPreview] MediaPlayer initialized successfully`);
+                .initialize(currentTimeRef.current)
+                .then((result) => {
+                if (result.type === 'unknown-container-format') {
+                    if (disallowFallbackToOffthreadVideo) {
+                        throw new Error(`Unknown container format ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
+                    }
+                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Unknown container format for ${preloadedSrc} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <OffthreadVideo>`);
+                    setShouldFallbackToNativeVideo(true);
+                    return;
+                }
+                if (result.type === 'network-error') {
+                    if (disallowFallbackToOffthreadVideo) {
+                        throw new Error(`Network error fetching ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
+                    }
+                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Network error fetching ${preloadedSrc}, falling back to <OffthreadVideo>`);
+                    setShouldFallbackToNativeVideo(true);
+                    return;
+                }
+                if (result.type === 'cannot-decode') {
+                    if (disallowFallbackToOffthreadVideo) {
+                        throw new Error(`Cannot decode ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
+                    }
+                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Cannot decode ${preloadedSrc}, falling back to <OffthreadVideo>`);
+                    setShouldFallbackToNativeVideo(true);
+                    return;
+                }
+                if (result.type === 'no-tracks') {
+                    if (disallowFallbackToOffthreadVideo) {
+                        throw new Error(`No video or audio tracks found for ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
+                    }
+                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `No video or audio tracks found for ${preloadedSrc}, falling back to <OffthreadVideo>`);
+                    setShouldFallbackToNativeVideo(true);
+                    return;
+                }
+                if (result.type === 'success') {
+                    setMediaPlayerReady(true);
+                }
             })
                 .catch((error) => {
                 Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] Failed to initialize MediaPlayer', error);
+                setShouldFallbackToNativeVideo(true);
             });
         }
         catch (error) {
             Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] MediaPlayer initialization failed', error);
+            setShouldFallbackToNativeVideo(true);
         }
         return () => {
-            if (delayHandleRef.current) {
-                delayHandleRef.current.unblock();
-                delayHandleRef.current = null;
-            }
             if (mediaPlayerRef.current) {
                 Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[NewVideoForPreview] Disposing MediaPlayer`);
                 mediaPlayerRef.current.dispose();
                 mediaPlayerRef.current = null;
             }
             setMediaPlayerReady(false);
+            setShouldFallbackToNativeVideo(false);
         };
-    }, [preloadedSrc, logLevel, sharedAudioContext, initialTimestamp]);
+    }, [
+        preloadedSrc,
+        logLevel,
+        sharedAudioContext,
+        loop,
+        trimAfter,
+        trimBefore,
+        videoConfig.fps,
+        playbackRate,
+        disallowFallbackToOffthreadVideo,
+        audioStreamIndex,
+    ]);
     const classNameValue = useMemo(() => {
         return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className]
             .filter(Internals.truthy)
@@ -116,17 +169,25 @@ const NewVideoForPreview = ({ src, style, playbackRate, logLevel, className, mut
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady)
             return;
-        mediaPlayer.onBufferingChange((newBufferingState) => {
-            if (newBufferingState && !delayHandleRef.current) {
-                delayHandleRef.current = buffer.delayPlayback();
+        let currentBlock = null;
+        const unsubscribe = mediaPlayer.onBufferingChange((newBufferingState) => {
+            if (newBufferingState && !currentBlock) {
+                currentBlock = buffer.delayPlayback();
                 Internals.Log.trace({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] MediaPlayer buffering - blocking Remotion playback');
             }
-            else if (!newBufferingState && delayHandleRef.current) {
-                delayHandleRef.current.unblock();
-                delayHandleRef.current = null;
+            else if (!newBufferingState && currentBlock) {
+                currentBlock.unblock();
+                currentBlock = null;
                 Internals.Log.trace({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] MediaPlayer unbuffering - unblocking Remotion playback');
             }
         });
+        return () => {
+            unsubscribe();
+            if (currentBlock) {
+                currentBlock.unblock();
+                currentBlock = null;
+            }
+        };
     }, [mediaPlayerReady, buffer, logLevel]);
     const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
     useEffect(() => {
@@ -148,71 +209,33 @@ const NewVideoForPreview = ({ src, style, playbackRate, logLevel, className, mut
         if (!mediaPlayer || !mediaPlayerReady) {
             return;
         }
-        mediaPlayer.setPlaybackRate(effectivePlaybackRate).catch((error) => {
-            Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] Failed to set playback rate', error);
-        });
+        mediaPlayer.setPlaybackRate(effectivePlaybackRate);
     }, [effectivePlaybackRate, mediaPlayerReady, logLevel]);
     useEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady) {
             return;
         }
-        if (onVideoFrame) {
-            mediaPlayer.onVideoFrame(onVideoFrame);
-        }
-    }, [onVideoFrame, mediaPlayerReady]);
-    return (_jsx("canvas", { ref: canvasRef, width: videoConfig.width, height: videoConfig.height, style: style, className: classNameValue }));
-};
-const VideoForPreviewWithDuration = ({ className, durationInSeconds, logLevel, loopVolumeCurveBehavior, muted, onVideoFrame, playbackRate, src, style, volume, loop, name, trimAfter, trimBefore, }) => {
-    const { fps } = useVideoConfig();
-    if (loop) {
-        if (!Number.isFinite(durationInSeconds) || durationInSeconds === null) {
-            return (_jsx(VideoForPreviewWithDuration, { loop: false, className: className, durationInSeconds: durationInSeconds, logLevel: logLevel, loopVolumeCurveBehavior: loopVolumeCurveBehavior, muted: muted, onVideoFrame: onVideoFrame, playbackRate: playbackRate, src: src, style: style, volume: volume, name: name, trimAfter: trimAfter, trimBefore: trimBefore }));
-        }
-        const mediaDuration = durationInSeconds * fps;
-        return (_jsx(Loop, { durationInFrames: calculateLoopDuration({
-                endAt: trimAfter,
-                mediaDuration,
-                playbackRate: playbackRate ?? 1,
-                startFrom: trimBefore,
-            }), layout: "none", name: name, children: _jsx(VideoForPreviewWithDuration, { loop: false, className: className, durationInSeconds: durationInSeconds, logLevel: logLevel, loopVolumeCurveBehavior: loopVolumeCurveBehavior, muted: muted, onVideoFrame: onVideoFrame, playbackRate: playbackRate, src: src, style: style, volume: volume, name: name, trimAfter: trimAfter, trimBefore: trimBefore }) }));
-    }
-    return (_jsx(NewVideoForPreview, { src: src, style: style, playbackRate: playbackRate, logLevel: logLevel, muted: muted, volume: volume, loopVolumeCurveBehavior: loopVolumeCurveBehavior, onVideoFrame: onVideoFrame, className: className }));
-};
-export const VideoForPreview = ({ className, loop, src, logLevel, muted, name, volume, loopVolumeCurveBehavior, onVideoFrame, playbackRate, style, }) => {
-    const preloadedSrc = usePreload(src);
-    const [durationInSeconds, setDurationInSeconds] = useState(null);
+        mediaPlayer.setLoop(loop);
+    }, [loop, mediaPlayerReady]);
     useEffect(() => {
-        if (!loop) {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady || !onVideoFrame) {
             return;
         }
-        let cancelled = false;
-        const computeDuration = async () => {
-            const urlSource = new UrlSource(preloadedSrc);
-            const input = new Input({
-                source: urlSource,
-                formats: ALL_FORMATS,
-            });
-            try {
-                const duration = await input.computeDuration();
-                if (!cancelled) {
-                    setDurationInSeconds(duration);
-                }
-            }
-            catch (error) {
-                Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[VideoForPreview] Failed to compute duration', error);
-            }
-            finally {
-                input.dispose();
-            }
-        };
-        computeDuration();
+        const unsubscribe = mediaPlayer.onVideoFrame(onVideoFrame);
         return () => {
-            cancelled = true;
+            unsubscribe();
         };
-    }, [loop, preloadedSrc, logLevel]);
-    if (loop && durationInSeconds === null) {
-        return null;
+    }, [onVideoFrame, mediaPlayerReady]);
+    if (shouldFallbackToNativeVideo && !disallowFallbackToOffthreadVideo) {
+        // <Video> will fallback to <VideoForPreview> anyway
+        // not using <OffthreadVideo> because it does not support looping
+        return (_jsx(Video, { src: src, style: style, className: className, muted: muted, volume: volume, trimAfter: trimAfter, trimBefore: trimBefore, playbackRate: playbackRate, loopVolumeCurveBehavior: loopVolumeCurveBehavior, name: name, loop: loop, showInTimeline: showInTimeline, stack: stack ?? undefined, ...fallbackOffthreadVideoProps }));
     }
-    return (_jsx(VideoForPreviewWithDuration, { durationInSeconds: durationInSeconds, className: className, logLevel: logLevel, muted: muted, onVideoFrame: onVideoFrame, playbackRate: playbackRate, src: src, style: style, volume: volume, name: name, trimAfter: undefined, trimBefore: undefined, loop: loop, loopVolumeCurveBehavior: loopVolumeCurveBehavior }));
+    return (_jsx("canvas", { ref: canvasRef, width: videoConfig.width, height: videoConfig.height, style: style, className: classNameValue }));
+};
+export const VideoForPreview = ({ className, loop, src, logLevel, muted, name, volume, loopVolumeCurveBehavior, onVideoFrame, playbackRate, style, showInTimeline, trimAfter, trimBefore, stack, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, audioStreamIndex, }) => {
+    const preloadedSrc = usePreload(src);
+    return (_jsx(NewVideoForPreview, { className: className, logLevel: logLevel, muted: muted, onVideoFrame: onVideoFrame, playbackRate: playbackRate, src: preloadedSrc, style: style, volume: volume, name: name, trimAfter: trimAfter, trimBefore: trimBefore, loop: loop, loopVolumeCurveBehavior: loopVolumeCurveBehavior, showInTimeline: showInTimeline, stack: stack, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps, audioStreamIndex: audioStreamIndex }));
 };

package/dist/video/video-for-rendering.d.ts

@@ -19,6 +19,9 @@ type InnerVideoProps = {
     readonly audioStreamIndex: number;
     readonly disallowFallbackToOffthreadVideo: boolean;
     readonly stack: string | undefined;
+    readonly toneFrequency: number;
+    readonly trimBeforeValue: number | undefined;
+    readonly trimAfterValue: number | undefined;
 };
 export declare const VideoForRendering: React.FC<InnerVideoProps>;
 export {};

package/dist/video/video-for-rendering.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { cancelRender, Internals, useCurrentFrame, useDelayRender, useRemotionEnvironment, useVideoConfig, } from 'remotion';
+import { cancelRender, Internals, Loop, random, useCurrentFrame, useDelayRender, useRemotionEnvironment, useVideoConfig, } from 'remotion';
+import { calculateLoopDuration } from '../../../core/src/calculate-loop';
 import { applyVolume } from '../convert-audiodata/apply-volume';
+import { TARGET_SAMPLE_RATE } from '../convert-audiodata/resample-audiodata';
 import { frameForVolumeProp } from '../looped-frame';
 import { extractFrameViaBroadcastChannel } from '../video-extraction/extract-frame-via-broadcast-channel';
-export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, onVideoFrame, logLevel, loop, style, className, fallbackOffthreadVideoProps, audioStreamIndex, name, disallowFallbackToOffthreadVideo, stack, }) => {
+export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, onVideoFrame, logLevel, loop, style, className, fallbackOffthreadVideoProps, audioStreamIndex, name, disallowFallbackToOffthreadVideo, stack, toneFrequency, trimAfterValue, trimBeforeValue, }) => {
     if (!src) {
         throw new TypeError('No `src` was passed to <Video>.');
     }
@@ -13,7 +15,15 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
     const { fps } = useVideoConfig();
     const { registerRenderAsset, unregisterRenderAsset } = useContext(Internals.RenderAssetManager);
     const startsAt = Internals.useMediaStartsAt();
-    const [id] = useState(() => `${Math.random()}`.replace('0.', ''));
+    const sequenceContext = useContext(Internals.SequenceContext);
+    // Generate a string that's as unique as possible for this asset
+    // but at the same time the same on all threads
+    const id = useMemo(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+        src,
+        sequenceContext?.cumulatedFrom,
+        sequenceContext?.relativeFrom,
+        sequenceContext?.durationInFrames,
+    ]);
     const environment = useRemotionEnvironment();
     const { delayRender, continueRender } = useDelayRender();
     const canvasRef = useRef(null);
@@ -25,10 +35,9 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
         if (replaceWithOffthreadVideo) {
             return;
         }
-        const actualFps = playbackRate ? fps / playbackRate : fps;
-        const timestamp = frame / actualFps;
-        const durationInSeconds = 1 / actualFps;
-        const newHandle = delayRender(`Extracting frame number ${frame}`, {
+        const timestamp = frame / fps;
+        const durationInSeconds = 1 / fps;
+        const newHandle = delayRender(`Extracting frame at time ${timestamp}`, {
             retries: delayRenderRetries ?? undefined,
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
         });
@@ -45,43 +54,48 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
             src,
             timeInSeconds: timestamp,
             durationInSeconds,
-            playbackRate: playbackRate ?? 1,
-            logLevel: logLevel ?? 'info',
+            playbackRate,
+            logLevel,
             includeAudio: shouldRenderAudio,
             includeVideo: window.remotion_videoEnabled,
             isClientSideRendering: environment.isClientSideRendering,
-            loop: loop ?? false,
-            audioStreamIndex: audioStreamIndex ?? 0,
+            loop,
+            audioStreamIndex,
+            trimAfter: trimAfterValue,
+            trimBefore: trimBeforeValue,
+            fps,
         })
             .then((result) => {
-            if (result === 'unknown-container-format') {
+            if (result.type === 'unknown-container-format') {
                 if (disallowFallbackToOffthreadVideo) {
                     cancelRender(new Error(`Unknown container format ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
                 }
                 if (window.remotion_isMainTab) {
                     Internals.Log.info({ logLevel, tag: '@remotion/media' }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <OffthreadVideo>`);
                 }
-                setReplaceWithOffthreadVideo(true);
+                setReplaceWithOffthreadVideo({ durationInSeconds: null });
                 return;
             }
-            if (result === 'cannot-decode') {
+            if (result.type === 'cannot-decode') {
                 if (disallowFallbackToOffthreadVideo) {
                     cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
                 }
                 if (window.remotion_isMainTab) {
                     Internals.Log.info({ logLevel, tag: '@remotion/media' }, `Cannot decode ${src}, falling back to <OffthreadVideo>`);
                 }
-                setReplaceWithOffthreadVideo(true);
+                setReplaceWithOffthreadVideo({
+                    durationInSeconds: result.durationInSeconds,
+                });
                 return;
             }
-            if (result === 'network-error') {
+            if (result.type === 'network-error') {
                 if (disallowFallbackToOffthreadVideo) {
                     cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
                 }
                 if (window.remotion_isMainTab) {
                     Internals.Log.info({ logLevel, tag: '@remotion/media' }, `Network error fetching ${src}, falling back to <OffthreadVideo>`);
                 }
-                setReplaceWithOffthreadVideo(true);
+                setReplaceWithOffthreadVideo({ durationInSeconds: null });
                 return;
             }
             const { frame: imageBitmap, audio, durationInSeconds: assetDurationInSeconds, } = result;
@@ -104,11 +118,17 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 imageBitmap.close();
             }
             else if (window.remotion_videoEnabled) {
-                cancelRender(new Error('No video frame found'));
+                // In the case of https://discord.com/channels/809501355504959528/809501355504959531/1424400511070765086
+                // A video that only starts at time 0.033sec
+                // we shall not crash here but clear the canvas
+                const context = canvasRef.current?.getContext('2d');
+                if (context) {
+                    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+                }
             }
             const volumePropsFrame = frameForVolumeProp({
-                behavior: loopVolumeCurveBehavior ?? 'repeat',
-                loop: loop ?? false,
+                behavior: loopVolumeCurveBehavior,
+                loop,
                 assetDurationInSeconds: assetDurationInSeconds ?? 0,
                 fps,
                 frame,
@@ -126,11 +146,10 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
                     type: 'inline-audio',
                     id,
                     audio: Array.from(audio.data),
-                    sampleRate: audio.sampleRate,
-                    numberOfChannels: audio.numberOfChannels,
                     frame: absoluteFrame,
                     timestamp: audio.timestamp,
-                    duration: (audio.numberOfFrames / audio.sampleRate) * 1000000,
+                    duration: (audio.numberOfFrames / TARGET_SAMPLE_RATE) * 1000000,
+                    toneFrequency,
                 });
             }
             continueRender(newHandle);
@@ -166,6 +185,9 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
         replaceWithOffthreadVideo,
         audioStreamIndex,
         disallowFallbackToOffthreadVideo,
+        toneFrequency,
+        trimAfterValue,
+        trimBeforeValue,
     ]);
     const classNameValue = useMemo(() => {
         return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className]
@@ -173,10 +195,21 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
             .join(' ');
     }, [className]);
     if (replaceWithOffthreadVideo) {
-        // TODO: Loop and other props
-        return (_jsx(Internals.InnerOffthreadVideo, { src: src, playbackRate: playbackRate ?? 1, muted: muted ?? false, acceptableTimeShiftInSeconds: fallbackOffthreadVideoProps?.acceptableTimeShiftInSeconds, loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? 'repeat', delayRenderRetries: delayRenderRetries ?? undefined, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined, style: style, allowAmplificationDuringRender: true, transparent: fallbackOffthreadVideoProps?.transparent ?? false, toneMapped: fallbackOffthreadVideoProps?.toneMapped ?? true, audioStreamIndex: audioStreamIndex ?? 0, name: name, className: className, onVideoFrame: onVideoFrame, volume: volumeProp, id: id, onError: fallbackOffthreadVideoProps?.onError, toneFrequency: fallbackOffthreadVideoProps?.toneFrequency ?? 1, 
+        const fallback = (_jsx(Internals.InnerOffthreadVideo, { src: src, playbackRate: playbackRate ?? 1, muted: muted ?? false, acceptableTimeShiftInSeconds: fallbackOffthreadVideoProps?.acceptableTimeShiftInSeconds, loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? 'repeat', delayRenderRetries: delayRenderRetries ?? undefined, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined, style: style, allowAmplificationDuringRender: true, transparent: fallbackOffthreadVideoProps?.transparent ?? false, toneMapped: fallbackOffthreadVideoProps?.toneMapped ?? true, audioStreamIndex: audioStreamIndex ?? 0, name: name, className: className, onVideoFrame: onVideoFrame, volume: volumeProp, id: id, onError: fallbackOffthreadVideoProps?.onError, toneFrequency: fallbackOffthreadVideoProps?.toneFrequency ?? 1, 
             // these shouldn't matter during rendering / should not appear at all
             showInTimeline: false, crossOrigin: undefined, onAutoPlayError: () => undefined, pauseWhenBuffering: false, trimAfter: undefined, trimBefore: undefined, useWebAudioApi: false, startFrom: undefined, endAt: undefined, stack: stack, _remotionInternalNativeLoopPassed: false }));
+        if (loop) {
+            if (!replaceWithOffthreadVideo.durationInSeconds) {
+                cancelRender(new Error(`Cannot render video ${src}: @remotion/media was unable to render, and fell back to <OffthreadVideo>. Also, "loop" was set, but <OffthreadVideo> does not support looping and @remotion/media could also not determine the duration of the video.`));
+            }
+            return (_jsx(Loop, { layout: "none", durationInFrames: calculateLoopDuration({
+                    trimAfter: trimAfterValue,
+                    mediaDurationInFrames: replaceWithOffthreadVideo.durationInSeconds * fps,
+                    playbackRate,
+                    trimBefore: trimBeforeValue,
+                }), children: fallback }));
+        }
+        return fallback;
     }
     return _jsx("canvas", { ref: canvasRef, style: style, className: classNameValue });
 };

package/dist/video/video.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Internals, Sequence, useRemotionEnvironment } from 'remotion';
+import { Internals, useRemotionEnvironment } from 'remotion';
 import { VideoForPreview } from './video-for-preview';
 import { VideoForRendering } from './video-for-rendering';
 const { validateMediaTrimProps, resolveTrimProps, validateMediaProps } = Internals;
-const InnerVideo = ({ src, audioStreamIndex, className, delayRenderRetries, delayRenderTimeoutInMilliseconds, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, logLevel, loop, loopVolumeCurveBehavior, muted, name, onVideoFrame, playbackRate, style, trimAfter, trimBefore, volume, showInTimeline, stack, }) => {
+const InnerVideo = ({ src, audioStreamIndex, className, delayRenderRetries, delayRenderTimeoutInMilliseconds, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, logLevel, loop, loopVolumeCurveBehavior, muted, name, onVideoFrame, playbackRate, style, trimAfter, trimBefore, volume, stack, toneFrequency, showInTimeline, }) => {
     const environment = useRemotionEnvironment();
     if (typeof src !== 'string') {
         throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(src)} instead.`);
@@ -20,17 +20,13 @@ const InnerVideo = ({ src, audioStreamIndex, className, delayRenderRetries, dela
         trimBefore,
         trimAfter,
     });
-    if (typeof trimBeforeValue !== 'undefined' ||
-        typeof trimAfterValue !== 'undefined') {
-        return (_jsx(Sequence, { layout: "none", from: 0 - (trimBeforeValue ?? 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: _jsx(InnerVideo, { audioStreamIndex: audioStreamIndex, className: className, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo, name: name, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps, logLevel: logLevel, loop: loop, loopVolumeCurveBehavior: loopVolumeCurveBehavior, muted: muted, onVideoFrame: onVideoFrame, playbackRate: playbackRate, src: src, stack: stack, style: style, volume: volume, trimAfter: undefined, trimBefore: undefined, showInTimeline: showInTimeline }) }));
-    }
     validateMediaProps({ playbackRate, volume }, 'Video');
     if (environment.isRendering) {
-        return (_jsx(VideoForRendering, { audioStreamIndex: audioStreamIndex ?? 0, className: className, delayRenderRetries: delayRenderRetries ?? null, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false, name: name, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps, logLevel: logLevel, loop: loop, loopVolumeCurveBehavior: loopVolumeCurveBehavior, muted: muted, onVideoFrame: onVideoFrame, playbackRate: playbackRate, src: src, stack: stack, style: style, volume: volume }));
+        return (_jsx(VideoForRendering, { audioStreamIndex: audioStreamIndex ?? 0, className: className, delayRenderRetries: delayRenderRetries ?? null, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false, name: name, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps, logLevel: logLevel, loop: loop, loopVolumeCurveBehavior: loopVolumeCurveBehavior, muted: muted, onVideoFrame: onVideoFrame, playbackRate: playbackRate, src: src, stack: stack, style: style, volume: volume, toneFrequency: toneFrequency, trimAfterValue: trimAfterValue, trimBeforeValue: trimBeforeValue }));
     }
-    return (_jsx(VideoForPreview, { className: className, name: name, logLevel: logLevel, loop: loop, loopVolumeCurveBehavior: loopVolumeCurveBehavior, muted: muted, onVideoFrame: onVideoFrame, playbackRate: playbackRate, src: src, style: style, volume: volume }));
+    return (_jsx(VideoForPreview, { audioStreamIndex: audioStreamIndex ?? 0, className: className, name: name, logLevel: logLevel, loop: loop, loopVolumeCurveBehavior: loopVolumeCurveBehavior, muted: muted, onVideoFrame: onVideoFrame, playbackRate: playbackRate, src: src, style: style, volume: volume, showInTimeline: showInTimeline, trimAfter: trimAfterValue, trimBefore: trimBeforeValue, stack: stack ?? null, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps }));
 };
-export const Video = ({ src, audioStreamIndex, className, delayRenderRetries, delayRenderTimeoutInMilliseconds, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, logLevel, loop, loopVolumeCurveBehavior, muted, name, onVideoFrame, playbackRate, showInTimeline, style, trimAfter, trimBefore, volume, stack, }) => {
-    return (_jsx(InnerVideo, { audioStreamIndex: audioStreamIndex ?? 0, className: className, delayRenderRetries: delayRenderRetries ?? null, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {}, logLevel: logLevel ?? 'info', loop: loop ?? false, loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? 'repeat', muted: muted ?? false, name: name, onVideoFrame: onVideoFrame, playbackRate: playbackRate ?? 1, showInTimeline: showInTimeline ?? true, src: src, style: style ?? {}, trimAfter: trimAfter, trimBefore: trimBefore, volume: volume ?? 1, stack: stack }));
+export const Video = ({ src, audioStreamIndex, className, delayRenderRetries, delayRenderTimeoutInMilliseconds, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, logLevel, loop, loopVolumeCurveBehavior, muted, name, onVideoFrame, playbackRate, showInTimeline, style, trimAfter, trimBefore, volume, stack, toneFrequency, }) => {
+    return (_jsx(InnerVideo, { audioStreamIndex: audioStreamIndex ?? 0, className: className, delayRenderRetries: delayRenderRetries ?? null, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {}, logLevel: logLevel ?? window.remotion_logLevel, loop: loop ?? false, loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? 'repeat', muted: muted ?? false, name: name, onVideoFrame: onVideoFrame, playbackRate: playbackRate ?? 1, showInTimeline: showInTimeline ?? true, src: src, style: style ?? {}, trimAfter: trimAfter, trimBefore: trimBefore, volume: volume ?? 1, toneFrequency: toneFrequency ?? 1, stack: stack }));
 };
 Internals.addSequenceStackTraces(Video);

package/dist/video-extraction/extract-frame-via-broadcast-channel.d.ts

@@ -1,6 +1,19 @@
 import { type LogLevel } from 'remotion';
 import type { PcmS16AudioData } from '../convert-audiodata/convert-audiodata';
-export declare const extractFrameViaBroadcastChannel: ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, audioStreamIndex, }: {
+export type ExtractFrameViaBroadcastChannelResult = {
+    type: 'success';
+    frame: ImageBitmap | VideoFrame | null;
+    audio: PcmS16AudioData | null;
+    durationInSeconds: number | null;
+} | {
+    type: 'cannot-decode';
+    durationInSeconds: number | null;
+} | {
+    type: 'network-error';
+} | {
+    type: 'unknown-container-format';
+};
+export declare const extractFrameViaBroadcastChannel: ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, audioStreamIndex, trimAfter, trimBefore, fps, }: {
     src: string;
     timeInSeconds: number;
     durationInSeconds: number;
@@ -11,8 +24,7 @@ export declare const extractFrameViaBroadcastChannel: ({ src, timeInSeconds, log
     isClientSideRendering: boolean;
     loop: boolean;
     audioStreamIndex: number;
-}) => Promise<{
-    frame: ImageBitmap | VideoFrame | null;
-    audio: PcmS16AudioData | null;
-    durationInSeconds: number | null;
-} | "cannot-decode" | "network-error" | "unknown-container-format">;
+    trimAfter: number | undefined;
+    trimBefore: number | undefined;
+    fps: number;
+}) => Promise<ExtractFrameViaBroadcastChannelResult>;

package/dist/video-extraction/extract-frame-via-broadcast-channel.js

@@ -15,16 +15,20 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
                     includeVideo: data.includeVideo,
                     loop: data.loop,
                     audioStreamIndex: data.audioStreamIndex,
+                    trimAfter: data.trimAfter,
+                    trimBefore: data.trimBefore,
+                    fps: data.fps,
                 });
-                if (result === 'cannot-decode') {
+                if (result.type === 'cannot-decode') {
                     const cannotDecodeResponse = {
                         type: 'response-cannot-decode',
                         id: data.id,
+                        durationInSeconds: result.durationInSeconds,
                     };
                     window.remotion_broadcastChannel.postMessage(cannotDecodeResponse);
                     return;
                 }
-                if (result === 'network-error') {
+                if (result.type === 'network-error') {
                     const networkErrorResponse = {
                         type: 'response-network-error',
                         id: data.id,
@@ -32,7 +36,7 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
                     window.remotion_broadcastChannel.postMessage(networkErrorResponse);
                     return;
                 }
-                if (result === 'unknown-container-format') {
+                if (result.type === 'unknown-container-format') {
                     const unknownContainerFormatResponse = {
                         type: 'response-unknown-container-format',
                         id: data.id,
@@ -72,7 +76,7 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
         }
     });
 }
-export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, audioStreamIndex, }) => {
+export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, audioStreamIndex, trimAfter, trimBefore, fps, }) => {
     if (isClientSideRendering || window.remotion_isMainTab) {
         return extractFrameAndAudio({
             logLevel,
@@ -84,6 +88,9 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
             includeVideo,
             loop,
             audioStreamIndex,
+            trimAfter,
+            trimBefore,
+            fps,
         });
     }
     const requestId = crypto.randomUUID();
@@ -98,6 +105,7 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
             }
             if (data.type === 'response-success') {
                 resolve({
+                    type: 'success',
                     frame: data.frame ? data.frame : null,
                     audio: data.audio ? data.audio : null,
                     durationInSeconds: data.durationInSeconds
@@ -113,17 +121,20 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
                 return;
             }
             if (data.type === 'response-cannot-decode') {
-                resolve('cannot-decode');
+                resolve({
+                    type: 'cannot-decode',
+                    durationInSeconds: data.durationInSeconds,
+                });
                 window.remotion_broadcastChannel.removeEventListener('message', onMessage);
                 return;
             }
             if (data.type === 'response-network-error') {
-                resolve('network-error');
+                resolve({ type: 'network-error' });
                 window.remotion_broadcastChannel.removeEventListener('message', onMessage);
                 return;
             }
             if (data.type === 'response-unknown-container-format') {
-                resolve('unknown-container-format');
+                resolve({ type: 'unknown-container-format' });
                 window.remotion_broadcastChannel.removeEventListener('message', onMessage);
                 return;
             }
@@ -143,6 +154,9 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
         includeVideo,
         loop,
         audioStreamIndex,
+        trimAfter,
+        trimBefore,
+        fps,
     };
     window.remotion_broadcastChannel.postMessage(request);
     let timeoutId;