@remotion/media 4.0.362 → 4.0.363

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

@@ -5,7 +5,7 @@ import { applyVolume } from '../convert-audiodata/apply-volume';
 import { TARGET_SAMPLE_RATE } from '../convert-audiodata/resample-audiodata';
 import { frameForVolumeProp } from '../looped-frame';
 import { extractFrameViaBroadcastChannel } from '../video-extraction/extract-frame-via-broadcast-channel';
-export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, logLevel = window.remotion_logLevel, loop, fallbackHtml5AudioProps, audioStreamIndex, showInTimeline, style, name, disallowFallbackToHtml5Audio, toneFrequency, trimAfter, trimBefore, }) => {
+export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, logLevel, loop, fallbackHtml5AudioProps, audioStreamIndex, showInTimeline, style, name, disallowFallbackToHtml5Audio, toneFrequency, trimAfter, trimBefore, }) => {
     const frame = useCurrentFrame();
     const absoluteFrame = Internals.useTimelinePosition();
     const videoConfig = Internals.useUnsafeVideoConfig();
@@ -54,7 +54,7 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
             timeInSeconds: timestamp,
             durationInSeconds,
             playbackRate: playbackRate ?? 1,
-            logLevel,
+            logLevel: logLevel ?? window.remotion_logLevel,
             includeAudio: shouldRenderAudio,
             includeVideo: false,
             isClientSideRendering: environment.isClientSideRendering,
@@ -69,7 +69,10 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 if (disallowFallbackToHtml5Audio) {
                     cancelRender(new Error(`Unknown container format ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
                 }
-                Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
+                Internals.Log.warn({
+                    logLevel: logLevel ?? window.remotion_logLevel,
+                    tag: '@remotion/media',
+                }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
                 setReplaceWithHtml5Audio(true);
                 return;
             }
@@ -77,7 +80,10 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 if (disallowFallbackToHtml5Audio) {
                     cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
                 }
-                Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Cannot decode ${src}, falling back to <Html5Audio>`);
+                Internals.Log.warn({
+                    logLevel: logLevel ?? window.remotion_logLevel,
+                    tag: '@remotion/media',
+                }, `Cannot decode ${src}, falling back to <Html5Audio>`);
                 setReplaceWithHtml5Audio(true);
                 return;
             }
@@ -88,7 +94,10 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 if (disallowFallbackToHtml5Audio) {
                     cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
                 }
-                Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Network error fetching ${src}, falling back to <Html5Audio>`);
+                Internals.Log.warn({
+                    logLevel: logLevel ?? window.remotion_logLevel,
+                    tag: '@remotion/media',
+                }, `Network error fetching ${src}, falling back to <Html5Audio>`);
                 setReplaceWithHtml5Audio(true);
                 return;
             }

package/dist/audio/audio.js

@@ -17,5 +17,4 @@ export const Audio = (props) => {
     }
     return _jsx(AudioForPreview, { name: name, ...otherProps, stack: stack ?? null });
 };
-// TODO: Doesn't work
 Internals.addSequenceStackTraces(Audio);

package/dist/caches.js

@@ -14,7 +14,8 @@ export const getTotalCacheStats = async () => {
     };
 };
 const getUncachedMaxCacheSize = (logLevel) => {
-    if (window.remotion_mediaCacheSizeInBytes !== undefined &&
+    if (typeof window !== 'undefined' &&
+        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}`));
@@ -25,7 +26,8 @@ const getUncachedMaxCacheSize = (logLevel) => {
         Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Using cache size set using "mediaCacheSizeInBytes": ${(window.remotion_mediaCacheSizeInBytes / 1024 / 1024).toFixed(1)} MB`);
         return window.remotion_mediaCacheSizeInBytes;
     }
-    if (window.remotion_initialMemoryAvailable !== undefined &&
+    if (typeof window !== 'undefined' &&
+        window.remotion_initialMemoryAvailable !== undefined &&
         window.remotion_initialMemoryAvailable !== null) {
         const value = window.remotion_initialMemoryAvailable / 2;
         if (value < 500 * 1024 * 1024) {

package/dist/esm/index.mjs

@@ -1591,13 +1591,39 @@ var makeKeyframeBank = ({
   startTimestampInSeconds,
   endTimestampInSeconds,
   sampleIterator,
-  logLevel: parentLogLevel
+  logLevel: parentLogLevel,
+  src
 }) => {
   Internals8.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
   const frames = {};
   const frameTimestamps = [];
   let lastUsed = Date.now();
   let allocationSize = 0;
+  const deleteFramesBeforeTimestamp = ({
+    logLevel,
+    timestampInSeconds
+  }) => {
+    const deletedTimestamps = [];
+    for (const frameTimestamp of frameTimestamps.slice()) {
+      const isLast = frameTimestamp === frameTimestamps[frameTimestamps.length - 1];
+      if (isLast) {
+        continue;
+      }
+      if (frameTimestamp < timestampInSeconds) {
+        if (!frames[frameTimestamp]) {
+          continue;
+        }
+        allocationSize -= frames[frameTimestamp].allocationSize();
+        frameTimestamps.splice(frameTimestamps.indexOf(frameTimestamp), 1);
+        frames[frameTimestamp].close();
+        delete frames[frameTimestamp];
+        deletedTimestamps.push(frameTimestamp);
+      }
+    }
+    if (deletedTimestamps.length > 0) {
+      Internals8.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${deletedTimestamps.length} frame${deletedTimestamps.length === 1 ? "" : "s"} ${renderTimestampRange(deletedTimestamps)} for src ${src} because it is lower than ${timestampInSeconds}. Remaining: ${renderTimestampRange(frameTimestamps)}`);
+    }
+  };
   const hasDecodedEnoughForTimestamp = (timestamp) => {
     const lastFrameTimestamp = frameTimestamps[frameTimestamps.length - 1];
     if (!lastFrameTimestamp) {
@@ -1615,8 +1641,8 @@ var makeKeyframeBank = ({
     allocationSize += frame.allocationSize();
     lastUsed = Date.now();
   };
-  const ensureEnoughFramesForTimestamp = async (timestamp) => {
-    while (!hasDecodedEnoughForTimestamp(timestamp)) {
+  const ensureEnoughFramesForTimestamp = async (timestampInSeconds) => {
+    while (!hasDecodedEnoughForTimestamp(timestampInSeconds)) {
       const sample = await sampleIterator.next();
       if (sample.value) {
         addFrame(sample.value);
@@ -1624,6 +1650,10 @@ var makeKeyframeBank = ({
       if (sample.done) {
         break;
       }
+      deleteFramesBeforeTimestamp({
+        logLevel: parentLogLevel,
+        timestampInSeconds: timestampInSeconds - SAFE_BACK_WINDOW_IN_SECONDS
+      });
     }
     lastUsed = Date.now();
   };
@@ -1658,6 +1688,7 @@ var makeKeyframeBank = ({
       }
       return null;
     });
+    let framesDeleted = 0;
     for (const frameTimestamp of frameTimestamps) {
       if (!frames[frameTimestamp]) {
         continue;
@@ -1665,34 +1696,10 @@ var makeKeyframeBank = ({
       allocationSize -= frames[frameTimestamp].allocationSize();
       frames[frameTimestamp].close();
       delete frames[frameTimestamp];
+      framesDeleted++;
     }
     frameTimestamps.length = 0;
-  };
-  const deleteFramesBeforeTimestamp = ({
-    logLevel,
-    src,
-    timestampInSeconds
-  }) => {
-    const deletedTimestamps = [];
-    for (const frameTimestamp of frameTimestamps.slice()) {
-      const isLast = frameTimestamp === frameTimestamps[frameTimestamps.length - 1];
-      if (isLast) {
-        continue;
-      }
-      if (frameTimestamp < timestampInSeconds) {
-        if (!frames[frameTimestamp]) {
-          continue;
-        }
-        allocationSize -= frames[frameTimestamp].allocationSize();
-        frameTimestamps.splice(frameTimestamps.indexOf(frameTimestamp), 1);
-        frames[frameTimestamp].close();
-        delete frames[frameTimestamp];
-        deletedTimestamps.push(frameTimestamp);
-      }
-    }
-    if (deletedTimestamps.length > 0) {
-      Internals8.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${deletedTimestamps.length} frame${deletedTimestamps.length === 1 ? "" : "s"} ${renderTimestampRange(deletedTimestamps)} for src ${src} because it is lower than ${timestampInSeconds}. Remaining: ${renderTimestampRange(frameTimestamps)}`);
-    }
+    return { framesDeleted };
   };
   const getOpenFrameCount = () => {
     return {
@@ -1711,13 +1718,11 @@ var makeKeyframeBank = ({
       queue = queue.then(() => getFrameFromTimestamp(timestamp));
       return queue;
     },
-    prepareForDeletion: (logLevel) => {
-      queue = queue.then(() => prepareForDeletion(logLevel));
-      return queue;
-    },
+    prepareForDeletion,
     hasTimestampInSecond,
     addFrame,
     deleteFramesBeforeTimestamp,
+    src,
     getOpenFrameCount,
     getLastUsed
   };
@@ -1829,7 +1834,8 @@ var getFramesSinceKeyframe = async ({
   packetSink,
   videoSampleSink,
   startPacket,
-  logLevel
+  logLevel,
+  src
 }) => {
   const nextKeyPacket = await packetSink.getNextKeyPacket(startPacket, {
     verifyKeyPackets: true
@@ -1839,7 +1845,8 @@ var getFramesSinceKeyframe = async ({
     startTimestampInSeconds: startPacket.timestamp,
     endTimestampInSeconds: nextKeyPacket ? nextKeyPacket.timestamp : Infinity,
     sampleIterator,
-    logLevel
+    logLevel,
+    src
   });
   return keyframeBank;
 };
@@ -1891,6 +1898,7 @@ var makeKeyframeManager = () => {
   const getTheKeyframeBankMostInThePast = async () => {
     let mostInThePast = null;
     let mostInThePastBank = null;
+    let numberOfBanks = 0;
     for (const src in sources) {
       for (const b in sources[src]) {
         const bank = await sources[src][b];
@@ -1899,26 +1907,38 @@ var makeKeyframeManager = () => {
           mostInThePast = lastUsed;
           mostInThePastBank = { src, bank };
         }
+        numberOfBanks++;
       }
     }
     if (!mostInThePastBank) {
       throw new Error("No keyframe bank found");
     }
-    return mostInThePastBank;
+    return { mostInThePastBank, numberOfBanks };
   };
   const deleteOldestKeyframeBank = async (logLevel) => {
-    const { bank: mostInThePastBank, src: mostInThePastSrc } = await getTheKeyframeBankMostInThePast();
+    const {
+      mostInThePastBank: { bank: mostInThePastBank, src: mostInThePastSrc },
+      numberOfBanks
+    } = await getTheKeyframeBankMostInThePast();
+    if (numberOfBanks < 2) {
+      return { finish: true };
+    }
     if (mostInThePastBank) {
-      await mostInThePastBank.prepareForDeletion(logLevel);
+      const { framesDeleted } = mostInThePastBank.prepareForDeletion(logLevel);
       delete sources[mostInThePastSrc][mostInThePastBank.startTimestampInSeconds];
-      Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
+      Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${framesDeleted} frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
     }
+    return { finish: false };
   };
   const ensureToStayUnderMaxCacheSize = async (logLevel) => {
     let cacheStats = await getTotalCacheStats();
     const maxCacheSize = getMaxVideoCacheSize(logLevel);
     while (cacheStats.totalSize > maxCacheSize) {
-      await deleteOldestKeyframeBank(logLevel);
+      const { finish } = await deleteOldestKeyframeBank(logLevel);
+      if (finish) {
+        break;
+      }
+      Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, "Deleted oldest keyframe bank to stay under max cache size", (cacheStats.totalSize / 1024 / 1024).toFixed(1), "out of", (maxCacheSize / 1024 / 1024).toFixed(1));
       cacheStats = await getTotalCacheStats();
     }
   };
@@ -1936,14 +1956,13 @@ var makeKeyframeManager = () => {
       const bank = await sources[src][startTimeInSeconds];
       const { endTimestampInSeconds, startTimestampInSeconds } = bank;
       if (endTimestampInSeconds < threshold) {
-        await bank.prepareForDeletion(logLevel);
+        bank.prepareForDeletion(logLevel);
         Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
         delete sources[src][startTimeInSeconds];
       } else {
         bank.deleteFramesBeforeTimestamp({
           timestampInSeconds: threshold,
-          logLevel,
-          src
+          logLevel
         });
       }
     }
@@ -1973,7 +1992,8 @@ var makeKeyframeManager = () => {
         packetSink,
         videoSampleSink,
         startPacket,
-        logLevel
+        logLevel,
+        src
       });
       addKeyframeBank({ src, bank: newKeyframeBank, startTimestampInSeconds });
       return newKeyframeBank;
@@ -1988,7 +2008,8 @@ var makeKeyframeManager = () => {
       packetSink,
       videoSampleSink,
       startPacket,
-      logLevel
+      logLevel,
+      src
     });
     addKeyframeBank({ src, bank: replacementKeybank, startTimestampInSeconds });
     return replacementKeybank;
@@ -2062,7 +2083,7 @@ var getTotalCacheStats = async () => {
   };
 };
 var getUncachedMaxCacheSize = (logLevel) => {
-  if (window.remotion_mediaCacheSizeInBytes !== undefined && window.remotion_mediaCacheSizeInBytes !== null) {
+  if (typeof window !== "undefined" && 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}`));
     }
@@ -2072,7 +2093,7 @@ var getUncachedMaxCacheSize = (logLevel) => {
     Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using 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) {
+  if (typeof window !== "undefined" && window.remotion_initialMemoryAvailable !== undefined && window.remotion_initialMemoryAvailable !== null) {
     const value = window.remotion_initialMemoryAvailable / 2;
     if (value < 500 * 1024 * 1024) {
       Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on minimum value of 500MB (which is more than half of the available system memory!)`);
@@ -2446,7 +2467,7 @@ var extractFrameAndAudio = async ({
 };
 
 // src/video-extraction/extract-frame-via-broadcast-channel.ts
-if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
+if (typeof window !== "undefined" && window.remotion_broadcastChannel && window.remotion_isMainTab) {
   window.remotion_broadcastChannel.addEventListener("message", async (event) => {
     const data = event.data;
     if (data.type === "request") {
@@ -2654,7 +2675,7 @@ var AudioForRendering = ({
   loopVolumeCurveBehavior,
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
-  logLevel = window.remotion_logLevel,
+  logLevel,
   loop,
   fallbackHtml5AudioProps,
   audioStreamIndex,
@@ -2712,7 +2733,7 @@ var AudioForRendering = ({
       timeInSeconds: timestamp,
       durationInSeconds,
       playbackRate: playbackRate ?? 1,
-      logLevel,
+      logLevel: logLevel ?? window.remotion_logLevel,
       includeAudio: shouldRenderAudio,
       includeVideo: false,
       isClientSideRendering: environment.isClientSideRendering,
@@ -2726,7 +2747,10 @@ var AudioForRendering = ({
         if (disallowFallbackToHtml5Audio) {
           cancelRender2(new Error(`Unknown container format ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
         }
-        Internals12.Log.warn({ logLevel, tag: "@remotion/media" }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
+        Internals12.Log.warn({
+          logLevel: logLevel ?? window.remotion_logLevel,
+          tag: "@remotion/media"
+        }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
         setReplaceWithHtml5Audio(true);
         return;
       }
@@ -2734,7 +2758,10 @@ var AudioForRendering = ({
         if (disallowFallbackToHtml5Audio) {
           cancelRender2(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
         }
-        Internals12.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${src}, falling back to <Html5Audio>`);
+        Internals12.Log.warn({
+          logLevel: logLevel ?? window.remotion_logLevel,
+          tag: "@remotion/media"
+        }, `Cannot decode ${src}, falling back to <Html5Audio>`);
         setReplaceWithHtml5Audio(true);
         return;
       }
@@ -2745,7 +2772,10 @@ var AudioForRendering = ({
         if (disallowFallbackToHtml5Audio) {
           cancelRender2(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
         }
-        Internals12.Log.warn({ logLevel, tag: "@remotion/media" }, `Network error fetching ${src}, falling back to <Html5Audio>`);
+        Internals12.Log.warn({
+          logLevel: logLevel ?? window.remotion_logLevel,
+          tag: "@remotion/media"
+        }, `Network error fetching ${src}, falling back to <Html5Audio>`);
         setReplaceWithHtml5Audio(true);
         return;
       }
@@ -3183,26 +3213,6 @@ import {
   useRemotionEnvironment as useRemotionEnvironment3,
   useVideoConfig as useVideoConfig2
 } from "remotion";
-
-// ../core/src/calculate-media-duration.ts
-var calculateMediaDuration = ({
-  trimAfter,
-  mediaDurationInFrames,
-  playbackRate,
-  trimBefore
-}) => {
-  let duration = mediaDurationInFrames;
-  if (typeof trimAfter !== "undefined") {
-    duration = trimAfter;
-  }
-  if (typeof trimBefore !== "undefined") {
-    duration -= trimBefore;
-  }
-  const actualDuration = duration / playbackRate;
-  return Math.floor(actualDuration);
-};
-
-// src/video/video-for-rendering.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 var VideoForRendering = ({
   volume: volumeProp,
@@ -3245,6 +3255,8 @@ var VideoForRendering = ({
   const { delayRender, continueRender } = useDelayRender2();
   const canvasRef = useRef3(null);
   const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState5(false);
+  const audioEnabled = Internals15.useAudioEnabled();
+  const videoEnabled = Internals15.useVideoEnabled();
   useLayoutEffect2(() => {
     if (!canvasRef.current) {
       return;
@@ -3259,7 +3271,7 @@ var VideoForRendering = ({
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
     const shouldRenderAudio = (() => {
-      if (!window.remotion_audioEnabled) {
+      if (!audioEnabled) {
         return false;
       }
       if (muted) {
@@ -3274,7 +3286,7 @@ var VideoForRendering = ({
       playbackRate,
       logLevel,
       includeAudio: shouldRenderAudio,
-      includeVideo: window.remotion_videoEnabled,
+      includeVideo: videoEnabled,
       isClientSideRendering: environment.isClientSideRendering,
       loop,
       audioStreamIndex,
@@ -3344,7 +3356,7 @@ var VideoForRendering = ({
         context.canvas.style.aspectRatio = `${context.canvas.width} / ${context.canvas.height}`;
         context.drawImage(imageBitmap, 0, 0);
         imageBitmap.close();
-      } else if (window.remotion_videoEnabled) {
+      } else if (videoEnabled) {
         const context = canvasRef.current?.getContext("2d", {
           alpha: true
         });
@@ -3412,7 +3424,9 @@ var VideoForRendering = ({
     disallowFallbackToOffthreadVideo,
     toneFrequency,
     trimAfterValue,
-    trimBeforeValue
+    trimBeforeValue,
+    audioEnabled,
+    videoEnabled
   ]);
   const classNameValue = useMemo5(() => {
     return [Internals15.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals15.truthy).join(" ");
@@ -3458,7 +3472,7 @@ var VideoForRendering = ({
       }
       return /* @__PURE__ */ jsx5(Loop, {
         layout: "none",
-        durationInFrames: calculateMediaDuration({
+        durationInFrames: Internals15.calculateMediaDuration({
           trimAfter: trimAfterValue,
           mediaDurationInFrames: replaceWithOffthreadVideo.durationInSeconds * fps,
           playbackRate,
@@ -3594,7 +3608,7 @@ var Video = ({
     delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null,
     disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false,
     fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {},
-    logLevel: logLevel ?? window.remotion_logLevel,
+    logLevel: logLevel ?? (typeof window !== "undefined" ? window.remotion_logLevel : "info"),
     loop: loop ?? false,
     loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
     muted: muted ?? false,

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { cancelRender, Internals, Loop, random, useCurrentFrame, useDelayRender, useRemotionEnvironment, useVideoConfig, } from 'remotion';
-import { calculateMediaDuration } from '../../../core/src/calculate-media-duration';
 import { applyVolume } from '../convert-audiodata/apply-volume';
 import { TARGET_SAMPLE_RATE } from '../convert-audiodata/resample-audiodata';
 import { frameForVolumeProp } from '../looped-frame';
@@ -28,6 +27,8 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
     const { delayRender, continueRender } = useDelayRender();
     const canvasRef = useRef(null);
     const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState(false);
+    const audioEnabled = Internals.useAudioEnabled();
+    const videoEnabled = Internals.useVideoEnabled();
     useLayoutEffect(() => {
         if (!canvasRef.current) {
             return;
@@ -42,7 +43,7 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
         });
         const shouldRenderAudio = (() => {
-            if (!window.remotion_audioEnabled) {
+            if (!audioEnabled) {
                 return false;
             }
             if (muted) {
@@ -57,7 +58,7 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
             playbackRate,
             logLevel,
             includeAudio: shouldRenderAudio,
-            includeVideo: window.remotion_videoEnabled,
+            includeVideo: videoEnabled,
             isClientSideRendering: environment.isClientSideRendering,
             loop,
             audioStreamIndex,
@@ -131,8 +132,7 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 context.drawImage(imageBitmap, 0, 0);
                 imageBitmap.close();
             }
-            else if (window.remotion_videoEnabled) {
-                // In the case of https://discord.com/channels/809501355504959528/809501355504959531/1424400511070765086
+            else if (videoEnabled) {
                 // A video that only starts at time 0.033sec
                 // we shall not crash here but clear the canvas
                 const context = canvasRef.current?.getContext('2d', {
@@ -204,6 +204,8 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
         toneFrequency,
         trimAfterValue,
         trimBeforeValue,
+        audioEnabled,
+        videoEnabled,
     ]);
     const classNameValue = useMemo(() => {
         return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className]
@@ -218,7 +220,7 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
             if (!replaceWithOffthreadVideo.durationInSeconds) {
                 cancelRender(new Error(`Cannot render video ${src}: @remotion/media was unable to render, and fell back to <OffthreadVideo>. Also, "loop" was set, but <OffthreadVideo> does not support looping and @remotion/media could also not determine the duration of the video.`));
             }
-            return (_jsx(Loop, { layout: "none", durationInFrames: calculateMediaDuration({
+            return (_jsx(Loop, { layout: "none", durationInFrames: Internals.calculateMediaDuration({
                     trimAfter: trimAfterValue,
                     mediaDurationInFrames: replaceWithOffthreadVideo.durationInSeconds * fps,
                     playbackRate,

package/dist/video/video.js

@@ -27,6 +27,7 @@ const InnerVideo = ({ src, audioStreamIndex, className, delayRenderRetries, dela
     return (_jsx(VideoForPreview, { audioStreamIndex: audioStreamIndex ?? 0, className: className, name: name, logLevel: logLevel, loop: loop, loopVolumeCurveBehavior: loopVolumeCurveBehavior, muted: muted, onVideoFrame: onVideoFrame, playbackRate: playbackRate, src: src, style: style, volume: volume, showInTimeline: showInTimeline, trimAfter: trimAfterValue, trimBefore: trimBeforeValue, stack: stack ?? null, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps }));
 };
 export const Video = ({ src, audioStreamIndex, className, delayRenderRetries, delayRenderTimeoutInMilliseconds, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, logLevel, loop, loopVolumeCurveBehavior, muted, name, onVideoFrame, playbackRate, showInTimeline, style, trimAfter, trimBefore, volume, stack, toneFrequency, }) => {
-    return (_jsx(InnerVideo, { audioStreamIndex: audioStreamIndex ?? 0, className: className, delayRenderRetries: delayRenderRetries ?? null, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {}, logLevel: logLevel ?? window.remotion_logLevel, loop: loop ?? false, loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? 'repeat', muted: muted ?? false, name: name, onVideoFrame: onVideoFrame, playbackRate: playbackRate ?? 1, showInTimeline: showInTimeline ?? true, src: src, style: style ?? {}, trimAfter: trimAfter, trimBefore: trimBefore, volume: volume ?? 1, toneFrequency: toneFrequency ?? 1, stack: stack }));
+    return (_jsx(InnerVideo, { audioStreamIndex: audioStreamIndex ?? 0, className: className, delayRenderRetries: delayRenderRetries ?? null, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {}, logLevel: logLevel ??
+            (typeof window !== 'undefined' ? window.remotion_logLevel : 'info'), loop: loop ?? false, loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? 'repeat', muted: muted ?? false, name: name, onVideoFrame: onVideoFrame, playbackRate: playbackRate ?? 1, showInTimeline: showInTimeline ?? true, src: src, style: style ?? {}, trimAfter: trimAfter, trimBefore: trimBefore, volume: volume ?? 1, toneFrequency: toneFrequency ?? 1, stack: stack }));
 };
 Internals.addSequenceStackTraces(Video);

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

@@ -1,6 +1,8 @@
 import { extractFrameAndAudio } from '../extract-frame-and-audio';
 // Doesn't exist in studio
-if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
+if (typeof window !== 'undefined' &&
+    window.remotion_broadcastChannel &&
+    window.remotion_isMainTab) {
     window.remotion_broadcastChannel.addEventListener('message', async (event) => {
         const data = event.data;
         if (data.type === 'request') {

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

@@ -21,10 +21,11 @@ export declare const getSinks: (src: string) => Promise<{
     getDuration: () => Promise<number>;
 }>;
 export type GetSink = Awaited<ReturnType<typeof getSinks>>;
-export declare const getFramesSinceKeyframe: ({ packetSink, videoSampleSink, startPacket, logLevel, }: {
+export declare const getFramesSinceKeyframe: ({ packetSink, videoSampleSink, startPacket, logLevel, src, }: {
     packetSink: EncodedPacketSink;
     videoSampleSink: VideoSampleSink;
     startPacket: EncodedPacket;
     logLevel: LogLevel;
+    src: string;
 }) => Promise<import("./keyframe-bank").KeyframeBank>;
 export {};

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

@@ -82,7 +82,7 @@ export const getSinks = async (src) => {
         },
     };
 };
-export const getFramesSinceKeyframe = async ({ packetSink, videoSampleSink, startPacket, logLevel, }) => {
+export const getFramesSinceKeyframe = async ({ packetSink, videoSampleSink, startPacket, logLevel, src, }) => {
     const nextKeyPacket = await packetSink.getNextKeyPacket(startPacket, {
         verifyKeyPackets: true,
     });
@@ -92,6 +92,7 @@ export const getFramesSinceKeyframe = async ({ packetSink, videoSampleSink, star
         endTimestampInSeconds: nextKeyPacket ? nextKeyPacket.timestamp : Infinity,
         sampleIterator,
         logLevel,
+        src,
     });
     return keyframeBank;
 };

package/dist/video-extraction/keyframe-bank.d.ts

@@ -1,14 +1,16 @@
 import type { VideoSample } from 'mediabunny';
 import { type LogLevel } from 'remotion';
 export type KeyframeBank = {
+    src: string;
     startTimestampInSeconds: number;
     endTimestampInSeconds: number;
     getFrameFromTimestamp: (timestamp: number) => Promise<VideoSample | null>;
-    prepareForDeletion: (logLevel: LogLevel) => void;
-    deleteFramesBeforeTimestamp: ({ logLevel, src, timestampInSeconds, }: {
+    prepareForDeletion: (logLevel: LogLevel) => {
+        framesDeleted: number;
+    };
+    deleteFramesBeforeTimestamp: ({ logLevel, timestampInSeconds, }: {
         timestampInSeconds: number;
         logLevel: LogLevel;
-        src: string;
     }) => void;
     hasTimestampInSecond: (timestamp: number) => Promise<boolean>;
     addFrame: (frame: VideoSample) => void;
@@ -18,9 +20,10 @@ export type KeyframeBank = {
     };
     getLastUsed: () => number;
 };
-export declare const makeKeyframeBank: ({ startTimestampInSeconds, endTimestampInSeconds, sampleIterator, logLevel: parentLogLevel, }: {
+export declare const makeKeyframeBank: ({ startTimestampInSeconds, endTimestampInSeconds, sampleIterator, logLevel: parentLogLevel, src, }: {
     startTimestampInSeconds: number;
     endTimestampInSeconds: number;
     sampleIterator: AsyncGenerator<VideoSample, void, unknown>;
     logLevel: LogLevel;
+    src: string;
 }) => KeyframeBank;

package/dist/video-extraction/keyframe-bank.js

@@ -1,15 +1,39 @@
 import { Internals } from 'remotion';
+import { SAFE_BACK_WINDOW_IN_SECONDS } from '../caches';
 import { renderTimestampRange } from '../render-timestamp-range';
 // Round to only 4 digits, because WebM has a timescale of 1_000, e.g. framer.webm
 const roundTo4Digits = (timestamp) => {
     return Math.round(timestamp * 1000) / 1000;
 };
-export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSeconds, sampleIterator, logLevel: parentLogLevel, }) => {
+export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSeconds, sampleIterator, logLevel: parentLogLevel, src, }) => {
     Internals.Log.verbose({ logLevel: parentLogLevel, tag: '@remotion/media' }, `Creating keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
     const frames = {};
     const frameTimestamps = [];
     let lastUsed = Date.now();
     let allocationSize = 0;
+    const deleteFramesBeforeTimestamp = ({ logLevel, timestampInSeconds, }) => {
+        const deletedTimestamps = [];
+        for (const frameTimestamp of frameTimestamps.slice()) {
+            const isLast = frameTimestamp === frameTimestamps[frameTimestamps.length - 1];
+            // Don't delete the last frame, since it may be the last one in the video!
+            if (isLast) {
+                continue;
+            }
+            if (frameTimestamp < timestampInSeconds) {
+                if (!frames[frameTimestamp]) {
+                    continue;
+                }
+                allocationSize -= frames[frameTimestamp].allocationSize();
+                frameTimestamps.splice(frameTimestamps.indexOf(frameTimestamp), 1);
+                frames[frameTimestamp].close();
+                delete frames[frameTimestamp];
+                deletedTimestamps.push(frameTimestamp);
+            }
+        }
+        if (deletedTimestamps.length > 0) {
+            Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Deleted ${deletedTimestamps.length} frame${deletedTimestamps.length === 1 ? '' : 's'} ${renderTimestampRange(deletedTimestamps)} for src ${src} because it is lower than ${timestampInSeconds}. Remaining: ${renderTimestampRange(frameTimestamps)}`);
+        }
+    };
     const hasDecodedEnoughForTimestamp = (timestamp) => {
         const lastFrameTimestamp = frameTimestamps[frameTimestamps.length - 1];
         if (!lastFrameTimestamp) {
@@ -29,8 +53,8 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
         allocationSize += frame.allocationSize();
         lastUsed = Date.now();
     };
-    const ensureEnoughFramesForTimestamp = async (timestamp) => {
-        while (!hasDecodedEnoughForTimestamp(timestamp)) {
+    const ensureEnoughFramesForTimestamp = async (timestampInSeconds) => {
+        while (!hasDecodedEnoughForTimestamp(timestampInSeconds)) {
             const sample = await sampleIterator.next();
             if (sample.value) {
                 addFrame(sample.value);
@@ -38,6 +62,10 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
             if (sample.done) {
                 break;
             }
+            deleteFramesBeforeTimestamp({
+                logLevel: parentLogLevel,
+                timestampInSeconds: timestampInSeconds - SAFE_BACK_WINDOW_IN_SECONDS,
+            });
         }
         lastUsed = Date.now();
     };
@@ -77,6 +105,7 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
             }
             return null;
         });
+        let framesDeleted = 0;
         for (const frameTimestamp of frameTimestamps) {
             if (!frames[frameTimestamp]) {
                 continue;
@@ -84,31 +113,10 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
             allocationSize -= frames[frameTimestamp].allocationSize();
             frames[frameTimestamp].close();
             delete frames[frameTimestamp];
+            framesDeleted++;
         }
         frameTimestamps.length = 0;
-    };
-    const deleteFramesBeforeTimestamp = ({ logLevel, src, timestampInSeconds, }) => {
-        const deletedTimestamps = [];
-        for (const frameTimestamp of frameTimestamps.slice()) {
-            const isLast = frameTimestamp === frameTimestamps[frameTimestamps.length - 1];
-            // Don't delete the last frame, since it may be the last one in the video!
-            if (isLast) {
-                continue;
-            }
-            if (frameTimestamp < timestampInSeconds) {
-                if (!frames[frameTimestamp]) {
-                    continue;
-                }
-                allocationSize -= frames[frameTimestamp].allocationSize();
-                frameTimestamps.splice(frameTimestamps.indexOf(frameTimestamp), 1);
-                frames[frameTimestamp].close();
-                delete frames[frameTimestamp];
-                deletedTimestamps.push(frameTimestamp);
-            }
-        }
-        if (deletedTimestamps.length > 0) {
-            Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Deleted ${deletedTimestamps.length} frame${deletedTimestamps.length === 1 ? '' : 's'} ${renderTimestampRange(deletedTimestamps)} for src ${src} because it is lower than ${timestampInSeconds}. Remaining: ${renderTimestampRange(frameTimestamps)}`);
-        }
+        return { framesDeleted };
     };
     const getOpenFrameCount = () => {
         return {
@@ -127,13 +135,11 @@ export const makeKeyframeBank = ({ startTimestampInSeconds, endTimestampInSecond
             queue = queue.then(() => getFrameFromTimestamp(timestamp));
             return queue;
         },
-        prepareForDeletion: (logLevel) => {
-            queue = queue.then(() => prepareForDeletion(logLevel));
-            return queue;
-        },
+        prepareForDeletion,
         hasTimestampInSecond,
         addFrame,
         deleteFramesBeforeTimestamp,
+        src,
         getOpenFrameCount,
         getLastUsed,
     };

package/dist/video-extraction/keyframe-manager.js

@@ -46,6 +46,7 @@ export const makeKeyframeManager = () => {
     const getTheKeyframeBankMostInThePast = async () => {
         let mostInThePast = null;
         let mostInThePastBank = null;
+        let numberOfBanks = 0;
         for (const src in sources) {
             for (const b in sources[src]) {
                 const bank = await sources[src][b];
@@ -54,26 +55,35 @@ export const makeKeyframeManager = () => {
                     mostInThePast = lastUsed;
                     mostInThePastBank = { src, bank };
                 }
+                numberOfBanks++;
             }
         }
         if (!mostInThePastBank) {
             throw new Error('No keyframe bank found');
         }
-        return mostInThePastBank;
+        return { mostInThePastBank, numberOfBanks };
     };
     const deleteOldestKeyframeBank = async (logLevel) => {
-        const { bank: mostInThePastBank, src: mostInThePastSrc } = await getTheKeyframeBankMostInThePast();
+        const { mostInThePastBank: { bank: mostInThePastBank, src: mostInThePastSrc }, numberOfBanks, } = await getTheKeyframeBankMostInThePast();
+        if (numberOfBanks < 2) {
+            return { finish: true };
+        }
         if (mostInThePastBank) {
-            await mostInThePastBank.prepareForDeletion(logLevel);
+            const { framesDeleted } = mostInThePastBank.prepareForDeletion(logLevel);
             delete sources[mostInThePastSrc][mostInThePastBank.startTimestampInSeconds];
-            Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Deleted frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
+            Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Deleted ${framesDeleted} frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
         }
+        return { finish: false };
     };
     const ensureToStayUnderMaxCacheSize = async (logLevel) => {
         let cacheStats = await getTotalCacheStats();
         const maxCacheSize = getMaxVideoCacheSize(logLevel);
         while (cacheStats.totalSize > maxCacheSize) {
-            await deleteOldestKeyframeBank(logLevel);
+            const { finish } = await deleteOldestKeyframeBank(logLevel);
+            if (finish) {
+                break;
+            }
+            Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, 'Deleted oldest keyframe bank to stay under max cache size', (cacheStats.totalSize / 1024 / 1024).toFixed(1), 'out of', (maxCacheSize / 1024 / 1024).toFixed(1));
             cacheStats = await getTotalCacheStats();
         }
     };
@@ -87,7 +97,7 @@ export const makeKeyframeManager = () => {
             const bank = await sources[src][startTimeInSeconds];
             const { endTimestampInSeconds, startTimestampInSeconds } = bank;
             if (endTimestampInSeconds < threshold) {
-                await bank.prepareForDeletion(logLevel);
+                bank.prepareForDeletion(logLevel);
                 Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `[Video] Cleared frames for src ${src} from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
                 delete sources[src][startTimeInSeconds];
             }
@@ -95,7 +105,6 @@ export const makeKeyframeManager = () => {
                 bank.deleteFramesBeforeTimestamp({
                     timestampInSeconds: threshold,
                     logLevel,
-                    src,
                 });
             }
         }
@@ -124,6 +133,7 @@ export const makeKeyframeManager = () => {
                 videoSampleSink,
                 startPacket,
                 logLevel,
+                src,
             });
             addKeyframeBank({ src, bank: newKeyframeBank, startTimestampInSeconds });
             return newKeyframeBank;
@@ -143,6 +153,7 @@ export const makeKeyframeManager = () => {
             videoSampleSink,
             startPacket,
             logLevel,
+            src,
         });
         addKeyframeBank({ src, bank: replacementKeybank, startTimestampInSeconds });
         return replacementKeybank;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.362",
+	"version": "4.0.363",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -22,7 +22,7 @@
 	},
 	"dependencies": {
 		"mediabunny": "1.23.0",
-		"remotion": "4.0.362",
+		"remotion": "4.0.363",
 		"webdriverio": "9.19.2"
 	},
 	"peerDependencies": {
@@ -30,7 +30,7 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.362",
+		"@remotion/eslint-config-internal": "4.0.363",
 		"@vitest/browser": "^3.2.4",
 		"eslint": "9.19.0",
 		"react": "19.0.0",