@remotion/media 4.0.507 → 4.0.509

package/dist/esm/index.mjs

@@ -40,7 +40,7 @@ var __callDispose = (stack, error, hasError) => {
 import { useMemo as useMemo3, useState as useState3 } from "react";
 import {
   Freeze,
-  Internals as Internals17,
+  Internals as Internals18,
   Interactive,
   Sequence,
   useRemotionEnvironment as useRemotionEnvironment2,
@@ -78,7 +78,7 @@ var getLoopDisplay = ({
 // src/audio/audio-for-preview.tsx
 import { useContext as useContext2, useEffect, useMemo, useRef, useState } from "react";
 import {
-  Internals as Internals7,
+  Internals as Internals8,
   Audio as RemotionAudio,
   useBufferState,
   useCurrentFrame,
@@ -137,7 +137,7 @@ var calculateEndTime = ({
 };
 
 // src/media-player.ts
-import { Internals as Internals5 } from "remotion";
+import { Internals as Internals6 } from "remotion";
 
 // src/audio-iterator-manager.ts
 import {
@@ -868,6 +868,51 @@ var getDurationOrCompute = async (input) => {
 // src/get-shared-input.ts
 import { ALL_FORMATS, Input, UrlSource } from "mediabunny";
 
+// src/max-cache-size.ts
+import { cancelRender, Internals as Internals4 } from "remotion";
+var getUncachedMaxCacheSize = (logLevel) => {
+  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}`));
+    }
+    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}`));
+    }
+    Internals4.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 (typeof window !== "undefined" && window.remotion_initialMemoryAvailable !== undefined && window.remotion_initialMemoryAvailable !== null) {
+    const value = window.remotion_initialMemoryAvailable / 2;
+    if (value < 500 * 1024 * 1024) {
+      Internals4.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!)`);
+      return 500 * 1024 * 1024;
+    }
+    if (value > 20000 * 1024 * 1024) {
+      Internals4.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on maximum value of 20GB (which is less than half of the available system memory)`);
+      return 20000 * 1024 * 1024;
+    }
+    Internals4.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using 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;
+};
+var MIN_SOURCE_CACHE_SIZE = 8 * 1024 * 1024;
+var MAX_SOURCE_CACHE_SIZE = 64 * 1024 * 1024;
+var getMaxSourceCacheSizeFromBudget = (budget) => {
+  return Math.min(MAX_SOURCE_CACHE_SIZE, Math.max(MIN_SOURCE_CACHE_SIZE, Math.floor(budget / 16)));
+};
+var getMaxSourceCacheSize = (logLevel) => {
+  return getMaxSourceCacheSizeFromBudget(getMaxVideoCacheSize(logLevel));
+};
+
 // src/request-init.ts
 var normalizeMediaHeaders = (headers) => {
   if (!headers) {
@@ -950,7 +995,8 @@ var getSharedInputCacheKey = ({
 var acquireSharedInput = ({
   src,
   credentials,
-  requestInit
+  requestInit,
+  logLevel
 }) => {
   const normalizedRequestInit = normalizeMediaRequestInit(requestInit);
   const cacheKey = getSharedInputCacheKey({
@@ -968,7 +1014,10 @@ var acquireSharedInput = ({
     requestInit: normalizedRequestInit
   });
   const input = new Input({
-    source: new UrlSource(src, resolvedRequestInit ? { requestInit: resolvedRequestInit } : undefined),
+    source: new UrlSource(src, {
+      maxCacheSize: getMaxSourceCacheSize(logLevel),
+      ...resolvedRequestInit ? { requestInit: resolvedRequestInit } : undefined
+    }),
     formats: ALL_FORMATS
   });
   sharedInputs[cacheKey] = { input, refCount: 1 };
@@ -1107,7 +1156,7 @@ class PremountAwareDelayPlayback {
 
 // src/video-iterator-manager.ts
 import { CanvasSink } from "mediabunny";
-import { Internals as Internals4 } from "remotion";
+import { Internals as Internals5 } from "remotion";
 
 // src/helpers/round-to-4-digits.ts
 var roundTo4Digits = (timestamp) => {
@@ -1517,7 +1566,7 @@ var createVideoIterator = async (timeToSeek, cache) => {
 };
 
 // src/video-iterator-manager.ts
-var { runEffectChain } = Internals4;
+var { runEffectChain } = Internals5;
 var isSequentialMediaTimeAdvance = ({
   previousTime,
   newTime,
@@ -1596,7 +1645,7 @@ var videoIteratorManager = async ({
     if (callback) {
       callback(frame.canvas);
     }
-    Internals4.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
+    Internals5.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
   };
   const redrawCurrentFrame = async () => {
     if (!lastDrawnFrame) {
@@ -1608,7 +1657,7 @@ var videoIteratorManager = async ({
     if (callback) {
       callback(lastDrawnFrame.canvas);
     }
-    Internals4.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Redrew frame ${lastDrawnFrame.timestamp.toFixed(3)}s with updated effects`);
+    Internals5.Log.trace({ logLevel, tag: "@remotion/media" }, `[MediaPlayer] Redrew frame ${lastDrawnFrame.timestamp.toFixed(3)}s with updated effects`);
   };
   const startVideoIterator = async (timeToSeek, nonce) => {
     let __stack = [];
@@ -1786,7 +1835,8 @@ class MediaPlayer {
     const { input, cacheKey } = acquireSharedInput({
       src: this.src,
       credentials,
-      requestInit
+      requestInit,
+      logLevel
     });
     this.input = input;
     this.inputCacheKey = cacheKey;
@@ -1795,8 +1845,7 @@ class MediaPlayer {
     this.getEffectChainState = getEffectChainState;
     if (canvas) {
       const context = canvas.getContext("2d", {
-        alpha: true,
-        desynchronized: true
+        alpha: true
       });
       if (!context) {
         throw new Error("Could not get 2D context from canvas");
@@ -1858,7 +1907,7 @@ class MediaPlayer {
           if (isNetworkError(err)) {
             throw error;
           }
-          Internals5.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Failed to recognize format for ${this.src}`, error);
+          Internals6.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Failed to recognize format for ${this.src}`, error);
           return { type: "unknown-container-format" };
         }
         const [durationInSeconds, videoTrack, audioTracks] = await Promise.all([
@@ -1968,16 +2017,16 @@ class MediaPlayer {
           if (this.isDisposalError()) {
             return { type: "disposed" };
           }
-          Internals5.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start audio and video iterators", error);
+          Internals6.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start audio and video iterators", error);
         }
         return { type: "success", durationInSeconds };
       } catch (error) {
         const err = error;
         if (isNetworkError(err)) {
-          Internals5.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Network/CORS error for ${this.src}`, err);
+          Internals6.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Network/CORS error for ${this.src}`, err);
           return { type: "network-error" };
         }
-        Internals5.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to initialize", error);
+        Internals6.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to initialize", error);
         throw error;
       }
     } catch (_catch) {
@@ -2273,7 +2322,7 @@ var callOnErrorAndResolve = ({
 
 // src/use-common-effects.ts
 import { useContext, useLayoutEffect } from "react";
-import { Internals as Internals6 } from "remotion";
+import { Internals as Internals7 } from "remotion";
 var useCommonEffects = ({
   mediaPlayerRef,
   mediaPlayerReady,
@@ -2297,7 +2346,7 @@ var useCommonEffects = ({
   logLevel,
   label
 }) => {
-  const sharedAudioContext = useContext(Internals6.SharedAudioContext);
+  const sharedAudioContext = useContext(Internals7.SharedAudioContext);
   useLayoutEffect(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer)
@@ -2415,7 +2464,7 @@ var useCommonEffects = ({
     if (!mediaPlayer || !mediaPlayerReady)
       return;
     mediaPlayer.seekTo(currentTime).catch(() => {});
-    Internals6.Log.trace({ logLevel, tag: "@remotion/media" }, `[${label}] Updating target time to ${currentTime.toFixed(3)}s`);
+    Internals7.Log.trace({ logLevel, tag: "@remotion/media" }, `[${label}] Updating target time to ${currentTime.toFixed(3)}s`);
   }, [currentTime, logLevel, mediaPlayerReady, label, mediaPlayerRef]);
 };
 
@@ -2432,7 +2481,7 @@ var {
   warnAboutTooHighVolume,
   usePreload,
   SequenceContext
-} = Internals7;
+} = Internals8;
 var AudioForPreviewAssertedShowing = ({
   src,
   playbackRate,
@@ -2465,7 +2514,7 @@ var AudioForPreviewAssertedShowing = ({
   const [mediaPlayerReady, setMediaPlayerReady] = useState(false);
   const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState(false);
   const [playing] = Timeline.usePlayingState();
-  const { playbackRate: globalPlaybackRate } = Internals7.usePlaybackRate();
+  const { playbackRate: globalPlaybackRate } = Internals8.usePlaybackRate();
   const sharedAudioContext = useContext2(SharedAudioContext);
   const buffer = useBufferState();
   const [playerMuted] = usePlayerMutedState();
@@ -2491,12 +2540,12 @@ var AudioForPreviewAssertedShowing = ({
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
   const sequenceOffset = (parentSequence?.absoluteFrom ?? 0) / videoConfig.fps;
-  const bufferingContext = useContext2(Internals7.BufferingContextReact);
+  const bufferingContext = useContext2(Internals8.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const effectiveMuted = muted || playerMuted || userPreferredVolume <= 0;
-  const isPlayerBuffering = Internals7.useIsPlayerBuffering(bufferingContext);
+  const isPlayerBuffering = Internals8.useIsPlayerBuffering(bufferingContext);
   const initialPlaying = useRef(playing && !isPlayerBuffering);
   const initialIsPremounting = useRef(isPremounting);
   const initialIsPostmounting = useRef(isPostmounting);
@@ -2592,7 +2641,7 @@ var AudioForPreviewAssertedShowing = ({
           if (action === "fail") {
             throw errorToUse;
           } else {
-            Internals7.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
+            Internals8.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
             setShouldFallbackToNativeAudio(true);
           }
         };
@@ -2618,7 +2667,7 @@ var AudioForPreviewAssertedShowing = ({
         if (result.type === "success") {
           setMediaPlayerReady(true);
           setMediaDurationInSeconds(result.durationInSeconds);
-          Internals7.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] MediaPlayer initialized successfully`);
+          Internals8.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] MediaPlayer initialized successfully`);
         }
       }).catch((error) => {
         const [action, errorToUse] = callOnErrorAndResolve({
@@ -2631,7 +2680,7 @@ var AudioForPreviewAssertedShowing = ({
         if (action === "fail") {
           throw errorToUse;
         } else {
-          Internals7.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] Failed to initialize MediaPlayer", error);
+          Internals8.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] Failed to initialize MediaPlayer", error);
           setShouldFallbackToNativeAudio(true);
         }
       });
@@ -2646,12 +2695,12 @@ var AudioForPreviewAssertedShowing = ({
       if (action === "fail") {
         throw errorToUse;
       }
-      Internals7.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] MediaPlayer initialization failed", errorToUse);
+      Internals8.Log.error({ logLevel, tag: "@remotion/media" }, "[AudioForPreview] MediaPlayer initialization failed", errorToUse);
       setShouldFallbackToNativeAudio(true);
     }
     return () => {
       if (mediaPlayerRef.current) {
-        Internals7.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] Disposing MediaPlayer`);
+        Internals8.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] Disposing MediaPlayer`);
         mediaPlayerRef.current.dispose();
         mediaPlayerRef.current = null;
       }
@@ -2719,7 +2768,7 @@ var AudioForPreview = ({
   style
 }) => {
   const preloadedSrc = usePreload(src);
-  const defaultLogLevel = Internals7.useLogLevel();
+  const defaultLogLevel = Internals8.useLogLevel();
   const frame = useCurrentFrame();
   const videoConfig = useVideoConfig();
   const currentTime = frame / videoConfig.fps;
@@ -2780,7 +2829,7 @@ import { useContext as useContext3, useLayoutEffect as useLayoutEffect2, useMemo
 import {
   cancelRender as cancelRender2,
   Html5Audio,
-  Internals as Internals16,
+  Internals as Internals17,
   random,
   useCurrentFrame as useCurrentFrame2,
   useDelayRender,
@@ -2789,15 +2838,42 @@ import {
 
 // src/caches.ts
 import React2 from "react";
-import { cancelRender, Internals as Internals14 } from "remotion";
+import { Internals as Internals15 } from "remotion";
 
 // src/audio-extraction/audio-manager.ts
-import { Internals as Internals9 } from "remotion";
+import { Internals as Internals10 } from "remotion";
+
+// src/serialized-queue.ts
+var makeSerializedQueue = () => {
+  let tail = Promise.resolve(undefined);
+  return (fn) => {
+    const result = tail.then(() => fn());
+    tail = result.then(() => {
+      return;
+    }, () => {
+      return;
+    });
+    return result;
+  };
+};
 
 // src/audio-extraction/audio-iterator.ts
-import { Internals as Internals8 } from "remotion";
+import { Internals as Internals9 } from "remotion";
 
 // src/audio-extraction/audio-cache.ts
+var BYTES_PER_SAMPLE = {
+  u8: 1,
+  s16: 2,
+  s32: 4,
+  f32: 4,
+  "u8-planar": 1,
+  "s16-planar": 2,
+  "s32-planar": 4,
+  "f32-planar": 4
+};
+var getAudioSampleByteSize = (sample) => {
+  return sample.numberOfFrames * sample.numberOfChannels * BYTES_PER_SAMPLE[sample.format];
+};
 var makeAudioCache = () => {
   const timestamps = [];
   const samples = {};
@@ -2844,6 +2920,13 @@ var makeAudioCache = () => {
   const getOpenTimestamps = () => {
     return timestamps;
   };
+  const getTotalSize = () => {
+    let total = 0;
+    for (const timestamp of timestamps) {
+      total += getAudioSampleByteSize(samples[timestamp]);
+    }
+    return total;
+  };
   const getOldestTimestamp = () => {
     return timestamps[0];
   };
@@ -2861,7 +2944,8 @@ var makeAudioCache = () => {
     getSamples,
     getOldestTimestamp,
     getNewestTimestamp,
-    getOpenTimestamps
+    getOpenTimestamps,
+    getTotalSize
   };
 };
 
@@ -2874,7 +2958,7 @@ var warnAboutMatroskaOnce = (src, logLevel) => {
     return;
   }
   warned[src] = true;
-  Internals8.Log.warn({ logLevel, tag: "@remotion/media" }, `Audio from ${src} will need to be read from the beginning. https://www.remotion.dev/docs/media/support#matroska-limitation`);
+  Internals9.Log.warn({ logLevel, tag: "@remotion/media" }, `Audio from ${src} will need to be read from the beginning. https://www.remotion.dev/docs/media/support#matroska-limitation`);
 };
 var makeAudioIterator2 = ({
   audioSampleSink,
@@ -2942,13 +3026,13 @@ var makeAudioIterator2 = ({
     if (openTimestamps.length > 0) {
       const first = openTimestamps[0];
       const last = openTimestamps[openTimestamps.length - 1];
-      Internals8.Log.verbose({ logLevel, tag: "@remotion/media" }, "Open audio samples for src", src, `${first.toFixed(3)}...${last.toFixed(3)}`);
+      Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, "Open audio samples for src", src, `${first.toFixed(3)}...${last.toFixed(3)}`);
     }
   };
   const getCacheStats = () => {
     return {
       count: cache.getOpenTimestamps().length,
-      size: cache.getOpenTimestamps().reduce((acc, t) => acc + t, 0)
+      size: cache.getTotalSize()
     };
   };
   const canSatisfyRequestedTime = (timestamp) => {
@@ -3042,7 +3126,7 @@ var makeAudioManager = ({
       if (seenKeys.has(key)) {
         iterator.prepareForDeletion();
         iterators.splice(iterators.indexOf(iterator), 1);
-        Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted duplicate iterator for ${iterator.src}`);
+        Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted duplicate iterator for ${iterator.src}`);
       }
       seenKeys.add(key);
     }
@@ -3066,7 +3150,7 @@ var makeAudioManager = ({
       attempts++;
     }
     if ((await getTotalCacheStats()).totalSize > maxCacheSize && attempts >= maxAttempts) {
-      Internals9.Log.warn({ logLevel, tag: "@remotion/media" }, `Audio cache: Exceeded max cache size after ${maxAttempts} attempts. Still ${(await getTotalCacheStats()).totalSize} bytes used, target was ${maxCacheSize} bytes.`);
+      Internals10.Log.warn({ logLevel, tag: "@remotion/media" }, `Audio cache: Exceeded max cache size after ${maxAttempts} attempts. Still ${(await getTotalCacheStats()).totalSize} bytes used, target was ${maxCacheSize} bytes.`);
     }
     for (const iterator of iterators) {
       if (iterator.src === src && await iterator.waitForCompletion() && iterator.canSatisfyRequestedTime(timeInSeconds)) {
@@ -3121,7 +3205,7 @@ var makeAudioManager = ({
     disposed = true;
     clearAll();
   };
-  let queue = Promise.resolve(undefined);
+  const enqueue = makeSerializedQueue();
   return {
     getIterator: ({
       src,
@@ -3132,7 +3216,7 @@ var makeAudioManager = ({
       logLevel,
       maxCacheSize
     }) => {
-      queue = queue.then(() => getIterator({
+      return enqueue(() => getIterator({
         src,
         timeInSeconds,
         audioSampleSink,
@@ -3141,7 +3225,6 @@ var makeAudioManager = ({
         logLevel,
         maxCacheSize
       }));
-      return queue;
     },
     getCacheStats,
     getIteratorMostInThePast,
@@ -3153,7 +3236,7 @@ var makeAudioManager = ({
 };
 
 // src/get-sink.ts
-import { Internals as Internals11 } from "remotion";
+import { Internals as Internals12 } from "remotion";
 
 // src/video-extraction/get-frames-since-keyframe.ts
 import {
@@ -3166,7 +3249,7 @@ import {
   VideoSampleSink,
   WEBM
 } from "mediabunny";
-import { Internals as Internals10 } from "remotion";
+import { Internals as Internals11 } from "remotion";
 
 // src/browser-can-use-webgl2.ts
 var browserCanUseWebGl2 = null;
@@ -3224,6 +3307,7 @@ var makeSinks = (src, logLevel, credentials, requestInit) => {
     formats: ALL_FORMATS2,
     source: new UrlSource2(src, {
       getRetryDelay,
+      maxCacheSize: getMaxSourceCacheSize(logLevel),
       ...resolvedRequestInit ? { requestInit: resolvedRequestInit } : undefined
     })
   });
@@ -3261,7 +3345,7 @@ var makeSinks = (src, logLevel, credentials, requestInit) => {
       });
       const hasAlpha = startPacket?.sideData.alpha;
       if (hasAlpha && !canBrowserUseWebGl2()) {
-        Internals10.Log.warn({ logLevel, tag: "@remotion/media" }, `WebGL2 is not available, using the non-fast CPU path to decode alpha for ${src}.`);
+        Internals11.Log.warn({ logLevel, tag: "@remotion/media" }, `WebGL2 is not available, using the non-fast CPU path to decode alpha for ${src}.`);
       }
       return {
         sampleSink
@@ -3354,7 +3438,7 @@ var makeSinkManager = () => {
       });
       let promise = sinkPromises[cacheKey];
       if (!promise) {
-        Internals11.Log.verbose({
+        Internals12.Log.verbose({
           logLevel,
           tag: "@remotion/media"
         }, `Sink for ${src} was not found, creating new sink`);
@@ -3389,7 +3473,7 @@ var makeSinkManager = () => {
 };
 
 // src/video-extraction/keyframe-manager.ts
-import { Internals as Internals13 } from "remotion";
+import { Internals as Internals14 } from "remotion";
 
 // src/render-timestamp-range.ts
 var renderTimestampRange = (timestamps) => {
@@ -3403,7 +3487,7 @@ var renderTimestampRange = (timestamps) => {
 };
 
 // src/video-extraction/keyframe-bank.ts
-import { Internals as Internals12 } from "remotion";
+import { Internals as Internals13 } from "remotion";
 
 // src/video-extraction/get-allocation-size.ts
 var BYTES_PER_PIXEL_FOR_OPAQUE_FRAME = 3;
@@ -3428,6 +3512,7 @@ var makeKeyframeBank = async ({
   let hasReachedEndOfVideo = false;
   let lastUsed = Date.now();
   let allocationSize = 0;
+  let pendingOperations = 0;
   const getMeasuredDurationOfFrame = (timestamp) => {
     const index = frameTimestamps.indexOf(timestamp);
     if (index === -1) {
@@ -3483,7 +3568,7 @@ var makeKeyframeBank = async ({
       }
     }
     if (deletedTimestamps.length > 0) {
-      Internals12.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)}`);
+      Internals13.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) => {
@@ -3512,7 +3597,7 @@ var makeKeyframeBank = async ({
     frameTimestamps.push(frame.timestamp);
     allocationSize += getAllocationSize(frame);
     lastUsed = Date.now();
-    Internals12.Log.trace({ logLevel, tag: "@remotion/media" }, `Added frame at ${frame.timestamp}sec to bank`);
+    Internals13.Log.trace({ logLevel, tag: "@remotion/media" }, `Added frame at ${frame.timestamp}sec to bank`);
   };
   const ensureEnoughFramesForTimestamp = async (timestampInSeconds, logLevel, fps) => {
     while (!hasDecodedEnoughForTimestamp(timestampInSeconds)) {
@@ -3561,13 +3646,13 @@ var makeKeyframeBank = async ({
   const getLastUsed = () => {
     return lastUsed;
   };
-  let queue = Promise.resolve(undefined);
+  const enqueue = makeSerializedQueue();
   const firstFrame = await sampleIterator.next();
   if (!firstFrame.value) {
     throw new Error("No first frame found");
   }
   const startTimestampInSeconds = firstFrame.value.timestamp;
-  Internals12.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec`);
+  Internals13.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec`);
   addFrame(firstFrame.value, parentLogLevel);
   const getRangeOfTimestamps = () => {
     if (frameTimestamps.length === 0) {
@@ -3584,7 +3669,7 @@ var makeKeyframeBank = async ({
   const prepareForDeletion = (logLevel, reason) => {
     const range = getRangeOfTimestamps();
     if (range) {
-      Internals12.Log.verbose({ logLevel, tag: "@remotion/media" }, `Preparing for deletion (${reason}) of keyframe bank from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec`);
+      Internals13.Log.verbose({ logLevel, tag: "@remotion/media" }, `Preparing for deletion (${reason}) of keyframe bank from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec`);
     }
     let framesDeleted = 0;
     for (const frameTimestamp of frameTimestamps.slice()) {
@@ -3625,19 +3710,24 @@ var makeKeyframeBank = async ({
   };
   const keyframeBank = {
     getFrameFromTimestamp: (timestamp, fps) => {
-      queue = queue.then(() => getFrameFromTimestamp(timestamp, fps));
-      return queue;
+      pendingOperations++;
+      return enqueue(() => getFrameFromTimestamp(timestamp, fps)).finally(() => {
+        pendingOperations--;
+      });
     },
     prepareForDeletion,
     hasTimestampInSecond: (timestamp, fps) => {
-      queue = queue.then(() => hasTimestampInSecond(timestamp, fps));
-      return queue;
+      pendingOperations++;
+      return enqueue(() => hasTimestampInSecond(timestamp, fps)).finally(() => {
+        pendingOperations--;
+      });
     },
     addFrame,
     deleteFramesBeforeTimestamp,
     src,
     getOpenFrameCount,
     getLastUsed,
+    isBusy: () => pendingOperations > 0,
     canSatisfyTimestamp,
     getRangeOfTimestamps
   };
@@ -3645,11 +3735,14 @@ var makeKeyframeBank = async ({
 };
 
 // src/video-extraction/keyframe-manager.ts
+var RECENTLY_USED_REQUEST_COUNT = 50;
 var makeKeyframeManager = ({
   getTotalCacheStats
 }) => {
   let sources = {};
   let disposed = false;
+  let requestCountForSrc = {};
+  const lastRequestForBank = new WeakMap;
   const addKeyframeBank = ({
     src,
     bank,
@@ -3674,10 +3767,10 @@ var makeKeyframeManager = ({
         if (size === 0) {
           continue;
         }
-        Internals13.Log.verbose({ logLevel, tag: "@remotion/media" }, `Open frames for src ${src}: ${renderTimestampRange(timestamps)}`);
+        Internals14.Log.verbose({ logLevel, tag: "@remotion/media" }, `Open frames for src ${src}: ${renderTimestampRange(timestamps)}`);
       }
     }
-    Internals13.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
+    Internals14.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
   };
   const getCacheStats = () => {
     let count = 0;
@@ -3700,39 +3793,34 @@ var makeKeyframeManager = ({
     let numberOfBanks = 0;
     for (const src in sources) {
       for (const bank of sources[src]) {
+        numberOfBanks++;
+        if (bank.isBusy()) {
+          continue;
+        }
         const index = sources[src].indexOf(bank);
         const lastUsed = bank.getLastUsed();
         if (mostInThePast === null || lastUsed < mostInThePast) {
           mostInThePast = lastUsed;
           mostInThePastBank = { src, bank, index };
         }
-        numberOfBanks++;
       }
     }
     if (!mostInThePastBank) {
-      throw new Error("No keyframe bank found");
+      return { mostInThePastBank: null, numberOfBanks };
     }
     return { mostInThePastBank, numberOfBanks };
   };
   const deleteOldestKeyframeBank = (logLevel) => {
-    const {
-      mostInThePastBank: {
-        bank: mostInThePastBank,
-        src: mostInThePastSrc,
-        index: mostInThePastIndex
-      },
-      numberOfBanks
-    } = getTheKeyframeBankMostInThePast();
-    if (numberOfBanks < 2) {
+    const { mostInThePastBank, numberOfBanks } = getTheKeyframeBankMostInThePast();
+    if (numberOfBanks < 2 || mostInThePastBank === null) {
       return { finish: true };
     }
-    if (mostInThePastBank) {
-      const range = mostInThePastBank.getRangeOfTimestamps();
-      const { framesDeleted } = mostInThePastBank.prepareForDeletion(logLevel, "deleted oldest keyframe bank to stay under max cache size");
-      sources[mostInThePastSrc].splice(mostInThePastIndex, 1);
-      if (range) {
-        Internals13.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${framesDeleted} frames for src ${mostInThePastSrc} from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec to free up memory.`);
-      }
+    const { bank, src, index } = mostInThePastBank;
+    const range = bank.getRangeOfTimestamps();
+    const { framesDeleted } = bank.prepareForDeletion(logLevel, "deleted oldest keyframe bank to stay under max cache size");
+    sources[src].splice(index, 1);
+    if (range) {
+      Internals14.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${framesDeleted} frames for src ${src} from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec to free up memory.`);
     }
     return { finish: false };
   };
@@ -3745,12 +3833,12 @@ var makeKeyframeManager = ({
       if (finish) {
         break;
       }
-      Internals13.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));
+      Internals14.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 = getTotalCacheStats();
       attempts++;
     }
     if (cacheStats.totalSize > maxCacheSize && attempts >= maxAttempts) {
-      Internals13.Log.warn({ logLevel, tag: "@remotion/media" }, `Exceeded max cache size after ${maxAttempts} attempts. Remaining cache size: ${(cacheStats.totalSize / 1024 / 1024).toFixed(1)} MB, target was ${(maxCacheSize / 1024 / 1024).toFixed(1)} MB.`);
+      Internals14.Log.warn({ logLevel, tag: "@remotion/media" }, `Exceeded max cache size after ${maxAttempts} attempts. Remaining cache size: ${(cacheStats.totalSize / 1024 / 1024).toFixed(1)} MB, target was ${(maxCacheSize / 1024 / 1024).toFixed(1)} MB.`);
     }
   };
   const clearKeyframeBanksBeforeTime = ({
@@ -3764,14 +3852,22 @@ var makeKeyframeManager = ({
       return;
     }
     const banks = sources[src];
+    const currentRequest = requestCountForSrc[src] ?? 0;
     for (const bank of banks) {
+      if (bank.isBusy()) {
+        continue;
+      }
       const range = bank.getRangeOfTimestamps();
       if (!range) {
         continue;
       }
+      const lastRequest = lastRequestForBank.get(bank);
+      if (lastRequest !== undefined && currentRequest - lastRequest < RECENTLY_USED_REQUEST_COUNT) {
+        continue;
+      }
       if (range.lastTimestamp < threshold) {
         bank.prepareForDeletion(logLevel, "cleared before threshold " + threshold);
-        Internals13.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${range.firstTimestamp}sec to ${range.lastTimestamp}sec`);
+        Internals14.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${range.firstTimestamp}sec to ${range.lastTimestamp}sec`);
         const bankIndex = banks.indexOf(bank);
         delete sources[src][bankIndex];
       } else {
@@ -3793,7 +3889,7 @@ var makeKeyframeManager = ({
     const existingBanks = sources[src] ?? [];
     const existingBank = existingBanks?.find((bank) => bank.canSatisfyTimestamp(timestamp));
     if (!existingBank) {
-      Internals13.Log.trace({ logLevel, tag: "@remotion/media" }, `Creating new keyframe bank for src ${src} at timestamp ${timestamp}`);
+      Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, `Creating new keyframe bank for src ${src} at timestamp ${timestamp}`);
       const newKeyframeBank = await makeKeyframeBank({
         videoSampleSink,
         logLevel,
@@ -3806,10 +3902,10 @@ var makeKeyframeManager = ({
       return newKeyframeBank;
     }
     if (existingBank.canSatisfyTimestamp(timestamp)) {
-      Internals13.Log.trace({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists and satisfies timestamp ${timestamp}`);
+      Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists and satisfies timestamp ${timestamp}`);
       return existingBank;
     }
-    Internals13.Log.verbose({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists but frame at time ${timestamp} does not exist anymore.`);
+    Internals14.Log.verbose({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists but frame at time ${timestamp} does not exist anymore.`);
     existingBank.prepareForDeletion(logLevel, "already existed but evicted");
     sources[src] = sources[src].filter((bank) => bank !== existingBank);
     const replacementKeybank = await makeKeyframeBank({
@@ -3834,6 +3930,7 @@ var makeKeyframeManager = ({
     if (disposed) {
       return null;
     }
+    requestCountForSrc[src] = (requestCountForSrc[src] ?? 0) + 1;
     ensureToStayUnderMaxCacheSize(logLevel, maxCacheSize);
     clearKeyframeBanksBeforeTime({
       timestampInSeconds: timestamp,
@@ -3847,6 +3944,9 @@ var makeKeyframeManager = ({
       src,
       logLevel
     });
+    if (keyframeBank) {
+      lastRequestForBank.set(keyframeBank, requestCountForSrc[src]);
+    }
     return keyframeBank;
   };
   const clearAll = (logLevel) => {
@@ -3859,6 +3959,7 @@ var makeKeyframeManager = ({
       sources[src] = [];
     }
     sources = {};
+    requestCountForSrc = {};
   };
   const dispose = (logLevel) => {
     if (disposed) {
@@ -3867,7 +3968,7 @@ var makeKeyframeManager = ({
     disposed = true;
     clearAll(logLevel);
   };
-  let queue = Promise.resolve(undefined);
+  const enqueue = makeSerializedQueue();
   return {
     requestKeyframeBank: ({
       timestamp,
@@ -3877,7 +3978,7 @@ var makeKeyframeManager = ({
       maxCacheSize,
       fps
     }) => {
-      queue = queue.then(() => requestKeyframeBank({
+      return enqueue(() => requestKeyframeBank({
         timestamp,
         videoSampleSink,
         src,
@@ -3885,7 +3986,6 @@ var makeKeyframeManager = ({
         maxCacheSize,
         fps
       }));
-      return queue;
     },
     getCacheStats,
     clearAll,
@@ -3921,8 +4021,8 @@ var makeMediaCache = () => {
   });
   managerInstances.keyframe = keyframeManagerInstance;
   managerInstances.audio = audioManagerInstance;
-  let frameExtractionQueue = Promise.resolve(undefined);
-  let audioExtractionQueue = Promise.resolve(undefined);
+  const queueFrameExtraction = makeSerializedQueue();
+  const queueAudioExtraction = makeSerializedQueue();
   let disposed = false;
   return {
     sinkManager,
@@ -3930,20 +4030,8 @@ var makeMediaCache = () => {
     audioManager: audioManagerInstance,
     getTotalCacheStats: getCacheStats,
     isDisposed: () => disposed,
-    queueFrameExtraction: (extract) => {
-      const extraction = frameExtractionQueue.then(extract);
-      frameExtractionQueue = extraction.catch(() => {
-        return;
-      });
-      return extraction;
-    },
-    queueAudioExtraction: (extract) => {
-      const extraction = audioExtractionQueue.then(extract);
-      audioExtractionQueue = extraction.catch(() => {
-        return;
-      });
-      return extraction;
-    },
+    queueFrameExtraction,
+    queueAudioExtraction,
     dispose: (logLevel) => {
       if (disposed) {
         return;
@@ -3963,7 +4051,7 @@ var makeMediaCache = () => {
 };
 var globalMediaCache = makeMediaCache();
 var useRenderMediaCache = (logLevel) => {
-  const renderResourceManager = React2.useContext(Internals14.RenderResourceManagerContext);
+  const renderResourceManager = React2.useContext(Internals15.RenderResourceManagerContext);
   if (renderResourceManager === null) {
     return globalMediaCache;
   }
@@ -3978,42 +4066,8 @@ var useRenderMediaCache = (logLevel) => {
     }
   });
 };
-var getUncachedMaxCacheSize = (logLevel) => {
-  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}`));
-    }
-    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}`));
-    }
-    Internals14.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 (typeof window !== "undefined" && window.remotion_initialMemoryAvailable !== undefined && window.remotion_initialMemoryAvailable !== null) {
-    const value = window.remotion_initialMemoryAvailable / 2;
-    if (value < 500 * 1024 * 1024) {
-      Internals14.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!)`);
-      return 500 * 1024 * 1024;
-    }
-    if (value > 20000 * 1024 * 1024) {
-      Internals14.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on maximum value of 20GB (which is less than half of the available system memory)`);
-      return 20000 * 1024 * 1024;
-    }
-    Internals14.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using 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;
-};
 var useMaxMediaCacheSize = (logLevel) => {
-  const context = React2.useContext(Internals14.MaxMediaCacheSizeContext);
+  const context = React2.useContext(Internals15.MaxMediaCacheSizeContext);
   if (context === null) {
     return getMaxVideoCacheSize(logLevel);
   }
@@ -4397,7 +4451,7 @@ var extractAudio = (params) => {
 };
 
 // src/video-extraction/extract-frame.ts
-import { Internals as Internals15 } from "remotion";
+import { Internals as Internals16 } from "remotion";
 var extractFrameInternal = async ({
   src,
   timeInSeconds: unloopedTimeInSeconds,
@@ -4487,7 +4541,7 @@ var extractFrameInternal = async ({
       durationInSeconds: await sink.getDuration()
     };
   } catch (err) {
-    Internals15.Log.info({ logLevel, tag: "@remotion/media" }, `Error decoding ${src} at time ${timeInSeconds}: ${err}`, err);
+    Internals16.Log.info({ logLevel, tag: "@remotion/media" }, `Error decoding ${src} at time ${timeInSeconds}: ${err}`, err);
     return { type: "cannot-decode", durationInSeconds: mediaDurationInSeconds };
   }
 };
@@ -4926,13 +4980,13 @@ var AudioForRendering = ({
   credentials,
   requestInit
 }) => {
-  const defaultLogLevel = Internals16.useLogLevel();
+  const defaultLogLevel = Internals17.useLogLevel();
   const logLevel = overriddenLogLevel ?? defaultLogLevel;
   const frame = useCurrentFrame2();
-  const absoluteFrame = Internals16.useTimelinePosition();
-  const videoConfig = Internals16.useUnsafeVideoConfig();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext3(Internals16.RenderAssetManager);
-  const startsAt = Internals16.useMediaStartsAt();
+  const absoluteFrame = Internals17.useTimelinePosition();
+  const videoConfig = Internals17.useUnsafeVideoConfig();
+  const { registerRenderAsset, unregisterRenderAsset } = useContext3(Internals17.RenderAssetManager);
+  const startsAt = Internals17.useMediaStartsAt();
   const environment = useRemotionEnvironment();
   if (!videoConfig) {
     throw new Error("No video config found");
@@ -4944,7 +4998,7 @@ var AudioForRendering = ({
   const { delayRender, continueRender } = useDelayRender();
   const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState2(false);
   const [initialRequestInit] = useState2(requestInit);
-  const sequenceContext = useContext3(Internals16.SequenceContext);
+  const sequenceContext = useContext3(Internals17.SequenceContext);
   const id = useMemo2(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
@@ -4953,7 +5007,7 @@ var AudioForRendering = ({
   ]);
   const maxCacheSize = useMaxMediaCacheSize(logLevel);
   const mediaCache = useRenderMediaCache(logLevel);
-  const audioEnabled = Internals16.useAudioEnabled();
+  const audioEnabled = Internals17.useAudioEnabled();
   useLayoutEffect2(() => {
     const timestamp = frame / fps;
     const durationInSeconds = 1 / fps;
@@ -5009,7 +5063,7 @@ var AudioForRendering = ({
         if (action === "fail") {
           cancelRender2(errorToUse);
         }
-        Internals16.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
+        Internals17.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
         setReplaceWithHtml5Audio(true);
       };
       if (result.type === "unknown-container-format") {
@@ -5039,12 +5093,12 @@ var AudioForRendering = ({
         frame,
         startsAt
       });
-      const volume = Internals16.evaluateVolume({
+      const volume = Internals17.evaluateVolume({
         volume: volumeProp,
         frame: volumePropsFrame,
         mediaVolume: 1
       });
-      Internals16.warnAboutTooHighVolume(volume);
+      Internals17.warnAboutTooHighVolume(volume);
       if (audio && volume > 0) {
         applyVolume(audio.data, volume);
         registerRenderAsset({
@@ -5127,7 +5181,7 @@ var AudioForRendering = ({
 
 // src/audio/audio.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-var { validateMediaProps } = Internals17;
+var { validateMediaProps } = Internals18;
 var audioSchema = {
   src: {
     type: "asset",
@@ -5135,8 +5189,8 @@ var audioSchema = {
     description: "Source",
     keyframable: false
   },
-  ...Internals17.baseSchema,
-  ...Internals17.premountSchema,
+  ...Internals18.baseSchema,
+  ...Internals18.premountSchema,
   volume: {
     type: "number",
     min: 0,
@@ -5172,12 +5226,12 @@ var AudioInner = (props) => {
     ...otherProps
   } = props;
   const environment = useRemotionEnvironment2();
-  const sourceStack = controls ? Internals17.getStackForControls(controls) : null;
-  const [mediaVolume] = Internals17.useMediaVolumeState();
-  const mediaStartsAt = Internals17.useMediaStartsAt();
+  const sourceStack = controls ? Internals18.getStackForControls(controls) : null;
+  const [mediaVolume] = Internals18.useMediaVolumeState();
+  const mediaStartsAt = Internals18.useMediaStartsAt();
   const videoConfig = useVideoConfig2();
   const sequenceDurationInFrames = Math.min(durationInFrames ?? Infinity, Math.max(0, videoConfig.durationInFrames - (from ?? 0)));
-  const basicInfo = Internals17.useBasicMediaInTimeline({
+  const basicInfo = Internals18.useBasicMediaInTimeline({
     src: props.src,
     volume: props.volume,
     playbackRate: props.playbackRate ?? 1,
@@ -5220,7 +5274,7 @@ var AudioInner = (props) => {
     postmountingActive,
     premountingActive,
     premountingStyle
-  } = Internals17.usePremounting({
+  } = Internals18.usePremounting({
     from: from ?? 0,
     durationInFrames: basicInfo.duration,
     premountFor: premountFor ?? null,
@@ -5281,7 +5335,7 @@ var Audio = Interactive.withSchema({
 import React6, { useMemo as useMemo6, useState as useState6 } from "react";
 import {
   Freeze as Freeze2,
-  Internals as Internals22,
+  Internals as Internals23,
   Interactive as Interactive2,
   Sequence as Sequence2,
   useRemotionEnvironment as useRemotionEnvironment4,
@@ -5289,7 +5343,7 @@ import {
 } from "remotion";
 
 // src/video/get-video-sequence-duration.ts
-import { Internals as Internals18 } from "remotion";
+import { Internals as Internals19 } from "remotion";
 var getVideoSequenceDuration = ({
   durationInFrames,
   loop,
@@ -5300,7 +5354,7 @@ var getVideoSequenceDuration = ({
   if (loop || trimAfter === undefined) {
     return durationInFrames;
   }
-  const trimmedDuration = Internals18.calculateMediaDuration({
+  const trimmedDuration = Internals19.calculateMediaDuration({
     trimAfter,
     trimBefore,
     playbackRate,
@@ -5321,7 +5375,7 @@ import {
 } from "react";
 import {
   Html5Video,
-  Internals as Internals20,
+  Internals as Internals21,
   useBufferState as useBufferState2,
   useCurrentFrame as useCurrentFrame3,
   useVideoConfig as useVideoConfig3
@@ -5364,7 +5418,7 @@ var getCachedVideoFrame = (src) => {
 };
 
 // src/video/warn-object-fit-css.ts
-import { Internals as Internals19 } from "remotion";
+import { Internals as Internals20 } from "remotion";
 var OBJECT_FIT_CLASS_PATTERN = /\bobject-(contain|cover|fill|none|scale-down)\b/;
 var warnedStyle = false;
 var warnedClassName = false;
@@ -5375,11 +5429,11 @@ var warnAboutObjectFitInStyleOrClassName = ({
 }) => {
   if (!warnedStyle && style?.objectFit) {
     warnedStyle = true;
-    Internals19.Log.warn({ logLevel, tag: "@remotion/media" }, "Use the `objectFit` prop instead of the `style` prop.");
+    Internals20.Log.warn({ logLevel, tag: "@remotion/media" }, "Use the `objectFit` prop instead of the `style` prop.");
   }
   if (!warnedClassName && className && OBJECT_FIT_CLASS_PATTERN.test(className)) {
     warnedClassName = true;
-    Internals19.Log.warn({ logLevel, tag: "@remotion/media" }, "Use the `objectFit` prop instead of `object-*` CSS class names.");
+    Internals20.Log.warn({ logLevel, tag: "@remotion/media" }, "Use the `objectFit` prop instead of `object-*` CSS class names.");
   }
 };
 
@@ -5397,7 +5451,7 @@ var {
   usePreload: usePreload2,
   SequenceContext: SequenceContext2,
   useEffectChainState
-} = Internals20;
+} = Internals21;
 var VideoForPreviewAssertedShowing = ({
   src: unpreloadedSrc,
   style,
@@ -5440,7 +5494,7 @@ var VideoForPreviewAssertedShowing = ({
   const [mediaPlayerReady, setMediaPlayerReady] = useState4(false);
   const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState4(false);
   const [playing] = Timeline2.usePlayingState();
-  const { playbackRate: globalPlaybackRate } = Internals20.usePlaybackRate();
+  const { playbackRate: globalPlaybackRate } = Internals21.usePlaybackRate();
   const sharedAudioContext = useContext4(SharedAudioContext2);
   const buffer = useBufferState2();
   const canvasRefCallback = useCallback((canvas) => {
@@ -5477,12 +5531,12 @@ var VideoForPreviewAssertedShowing = ({
   const currentTimeRef = useRef2(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload2(src);
-  const buffering = useContext4(Internals20.BufferingContextReact);
+  const buffering = useContext4(Internals21.BufferingContextReact);
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const effectiveMuted = muted || playerMuted || userPreferredVolume <= 0;
-  const isPlayerBuffering = Internals20.useIsPlayerBuffering(buffering);
+  const isPlayerBuffering = Internals21.useIsPlayerBuffering(buffering);
   const initialPlaying = useRef2(playing && !isPlayerBuffering);
   const initialIsPremounting = useRef2(isPremounting);
   const initialIsPostmounting = useRef2(isPostmounting);
@@ -5509,8 +5563,7 @@ var VideoForPreviewAssertedShowing = ({
     canvas.width = cached.width;
     canvas.height = cached.height;
     const ctx = canvas.getContext("2d", {
-      alpha: true,
-      desynchronized: true
+      alpha: true
     });
     if (!ctx) {
       return;
@@ -5580,7 +5633,7 @@ var VideoForPreviewAssertedShowing = ({
           if (action === "fail") {
             throw errorToUse;
           }
-          Internals20.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
+          Internals21.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
           setShouldFallbackToNativeVideo(true);
         };
         if (result.type === "unknown-container-format") {
@@ -5622,7 +5675,7 @@ var VideoForPreviewAssertedShowing = ({
         if (action === "fail") {
           throw errorToUse;
         }
-        Internals20.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to initialize MediaPlayer", errorToUse);
+        Internals21.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to initialize MediaPlayer", errorToUse);
         setShouldFallbackToNativeVideo(true);
       });
     } catch (error) {
@@ -5636,12 +5689,12 @@ var VideoForPreviewAssertedShowing = ({
       if (action === "fail") {
         throw errorToUse;
       }
-      Internals20.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer initialization failed", errorToUse);
+      Internals21.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer initialization failed", errorToUse);
       setShouldFallbackToNativeVideo(true);
     }
     return () => {
       if (mediaPlayerRef.current) {
-        Internals20.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Disposing MediaPlayer`);
+        Internals21.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Disposing MediaPlayer`);
         mediaPlayerRef.current.dispose();
         mediaPlayerRef.current = null;
       }
@@ -5665,7 +5718,7 @@ var VideoForPreviewAssertedShowing = ({
   ]);
   warnAboutObjectFitInStyleOrClassName({ style, className, logLevel });
   const classNameValue = useMemo4(() => {
-    return [Internals20.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals20.truthy).join(" ");
+    return [Internals21.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals21.truthy).join(" ");
   }, [className]);
   useCommonEffects({
     mediaPlayerRef,
@@ -5789,7 +5842,7 @@ import {
   useState as useState5
 } from "react";
 import {
-  Internals as Internals21,
+  Internals as Internals22,
   Loop,
   random as random2,
   useCurrentFrame as useCurrentFrame4,
@@ -5830,11 +5883,11 @@ var VideoForRendering = ({
     throw new TypeError("No `src` was passed to <Video>.");
   }
   const frame = useCurrentFrame4();
-  const absoluteFrame = Internals21.useTimelinePosition();
+  const absoluteFrame = Internals22.useTimelinePosition();
   const { fps } = useVideoConfig4();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext5(Internals21.RenderAssetManager);
-  const startsAt = Internals21.useMediaStartsAt();
-  const sequenceContext = useContext5(Internals21.SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext5(Internals22.RenderAssetManager);
+  const startsAt = Internals22.useMediaStartsAt();
+  const sequenceContext = useContext5(Internals22.SequenceContext);
   const id = useMemo5(() => `media-video-${random2(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
@@ -5846,11 +5899,11 @@ var VideoForRendering = ({
   const canvasRef = useRef3(null);
   const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState5(false);
   const [initialRequestInit] = useState5(requestInit);
-  const audioEnabled = Internals21.useAudioEnabled();
-  const videoEnabled = Internals21.useVideoEnabled();
+  const audioEnabled = Internals22.useAudioEnabled();
+  const videoEnabled = Internals22.useVideoEnabled();
   const maxCacheSize = useMaxMediaCacheSize(logLevel);
   const mediaCache = useRenderMediaCache(logLevel);
-  const effectChainState = Internals21.useEffectChainState();
+  const effectChainState = Internals22.useEffectChainState();
   const [error, setError] = useState5(null);
   if (error) {
     throw error;
@@ -5922,7 +5975,7 @@ var VideoForRendering = ({
           return;
         }
         if (window.remotion_isMainTab) {
-          Internals21.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
+          Internals22.Log.warn({ logLevel, tag: "@remotion/media" }, fallbackMessage);
         }
         setReplaceWithOffthreadVideo({
           durationInSeconds: mediaDurationInSeconds
@@ -5966,7 +6019,7 @@ var VideoForRendering = ({
           context.canvas.style.aspectRatio = `${context.canvas.width} / ${context.canvas.height}`;
           context.drawImage(imageBitmap, 0, 0);
           if (effects.length > 0) {
-            const completed = await Internals21.runEffectChain({
+            const completed = await Internals22.runEffectChain({
               state: effectChainState.get(imageBitmap.width, imageBitmap.height),
               source: context.canvas,
               effects,
@@ -5997,12 +6050,12 @@ var VideoForRendering = ({
         frame,
         startsAt
       });
-      const volume = Internals21.evaluateVolume({
+      const volume = Internals22.evaluateVolume({
         volume: volumeProp,
         frame: volumePropsFrame,
         mediaVolume: 1
       });
-      Internals21.warnAboutTooHighVolume(volume);
+      Internals22.warnAboutTooHighVolume(volume);
       if (audio && volume > 0) {
         applyVolume(audio.data, volume);
         registerRenderAsset({
@@ -6067,7 +6120,7 @@ var VideoForRendering = ({
   ]);
   warnAboutObjectFitInStyleOrClassName({ style, className, logLevel });
   const classNameValue = useMemo5(() => {
-    return [Internals21.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals21.truthy).join(" ");
+    return [Internals22.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals22.truthy).join(" ");
   }, [className]);
   const styleWithObjectFit = useMemo5(() => {
     return {
@@ -6076,7 +6129,7 @@ var VideoForRendering = ({
     };
   }, [objectFitProp, style]);
   if (replaceWithOffthreadVideo) {
-    const fallback = /* @__PURE__ */ jsx5(Internals21.InnerOffthreadVideo, {
+    const fallback = /* @__PURE__ */ jsx5(Internals22.InnerOffthreadVideo, {
       ...props,
       src,
       playbackRate: playbackRate ?? 1,
@@ -6118,7 +6171,7 @@ var VideoForRendering = ({
       }
       return /* @__PURE__ */ jsx5(Loop, {
         layout: "none",
-        durationInFrames: Internals21.calculateMediaDuration({
+        durationInFrames: Internals22.calculateMediaDuration({
           trimAfter: trimAfterValue,
           mediaDurationInFrames: replaceWithOffthreadVideo.durationInSeconds * fps,
           playbackRate,
@@ -6147,7 +6200,7 @@ var {
   resolveTrimProps,
   validateMediaProps: validateMediaProps2,
   useCropStyle
-} = Internals22;
+} = Internals23;
 var videoSchema = {
   src: {
     type: "asset",
@@ -6155,8 +6208,8 @@ var videoSchema = {
     description: "Source",
     keyframable: false
   },
-  ...Internals22.baseSchema,
-  ...Internals22.premountSchema,
+  ...Internals23.baseSchema,
+  ...Internals23.premountSchema,
   volume: {
     type: "number",
     min: 0,
@@ -6177,7 +6230,7 @@ var videoSchema = {
   },
   muted: { type: "boolean", default: false, description: "Muted" },
   loop: { type: "boolean", default: false, description: "Loop" },
-  ...Internals22.transformSchema,
+  ...Internals23.transformSchema,
   ...Interactive2.backgroundSchema,
   ...Interactive2.borderSchema,
   ...Interactive2.borderRadiusSchema,
@@ -6340,10 +6393,10 @@ var VideoInner = ({
   cropBottom,
   ...props
 }) => {
-  const sourceStack = controls ? Internals22.getStackForControls(controls) ?? undefined : undefined;
-  const fallbackLogLevel = Internals22.useLogLevel();
-  const [mediaVolume] = Internals22.useMediaVolumeState();
-  const mediaStartsAt = Internals22.useMediaStartsAt();
+  const sourceStack = controls ? Internals23.getStackForControls(controls) ?? undefined : undefined;
+  const fallbackLogLevel = Internals23.useLogLevel();
+  const [mediaVolume] = Internals23.useMediaVolumeState();
+  const mediaStartsAt = Internals23.useMediaStartsAt();
   const videoConfig = useVideoConfig5();
   const sequenceDurationInFrames = Math.min(durationInFrames ?? Infinity, Math.max(0, videoConfig.durationInFrames - (from ?? 0)));
   const videoSequenceDuration = getVideoSequenceDuration({
@@ -6353,7 +6406,7 @@ var VideoInner = ({
     trimAfter,
     trimBefore
   });
-  const basicInfo = Internals22.useBasicMediaInTimeline({
+  const basicInfo = Internals23.useBasicMediaInTimeline({
     src,
     volume,
     playbackRate: playbackRate ?? 1,
@@ -6388,11 +6441,11 @@ var VideoInner = ({
     type: "video",
     data: basicInfo
   }), [basicInfo]);
-  const memoizedEffects = Internals22.useMemoizedEffects({
+  const memoizedEffects = Internals23.useMemoizedEffects({
     effects: effects ?? [],
     overrideId: controls?.overrideId ?? null
   });
-  const memoizedEffectDefinitions = Internals22.useMemoizedEffectDefinitions(effects ?? []);
+  const memoizedEffectDefinitions = Internals23.useMemoizedEffectDefinitions(effects ?? []);
   const refForOutline = React6.useRef(null);
   const {
     effectivePostmountFor,
@@ -6402,7 +6455,7 @@ var VideoInner = ({
     postmountingActive,
     premountingActive,
     premountingStyle
-  } = Internals22.usePremounting({
+  } = Internals23.usePremounting({
     from: from ?? 0,
     durationInFrames: videoSequenceDuration ?? Infinity,
     premountFor: premountFor ?? null,