@remotion/media 4.0.363 → 4.0.365

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { Html5Video, Internals, useBufferState, useCurrentFrame } from 'remotion';
+import { MediaPlayer } from '../media-player';
 import { useLoopDisplay } from '../show-in-timeline';
 import { useMediaInTimeline } from '../use-media-in-timeline';
-import { MediaPlayer } from './media-player';
 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, }) => {
+export const VideoForPreview = ({ 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();
@@ -56,13 +56,15 @@ export const VideoForPreview = ({ src: unpreloadedSrc, style, playbackRate, logL
     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);
+    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;
@@ -82,11 +84,16 @@ export const VideoForPreview = ({ src: unpreloadedSrc, style, playbackRate, logL
                 fps: videoConfig.fps,
                 playbackRate,
                 audioStreamIndex,
+                debugOverlay,
+                bufferState: buffer,
             });
             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.`);
@@ -125,17 +132,17 @@ export const VideoForPreview = ({ src: unpreloadedSrc, style, playbackRate, logL
                 }
             })
                 .catch((error) => {
-                Internals.Log.error({ logLevel, tag: '@remotion/media' }, '[NewVideoForPreview] Failed to initialize MediaPlayer', 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' }, '[NewVideoForPreview] MediaPlayer initialization failed', 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' }, `[NewVideoForPreview] Disposing MediaPlayer`);
+                Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[VideoForPreview] Disposing MediaPlayer`);
                 mediaPlayerRef.current.dispose();
                 mediaPlayerRef.current = null;
             }
@@ -153,6 +160,8 @@ export const VideoForPreview = ({ src: unpreloadedSrc, style, playbackRate, logL
         playbackRate,
         disallowFallbackToOffthreadVideo,
         audioStreamIndex,
+        debugOverlay,
+        buffer,
     ]);
     const classNameValue = useMemo(() => {
         return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className]
@@ -163,46 +172,20 @@ 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' }, '[NewVideoForPreview] Failed to play', error);
-            });
+        if (playing && !isPlayerBuffering) {
+            mediaPlayer.play(currentTimeRef.current);
         }
         else {
             mediaPlayer.pause();
         }
-    }, [playing, logLevel, mediaPlayerReady]);
-    useEffect(() => {
+    }, [isPlayerBuffering, playing, logLevel, mediaPlayerReady]);
+    useLayoutEffect(() => {
         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`);
+        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' }, '[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 = isSequenceHidden || muted || mediaMuted || userPreferredVolume <= 0;
     useEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
@@ -217,6 +200,13 @@ export const VideoForPreview = ({ src: unpreloadedSrc, style, playbackRate, logL
         }
         mediaPlayer.setVolume(userPreferredVolume);
     }, [userPreferredVolume, mediaPlayerReady]);
+    useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setDebugOverlay(debugOverlay);
+    }, [debugOverlay, mediaPlayerReady]);
     const effectivePlaybackRate = useMemo(() => playbackRate * globalPlaybackRate, [playbackRate, globalPlaybackRate]);
     useEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;

package/dist/video/video-preview-iterator.d.ts

@@ -0,0 +1,14 @@
+import type { CanvasSink, WrappedCanvas } from 'mediabunny';
+export declare const createVideoIterator: (timeToSeek: number, videoSink: CanvasSink) => {
+    destroy: () => void;
+    getNext: () => Promise<IteratorResult<WrappedCanvas, void>>;
+    isDestroyed: () => boolean;
+    tryToSatisfySeek: (time: number) => Promise<{
+        type: "not-satisfied";
+        reason: string;
+    } | {
+        type: "satisfied";
+        frame: WrappedCanvas;
+    }>;
+};
+export type VideoIterator = ReturnType<typeof createVideoIterator>;

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

@@ -0,0 +1,122 @@
+import { roundTo4Digits } from '../helpers/round-to-4-digits';
+export const createVideoIterator = (timeToSeek, videoSink) => {
+    let destroyed = false;
+    const iterator = videoSink.canvases(timeToSeek);
+    let lastReturnedFrame = null;
+    let iteratorEnded = false;
+    const getNextOrNullIfNotAvailable = async () => {
+        const next = iterator.next();
+        const result = await Promise.race([
+            next,
+            new Promise((resolve) => {
+                Promise.resolve().then(() => resolve());
+            }),
+        ]);
+        if (!result) {
+            return {
+                type: 'need-to-wait-for-it',
+                waitPromise: async () => {
+                    const res = await next;
+                    if (res.value) {
+                        lastReturnedFrame = res.value;
+                    }
+                    else {
+                        iteratorEnded = true;
+                    }
+                    return res.value;
+                },
+            };
+        }
+        if (result.value) {
+            lastReturnedFrame = result.value;
+        }
+        else {
+            iteratorEnded = true;
+        }
+        return {
+            type: 'got-frame-or-end',
+            frame: result.value ?? null,
+        };
+    };
+    const destroy = () => {
+        destroyed = true;
+        lastReturnedFrame = null;
+        iterator.return().catch(() => undefined);
+    };
+    const tryToSatisfySeek = async (time) => {
+        if (lastReturnedFrame) {
+            const frameTimestamp = roundTo4Digits(lastReturnedFrame.timestamp);
+            if (roundTo4Digits(time) < frameTimestamp) {
+                return {
+                    type: 'not-satisfied',
+                    reason: `iterator is too far, most recently returned ${frameTimestamp}`,
+                };
+            }
+            const frameEndTimestamp = roundTo4Digits(lastReturnedFrame.timestamp + lastReturnedFrame.duration);
+            const timestamp = roundTo4Digits(time);
+            if (frameTimestamp <= timestamp && frameEndTimestamp > timestamp) {
+                return {
+                    type: 'satisfied',
+                    frame: lastReturnedFrame,
+                };
+            }
+        }
+        if (iteratorEnded) {
+            if (lastReturnedFrame) {
+                return {
+                    type: 'satisfied',
+                    frame: lastReturnedFrame,
+                };
+            }
+            return {
+                type: 'not-satisfied',
+                reason: 'iterator ended',
+            };
+        }
+        while (true) {
+            const frame = await getNextOrNullIfNotAvailable();
+            if (frame.type === 'need-to-wait-for-it') {
+                return {
+                    type: 'not-satisfied',
+                    reason: 'iterator did not have frame ready',
+                };
+            }
+            if (frame.type === 'got-frame-or-end') {
+                if (frame.frame === null) {
+                    iteratorEnded = true;
+                    if (lastReturnedFrame) {
+                        return {
+                            type: 'satisfied',
+                            frame: lastReturnedFrame,
+                        };
+                    }
+                    return {
+                        type: 'not-satisfied',
+                        reason: 'iterator ended and did not have frame ready',
+                    };
+                }
+                const frameTimestamp = roundTo4Digits(frame.frame.timestamp);
+                const frameEndTimestamp = roundTo4Digits(frame.frame.timestamp + frame.frame.duration);
+                const timestamp = roundTo4Digits(time);
+                if (frameTimestamp <= timestamp && frameEndTimestamp > timestamp) {
+                    return {
+                        type: 'satisfied',
+                        frame: frame.frame,
+                    };
+                }
+                continue;
+            }
+            throw new Error('Unreachable');
+        }
+    };
+    return {
+        destroy,
+        getNext: () => {
+            return iterator.next();
+        },
+        isDestroyed: () => {
+            return destroyed;
+        },
+        tryToSatisfySeek,
+    };
+};

package/dist/video/video.js

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

package/dist/video-extraction/keyframe-bank.js

@@ -1,10 +1,7 @@
 import { Internals } from 'remotion';
 import { SAFE_BACK_WINDOW_IN_SECONDS } from '../caches';
+import { roundTo4Digits } from '../helpers/round-to-4-digits';
 import { renderTimestampRange } from '../render-timestamp-range';
-// Round to only 4 digits, because WebM has a timescale of 1_000, e.g. framer.webm
-const roundTo4Digits = (timestamp) => {
-    return Math.round(timestamp * 1000) / 1000;
-};
 export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSeconds, sampleIterator, logLevel: parentLogLevel, src, }) => {
     Internals.Log.verbose({ logLevel: parentLogLevel, tag: '@remotion/media' }, `Creating keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
     const frames = {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.363",
+	"version": "4.0.365",
 	"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.23.0",
-		"remotion": "4.0.363",
+		"mediabunny": "1.24.2",
+		"remotion": "4.0.365",
 		"webdriverio": "9.19.2"
 	},
 	"peerDependencies": {
@@ -30,7 +30,7 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.363",
+		"@remotion/eslint-config-internal": "4.0.365",
 		"@vitest/browser": "^3.2.4",
 		"eslint": "9.19.0",
 		"react": "19.0.0",