@remotion/media 4.0.390 → 4.0.392

package/dist/video-for-rendering.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { cancelRender, Internals, useCurrentFrame, useDelayRender, useRemotionEnvironment, } from 'remotion';
+import { extractFrameViaBroadcastChannel } from './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, }) => {
+    const absoluteFrame = Internals.useTimelinePosition();
+    const videoConfig = Internals.useUnsafeVideoConfig();
+    const canvasRef = useRef(null);
+    const { registerRenderAsset, unregisterRenderAsset } = useContext(Internals.RenderAssetManager);
+    const frame = useCurrentFrame();
+    const volumePropsFrame = Internals.useFrameForVolumeProp(loopVolumeCurveBehavior ?? 'repeat');
+    const environment = useRemotionEnvironment();
+    const [id] = useState(() => `${Math.random()}`.replace('0.', ''));
+    if (!videoConfig) {
+        throw new Error('No video config found');
+    }
+    if (!src) {
+        throw new TypeError('No `src` was passed to <Video>.');
+    }
+    const volume = Internals.evaluateVolume({
+        volume: volumeProp,
+        frame: volumePropsFrame,
+        mediaVolume: 1,
+    });
+    Internals.warnAboutTooHighVolume(volume);
+    const shouldRenderAudio = useMemo(() => {
+        if (!window.remotion_audioEnabled) {
+            return false;
+        }
+        if (muted) {
+            return false;
+        }
+        if (volume <= 0) {
+            return false;
+        }
+        return true;
+    }, [muted, volume]);
+    const { fps } = videoConfig;
+    const { delayRender, continueRender } = useDelayRender();
+    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}`, {
+            retries: delayRenderRetries ?? undefined,
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
+        });
+        extractFrameViaBroadcastChannel({
+            src,
+            timeInSeconds: timestamp,
+            durationInSeconds,
+            logLevel: logLevel ?? 'info',
+            shouldRenderAudio,
+            isClientSideRendering: environment.isClientSideRendering,
+        })
+            .then(({ frame: imageBitmap, audio }) => {
+            if (!imageBitmap) {
+                cancelRender(new Error('No video frame found'));
+            }
+            onVideoFrame?.(imageBitmap);
+            canvasRef.current?.getContext('2d')?.drawImage(imageBitmap, 0, 0);
+            imageBitmap.close();
+            if (audio) {
+                registerRenderAsset({
+                    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,
+                });
+            }
+            continueRender(newHandle);
+        })
+            .catch((error) => {
+            cancelRender(error);
+        });
+        return () => {
+            continueRender(newHandle);
+            unregisterRenderAsset(id);
+        };
+    }, [
+        absoluteFrame,
+        continueRender,
+        delayRender,
+        delayRenderRetries,
+        delayRenderTimeoutInMilliseconds,
+        environment.isClientSideRendering,
+        fps,
+        frame,
+        id,
+        logLevel,
+        onVideoFrame,
+        playbackRate,
+        registerRenderAsset,
+        shouldRenderAudio,
+        src,
+        unregisterRenderAsset,
+    ]);
+    return (_jsx("canvas", { ref: canvasRef, width: videoConfig.width, height: videoConfig.height }));
+};

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

@@ -1,7 +1,7 @@
 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, }: {
+export declare const videoIteratorManager: ({ delayPlaybackHandleIfNotPremounting, canvas, context, drawDebugOverlay, logLevel, getOnVideoFrameCallback, videoTrack, getEndTime, getStartTime, getIsLooping, }: {
     videoTrack: InputVideoTrack;
     delayPlaybackHandleIfNotPremounting: () => {
         unblock: () => void;
@@ -11,6 +11,9 @@ export declare const videoIteratorManager: ({ delayPlaybackHandleIfNotPremountin
     getOnVideoFrameCallback: () => null | ((frame: CanvasImageSource) => void);
     logLevel: LogLevel;
     drawDebugOverlay: () => void;
+    getEndTime: () => number;
+    getStartTime: () => number;
+    getIsLooping: () => boolean;
 }) => {
     startVideoIterator: (timeToSeek: number, nonce: Nonce) => Promise<void>;
     getVideoIteratorsCreated: () => number;

package/dist/video-iterator-manager.js

@@ -1,10 +1,12 @@
 import { CanvasSink } from 'mediabunny';
 import { Internals } from 'remotion';
+import { makePrewarmedVideoIteratorCache } from './prewarm-iterator-for-looping';
 import { createVideoIterator, } from './video/video-preview-iterator';
-export const videoIteratorManager = ({ delayPlaybackHandleIfNotPremounting, canvas, context, drawDebugOverlay, logLevel, getOnVideoFrameCallback, videoTrack, }) => {
+export const videoIteratorManager = ({ delayPlaybackHandleIfNotPremounting, canvas, context, drawDebugOverlay, logLevel, getOnVideoFrameCallback, videoTrack, getEndTime, getStartTime, getIsLooping, }) => {
     let videoIteratorsCreated = 0;
     let videoFrameIterator = null;
     let framesRendered = 0;
+    let currentDelayHandle = null;
     if (canvas) {
         canvas.width = videoTrack.displayWidth;
         canvas.height = videoTrack.displayHeight;
@@ -14,6 +16,7 @@ export const videoIteratorManager = ({ delayPlaybackHandleIfNotPremounting, canv
         fit: 'contain',
         alpha: true,
     });
+    const prewarmedVideoIteratorCache = makePrewarmedVideoIteratorCache(canvasSink);
     const drawFrame = (frame) => {
         if (context && canvas) {
             context.clearRect(0, 0, canvas.width, canvas.height);
@@ -29,12 +32,19 @@ export const videoIteratorManager = ({ delayPlaybackHandleIfNotPremounting, canv
     };
     const startVideoIterator = async (timeToSeek, nonce) => {
         videoFrameIterator?.destroy();
-        const iterator = createVideoIterator(timeToSeek, canvasSink);
+        const iterator = createVideoIterator(timeToSeek, prewarmedVideoIteratorCache);
         videoIteratorsCreated++;
         videoFrameIterator = iterator;
         const delayHandle = delayPlaybackHandleIfNotPremounting();
-        const frameResult = await iterator.getNext();
-        delayHandle.unblock();
+        currentDelayHandle = delayHandle;
+        let frameResult;
+        try {
+            frameResult = await iterator.getNext();
+        }
+        finally {
+            delayHandle.unblock();
+            currentDelayHandle = null;
+        }
         if (iterator.isDestroyed()) {
             return;
         }
@@ -54,6 +64,14 @@ export const videoIteratorManager = ({ delayPlaybackHandleIfNotPremounting, canv
         if (!videoFrameIterator) {
             return;
         }
+        if (getIsLooping()) {
+            // If less than 1 second from the end away, we pre-warm a new iterator
+            if (getEndTime() - newTime < 1) {
+                prewarmedVideoIteratorCache.prewarmIteratorForLooping({
+                    timeToSeek: getStartTime(),
+                });
+            }
+        }
         // 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
@@ -73,10 +91,15 @@ export const videoIteratorManager = ({ delayPlaybackHandleIfNotPremounting, canv
         getVideoIteratorsCreated: () => videoIteratorsCreated,
         seek,
         destroy: () => {
+            prewarmedVideoIteratorCache.destroy();
             videoFrameIterator?.destroy();
             if (context && canvas) {
                 context.clearRect(0, 0, canvas.width, canvas.height);
             }
+            if (currentDelayHandle) {
+                currentDelayHandle.unblock();
+                currentDelayHandle = null;
+            }
             videoFrameIterator = null;
         },
         getVideoFrameIterator: () => videoFrameIterator,

package/dist/video.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { VideoProps } from './props';
+export declare const Video: React.FC<VideoProps>;

package/dist/video.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Internals, Sequence, useRemotionEnvironment } from 'remotion';
+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 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.`);
+    }
+    validateMediaTrimProps({
+        startFrom: undefined,
+        endAt: undefined,
+        trimBefore,
+        trimAfter,
+    });
+    const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
+        startFrom: undefined,
+        endAt: undefined,
+        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');
+    if (environment.isRendering) {
+        return _jsx(VideoForRendering, { ...otherProps });
+    }
+    const { onAutoPlayError, onVideoFrame, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...propsForPreview } = otherProps;
+    return (_jsx(VideoForPreview, { _remotionInternalStack: stack ?? null, _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: pauseWhenBuffering ?? false, showInTimeline: showInTimeline ?? true, onAutoPlayError: onAutoPlayError ?? undefined, onVideoFrame: onVideoFrame ?? null, crossOrigin: crossOrigin, ...propsForPreview }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.390",
+	"version": "4.0.392",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -22,14 +22,14 @@
 	},
 	"dependencies": {
 		"mediabunny": "1.25.8",
-		"remotion": "4.0.390"
+		"remotion": "4.0.392"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.390",
+		"@remotion/eslint-config-internal": "4.0.392",
 		"@vitest/browser-webdriverio": "4.0.9",
 		"eslint": "9.19.0",
 		"react": "19.2.3",