@remotion/media 4.0.353 → 4.0.354

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

@@ -1,40 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { cancelRender, Internals, useCurrentFrame, useDelayRender, useRemotionEnvironment, useVideoConfig, } from 'remotion';
+import { applyVolume } from '../convert-audiodata/apply-volume';
+import { frameForVolumeProp } from '../looped-frame';
 import { extractFrameViaBroadcastChannel } from '../video-extraction/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, loop, style, className, }) => {
+    if (!src) {
+        throw new TypeError('No `src` was passed to <Video>.');
+    }
+    const frame = useCurrentFrame();
     const absoluteFrame = Internals.useTimelinePosition();
     const { fps } = useVideoConfig();
-    const canvasRef = useRef(null);
     const { registerRenderAsset, unregisterRenderAsset } = useContext(Internals.RenderAssetManager);
-    const frame = useCurrentFrame();
-    const volumePropsFrame = Internals.useFrameForVolumeProp(loopVolumeCurveBehavior ?? 'repeat');
-    const environment = useRemotionEnvironment();
+    const startsAt = Internals.useMediaStartsAt();
     const [id] = useState(() => `${Math.random()}`.replace('0.', ''));
-    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 environment = useRemotionEnvironment();
     const { delayRender, continueRender } = useDelayRender();
+    const canvasRef = useRef(null);
     useLayoutEffect(() => {
         if (!canvasRef.current) {
             return;
@@ -46,18 +30,27 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, className, }) =>
             retries: delayRenderRetries ?? undefined,
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
         });
+        const shouldRenderAudio = (() => {
+            if (!window.remotion_audioEnabled) {
+                return false;
+            }
+            if (muted) {
+                return false;
+            }
+            return true;
+        })();
         extractFrameViaBroadcastChannel({
             src,
             timeInSeconds: timestamp,
             durationInSeconds,
+            playbackRate: playbackRate ?? 1,
             logLevel: logLevel ?? 'info',
             includeAudio: shouldRenderAudio,
             includeVideo: window.remotion_videoEnabled,
             isClientSideRendering: environment.isClientSideRendering,
-            volume,
             loop: loop ?? false,
         })
-            .then(({ frame: imageBitmap, audio }) => {
+            .then(({ frame: imageBitmap, audio, durationInSeconds: assetDurationInSeconds, }) => {
             if (imageBitmap) {
                 onVideoFrame?.(imageBitmap);
                 const context = canvasRef.current?.getContext('2d');
@@ -79,7 +72,22 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, className, }) =>
             else if (window.remotion_videoEnabled) {
                 cancelRender(new Error('No video frame found'));
             }
-            if (audio) {
+            const volumePropsFrame = frameForVolumeProp({
+                behavior: loopVolumeCurveBehavior ?? 'repeat',
+                loop: loop ?? false,
+                assetDurationInSeconds: assetDurationInSeconds ?? 0,
+                fps,
+                frame,
+                startsAt,
+            });
+            const volume = Internals.evaluateVolume({
+                volume: volumeProp,
+                frame: volumePropsFrame,
+                mediaVolume: 1,
+            });
+            Internals.warnAboutTooHighVolume(volume);
+            if (audio && volume > 0) {
+                applyVolume(audio.data, volume);
                 registerRenderAsset({
                     type: 'inline-audio',
                     id,
@@ -111,14 +119,16 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, className, }) =>
         frame,
         id,
         logLevel,
+        loop,
+        loopVolumeCurveBehavior,
+        muted,
         onVideoFrame,
         playbackRate,
         registerRenderAsset,
-        shouldRenderAudio,
         src,
+        startsAt,
         unregisterRenderAsset,
-        volume,
-        loop,
+        volumeProp,
     ]);
     const classNameValue = useMemo(() => {
         return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className]

package/dist/video/video.js

@@ -32,6 +32,6 @@ export const Video = (props) => {
     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 }));
+    const { onVideoFrame, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...propsForPreview } = otherProps;
+    return (_jsx(VideoForPreview, { _remotionInternalStack: stack ?? null, _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: pauseWhenBuffering ?? false, showInTimeline: showInTimeline ?? true, onVideoFrame: onVideoFrame ?? null, ...propsForPreview }));
 };

package/dist/video-extraction/extract-frame-via-broadcast-channel.d.ts

@@ -1,16 +1,17 @@
 import { type LogLevel } from 'remotion';
 import type { PcmS16AudioData } from '../convert-audiodata/convert-audiodata';
-export declare const extractFrameViaBroadcastChannel: ({ src, timeInSeconds, logLevel, durationInSeconds, includeAudio, includeVideo, isClientSideRendering, volume, loop, }: {
+export declare const extractFrameViaBroadcastChannel: ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, }: {
     src: string;
     timeInSeconds: number;
     durationInSeconds: number;
+    playbackRate: number;
     logLevel: LogLevel;
     includeAudio: boolean;
     includeVideo: boolean;
     isClientSideRendering: boolean;
-    volume: number;
     loop: boolean;
 }) => Promise<{
     frame: ImageBitmap | VideoFrame | null;
     audio: PcmS16AudioData | null;
+    durationInSeconds: number | null;
 }>;

package/dist/video-extraction/extract-frame-via-broadcast-channel.js

@@ -5,14 +5,14 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
         const data = event.data;
         if (data.type === 'request') {
             try {
-                const { frame, audio } = await extractFrameAndAudio({
+                const { frame, audio, durationInSeconds } = await extractFrameAndAudio({
                     src: data.src,
                     timeInSeconds: data.timeInSeconds,
                     logLevel: data.logLevel,
                     durationInSeconds: data.durationInSeconds,
+                    playbackRate: data.playbackRate,
                     includeAudio: data.includeAudio,
                     includeVideo: data.includeVideo,
-                    volume: data.volume,
                     loop: data.loop,
                 });
                 const videoFrame = frame;
@@ -27,6 +27,7 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
                     id: data.id,
                     frame: imageBitmap,
                     audio,
+                    durationInSeconds: durationInSeconds ?? null,
                 };
                 window.remotion_broadcastChannel.postMessage(response);
                 videoFrame?.close();
@@ -45,16 +46,16 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
         }
     });
 }
-export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel, durationInSeconds, includeAudio, includeVideo, isClientSideRendering, volume, loop, }) => {
+export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, isClientSideRendering, loop, }) => {
     if (isClientSideRendering || window.remotion_isMainTab) {
         return extractFrameAndAudio({
             logLevel,
             src,
             timeInSeconds,
             durationInSeconds,
+            playbackRate,
             includeAudio,
             includeVideo,
-            volume,
             loop,
         });
     }
@@ -69,6 +70,9 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
                 resolve({
                     frame: data.frame ? data.frame : null,
                     audio: data.audio ? data.audio : null,
+                    durationInSeconds: data.durationInSeconds
+                        ? data.durationInSeconds
+                        : null,
                 });
                 window.remotion_broadcastChannel.removeEventListener('message', onMessage);
             }
@@ -86,9 +90,9 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
         id: requestId,
         logLevel,
         durationInSeconds,
+        playbackRate,
         includeAudio,
         includeVideo,
-        volume,
         loop,
     };
     window.remotion_broadcastChannel.postMessage(request);

package/dist/video-extraction/extract-frame.js

@@ -6,6 +6,9 @@ export const extractFrame = async ({ src, timeInSeconds: unloopedTimeinSeconds,
         sinkPromises[src] = getSinks(src);
     }
     const { video, getDuration } = await sinkPromises[src];
+    if (video === null) {
+        throw new Error(`No video track found for ${src}`);
+    }
     const timeInSeconds = loop
         ? unloopedTimeinSeconds % (await getDuration())
         : unloopedTimeinSeconds;

package/dist/video-extraction/get-frames-since-keyframe.d.ts

@@ -4,7 +4,7 @@ export declare const getSinks: (src: string) => Promise<{
     video: {
         sampleSink: VideoSampleSink;
         packetSink: EncodedPacketSink;
-    };
+    } | null;
     audio: {
         sampleSink: AudioSampleSink;
     } | null;

package/dist/video-extraction/get-frames-since-keyframe.js

@@ -8,16 +8,15 @@ export const getSinks = async (src) => {
     });
     const format = await input.getFormat();
     const videoTrack = await input.getPrimaryVideoTrack();
-    if (!videoTrack) {
-        throw new Error(`No video track found for ${src}`);
-    }
     const audioTrack = await input.getPrimaryAudioTrack();
     const isMatroska = format === MATROSKA;
     return {
-        video: {
-            sampleSink: new VideoSampleSink(videoTrack),
-            packetSink: new EncodedPacketSink(videoTrack),
-        },
+        video: videoTrack
+            ? {
+                sampleSink: new VideoSampleSink(videoTrack),
+                packetSink: new EncodedPacketSink(videoTrack),
+            }
+            : null,
         audio: audioTrack
             ? {
                 sampleSink: new AudioSampleSink(audioTrack),

package/dist/video-extraction/media-player.d.ts

@@ -0,0 +1,64 @@
+import { type LogLevel } from '../log';
+export declare class MediaPlayer {
+    private canvas;
+    private context;
+    private src;
+    private logLevel;
+    private canvasSink;
+    private videoFrameIterator;
+    private nextFrame;
+    private audioSink;
+    private audioBufferIterator;
+    private queuedAudioNodes;
+    private gainNode;
+    private expectedAudioTime;
+    private sharedAudioContext;
+    private mediaTimeOffset;
+    private playing;
+    private animationFrameId;
+    private asyncId;
+    private initialized;
+    private totalDuration;
+    private actualFps;
+    private isStalled;
+    private onStalledChangeCallback?;
+    private lastAudioProgressAtMs;
+    private lastNetworkActivityAtMs;
+    private isNetworkActive;
+    private isSeeking;
+    private canStartAudio;
+    constructor({ canvas, src, logLevel, sharedAudioContext, }: {
+        canvas: HTMLCanvasElement;
+        src: string;
+        logLevel: LogLevel;
+        sharedAudioContext?: AudioContext | null;
+    });
+    initialize(startTime?: number): Promise<void>;
+    seekTo(time: number): void;
+    drawInitialFrame(time?: number): Promise<void>;
+    play(): Promise<void>;
+    pause(): void;
+    dispose(): void;
+    get currentTime(): number;
+    private getPlaybackTime;
+    get duration(): number;
+    get isPlaying(): boolean;
+    get stalled(): boolean;
+    onStalledChange(callback: (isStalled: boolean) => void): void;
+    private renderSingleFrame;
+    private startRenderLoop;
+    private stopRenderLoop;
+    private render;
+    private startVideoIterator;
+    private updateNextFrame;
+    private tryStartAudio;
+    private getCurrentTimeMs;
+    private resetAudioProgressStopwatch;
+    private getAudioLookaheadSec;
+    private calculateAudioStallThresholdSec;
+    private isNetworkStalled;
+    private checkVideoStall;
+    private checkIfStalled;
+    private updateStalledState;
+    private runAudioIterator;
+}