@remotion/media 4.0.351 → 4.0.352

package/dist/audio-extraction/audio-cache.js

@@ -9,6 +9,10 @@ export const makeAudioCache = () => {
         for (const timestamp of timestamps) {
             const endTimestamp = timestamp + samples[timestamp].duration;
             if (endTimestamp < threshold) {
+                const isLast = timestamp === timestamps[timestamps.length - 1];
+                if (isLast) {
+                    continue;
+                }
                 samples[timestamp].close();
                 delete samples[timestamp];
                 timestamps.splice(timestamps.indexOf(timestamp), 1);

package/dist/audio-extraction/audio-iterator.js

@@ -41,10 +41,13 @@ export const makeAudioIterator = ({ audioSampleSink, isMatroska, startTimestamp,
         }
         const samples = cache.getSamples(timestamp, durationInSeconds);
         while (true) {
+            const sample = await getNextSample();
             // Clear all samples before the timestamp
             // Do this in the while loop because samples might start from 0
-            cache.clearBeforeThreshold(timestamp - SAFE_BACK_WINDOW_IN_SECONDS);
-            const sample = await getNextSample();
+            // Also do this after a sample has just been added, if it was the last sample we now have the duration
+            // and can prevent deleting the last sample
+            const deleteBefore = fullDuration === null ? timestamp : Math.min(timestamp, fullDuration);
+            cache.clearBeforeThreshold(deleteBefore - SAFE_BACK_WINDOW_IN_SECONDS);
             if (sample === null) {
                 break;
             }

package/dist/audio-extraction/audio-manager.d.ts

@@ -22,12 +22,13 @@ export declare const makeAudioManager: () => {
         prepareForDeletion: () => Promise<void>;
         startTimestamp: number;
     };
-    getIterator: ({ src, timeInSeconds, audioSampleSink, isMatroska, actualMatroskaTimestamps, }: {
+    getIterator: ({ src, timeInSeconds, audioSampleSink, isMatroska, actualMatroskaTimestamps, logLevel, }: {
         src: string;
         timeInSeconds: number;
         audioSampleSink: AudioSampleSink;
         isMatroska: boolean;
         actualMatroskaTimestamps: RememberActualMatroskaTimestamps;
+        logLevel: LogLevel;
     }) => Promise<{
         src: string;
         getSamples: (ts: number, dur: number) => Promise<import("mediabunny").AudioSample[]>;

package/dist/audio-extraction/audio-manager.js

@@ -1,4 +1,4 @@
-import { getTotalCacheStats, MAX_CACHE_SIZE } from '../caches';
+import { getMaxVideoCacheSize, getTotalCacheStats } from '../caches';
 import { makeAudioIterator } from './audio-iterator';
 export const makeAudioManager = () => {
     const iterators = [];
@@ -32,8 +32,9 @@ export const makeAudioManager = () => {
             iterators.splice(iterators.indexOf(iterator), 1);
         }
     };
-    const getIterator = async ({ src, timeInSeconds, audioSampleSink, isMatroska, actualMatroskaTimestamps, }) => {
-        while ((await getTotalCacheStats()).totalSize > MAX_CACHE_SIZE) {
+    const getIterator = async ({ src, timeInSeconds, audioSampleSink, isMatroska, actualMatroskaTimestamps, logLevel, }) => {
+        const maxCacheSize = getMaxVideoCacheSize(logLevel);
+        while ((await getTotalCacheStats()).totalSize > maxCacheSize) {
             await deleteOldestIterator();
         }
         for (const iterator of iterators) {

package/dist/audio-extraction/extract-audio.js

@@ -21,6 +21,7 @@ export const extractAudio = async ({ src, timeInSeconds: unloopedTimeInSeconds,
         audioSampleSink: audio.sampleSink,
         isMatroska,
         actualMatroskaTimestamps,
+        logLevel,
     });
     const samples = await sampleIterator.getSamples(timeInSeconds, durationInSeconds);
     audioManager.logOpenFrames(logLevel);

package/dist/caches.d.ts

@@ -1,4 +1,4 @@
-export declare const MAX_CACHE_SIZE: number;
+import { type LogLevel } from 'remotion';
 export declare const SAFE_BACK_WINDOW_IN_SECONDS = 1;
 export declare const keyframeManager: {
     requestKeyframeBank: ({ packetSink, timestamp, videoSampleSink, src, logLevel, }: {
@@ -40,12 +40,13 @@ export declare const audioManager: {
         prepareForDeletion: () => Promise<void>;
         startTimestamp: number;
     };
-    getIterator: ({ src, timeInSeconds, audioSampleSink, isMatroska, actualMatroskaTimestamps, }: {
+    getIterator: ({ src, timeInSeconds, audioSampleSink, isMatroska, actualMatroskaTimestamps, logLevel, }: {
         src: string;
         timeInSeconds: number;
         audioSampleSink: import("mediabunny").AudioSampleSink;
         isMatroska: boolean;
         actualMatroskaTimestamps: import("./video-extraction/remember-actual-matroska-timestamps").RememberActualMatroskaTimestamps;
+        logLevel: import("./log").LogLevel;
     }) => Promise<{
         src: string;
         getSamples: (ts: number, dur: number) => Promise<import("mediabunny").AudioSample[]>;
@@ -84,3 +85,4 @@ export declare const getTotalCacheStats: () => Promise<{
     count: number;
     totalSize: number;
 }>;
+export declare const getMaxVideoCacheSize: (logLevel: LogLevel) => number;

package/dist/caches.js

@@ -1,6 +1,7 @@
+import { cancelRender } from 'remotion';
 import { makeAudioManager } from './audio-extraction/audio-manager';
+import { Log } from './log';
 import { makeKeyframeManager } from './video-extraction/keyframe-manager';
-export const MAX_CACHE_SIZE = 1000 * 1000 * 1000; // 1GB
 // TODO: make it dependent on the fps and concurrency
 export const SAFE_BACK_WINDOW_IN_SECONDS = 1;
 export const keyframeManager = makeKeyframeManager();
@@ -13,3 +14,39 @@ export const getTotalCacheStats = async () => {
         totalSize: keyframeManagerCacheStats.totalSize + audioManagerCacheStats.totalSize,
     };
 };
+const getUncachedMaxCacheSize = (logLevel) => {
+    if (window.remotion_mediaCacheSizeInBytes !== undefined &&
+        window.remotion_mediaCacheSizeInBytes !== null) {
+        if (window.remotion_mediaCacheSizeInBytes < 240 * 1024 * 1024) {
+            cancelRender(new Error(`The minimum value for the "mediaCacheSizeInBytes" prop is 240MB (${240 * 1024 * 1024}), got: ${window.remotion_mediaCacheSizeInBytes}`));
+        }
+        if (window.remotion_mediaCacheSizeInBytes > 20000 * 1024 * 1024) {
+            cancelRender(new Error(`The maximum value for the "mediaCacheSizeInBytes" prop is 20GB (${20000 * 1024 * 1024}), got: ${window.remotion_mediaCacheSizeInBytes}`));
+        }
+        Log.verbose(logLevel, `Using @remotion/media cache size set using "mediaCacheSizeInBytes": ${(window.remotion_mediaCacheSizeInBytes / 1024 / 1024).toFixed(1)} MB`);
+        return window.remotion_mediaCacheSizeInBytes;
+    }
+    if (window.remotion_initialMemoryAvailable !== undefined &&
+        window.remotion_initialMemoryAvailable !== null) {
+        const value = window.remotion_initialMemoryAvailable / 2;
+        if (value < 240 * 1024 * 1024) {
+            Log.verbose(logLevel, `Using @remotion/media cache size set based on minimum value of 240MB (which is more than half of the available system memory!)`);
+            return 240 * 1024 * 1024;
+        }
+        if (value > 20000 * 1024 * 1024) {
+            Log.verbose(logLevel, `Using @remotion/media cache size set based on maximum value of 20GB (which is less than half of the available system memory)`);
+            return 20000 * 1024 * 1024;
+        }
+        Log.verbose(logLevel, `Using @remotion/media cache size set based on available memory (50% of available memory): ${(value / 1024 / 1024).toFixed(1)} MB`);
+        return value;
+    }
+    return 1000 * 1000 * 1000; // 1GB
+};
+let cachedMaxCacheSize = null;
+export const getMaxVideoCacheSize = (logLevel) => {
+    if (cachedMaxCacheSize !== null) {
+        return cachedMaxCacheSize;
+    }
+    cachedMaxCacheSize = getUncachedMaxCacheSize(logLevel);
+    return cachedMaxCacheSize;
+};

package/dist/esm/index.mjs

@@ -1,7 +1,7 @@
 // src/audio/audio.tsx
 import { useCallback as useCallback2, useContext as useContext5 } from "react";
 import {
-  cancelRender as cancelRender2,
+  cancelRender as cancelRender3,
   Internals as Internals2,
   Sequence,
   useRemotionEnvironment as useRemotionEnvironment3
@@ -44,13 +44,16 @@ var SharedAudioContext = createContext2(null);
 // src/audio/audio-for-rendering.tsx
 import { useContext as useContext4, useLayoutEffect, useMemo as useMemo3, useState as useState3 } from "react";
 import {
-  cancelRender,
+  cancelRender as cancelRender2,
   Internals,
   useCurrentFrame,
   useDelayRender,
   useRemotionEnvironment as useRemotionEnvironment2
 } from "remotion";
 
+// src/caches.ts
+import { cancelRender } from "remotion";
+
 // src/log.ts
 var logLevels = ["trace", "verbose", "info", "warn", "error"];
 var getNumberForLogLevel = (level) => {
@@ -97,6 +100,10 @@ var makeAudioCache = () => {
     for (const timestamp of timestamps) {
       const endTimestamp = timestamp + samples[timestamp].duration;
       if (endTimestamp < threshold) {
+        const isLast = timestamp === timestamps[timestamps.length - 1];
+        if (isLast) {
+          continue;
+        }
         samples[timestamp].close();
         delete samples[timestamp];
         timestamps.splice(timestamps.indexOf(timestamp), 1);
@@ -182,8 +189,9 @@ var makeAudioIterator = ({
     }
     const samples = cache.getSamples(timestamp, durationInSeconds);
     while (true) {
-      cache.clearBeforeThreshold(timestamp - SAFE_BACK_WINDOW_IN_SECONDS);
       const sample = await getNextSample();
+      const deleteBefore = fullDuration === null ? timestamp : Math.min(timestamp, fullDuration);
+      cache.clearBeforeThreshold(deleteBefore - SAFE_BACK_WINDOW_IN_SECONDS);
       if (sample === null) {
         break;
       }
@@ -285,9 +293,11 @@ var makeAudioManager = () => {
     timeInSeconds,
     audioSampleSink,
     isMatroska,
-    actualMatroskaTimestamps
+    actualMatroskaTimestamps,
+    logLevel
   }) => {
-    while ((await getTotalCacheStats()).totalSize > MAX_CACHE_SIZE) {
+    const maxCacheSize = getMaxVideoCacheSize(logLevel);
+    while ((await getTotalCacheStats()).totalSize > maxCacheSize) {
       await deleteOldestIterator();
     }
     for (const iterator of iterators) {
@@ -13530,7 +13540,8 @@ var makeKeyframeManager = () => {
   };
   const ensureToStayUnderMaxCacheSize = async (logLevel) => {
     let cacheStats = await getTotalCacheStats();
-    while (cacheStats.totalSize > MAX_CACHE_SIZE) {
+    const maxCacheSize = getMaxVideoCacheSize(logLevel);
+    while (cacheStats.totalSize > maxCacheSize) {
       await deleteOldestKeyframeBank(logLevel);
       cacheStats = await getTotalCacheStats();
     }
@@ -13642,7 +13653,6 @@ var makeKeyframeManager = () => {
 };
 
 // src/caches.ts
-var MAX_CACHE_SIZE = 1000 * 1000 * 1000;
 var SAFE_BACK_WINDOW_IN_SECONDS = 1;
 var keyframeManager = makeKeyframeManager();
 var audioManager = makeAudioManager();
@@ -13654,6 +13664,40 @@ var getTotalCacheStats = async () => {
     totalSize: keyframeManagerCacheStats.totalSize + audioManagerCacheStats.totalSize
   };
 };
+var getUncachedMaxCacheSize = (logLevel) => {
+  if (window.remotion_mediaCacheSizeInBytes !== undefined && window.remotion_mediaCacheSizeInBytes !== null) {
+    if (window.remotion_mediaCacheSizeInBytes < 240 * 1024 * 1024) {
+      cancelRender(new Error(`The minimum value for the "mediaCacheSizeInBytes" prop is 240MB (${240 * 1024 * 1024}), got: ${window.remotion_mediaCacheSizeInBytes}`));
+    }
+    if (window.remotion_mediaCacheSizeInBytes > 20000 * 1024 * 1024) {
+      cancelRender(new Error(`The maximum value for the "mediaCacheSizeInBytes" prop is 20GB (${20000 * 1024 * 1024}), got: ${window.remotion_mediaCacheSizeInBytes}`));
+    }
+    Log2.verbose(logLevel, `Using @remotion/media cache size set using "mediaCacheSizeInBytes": ${(window.remotion_mediaCacheSizeInBytes / 1024 / 1024).toFixed(1)} MB`);
+    return window.remotion_mediaCacheSizeInBytes;
+  }
+  if (window.remotion_initialMemoryAvailable !== undefined && window.remotion_initialMemoryAvailable !== null) {
+    const value = window.remotion_initialMemoryAvailable / 2;
+    if (value < 240 * 1024 * 1024) {
+      Log2.verbose(logLevel, `Using @remotion/media cache size set based on minimum value of 240MB (which is more than half of the available system memory!)`);
+      return 240 * 1024 * 1024;
+    }
+    if (value > 20000 * 1024 * 1024) {
+      Log2.verbose(logLevel, `Using @remotion/media cache size set based on maximum value of 20GB (which is less than half of the available system memory)`);
+      return 20000 * 1024 * 1024;
+    }
+    Log2.verbose(logLevel, `Using @remotion/media cache size set based on available memory (50% of available memory): ${(value / 1024 / 1024).toFixed(1)} MB`);
+    return value;
+  }
+  return 1000 * 1000 * 1000;
+};
+var cachedMaxCacheSize = null;
+var getMaxVideoCacheSize = (logLevel) => {
+  if (cachedMaxCacheSize !== null) {
+    return cachedMaxCacheSize;
+  }
+  cachedMaxCacheSize = getUncachedMaxCacheSize(logLevel);
+  return cachedMaxCacheSize;
+};
 
 // src/convert-audiodata/combine-audiodata.ts
 var combineAudioDataAndClosePrevious = (audioDataArray) => {
@@ -13872,7 +13916,8 @@ var extractAudio = async ({
     timeInSeconds,
     audioSampleSink: audio.sampleSink,
     isMatroska,
-    actualMatroskaTimestamps
+    actualMatroskaTimestamps,
+    logLevel
   });
   const samples = await sampleIterator.getSamples(timeInSeconds, durationInSeconds);
   audioManager.logOpenFrames(logLevel);
@@ -14140,7 +14185,7 @@ var AudioForRendering = ({
       }
       continueRender(newHandle);
     }).catch((error) => {
-      cancelRender(error);
+      cancelRender2(error);
     });
     return () => {
       continueRender(newHandle);
@@ -14216,7 +14261,7 @@ var Audio = (props) => {
         onRemotionError(new Error(errMessage));
         return;
       }
-      cancelRender2(new Error(errMessage));
+      cancelRender3(new Error(errMessage));
     } else {
       onRemotionError?.(new Error(errMessage));
       console.warn(errMessage);
@@ -14273,11 +14318,12 @@ import {
   useState as useState4
 } from "react";
 import {
-  cancelRender as cancelRender3,
+  cancelRender as cancelRender4,
   Internals as Internals3,
   useCurrentFrame as useCurrentFrame2,
   useDelayRender as useDelayRender2,
-  useRemotionEnvironment as useRemotionEnvironment4
+  useRemotionEnvironment as useRemotionEnvironment4,
+  useVideoConfig
 } from "remotion";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var VideoForRendering = ({
@@ -14291,19 +14337,17 @@ var VideoForRendering = ({
   onVideoFrame,
   logLevel = window.remotion_logLevel,
   loop,
-  style
+  style,
+  className
 }) => {
   const absoluteFrame = Internals3.useTimelinePosition();
-  const videoConfig = Internals3.useUnsafeVideoConfig();
+  const { fps } = useVideoConfig();
   const canvasRef = useRef2(null);
   const { registerRenderAsset, unregisterRenderAsset } = useContext6(Internals3.RenderAssetManager);
   const frame = useCurrentFrame2();
   const volumePropsFrame = Internals3.useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const environment = useRemotionEnvironment4();
   const [id] = useState4(() => `${Math.random()}`.replace("0.", ""));
-  if (!videoConfig) {
-    throw new Error("No video config found");
-  }
   if (!src) {
     throw new TypeError("No `src` was passed to <Video>.");
   }
@@ -14325,7 +14369,6 @@ var VideoForRendering = ({
     }
     return true;
   }, [muted, volume]);
-  const { fps } = videoConfig;
   const { delayRender, continueRender } = useDelayRender2();
   useLayoutEffect2(() => {
     if (!canvasRef.current) {
@@ -14351,10 +14394,17 @@ var VideoForRendering = ({
     }).then(({ frame: imageBitmap, audio }) => {
       if (imageBitmap) {
         onVideoFrame?.(imageBitmap);
-        canvasRef.current?.getContext("2d")?.drawImage(imageBitmap, 0, 0);
+        const context = canvasRef.current?.getContext("2d");
+        if (!context) {
+          return;
+        }
+        context.canvas.width = imageBitmap instanceof ImageBitmap ? imageBitmap.width : imageBitmap.displayWidth;
+        context.canvas.height = imageBitmap instanceof ImageBitmap ? imageBitmap.height : imageBitmap.displayHeight;
+        context.canvas.style.aspectRatio = `${context.canvas.width} / ${context.canvas.height}`;
+        context.drawImage(imageBitmap, 0, 0);
         imageBitmap.close();
       } else if (window.remotion_videoEnabled) {
-        cancelRender3(new Error("No video frame found"));
+        cancelRender4(new Error("No video frame found"));
       }
       if (audio) {
         registerRenderAsset({
@@ -14370,7 +14420,7 @@ var VideoForRendering = ({
       }
       continueRender(newHandle);
     }).catch((error) => {
-      cancelRender3(error);
+      cancelRender4(error);
     });
     return () => {
       continueRender(newHandle);
@@ -14396,11 +14446,13 @@ var VideoForRendering = ({
     volume,
     loop
   ]);
+  const classNameValue = useMemo4(() => {
+    return [Internals3.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals3.truthy).join(" ");
+  }, [className]);
   return /* @__PURE__ */ jsx3("canvas", {
     ref: canvasRef,
     style,
-    width: videoConfig.width,
-    height: videoConfig.height
+    className: classNameValue
   });
 };
 

package/dist/video/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;
+}