@remotion/media 4.0.364 → 4.0.366

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { Html5Video, Internals, useBufferState, useCurrentFrame } from 'remotion';
+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;
-export const VideoForPreview = ({ src: unpreloadedSrc, style, playbackRate, logLevel, className, muted, volume, loopVolumeCurveBehavior, onVideoFrame, showInTimeline, loop, name, trimAfter, trimBefore, stack, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, audioStreamIndex, debugOverlay, }) => {
+const VideoForPreviewAssertedShowing = ({ src: unpreloadedSrc, style, playbackRate, logLevel, className, muted, volume, loopVolumeCurveBehavior, onVideoFrame, showInTimeline, loop, name, trimAfter, trimBefore, stack, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, audioStreamIndex, debugOverlay, }) => {
     const src = usePreload(unpreloadedSrc);
     const canvasRef = useRef(null);
     const videoConfig = useUnsafeVideoConfig();
@@ -30,6 +31,8 @@ export const VideoForPreview = ({ src: unpreloadedSrc, style, playbackRate, logL
     });
     warnAboutTooHighVolume(userPreferredVolume);
     const parentSequence = useContext(SequenceContext);
+    const isPremounting = Boolean(parentSequence?.premounting);
+    const isPostmounting = Boolean(parentSequence?.postmounting);
     const loopDisplay = useLoopDisplay({
         loop,
         mediaDurationInSeconds,
@@ -60,6 +63,11 @@ export const VideoForPreview = ({ src: unpreloadedSrc, style, playbackRate, logL
     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);
     useEffect(() => {
         if (!canvasRef.current)
             return;
@@ -81,6 +89,9 @@ export const VideoForPreview = ({ src: unpreloadedSrc, style, playbackRate, logL
                 audioStreamIndex,
                 debugOverlay,
                 bufferState: buffer,
+                isPremounting,
+                isPostmounting,
+                globalPlaybackRate,
             });
             mediaPlayerRef.current = player;
             player
@@ -157,6 +168,9 @@ export const VideoForPreview = ({ src: unpreloadedSrc, style, playbackRate, logL
         audioStreamIndex,
         debugOverlay,
         buffer,
+        isPremounting,
+        isPostmounting,
+        globalPlaybackRate,
     ]);
     const classNameValue = useMemo(() => {
         return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className]
@@ -167,46 +181,22 @@ export const VideoForPreview = ({ src: unpreloadedSrc, style, playbackRate, logL
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer)
             return;
-        if (playing) {
-            mediaPlayer.play().catch((error) => {
-                Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[VideoForPreview] Failed to play', error);
-            });
+        if (playing && !isPlayerBuffering) {
+            mediaPlayer.play(currentTimeRef.current);
         }
         else {
             mediaPlayer.pause();
         }
-    }, [playing, logLevel, mediaPlayerReady]);
+    }, [isPlayerBuffering, playing, logLevel, mediaPlayerReady]);
     useLayoutEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady)
             return;
-        mediaPlayer.seekTo(currentTime);
+        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]);
-    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' }, '[VideoForPreview] MediaPlayer buffering - blocking Remotion playback');
-            }
-            else if (!newBufferingState && currentBlock) {
-                currentBlock.unblock();
-                currentBlock = null;
-                Internals.Log.trace({ logLevel, tag: '@remotion/media' }, '[VideoForPreview] MediaPlayer unbuffering - unblocking Remotion playback');
-            }
-        });
-        return () => {
-            unsubscribe();
-            if (currentBlock) {
-                currentBlock.unblock();
-                currentBlock = null;
-            }
-        };
-    }, [mediaPlayerReady, buffer, logLevel]);
     const effectiveMuted = isSequenceHidden || muted || mediaMuted || userPreferredVolume <= 0;
     useEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
@@ -228,14 +218,20 @@ export const VideoForPreview = ({ src: unpreloadedSrc, style, playbackRate, logL
         }
         mediaPlayer.setDebugOverlay(debugOverlay);
     }, [debugOverlay, mediaPlayerReady]);
-    const effectivePlaybackRate = useMemo(() => playbackRate * globalPlaybackRate, [playbackRate, globalPlaybackRate]);
     useEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady) {
             return;
         }
-        mediaPlayer.setPlaybackRate(effectivePlaybackRate);
-    }, [effectivePlaybackRate, mediaPlayerReady]);
+        mediaPlayer.setPlaybackRate(playbackRate);
+    }, [playbackRate, mediaPlayerReady]);
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setGlobalPlaybackRate(globalPlaybackRate);
+    }, [globalPlaybackRate, mediaPlayerReady]);
     useEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady) {
@@ -243,6 +239,20 @@ export const VideoForPreview = ({ src: unpreloadedSrc, style, playbackRate, logL
         }
         mediaPlayer.setLoop(loop);
     }, [loop, mediaPlayerReady]);
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setIsPremounting(isPremounting);
+    }, [isPremounting, mediaPlayerReady]);
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setIsPostmounting(isPostmounting);
+    }, [isPostmounting, mediaPlayerReady]);
     useEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady) {
@@ -252,14 +262,25 @@ export const VideoForPreview = ({ src: unpreloadedSrc, style, playbackRate, logL
     }, [videoConfig.fps, mediaPlayerReady]);
     useEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
-        if (!mediaPlayer || !mediaPlayerReady || !onVideoFrame) {
+        if (!mediaPlayer || !mediaPlayerReady) {
             return;
         }
-        const unsubscribe = mediaPlayer.onVideoFrame(onVideoFrame);
-        return () => {
-            unsubscribe();
-        };
+        mediaPlayer.setVideoFrameCallback(onVideoFrame ?? null);
     }, [onVideoFrame, mediaPlayerReady]);
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setTrimBefore(trimBefore);
+    }, [trimBefore, mediaPlayerReady]);
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setTrimAfter(trimAfter);
+    }, [trimAfter, mediaPlayerReady]);
     const actualStyle = useMemo(() => {
         return {
             ...style,
@@ -273,3 +294,33 @@ export const VideoForPreview = ({ src: unpreloadedSrc, style, playbackRate, logL
     }
     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-iterator-manager.d.ts

@@ -0,0 +1,37 @@
+import type { InputVideoTrack, WrappedCanvas } from 'mediabunny';
+import type { LogLevel } from 'remotion';
+import type { Nonce } from './nonce-manager';
+export declare const videoIteratorManager: ({ delayPlaybackHandleIfNotPremounting, canvas, context, drawDebugOverlay, logLevel, getOnVideoFrameCallback, videoTrack, }: {
+    videoTrack: InputVideoTrack;
+    delayPlaybackHandleIfNotPremounting: () => {
+        unblock: () => void;
+    };
+    context: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;
+    canvas: OffscreenCanvas | HTMLCanvasElement;
+    getOnVideoFrameCallback: () => null | ((frame: CanvasImageSource) => void);
+    logLevel: LogLevel;
+    drawDebugOverlay: () => void;
+}) => {
+    startVideoIterator: (timeToSeek: number, nonce: Nonce) => Promise<void>;
+    getVideoIteratorsCreated: () => number;
+    seek: ({ newTime, nonce }: {
+        newTime: number;
+        nonce: Nonce;
+    }) => Promise<void>;
+    destroy: () => void;
+    getVideoFrameIterator: () => {
+        destroy: () => void;
+        getNext: () => Promise<IteratorResult<WrappedCanvas, void>>;
+        isDestroyed: () => boolean;
+        tryToSatisfySeek: (time: number) => Promise<{
+            type: "not-satisfied";
+            reason: string;
+        } | {
+            type: "satisfied";
+            frame: WrappedCanvas;
+        }>;
+    } | null;
+    drawFrame: (frame: WrappedCanvas) => void;
+    getFramesRendered: () => number;
+};
+export type VideoIteratorManager = ReturnType<typeof videoIteratorManager>;

package/dist/video-iterator-manager.js

@@ -0,0 +1,83 @@
+import { CanvasSink } from 'mediabunny';
+import { Internals } from 'remotion';
+import { createVideoIterator, } from './video/video-preview-iterator';
+export const videoIteratorManager = ({ delayPlaybackHandleIfNotPremounting, canvas, context, drawDebugOverlay, logLevel, getOnVideoFrameCallback, videoTrack, }) => {
+    let videoIteratorsCreated = 0;
+    let videoFrameIterator = null;
+    let framesRendered = 0;
+    canvas.width = videoTrack.displayWidth;
+    canvas.height = videoTrack.displayHeight;
+    const canvasSink = new CanvasSink(videoTrack, {
+        poolSize: 2,
+        fit: 'contain',
+        alpha: true,
+    });
+    const drawFrame = (frame) => {
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.drawImage(frame.canvas, 0, 0);
+        framesRendered++;
+        drawDebugOverlay();
+        const callback = getOnVideoFrameCallback();
+        if (callback) {
+            callback(canvas);
+        }
+        Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
+    };
+    const startVideoIterator = async (timeToSeek, nonce) => {
+        videoFrameIterator?.destroy();
+        const iterator = createVideoIterator(timeToSeek, canvasSink);
+        videoIteratorsCreated++;
+        videoFrameIterator = iterator;
+        const delayHandle = delayPlaybackHandleIfNotPremounting();
+        const frameResult = await iterator.getNext();
+        delayHandle.unblock();
+        if (iterator.isDestroyed()) {
+            return;
+        }
+        if (nonce.isStale()) {
+            return;
+        }
+        if (videoFrameIterator.isDestroyed()) {
+            return;
+        }
+        if (!frameResult.value) {
+            // media ended
+            return;
+        }
+        drawFrame(frameResult.value);
+    };
+    const seek = async ({ newTime, nonce }) => {
+        if (!videoFrameIterator) {
+            return;
+        }
+        // Should return immediately, so it's okay to not use Promise.all here
+        const videoSatisfyResult = await videoFrameIterator.tryToSatisfySeek(newTime);
+        // Doing this before the staleness check, because
+        // frame might be better than what we currently have
+        // TODO: check if this is actually true
+        if (videoSatisfyResult.type === 'satisfied') {
+            drawFrame(videoSatisfyResult.frame);
+            return;
+        }
+        if (nonce.isStale()) {
+            return;
+        }
+        // Intentionally not awaited, letting audio start as well
+        startVideoIterator(newTime, nonce).catch(() => {
+            // Ignore errors, might be stale or disposed
+        });
+    };
+    return {
+        startVideoIterator,
+        getVideoIteratorsCreated: () => videoIteratorsCreated,
+        seek,
+        destroy: () => {
+            videoFrameIterator?.destroy();
+            context.clearRect(0, 0, canvas.width, canvas.height);
+            videoFrameIterator = null;
+        },
+        getVideoFrameIterator: () => videoFrameIterator,
+        drawFrame,
+        getFramesRendered: () => framesRendered,
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.364",
+	"version": "4.0.366",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -21,8 +21,8 @@
 		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
 	},
 	"dependencies": {
-		"mediabunny": "1.24.1",
-		"remotion": "4.0.364",
+		"mediabunny": "1.24.2",
+		"remotion": "4.0.366",
 		"webdriverio": "9.19.2"
 	},
 	"peerDependencies": {
@@ -30,7 +30,7 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.364",
+		"@remotion/eslint-config-internal": "4.0.366",
 		"@vitest/browser": "^3.2.4",
 		"eslint": "9.19.0",
 		"react": "19.0.0",