@remotion/media 4.0.353 → 4.0.355

package/dist/extract-frame-and-audio.d.ts

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

package/dist/extract-frame-and-audio.js

@@ -1,6 +1,6 @@
 import { extractAudio } from './audio-extraction/extract-audio';
 import { extractFrame } from './video-extraction/extract-frame';
-export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durationInSeconds, includeAudio, includeVideo, volume, loop, }) => {
+export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, loop, }) => {
     const [frame, audio] = await Promise.all([
         includeVideo
             ? extractFrame({
@@ -15,14 +15,15 @@ export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durat
                 src,
                 timeInSeconds,
                 durationInSeconds,
-                volume,
                 logLevel,
                 loop,
+                playbackRate,
             })
             : null,
     ]);
     return {
         frame: frame?.toVideoFrame() ?? null,
-        audio,
+        audio: audio?.data ?? null,
+        durationInSeconds: audio?.durationInSeconds ?? null,
     };
 };

package/dist/get-sink-weak.d.ts

@@ -0,0 +1,18 @@
+import type { LogLevel } from 'remotion';
+import type { GetSink } from './video-extraction/get-frames-since-keyframe';
+export declare const sinkPromises: Record<string, Promise<GetSink>>;
+export declare const getSinkWeak: (src: string, logLevel: LogLevel) => Promise<{
+    video: {
+        sampleSink: import("mediabunny").VideoSampleSink;
+        packetSink: import("mediabunny").EncodedPacketSink;
+    } | null;
+    audio: {
+        sampleSink: import("mediabunny").AudioSampleSink;
+    } | null;
+    actualMatroskaTimestamps: {
+        observeTimestamp: (startTime: number) => void;
+        getRealTimestamp: (observedTimestamp: number) => number | null;
+    };
+    isMatroska: boolean;
+    getDuration: () => Promise<number>;
+}>;

package/dist/get-sink-weak.js

@@ -0,0 +1,23 @@
+import { Internals } from 'remotion';
+import { getSinks } from './video-extraction/get-frames-since-keyframe';
+export const sinkPromises = {};
+export const getSinkWeak = async (src, logLevel) => {
+    let promise = sinkPromises[src];
+    if (!promise) {
+        promise = getSinks(src);
+        sinkPromises[src] = promise;
+    }
+    let awaited = await promise;
+    let deferredValue = awaited.deref();
+    if (!deferredValue) {
+        Internals.Log.verbose({
+            logLevel,
+            tag: '@remotion/media',
+        }, `Sink for ${src} was garbage collected, creating new sink`);
+        promise = getSinks(src);
+        sinkPromises[src] = promise;
+        awaited = await promise;
+        deferredValue = awaited.deref();
+    }
+    return deferredValue;
+};

package/dist/looped-frame.d.ts

@@ -0,0 +1,9 @@
+import { type LoopVolumeCurveBehavior } from 'remotion';
+export declare const frameForVolumeProp: ({ behavior, loop, assetDurationInSeconds, fps, frame, startsAt, }: {
+    behavior: LoopVolumeCurveBehavior;
+    loop: boolean;
+    assetDurationInSeconds: number;
+    fps: number;
+    frame: number;
+    startsAt: number;
+}) => number;

package/dist/looped-frame.js

@@ -0,0 +1,10 @@
+export const frameForVolumeProp = ({ behavior, loop, assetDurationInSeconds, fps, frame, startsAt, }) => {
+    if (!loop) {
+        return frame + startsAt;
+    }
+    if (behavior === 'extend') {
+        return frame + startsAt;
+    }
+    const assetDurationInFrames = Math.floor(assetDurationInSeconds * fps) - startsAt;
+    return (frame % assetDurationInFrames) + startsAt;
+};

package/dist/video/props.d.ts

@@ -9,17 +9,12 @@ export type VideoProps = {
     name?: string;
     pauseWhenBuffering?: boolean;
     showInTimeline?: boolean;
-    onAutoPlayError?: null | (() => void);
     onVideoFrame?: OnVideoFrame;
     playbackRate?: number;
     muted?: boolean;
     delayRenderRetries?: number;
     delayRenderTimeoutInMilliseconds?: number;
-    crossOrigin?: '' | 'anonymous' | 'use-credentials';
     style?: React.CSSProperties;
-    onError?: (err: Error) => void;
-    useWebAudioApi?: boolean;
-    acceptableTimeShiftInSeconds?: number;
     /**
      * @deprecated For internal use only
      */

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.d.ts

@@ -1,6 +1,4 @@
 import { type LogLevel } from 'remotion';
-import { type GetSink } from './get-frames-since-keyframe';
-export declare const sinkPromises: Record<string, Promise<GetSink>>;
 export declare const extractFrame: ({ src, timeInSeconds: unloopedTimeinSeconds, logLevel, loop, }: {
     src: string;
     timeInSeconds: number;

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

@@ -1,11 +1,11 @@
 import { keyframeManager } from '../caches';
-import { getSinks } from './get-frames-since-keyframe';
-export const sinkPromises = {};
+import { getSinkWeak } from '../get-sink-weak';
 export const extractFrame = async ({ src, timeInSeconds: unloopedTimeinSeconds, logLevel, loop, }) => {
-    if (!sinkPromises[src]) {
-        sinkPromises[src] = getSinks(src);
+    const sink = await getSinkWeak(src, logLevel);
+    const { video, getDuration } = sink;
+    if (video === null) {
+        throw new Error(`No video track found for ${src}`);
     }
-    const { video, getDuration } = await sinkPromises[src];
     const timeInSeconds = loop
         ? unloopedTimeinSeconds % (await getDuration())
         : unloopedTimeinSeconds;

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

@@ -1,10 +1,10 @@
 import type { EncodedPacket } from 'mediabunny';
 import { AudioSampleSink, EncodedPacketSink, VideoSampleSink } from 'mediabunny';
-export declare const getSinks: (src: string) => Promise<{
+export declare const getSinks: (src: string) => Promise<WeakRef<{
     video: {
         sampleSink: VideoSampleSink;
         packetSink: EncodedPacketSink;
-    };
+    } | null;
     audio: {
         sampleSink: AudioSampleSink;
     } | null;
@@ -14,7 +14,7 @@ export declare const getSinks: (src: string) => Promise<{
     };
     isMatroska: boolean;
     getDuration: () => Promise<number>;
-}>;
+}>>;
 export type GetSink = Awaited<ReturnType<typeof getSinks>>;
 export declare const getFramesSinceKeyframe: ({ packetSink, videoSampleSink, startPacket, }: {
     packetSink: EncodedPacketSink;

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),
-        },
+    return new WeakRef({
+        video: videoTrack
+            ? {
+                sampleSink: new VideoSampleSink(videoTrack),
+                packetSink: new EncodedPacketSink(videoTrack),
+            }
+            : null,
         audio: audioTrack
             ? {
                 sampleSink: new AudioSampleSink(audioTrack),
@@ -26,7 +25,7 @@ export const getSinks = async (src) => {
         actualMatroskaTimestamps: rememberActualMatroskaTimestamps(isMatroska),
         isMatroska,
         getDuration: () => input.computeDuration(),
-    };
+    });
 };
 export const getFramesSinceKeyframe = async ({ packetSink, videoSampleSink, startPacket, }) => {
     const nextKeyPacket = await packetSink.getNextKeyPacket(startPacket, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/media",
-  "version": "4.0.353",
+  "version": "4.0.355",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/esm/index.mjs",
@@ -8,14 +8,14 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/media"
   },
   "sideEffects": false,
-  "author": "Hunain Ahmed <junaidhunain6@gmail.com>",
+  "author": "Jonny Burger <jonny@remotion.dev>, Hunain Ahmed <junaidhunain6@gmail.com>",
   "bugs": {
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "mediabunny": "1.17.0",
+    "mediabunny": "1.21.0",
     "webdriverio": "9.19.2",
-    "remotion": "4.0.353"
+    "remotion": "4.0.355"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -27,7 +27,7 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "vitest": "3.2.4",
-    "@remotion/eslint-config-internal": "4.0.353"
+    "@remotion/eslint-config-internal": "4.0.355"
   },
   "keywords": [],
   "publishConfig": {