@remotion/media 4.0.427 → 4.0.429

package/dist/use-media-in-timeline.js

@@ -1,103 +0,0 @@
-import { useContext, useEffect, useState } from 'react';
-import { Internals, useCurrentFrame } from 'remotion';
-export const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, trimBefore, trimAfter, }) => {
-    const parentSequence = useContext(Internals.SequenceContext);
-    const startsAt = Internals.useMediaStartsAt();
-    const { registerSequence, unregisterSequence } = useContext(Internals.SequenceManager);
-    const [sequenceId] = useState(() => String(Math.random()));
-    const [mediaId] = useState(() => String(Math.random()));
-    const frame = useCurrentFrame();
-    const { volumes, duration, doesVolumeChange, nonce, rootId, isStudio, finalDisplayName, } = Internals.useBasicMediaInTimeline({
-        volume,
-        mediaVolume,
-        mediaType,
-        src,
-        displayName,
-        trimBefore,
-        trimAfter,
-        playbackRate,
-    });
-    useEffect(() => {
-        if (!src) {
-            throw new Error('No src passed');
-        }
-        if (!isStudio && window.process?.env?.NODE_ENV !== 'test') {
-            return;
-        }
-        if (!showInTimeline) {
-            return;
-        }
-        const loopIteration = loopDisplay
-            ? Math.floor(frame / loopDisplay.durationInFrames)
-            : 0;
-        if (loopDisplay) {
-            registerSequence({
-                type: 'sequence',
-                premountDisplay,
-                postmountDisplay,
-                parent: parentSequence?.id ?? null,
-                displayName: finalDisplayName,
-                rootId,
-                showInTimeline: true,
-                nonce,
-                loopDisplay,
-                stack,
-                from: 0,
-                duration,
-                id: sequenceId,
-            });
-        }
-        registerSequence({
-            type: mediaType,
-            src,
-            id: mediaId,
-            duration: loopDisplay?.durationInFrames ?? duration,
-            from: loopDisplay ? loopIteration * loopDisplay.durationInFrames : 0,
-            parent: loopDisplay ? sequenceId : (parentSequence?.id ?? null),
-            displayName: finalDisplayName,
-            rootId,
-            volume: volumes,
-            showInTimeline: true,
-            nonce,
-            startMediaFrom: 0 - startsAt,
-            doesVolumeChange,
-            loopDisplay: undefined,
-            playbackRate,
-            stack,
-            premountDisplay: null,
-            postmountDisplay: null,
-        });
-        return () => {
-            if (loopDisplay) {
-                unregisterSequence(sequenceId);
-            }
-            unregisterSequence(mediaId);
-        };
-    }, [
-        doesVolumeChange,
-        duration,
-        finalDisplayName,
-        isStudio,
-        loopDisplay,
-        mediaId,
-        mediaType,
-        nonce,
-        parentSequence?.id,
-        playbackRate,
-        postmountDisplay,
-        premountDisplay,
-        registerSequence,
-        rootId,
-        sequenceId,
-        showInTimeline,
-        src,
-        stack,
-        startsAt,
-        unregisterSequence,
-        volumes,
-        frame,
-    ]);
-    return {
-        id: mediaId,
-    };
-};

package/dist/video/props.js

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

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

@@ -1,331 +0,0 @@
-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 });
-};