@remotion/media 4.0.378 → 4.0.380

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.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.378",
+	"version": "4.0.380",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -22,14 +22,14 @@
 	},
 	"dependencies": {
 		"mediabunny": "1.24.5",
-		"remotion": "4.0.378"
+		"remotion": "4.0.380"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.378",
+		"@remotion/eslint-config-internal": "4.0.380",
 		"@vitest/browser-webdriverio": "4.0.7",
 		"eslint": "9.19.0",
 		"react": "19.0.0",