@remotion/media 4.0.355 → 4.0.357

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

@@ -0,0 +1,241 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Internals, useBufferState, useCurrentFrame, Video } from 'remotion';
+import { MediaPlayer } from './media-player';
+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 [mediaMuted] = useMediaMutedState();
+    const [mediaVolume] = useMediaVolumeState();
+    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 currentTime = frame / videoConfig.fps;
+    const currentTimeRef = useRef(currentTime);
+    currentTimeRef.current = currentTime;
+    const preloadedSrc = usePreload(src);
+    useEffect(() => {
+        if (!canvasRef.current)
+            return;
+        if (!sharedAudioContext)
+            return;
+        if (!sharedAudioContext.audioContext)
+            return;
+        try {
+            const player = new MediaPlayer({
+                canvas: canvasRef.current,
+                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(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 (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,
+        loop,
+        trimAfter,
+        trimBefore,
+        videoConfig.fps,
+        playbackRate,
+        disallowFallbackToOffthreadVideo,
+        audioStreamIndex,
+    ]);
+    const classNameValue = useMemo(() => {
+        return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className]
+            .filter(Internals.truthy)
+            .join(' ');
+    }, [className]);
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer)
+            return;
+        if (playing) {
+            mediaPlayer.play().catch((error) => {
+                Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] Failed to play', error);
+            });
+        }
+        else {
+            mediaPlayer.pause();
+        }
+    }, [playing, logLevel, mediaPlayerReady]);
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady)
+            return;
+        mediaPlayer.seekTo(currentTime);
+        Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[NewVideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
+    }, [currentTime, logLevel, mediaPlayerReady]);
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady)
+            return;
+        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 && 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(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady)
+            return;
+        mediaPlayer.setMuted(effectiveMuted);
+    }, [effectiveMuted, mediaPlayerReady]);
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setVolume(userPreferredVolume);
+    }, [userPreferredVolume, mediaPlayerReady, logLevel]);
+    const effectivePlaybackRate = useMemo(() => playbackRate * globalPlaybackRate, [playbackRate, globalPlaybackRate]);
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setPlaybackRate(effectivePlaybackRate);
+    }, [effectivePlaybackRate, mediaPlayerReady, logLevel]);
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setLoop(loop);
+    }, [loop, mediaPlayerReady]);
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady || !onVideoFrame) {
+            return;
+        }
+        const unsubscribe = mediaPlayer.onVideoFrame(onVideoFrame);
+        return () => {
+            unsubscribe();
+        };
+    }, [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("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

@@ -1,3 +1,27 @@
 import React from 'react';
-import type { VideoProps } from './props';
-export declare const VideoForRendering: React.FC<VideoProps>;
+import type { LogLevel, LoopVolumeCurveBehavior, OnVideoFrame, VolumeProp } from 'remotion';
+import type { FallbackOffthreadVideoProps } from './props';
+type InnerVideoProps = {
+    readonly className: string | undefined;
+    readonly loop: boolean;
+    readonly src: string;
+    readonly logLevel: LogLevel;
+    readonly muted: boolean;
+    readonly name: string | undefined;
+    readonly volume: VolumeProp;
+    readonly loopVolumeCurveBehavior: LoopVolumeCurveBehavior;
+    readonly onVideoFrame: OnVideoFrame | undefined;
+    readonly playbackRate: number;
+    readonly style: React.CSSProperties;
+    readonly delayRenderRetries: number | null;
+    readonly delayRenderTimeoutInMilliseconds: number | null;
+    readonly fallbackOffthreadVideoProps: FallbackOffthreadVideoProps;
+    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,12 +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, 
-// call when a frame of the video, i.e. frame drawn on canvas
-onVideoFrame, logLevel = window.remotion_logLevel, loop, style, className, }) => {
+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>.');
     }
@@ -15,18 +15,29 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, className, }) =>
     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);
+    const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState(false);
     useLayoutEffect(() => {
         if (!canvasRef.current) {
             return;
         }
-        const actualFps = playbackRate ? fps / playbackRate : fps;
-        const timestamp = frame / actualFps;
-        const durationInSeconds = 1 / actualFps;
-        const newHandle = delayRender(`Extracting frame number ${frame}`, {
+        if (replaceWithOffthreadVideo) {
+            return;
+        }
+        const timestamp = frame / fps;
+        const durationInSeconds = 1 / fps;
+        const newHandle = delayRender(`Extracting frame at time ${timestamp}`, {
             retries: delayRenderRetries ?? undefined,
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
         });
@@ -43,14 +54,51 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, className, }) =>
             src,
             timeInSeconds: timestamp,
             durationInSeconds,
-            playbackRate: playbackRate ?? 1,
-            logLevel: logLevel ?? 'info',
+            playbackRate,
+            logLevel,
             includeAudio: shouldRenderAudio,
             includeVideo: window.remotion_videoEnabled,
             isClientSideRendering: environment.isClientSideRendering,
-            loop: loop ?? false,
+            loop,
+            audioStreamIndex,
+            trimAfter: trimAfterValue,
+            trimBefore: trimBeforeValue,
+            fps,
         })
-            .then(({ frame: imageBitmap, audio, durationInSeconds: assetDurationInSeconds, }) => {
+            .then((result) => {
+            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({ durationInSeconds: null });
+                return;
+            }
+            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({
+                    durationInSeconds: result.durationInSeconds,
+                });
+                return;
+            }
+            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({ durationInSeconds: null });
+                return;
+            }
+            const { frame: imageBitmap, audio, durationInSeconds: assetDurationInSeconds, } = result;
             if (imageBitmap) {
                 onVideoFrame?.(imageBitmap);
                 const context = canvasRef.current?.getContext('2d');
@@ -70,11 +118,17 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, className, }) =>
                 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,
@@ -92,11 +146,10 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, className, }) =>
                     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);
@@ -129,11 +182,34 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, className, }) =>
         startsAt,
         unregisterRenderAsset,
         volumeProp,
+        replaceWithOffthreadVideo,
+        audioStreamIndex,
+        disallowFallbackToOffthreadVideo,
+        toneFrequency,
+        trimAfterValue,
+        trimBeforeValue,
     ]);
     const classNameValue = useMemo(() => {
         return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className]
             .filter(Internals.truthy)
             .join(' ');
     }, [className]);
+    if (replaceWithOffthreadVideo) {
+        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,16 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
-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, VideoForPreview, } = Internals;
-export const Video = (props) => {
-    // Should only destruct `trimBefore` and `trimAfter` from props,
-    // rest gets drilled down
-    const { trimBefore, trimAfter, name, pauseWhenBuffering, stack, showInTimeline, ...otherProps } = props;
+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, stack, toneFrequency, showInTimeline, }) => {
     const environment = useRemotionEnvironment();
-    const onDuration = useCallback(() => undefined, []);
-    if (typeof props.src !== 'string') {
-        throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+    if (typeof src !== 'string') {
+        throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(src)} instead.`);
     }
     validateMediaTrimProps({
         startFrom: undefined,
@@ -24,14 +20,13 @@ export const Video = (props) => {
         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(Video, { pauseWhenBuffering: pauseWhenBuffering ?? false, ...otherProps }) }));
-    }
-    validateMediaProps(props, 'Video');
+    validateMediaProps({ playbackRate, volume }, 'Video');
     if (environment.isRendering) {
-        return _jsx(VideoForRendering, { ...otherProps });
+        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 }));
     }
-    const { onVideoFrame, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...propsForPreview } = otherProps;
-    return (_jsx(VideoForPreview, { _remotionInternalStack: stack ?? null, _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: pauseWhenBuffering ?? false, showInTimeline: showInTimeline ?? true, onVideoFrame: onVideoFrame ?? null, ...propsForPreview }));
+    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, 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, }: {
+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;
@@ -10,8 +23,8 @@ export declare const extractFrameViaBroadcastChannel: ({ src, timeInSeconds, log
     includeVideo: boolean;
     isClientSideRendering: boolean;
     loop: boolean;
-}) => Promise<{
-    frame: ImageBitmap | VideoFrame | null;
-    audio: PcmS16AudioData | null;
-    durationInSeconds: number | null;
-}>;
+    audioStreamIndex: number;
+    trimAfter: number | undefined;
+    trimBefore: number | undefined;
+    fps: number;
+}) => Promise<ExtractFrameViaBroadcastChannelResult>;

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

@@ -5,7 +5,7 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
         const data = event.data;
         if (data.type === 'request') {
             try {
-                const { frame, audio, durationInSeconds } = await extractFrameAndAudio({
+                const result = await extractFrameAndAudio({
                     src: data.src,
                     timeInSeconds: data.timeInSeconds,
                     logLevel: data.logLevel,
@@ -14,7 +14,37 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
                     includeAudio: data.includeAudio,
                     includeVideo: data.includeVideo,
                     loop: data.loop,
+                    audioStreamIndex: data.audioStreamIndex,
+                    trimAfter: data.trimAfter,
+                    trimBefore: data.trimBefore,
+                    fps: data.fps,
                 });
+                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.type === 'network-error') {
+                    const networkErrorResponse = {
+                        type: 'response-network-error',
+                        id: data.id,
+                    };
+                    window.remotion_broadcastChannel.postMessage(networkErrorResponse);
+                    return;
+                }
+                if (result.type === 'unknown-container-format') {
+                    const unknownContainerFormatResponse = {
+                        type: 'response-unknown-container-format',
+                        id: data.id,
+                    };
+                    window.remotion_broadcastChannel.postMessage(unknownContainerFormatResponse);
+                    return;
+                }
+                const { frame, audio, durationInSeconds } = result;
                 const videoFrame = frame;
                 const imageBitmap = videoFrame
                     ? await createImageBitmap(videoFrame)
@@ -46,7 +76,7 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
         }
     });
 }
-export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, }) => {
+export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, audioStreamIndex, trimAfter, trimBefore, fps, }) => {
     if (isClientSideRendering || window.remotion_isMainTab) {
         return extractFrameAndAudio({
             logLevel,
@@ -57,6 +87,10 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
             includeAudio,
             includeVideo,
             loop,
+            audioStreamIndex,
+            trimAfter,
+            trimBefore,
+            fps,
         });
     }
     const requestId = crypto.randomUUID();
@@ -66,8 +100,12 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
             if (!data) {
                 return;
             }
-            if (data.type === 'response-success' && data.id === requestId) {
+            if (data.id !== requestId) {
+                return;
+            }
+            if (data.type === 'response-success') {
                 resolve({
+                    type: 'success',
                     frame: data.frame ? data.frame : null,
                     audio: data.audio ? data.audio : null,
                     durationInSeconds: data.durationInSeconds
@@ -75,11 +113,32 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
                         : null,
                 });
                 window.remotion_broadcastChannel.removeEventListener('message', onMessage);
+                return;
             }
-            else if (data.type === 'response-error' && data.id === requestId) {
+            if (data.type === 'response-error') {
                 reject(data.errorStack);
                 window.remotion_broadcastChannel.removeEventListener('message', onMessage);
+                return;
+            }
+            if (data.type === 'response-cannot-decode') {
+                resolve({
+                    type: 'cannot-decode',
+                    durationInSeconds: data.durationInSeconds,
+                });
+                window.remotion_broadcastChannel.removeEventListener('message', onMessage);
+                return;
+            }
+            if (data.type === 'response-network-error') {
+                resolve({ type: 'network-error' });
+                window.remotion_broadcastChannel.removeEventListener('message', onMessage);
+                return;
+            }
+            if (data.type === 'response-unknown-container-format') {
+                resolve({ type: 'unknown-container-format' });
+                window.remotion_broadcastChannel.removeEventListener('message', onMessage);
+                return;
             }
+            throw new Error(`Invalid message: ${JSON.stringify(data)}`);
         };
         window.remotion_broadcastChannel.addEventListener('message', onMessage);
     });
@@ -94,6 +153,10 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
         includeAudio,
         includeVideo,
         loop,
+        audioStreamIndex,
+        trimAfter,
+        trimBefore,
+        fps,
     };
     window.remotion_broadcastChannel.postMessage(request);
     let timeoutId;