@remotion/media 4.0.428 → 4.0.430

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

@@ -0,0 +1,331 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { Html5Video, Internals, useBufferState, useCurrentFrame, useVideoConfig, } from 'remotion';
+import { getTimeInSeconds } from '../get-time-in-seconds';
+import { MediaPlayer } from '../media-player';
+import { useLoopDisplay } from '../show-in-timeline';
+import { useMediaInTimeline } from '../use-media-in-timeline';
+const { useUnsafeVideoConfig, Timeline, SharedAudioContext, useMediaMutedState, useMediaVolumeState, useFrameForVolumeProp, evaluateVolume, warnAboutTooHighVolume, usePreload, SequenceContext, SequenceVisibilityToggleContext, } = Internals;
+const VideoForPreviewAssertedShowing = ({ src: unpreloadedSrc, style, playbackRate, logLevel, className, muted, volume, loopVolumeCurveBehavior, onVideoFrame, showInTimeline, loop, name, trimAfter, trimBefore, stack, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, audioStreamIndex, debugOverlay, headless, }) => {
+    const src = usePreload(unpreloadedSrc);
+    const canvasRef = useRef(null);
+    const videoConfig = useUnsafeVideoConfig();
+    const frame = useCurrentFrame();
+    const mediaPlayerRef = useRef(null);
+    const initialTrimBeforeRef = useRef(trimBefore);
+    const initialTrimAfterRef = useRef(trimAfter);
+    const initialOnVideoFrameRef = useRef(onVideoFrame);
+    const [mediaPlayerReady, setMediaPlayerReady] = useState(false);
+    const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState(false);
+    const [playing] = Timeline.usePlayingState();
+    const timelineContext = useContext(Internals.TimelineContext);
+    const globalPlaybackRate = timelineContext.playbackRate;
+    const sharedAudioContext = useContext(SharedAudioContext);
+    const buffer = useBufferState();
+    const [mediaMuted] = useMediaMutedState();
+    const [mediaVolume] = useMediaVolumeState();
+    const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState(null);
+    const { hidden } = useContext(SequenceVisibilityToggleContext);
+    const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
+    const userPreferredVolume = evaluateVolume({
+        frame: volumePropFrame,
+        volume,
+        mediaVolume,
+    });
+    warnAboutTooHighVolume(userPreferredVolume);
+    const parentSequence = useContext(SequenceContext);
+    const isPremounting = Boolean(parentSequence?.premounting);
+    const isPostmounting = Boolean(parentSequence?.postmounting);
+    const loopDisplay = useLoopDisplay({
+        loop,
+        mediaDurationInSeconds,
+        playbackRate,
+        trimAfter,
+        trimBefore,
+    });
+    const { id: timelineId } = useMediaInTimeline({
+        volume,
+        mediaType: 'video',
+        src,
+        playbackRate,
+        displayName: name ?? null,
+        stack,
+        showInTimeline,
+        premountDisplay: parentSequence?.premountDisplay ?? null,
+        postmountDisplay: parentSequence?.postmountDisplay ?? null,
+        loopDisplay,
+        mediaVolume,
+        trimAfter,
+        trimBefore,
+    });
+    const isSequenceHidden = hidden[timelineId] ?? false;
+    if (!videoConfig) {
+        throw new Error('No video config found');
+    }
+    const currentTime = frame / videoConfig.fps;
+    const currentTimeRef = useRef(currentTime);
+    currentTimeRef.current = currentTime;
+    const preloadedSrc = usePreload(src);
+    const buffering = useContext(Internals.BufferingContextReact);
+    if (!buffering) {
+        throw new Error('useMediaPlayback must be used inside a <BufferingContext>');
+    }
+    const isPlayerBuffering = Internals.useIsPlayerBuffering(buffering);
+    const initialPlaying = useRef(playing && !isPlayerBuffering);
+    const initialIsPremounting = useRef(isPremounting);
+    const initialIsPostmounting = useRef(isPostmounting);
+    const initialGlobalPlaybackRate = useRef(globalPlaybackRate);
+    const initialPlaybackRate = useRef(playbackRate);
+    useEffect(() => {
+        if (!sharedAudioContext)
+            return;
+        if (!sharedAudioContext.audioContext)
+            return;
+        try {
+            const player = new MediaPlayer({
+                canvas: canvasRef.current,
+                src: preloadedSrc,
+                logLevel,
+                sharedAudioContext: sharedAudioContext.audioContext,
+                loop,
+                trimAfter: initialTrimAfterRef.current,
+                trimBefore: initialTrimBeforeRef.current,
+                fps: videoConfig.fps,
+                playbackRate: initialPlaybackRate.current,
+                audioStreamIndex,
+                debugOverlay,
+                bufferState: buffer,
+                isPremounting: initialIsPremounting.current,
+                isPostmounting: initialIsPostmounting.current,
+                globalPlaybackRate: initialGlobalPlaybackRate.current,
+                onVideoFrameCallback: initialOnVideoFrameRef.current ?? null,
+                playing: initialPlaying.current,
+            });
+            mediaPlayerRef.current = player;
+            player
+                .initialize(currentTimeRef.current)
+                .then((result) => {
+                if (result.type === 'disposed') {
+                    return;
+                }
+                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);
+                    setMediaDurationInSeconds(result.durationInSeconds);
+                }
+            })
+                .catch((error) => {
+                Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[VideoForPreview] Failed to initialize MediaPlayer', error);
+                setShouldFallbackToNativeVideo(true);
+            });
+        }
+        catch (error) {
+            Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[VideoForPreview] MediaPlayer initialization failed', error);
+            setShouldFallbackToNativeVideo(true);
+        }
+        return () => {
+            if (mediaPlayerRef.current) {
+                Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[VideoForPreview] Disposing MediaPlayer`);
+                mediaPlayerRef.current.dispose();
+                mediaPlayerRef.current = null;
+            }
+            setMediaPlayerReady(false);
+            setShouldFallbackToNativeVideo(false);
+        };
+    }, [
+        audioStreamIndex,
+        buffer,
+        debugOverlay,
+        disallowFallbackToOffthreadVideo,
+        logLevel,
+        loop,
+        preloadedSrc,
+        sharedAudioContext,
+        videoConfig.fps,
+    ]);
+    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 && !isPlayerBuffering) {
+            mediaPlayer.play(currentTimeRef.current);
+        }
+        else {
+            mediaPlayer.pause();
+        }
+    }, [isPlayerBuffering, playing, logLevel, mediaPlayerReady]);
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setTrimBefore(trimBefore, currentTimeRef.current);
+    }, [trimBefore, mediaPlayerReady]);
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setTrimAfter(trimAfter, currentTimeRef.current);
+    }, [trimAfter, mediaPlayerReady]);
+    const effectiveMuted = isSequenceHidden || muted || mediaMuted || userPreferredVolume <= 0;
+    useLayoutEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady)
+            return;
+        mediaPlayer.setMuted(effectiveMuted);
+    }, [effectiveMuted, mediaPlayerReady]);
+    useLayoutEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setVolume(userPreferredVolume);
+    }, [userPreferredVolume, mediaPlayerReady]);
+    useLayoutEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setDebugOverlay(debugOverlay);
+    }, [debugOverlay, mediaPlayerReady]);
+    useLayoutEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setPlaybackRate(playbackRate);
+    }, [playbackRate, mediaPlayerReady]);
+    useLayoutEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setGlobalPlaybackRate(globalPlaybackRate);
+    }, [globalPlaybackRate, mediaPlayerReady]);
+    useLayoutEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setLoop(loop);
+    }, [loop, mediaPlayerReady]);
+    useLayoutEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setIsPremounting(isPremounting);
+    }, [isPremounting, mediaPlayerReady]);
+    useLayoutEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setIsPostmounting(isPostmounting);
+    }, [isPostmounting, mediaPlayerReady]);
+    useLayoutEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setFps(videoConfig.fps);
+    }, [videoConfig.fps, mediaPlayerReady]);
+    useLayoutEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setVideoFrameCallback(onVideoFrame ?? null);
+    }, [onVideoFrame, mediaPlayerReady]);
+    useLayoutEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady)
+            return;
+        mediaPlayer.seekTo(currentTime).catch(() => {
+            // Might be disposed
+        });
+        Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[VideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
+    }, [currentTime, logLevel, mediaPlayerReady]);
+    const actualStyle = useMemo(() => {
+        return {
+            ...style,
+            opacity: isSequenceHidden ? 0 : (style?.opacity ?? 1),
+        };
+    }, [isSequenceHidden, style]);
+    if (shouldFallbackToNativeVideo && !disallowFallbackToOffthreadVideo) {
+        // <Video> will fallback to <VideoForPreview> anyway
+        // not using <OffthreadVideo> because it does not support looping
+        return (_jsx(Html5Video, { src: src, style: actualStyle, className: className, muted: muted, volume: volume, trimAfter: trimAfter, trimBefore: trimBefore, playbackRate: playbackRate, loopVolumeCurveBehavior: loopVolumeCurveBehavior, name: name, loop: loop, showInTimeline: showInTimeline, stack: stack ?? undefined, ...fallbackOffthreadVideoProps }));
+    }
+    if (headless) {
+        return null;
+    }
+    return (_jsx("canvas", { ref: canvasRef, width: videoConfig.width, height: videoConfig.height, style: actualStyle, className: classNameValue }));
+};
+export const VideoForPreview = (props) => {
+    const frame = useCurrentFrame();
+    const videoConfig = useVideoConfig();
+    const currentTime = frame / videoConfig.fps;
+    const showShow = useMemo(() => {
+        return (getTimeInSeconds({
+            unloopedTimeInSeconds: currentTime,
+            playbackRate: props.playbackRate,
+            loop: props.loop,
+            trimBefore: props.trimBefore,
+            trimAfter: props.trimAfter,
+            mediaDurationInSeconds: Infinity,
+            fps: videoConfig.fps,
+            ifNoMediaDuration: 'infinity',
+            src: props.src,
+        }) !== null);
+    }, [
+        currentTime,
+        props.loop,
+        props.playbackRate,
+        props.src,
+        props.trimAfter,
+        props.trimBefore,
+        videoConfig.fps,
+    ]);
+    if (!showShow) {
+        return null;
+    }
+    return _jsx(VideoForPreviewAssertedShowing, { ...props });
+};

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

@@ -0,0 +1,263 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { Internals, Loop, random, useCurrentFrame, useDelayRender, useRemotionEnvironment, useVideoConfig, } from 'remotion';
+import { useMaxMediaCacheSize } from '../caches';
+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, toneFrequency, trimAfterValue, trimBeforeValue, headless, }) => {
+    if (!src) {
+        throw new TypeError('No `src` was passed to <Video>.');
+    }
+    const frame = useCurrentFrame();
+    const absoluteFrame = Internals.useTimelinePosition();
+    const { fps } = useVideoConfig();
+    const { registerRenderAsset, unregisterRenderAsset } = useContext(Internals.RenderAssetManager);
+    const startsAt = Internals.useMediaStartsAt();
+    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, cancelRender } = useDelayRender();
+    const canvasRef = useRef(null);
+    const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState(false);
+    const audioEnabled = Internals.useAudioEnabled();
+    const videoEnabled = Internals.useVideoEnabled();
+    const maxCacheSize = useMaxMediaCacheSize(logLevel);
+    const [error, setError] = useState(null);
+    if (error) {
+        throw error;
+    }
+    useLayoutEffect(() => {
+        if (!canvasRef.current && !headless) {
+            return;
+        }
+        if (replaceWithOffthreadVideo) {
+            return;
+        }
+        if (!canvasRef.current?.getContext && !headless) {
+            return setError(new Error('Canvas does not have .getContext() method available. This could be because <Video> was mounted inside an <svg> tag.'));
+        }
+        const timestamp = frame / fps;
+        const durationInSeconds = 1 / fps;
+        const newHandle = delayRender(`Extracting frame at time ${timestamp}`, {
+            retries: delayRenderRetries ?? undefined,
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
+        });
+        const shouldRenderAudio = (() => {
+            if (!audioEnabled) {
+                return false;
+            }
+            if (muted) {
+                return false;
+            }
+            return true;
+        })();
+        extractFrameViaBroadcastChannel({
+            src,
+            timeInSeconds: timestamp,
+            durationInSeconds,
+            playbackRate,
+            logLevel,
+            includeAudio: shouldRenderAudio,
+            includeVideo: videoEnabled,
+            isClientSideRendering: environment.isClientSideRendering,
+            loop,
+            audioStreamIndex,
+            trimAfter: trimAfterValue,
+            trimBefore: trimBeforeValue,
+            fps,
+            maxCacheSize,
+        })
+            .then((result) => {
+            if (result.type === 'unknown-container-format') {
+                if (environment.isClientSideRendering) {
+                    cancelRender(new Error(`Cannot render video "${src}": Unknown container format. See supported formats: https://www.remotion.dev/docs/mediabunny/formats`));
+                    return;
+                }
+                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 (environment.isClientSideRendering) {
+                    cancelRender(new Error(`Cannot render video "${src}": The video could not be decoded by the browser.`));
+                    return;
+                }
+                if (disallowFallbackToOffthreadVideo) {
+                    cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
+                }
+                if (window.remotion_isMainTab) {
+                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Cannot decode ${src}, falling back to <OffthreadVideo>`);
+                }
+                setReplaceWithOffthreadVideo({
+                    durationInSeconds: result.durationInSeconds,
+                });
+                return;
+            }
+            if (result.type === 'cannot-decode-alpha') {
+                if (environment.isClientSideRendering) {
+                    cancelRender(new Error(`Cannot render video "${src}": The alpha channel could not be decoded by the browser.`));
+                    return;
+                }
+                if (disallowFallbackToOffthreadVideo) {
+                    cancelRender(new Error(`Cannot decode alpha component for ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
+                }
+                if (window.remotion_isMainTab) {
+                    Internals.Log.info({ logLevel, tag: '@remotion/media' }, `Cannot decode alpha component for ${src}, falling back to <OffthreadVideo>`);
+                }
+                setReplaceWithOffthreadVideo({
+                    durationInSeconds: result.durationInSeconds,
+                });
+                return;
+            }
+            if (result.type === 'network-error') {
+                if (environment.isClientSideRendering) {
+                    cancelRender(new Error(`Cannot render video "${src}": Network error while fetching the video (possibly CORS).`));
+                    return;
+                }
+                if (disallowFallbackToOffthreadVideo) {
+                    cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
+                }
+                if (window.remotion_isMainTab) {
+                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Network error fetching ${src} (no CORS?), 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', {
+                    alpha: true,
+                });
+                // Could be in headless mode
+                if (context) {
+                    context.canvas.width = imageBitmap.width;
+                    context.canvas.height = imageBitmap.height;
+                    context.canvas.style.aspectRatio = `${context.canvas.width} / ${context.canvas.height}`;
+                    context.drawImage(imageBitmap, 0, 0);
+                }
+                imageBitmap.close();
+            }
+            else if (videoEnabled) {
+                // A video that only starts at time 0.033sec
+                // we shall not crash here but clear the canvas
+                const context = canvasRef.current?.getContext('2d', {
+                    alpha: true,
+                });
+                if (context) {
+                    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+                }
+            }
+            const volumePropsFrame = frameForVolumeProp({
+                behavior: loopVolumeCurveBehavior,
+                loop,
+                assetDurationInSeconds: assetDurationInSeconds ?? 0,
+                fps,
+                frame,
+                startsAt,
+            });
+            const volume = Internals.evaluateVolume({
+                volume: volumeProp,
+                frame: volumePropsFrame,
+                mediaVolume: 1,
+            });
+            Internals.warnAboutTooHighVolume(volume);
+            if (audio && volume > 0) {
+                applyVolume(audio.data, volume);
+                registerRenderAsset({
+                    type: 'inline-audio',
+                    id,
+                    audio: environment.isClientSideRendering
+                        ? audio.data
+                        : Array.from(audio.data),
+                    frame: absoluteFrame,
+                    timestamp: audio.timestamp,
+                    duration: (audio.numberOfFrames / TARGET_SAMPLE_RATE) * 1000000,
+                    toneFrequency,
+                });
+            }
+            continueRender(newHandle);
+        })
+            .catch((err) => {
+            cancelRender(err);
+        });
+        return () => {
+            continueRender(newHandle);
+            unregisterRenderAsset(id);
+        };
+    }, [
+        absoluteFrame,
+        continueRender,
+        delayRender,
+        delayRenderRetries,
+        delayRenderTimeoutInMilliseconds,
+        environment.isClientSideRendering,
+        fps,
+        frame,
+        id,
+        logLevel,
+        loop,
+        loopVolumeCurveBehavior,
+        muted,
+        onVideoFrame,
+        playbackRate,
+        registerRenderAsset,
+        src,
+        startsAt,
+        unregisterRenderAsset,
+        volumeProp,
+        replaceWithOffthreadVideo,
+        audioStreamIndex,
+        disallowFallbackToOffthreadVideo,
+        toneFrequency,
+        trimAfterValue,
+        trimBeforeValue,
+        audioEnabled,
+        videoEnabled,
+        maxCacheSize,
+        cancelRender,
+        headless,
+    ]);
+    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 ?? true, toneMapped: fallbackOffthreadVideoProps?.toneMapped ?? true, audioStreamIndex: audioStreamIndex ?? 0, name: name, className: className, onVideoFrame: onVideoFrame, volume: volumeProp, id: id, onError: fallbackOffthreadVideoProps?.onError, toneFrequency: toneFrequency, 
+            // these shouldn't matter during rendering / should not appear at all
+            showInTimeline: false, crossOrigin: undefined, onAutoPlayError: () => undefined, pauseWhenBuffering: false, trimAfter: trimAfterValue, trimBefore: trimBeforeValue, useWebAudioApi: false, startFrom: undefined, endAt: undefined, stack: stack, _remotionInternalNativeLoopPassed: false }));
+        if (loop) {
+            if (!replaceWithOffthreadVideo.durationInSeconds) {
+                const err = 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.`);
+                cancelRender(err);
+                throw err;
+            }
+            return (_jsx(Loop, { layout: "none", durationInFrames: Internals.calculateMediaDuration({
+                    trimAfter: trimAfterValue,
+                    mediaDurationInFrames: replaceWithOffthreadVideo.durationInSeconds * fps,
+                    playbackRate,
+                    trimBefore: trimBeforeValue,
+                }), children: fallback }));
+        }
+        return fallback;
+    }
+    if (headless) {
+        return null;
+    }
+    return _jsx("canvas", { ref: canvasRef, style: style, className: classNameValue });
+};