@remotion/media 4.0.506 → 4.0.507

package/dist/esm/index.mjs

@@ -2789,7 +2789,7 @@ import {
 
 // src/caches.ts
 import React2 from "react";
-import { cancelRender, Internals as Internals12 } from "remotion";
+import { cancelRender, Internals as Internals14 } from "remotion";
 
 // src/audio-extraction/audio-manager.ts
 import { Internals as Internals9 } from "remotion";
@@ -2991,8 +2991,11 @@ var makeAudioIterator2 = ({
 };
 
 // src/audio-extraction/audio-manager.ts
-var makeAudioManager = () => {
+var makeAudioManager = ({
+  getTotalCacheStats
+}) => {
   const iterators = [];
+  let disposed = false;
   const makeIterator = ({
     timeInSeconds,
     src,
@@ -3053,6 +3056,9 @@ var makeAudioManager = () => {
     logLevel,
     maxCacheSize
   }) => {
+    if (disposed) {
+      throw new Error("Media cache has already been disposed");
+    }
     let attempts = 0;
     const maxAttempts = 3;
     while ((await getTotalCacheStats()).totalSize > maxCacheSize && attempts < maxAttempts) {
@@ -3075,6 +3081,9 @@ var makeAudioManager = () => {
       }
     }
     deleteDuplicateIterators(logLevel);
+    if (disposed) {
+      throw new Error("Media cache has already been disposed");
+    }
     return makeIterator({
       src,
       timeInSeconds,
@@ -3099,6 +3108,19 @@ var makeAudioManager = () => {
       iterator.logOpenFrames();
     }
   };
+  const clearAll = () => {
+    for (const iterator of iterators) {
+      iterator.prepareForDeletion();
+    }
+    iterators.length = 0;
+  };
+  const dispose = () => {
+    if (disposed) {
+      return;
+    }
+    disposed = true;
+    clearAll();
+  };
   let queue = Promise.resolve(undefined);
   return {
     getIterator: ({
@@ -3124,13 +3146,251 @@ var makeAudioManager = () => {
     getCacheStats,
     getIteratorMostInThePast,
     logOpenFrames,
-    deleteDuplicateIterators
+    deleteDuplicateIterators,
+    clearAll,
+    dispose
   };
 };
 
-// src/video-extraction/keyframe-manager.ts
+// src/get-sink.ts
 import { Internals as Internals11 } from "remotion";
 
+// src/video-extraction/get-frames-since-keyframe.ts
+import {
+  ALL_FORMATS as ALL_FORMATS2,
+  AudioSampleSink,
+  EncodedPacketSink,
+  Input as Input2,
+  MATROSKA,
+  UrlSource as UrlSource2,
+  VideoSampleSink,
+  WEBM
+} from "mediabunny";
+import { Internals as Internals10 } from "remotion";
+
+// src/browser-can-use-webgl2.ts
+var browserCanUseWebGl2 = null;
+var browserCanUseWebGl2Uncached = () => {
+  const canvas = new OffscreenCanvas(1, 1);
+  const context = canvas.getContext("webgl2");
+  return context !== null;
+};
+var canBrowserUseWebGl2 = () => {
+  if (browserCanUseWebGl2 !== null) {
+    return browserCanUseWebGl2;
+  }
+  browserCanUseWebGl2 = browserCanUseWebGl2Uncached();
+  return browserCanUseWebGl2;
+};
+
+// src/video-extraction/remember-actual-matroska-timestamps.ts
+var rememberActualMatroskaTimestamps = (isMatroska) => {
+  const observations = [];
+  const observeTimestamp = (startTime) => {
+    if (!isMatroska) {
+      return;
+    }
+    observations.push(startTime);
+  };
+  const getRealTimestamp = (observedTimestamp) => {
+    if (!isMatroska) {
+      return observedTimestamp;
+    }
+    return observations.find((observation) => Math.abs(observedTimestamp - observation) < 0.001) ?? null;
+  };
+  return {
+    observeTimestamp,
+    getRealTimestamp
+  };
+};
+
+// src/video-extraction/get-frames-since-keyframe.ts
+var getRetryDelay = () => {
+  return null;
+};
+var getFormatOrNullOrNetworkError = async (input) => {
+  try {
+    return await input.getFormat();
+  } catch (err) {
+    if (isNetworkError(err)) {
+      return "network-error";
+    }
+    return null;
+  }
+};
+var makeSinks = (src, logLevel, credentials, requestInit) => {
+  const resolvedRequestInit = resolveRequestInit({ credentials, requestInit });
+  const input = new Input2({
+    formats: ALL_FORMATS2,
+    source: new UrlSource2(src, {
+      getRetryDelay,
+      ...resolvedRequestInit ? { requestInit: resolvedRequestInit } : undefined
+    })
+  });
+  const getSinks = async () => {
+    const format = await getFormatOrNullOrNetworkError(input);
+    const isMatroska = format === MATROSKA || format === WEBM;
+    const getVideoSinks = async () => {
+      if (format === "network-error") {
+        return "network-error";
+      }
+      if (format === null) {
+        return "unknown-container-format";
+      }
+      const videoTrack = await input.getPrimaryVideoTrack();
+      if (!videoTrack) {
+        return "no-video-track";
+      }
+      if (await videoTrack.isLive()) {
+        throw new Error("Live streams are not currently supported by Remotion. Sorry! Source: " + src);
+      }
+      if (await videoTrack.isRelativeToUnixEpoch()) {
+        throw new Error("Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: " + src);
+      }
+      const canDecode = await videoTrack.canDecode();
+      if (!canDecode) {
+        if (videoTrack.codec === "prores") {
+          return "cannot-decode-prores";
+        }
+        return "cannot-decode";
+      }
+      const sampleSink = new VideoSampleSink(videoTrack);
+      const packetSink = new EncodedPacketSink(videoTrack);
+      const startPacket = await packetSink.getFirstPacket({
+        verifyKeyPackets: true
+      });
+      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}.`);
+      }
+      return {
+        sampleSink
+      };
+    };
+    let videoSinksPromise = null;
+    const getVideoSinksPromise = () => {
+      if (videoSinksPromise) {
+        return videoSinksPromise;
+      }
+      videoSinksPromise = getVideoSinks();
+      return videoSinksPromise;
+    };
+    const audioSinksPromise = {};
+    const getAudioSinks = async (index) => {
+      if (format === null) {
+        return "unknown-container-format";
+      }
+      if (format === "network-error") {
+        return "network-error";
+      }
+      const [videoTrack, audioTracks] = await Promise.all([
+        input.getPrimaryVideoTrack(),
+        input.getAudioTracks()
+      ]);
+      const audioTrack = await resolveAudioTrack({
+        videoTrack,
+        audioTracks,
+        audioStreamIndex: index
+      });
+      if (!audioTrack) {
+        return "no-audio-track";
+      }
+      const canDecode = await audioTrack.canDecode();
+      if (!canDecode) {
+        return "cannot-decode-audio";
+      }
+      return {
+        sampleSink: new AudioSampleSink(audioTrack)
+      };
+    };
+    const getAudioSinksPromise = (index) => {
+      const keyIndex = index === null ? -1 : index;
+      if (audioSinksPromise[keyIndex]) {
+        return audioSinksPromise[keyIndex];
+      }
+      audioSinksPromise[keyIndex] = getAudioSinks(index);
+      return audioSinksPromise[keyIndex];
+    };
+    return {
+      getVideo: () => getVideoSinksPromise(),
+      getAudio: (index) => getAudioSinksPromise(index),
+      actualMatroskaTimestamps: rememberActualMatroskaTimestamps(isMatroska),
+      isMatroska,
+      getDuration: () => {
+        return getDurationOrCompute(input);
+      }
+    };
+  };
+  return {
+    promise: getSinks(),
+    dispose: () => input.dispose()
+  };
+};
+
+// src/get-sink.ts
+var getSinkCacheKey = ({
+  src,
+  credentials,
+  requestInit
+}) => JSON.stringify([
+  src,
+  credentials,
+  getMediaRequestInitFingerprint(requestInit)
+]);
+var makeSinkManager = () => {
+  const sinkPromises = {};
+  const inputDisposers = {};
+  let disposed = false;
+  return {
+    getSink: (src, logLevel, credentials, requestInit) => {
+      if (disposed) {
+        return Promise.reject(new Error("Media cache has already been disposed"));
+      }
+      const normalizedRequestInit = normalizeMediaRequestInit(requestInit);
+      const cacheKey = getSinkCacheKey({
+        src,
+        credentials,
+        requestInit: normalizedRequestInit
+      });
+      let promise = sinkPromises[cacheKey];
+      if (!promise) {
+        Internals11.Log.verbose({
+          logLevel,
+          tag: "@remotion/media"
+        }, `Sink for ${src} was not found, creating new sink`);
+        const sinks = makeSinks(src, logLevel, credentials, normalizedRequestInit);
+        promise = sinks.promise;
+        sinkPromises[cacheKey] = promise;
+        inputDisposers[cacheKey] = sinks.dispose;
+      }
+      return promise;
+    },
+    dispose: () => {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      let firstError = null;
+      for (const cacheKey of Object.keys(inputDisposers)) {
+        try {
+          inputDisposers[cacheKey]();
+        } catch (error) {
+          firstError ??= error;
+        } finally {
+          delete inputDisposers[cacheKey];
+          delete sinkPromises[cacheKey];
+        }
+      }
+      if (firstError !== null) {
+        throw firstError;
+      }
+    }
+  };
+};
+
+// src/video-extraction/keyframe-manager.ts
+import { Internals as Internals13 } from "remotion";
+
 // src/render-timestamp-range.ts
 var renderTimestampRange = (timestamps) => {
   if (timestamps.length === 0) {
@@ -3143,12 +3403,13 @@ var renderTimestampRange = (timestamps) => {
 };
 
 // src/video-extraction/keyframe-bank.ts
-import { Internals as Internals10 } from "remotion";
+import { Internals as Internals12 } from "remotion";
 
 // src/video-extraction/get-allocation-size.ts
+var BYTES_PER_PIXEL_FOR_OPAQUE_FRAME = 3;
 var getAllocationSize = (sample) => {
   if (sample.format === null) {
-    return sample.codedHeight * sample.codedWidth * 4;
+    return sample.codedHeight * sample.codedWidth * BYTES_PER_PIXEL_FOR_OPAQUE_FRAME;
   }
   return sample.allocationSize();
 };
@@ -3222,7 +3483,7 @@ var makeKeyframeBank = async ({
       }
     }
     if (deletedTimestamps.length > 0) {
-      Internals10.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)}`);
+      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)}`);
     }
   };
   const hasDecodedEnoughForTimestamp = (timestamp) => {
@@ -3251,7 +3512,7 @@ var makeKeyframeBank = async ({
     frameTimestamps.push(frame.timestamp);
     allocationSize += getAllocationSize(frame);
     lastUsed = Date.now();
-    Internals10.Log.trace({ logLevel, tag: "@remotion/media" }, `Added frame at ${frame.timestamp}sec to bank`);
+    Internals12.Log.trace({ logLevel, tag: "@remotion/media" }, `Added frame at ${frame.timestamp}sec to bank`);
   };
   const ensureEnoughFramesForTimestamp = async (timestampInSeconds, logLevel, fps) => {
     while (!hasDecodedEnoughForTimestamp(timestampInSeconds)) {
@@ -3306,7 +3567,7 @@ var makeKeyframeBank = async ({
     throw new Error("No first frame found");
   }
   const startTimestampInSeconds = firstFrame.value.timestamp;
-  Internals10.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec`);
+  Internals12.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec`);
   addFrame(firstFrame.value, parentLogLevel);
   const getRangeOfTimestamps = () => {
     if (frameTimestamps.length === 0) {
@@ -3323,7 +3584,7 @@ var makeKeyframeBank = async ({
   const prepareForDeletion = (logLevel, reason) => {
     const range = getRangeOfTimestamps();
     if (range) {
-      Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Preparing for deletion (${reason}) of keyframe bank from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec`);
+      Internals12.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()) {
@@ -3384,11 +3645,23 @@ var makeKeyframeBank = async ({
 };
 
 // src/video-extraction/keyframe-manager.ts
-var makeKeyframeManager = () => {
+var makeKeyframeManager = ({
+  getTotalCacheStats
+}) => {
   let sources = {};
-  const addKeyframeBank = ({ src, bank }) => {
+  let disposed = false;
+  const addKeyframeBank = ({
+    src,
+    bank,
+    logLevel
+  }) => {
+    if (disposed) {
+      bank.prepareForDeletion(logLevel, "media cache was disposed");
+      return false;
+    }
     sources[src] = sources[src] ?? [];
     sources[src].push(bank);
+    return true;
   };
   const logCacheStats = (logLevel) => {
     let count = 0;
@@ -3401,10 +3674,10 @@ var makeKeyframeManager = () => {
         if (size === 0) {
           continue;
         }
-        Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `Open frames for src ${src}: ${renderTimestampRange(timestamps)}`);
+        Internals13.Log.verbose({ logLevel, tag: "@remotion/media" }, `Open frames for src ${src}: ${renderTimestampRange(timestamps)}`);
       }
     }
-    Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
+    Internals13.Log.verbose({ logLevel, tag: "@remotion/media" }, `Video cache stats: ${count} open frames, ${totalSize} bytes`);
   };
   const getCacheStats = () => {
     let count = 0;
@@ -3458,7 +3731,7 @@ var makeKeyframeManager = () => {
       const { framesDeleted } = mostInThePastBank.prepareForDeletion(logLevel, "deleted oldest keyframe bank to stay under max cache size");
       sources[mostInThePastSrc].splice(mostInThePastIndex, 1);
       if (range) {
-        Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${framesDeleted} frames for src ${mostInThePastSrc} from ${range?.firstTimestamp}sec to ${range?.lastTimestamp}sec to free up memory.`);
+        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.`);
       }
     }
     return { finish: false };
@@ -3472,12 +3745,12 @@ var makeKeyframeManager = () => {
       if (finish) {
         break;
       }
-      Internals11.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));
+      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));
       cacheStats = getTotalCacheStats();
       attempts++;
     }
     if (cacheStats.totalSize > maxCacheSize && attempts >= maxAttempts) {
-      Internals11.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.`);
+      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.`);
     }
   };
   const clearKeyframeBanksBeforeTime = ({
@@ -3498,7 +3771,7 @@ var makeKeyframeManager = () => {
       }
       if (range.lastTimestamp < threshold) {
         bank.prepareForDeletion(logLevel, "cleared before threshold " + threshold);
-        Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${range.firstTimestamp}sec to ${range.lastTimestamp}sec`);
+        Internals13.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 {
@@ -3520,21 +3793,23 @@ var makeKeyframeManager = () => {
     const existingBanks = sources[src] ?? [];
     const existingBank = existingBanks?.find((bank) => bank.canSatisfyTimestamp(timestamp));
     if (!existingBank) {
-      Internals11.Log.trace({ logLevel, tag: "@remotion/media" }, `Creating new keyframe bank for src ${src} at timestamp ${timestamp}`);
+      Internals13.Log.trace({ logLevel, tag: "@remotion/media" }, `Creating new keyframe bank for src ${src} at timestamp ${timestamp}`);
       const newKeyframeBank = await makeKeyframeBank({
         videoSampleSink,
         logLevel,
         src,
         initialTimestampRequest: timestamp
       });
-      addKeyframeBank({ src, bank: newKeyframeBank });
+      if (!addKeyframeBank({ src, bank: newKeyframeBank, logLevel })) {
+        return null;
+      }
       return newKeyframeBank;
     }
     if (existingBank.canSatisfyTimestamp(timestamp)) {
-      Internals11.Log.trace({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists and satisfies timestamp ${timestamp}`);
+      Internals13.Log.trace({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists and satisfies timestamp ${timestamp}`);
       return existingBank;
     }
-    Internals11.Log.verbose({ logLevel, tag: "@remotion/media" }, `Keyframe bank exists but frame at time ${timestamp} does not exist anymore.`);
+    Internals13.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({
@@ -3543,7 +3818,9 @@ var makeKeyframeManager = () => {
       logLevel,
       src
     });
-    addKeyframeBank({ src, bank: replacementKeybank });
+    if (!addKeyframeBank({ src, bank: replacementKeybank, logLevel })) {
+      return null;
+    }
     return replacementKeybank;
   };
   const requestKeyframeBank = async ({
@@ -3554,6 +3831,9 @@ var makeKeyframeManager = () => {
     maxCacheSize,
     fps
   }) => {
+    if (disposed) {
+      return null;
+    }
     ensureToStayUnderMaxCacheSize(logLevel, maxCacheSize);
     clearKeyframeBanksBeforeTime({
       timestampInSeconds: timestamp,
@@ -3580,6 +3860,13 @@ var makeKeyframeManager = () => {
     }
     sources = {};
   };
+  const dispose = (logLevel) => {
+    if (disposed) {
+      return;
+    }
+    disposed = true;
+    clearAll(logLevel);
+  };
   let queue = Promise.resolve(undefined);
   return {
     requestKeyframeBank: ({
@@ -3601,22 +3888,96 @@ var makeKeyframeManager = () => {
       return queue;
     },
     getCacheStats,
-    clearAll
+    clearAll,
+    dispose
   };
 };
 
 // src/caches.ts
 var getSafeWindowOfMonotonicity = (fps) => 0.2 * 30 / fps;
-var keyframeManager = makeKeyframeManager();
-var audioManager = makeAudioManager();
-var getTotalCacheStats = () => {
-  const keyframeManagerCacheStats = keyframeManager.getCacheStats();
-  const audioManagerCacheStats = audioManager.getCacheStats();
+var makeMediaCache = () => {
+  const sinkManager = makeSinkManager();
+  const managerInstances = {
+    keyframe: null,
+    audio: null
+  };
+  const getCacheStats = () => {
+    const { keyframe: currentKeyframeManager, audio: currentAudioManager } = managerInstances;
+    if (currentKeyframeManager === null || currentAudioManager === null) {
+      throw new Error("Media cache managers have not been initialized");
+    }
+    const keyframeManagerCacheStats = currentKeyframeManager.getCacheStats();
+    const audioManagerCacheStats = currentAudioManager.getCacheStats();
+    return {
+      count: keyframeManagerCacheStats.count + audioManagerCacheStats.count,
+      totalSize: keyframeManagerCacheStats.totalSize + audioManagerCacheStats.totalSize
+    };
+  };
+  const keyframeManagerInstance = makeKeyframeManager({
+    getTotalCacheStats: getCacheStats
+  });
+  const audioManagerInstance = makeAudioManager({
+    getTotalCacheStats: getCacheStats
+  });
+  managerInstances.keyframe = keyframeManagerInstance;
+  managerInstances.audio = audioManagerInstance;
+  let frameExtractionQueue = Promise.resolve(undefined);
+  let audioExtractionQueue = Promise.resolve(undefined);
+  let disposed = false;
   return {
-    count: keyframeManagerCacheStats.count + audioManagerCacheStats.count,
-    totalSize: keyframeManagerCacheStats.totalSize + audioManagerCacheStats.totalSize
+    sinkManager,
+    keyframeManager: keyframeManagerInstance,
+    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;
+    },
+    dispose: (logLevel) => {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      try {
+        keyframeManagerInstance.dispose(logLevel);
+      } finally {
+        try {
+          audioManagerInstance.dispose();
+        } finally {
+          sinkManager.dispose();
+        }
+      }
+    }
   };
 };
+var globalMediaCache = makeMediaCache();
+var useRenderMediaCache = (logLevel) => {
+  const renderResourceManager = React2.useContext(Internals14.RenderResourceManagerContext);
+  if (renderResourceManager === null) {
+    return globalMediaCache;
+  }
+  return renderResourceManager.getOrCreateResource({
+    key: "@remotion/media/cache",
+    create: () => {
+      const resource = makeMediaCache();
+      return {
+        resource,
+        dispose: () => resource.dispose(logLevel)
+      };
+    }
+  });
+};
 var getUncachedMaxCacheSize = (logLevel) => {
   if (typeof window !== "undefined" && window.remotion_mediaCacheSizeInBytes !== undefined && window.remotion_mediaCacheSizeInBytes !== null) {
     if (window.remotion_mediaCacheSizeInBytes < 240 * 1024 * 1024) {
@@ -3625,20 +3986,20 @@ var getUncachedMaxCacheSize = (logLevel) => {
     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}`));
     }
-    Internals12.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set using "mediaCacheSizeInBytes": ${(window.remotion_mediaCacheSizeInBytes / 1024 / 1024).toFixed(1)} MB`);
+    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) {
-      Internals12.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!)`);
+      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) {
-      Internals12.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)`);
+      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;
     }
-    Internals12.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on available memory (50% of available memory): ${(value / 1024 / 1024).toFixed(1)} MB`);
+    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;
@@ -3652,7 +4013,7 @@ var getMaxVideoCacheSize = (logLevel) => {
   return cachedMaxCacheSize;
 };
 var useMaxMediaCacheSize = (logLevel) => {
-  const context = React2.useContext(Internals12.MaxMediaCacheSizeContext);
+  const context = React2.useContext(Internals14.MaxMediaCacheSizeContext);
   if (context === null) {
     return getMaxVideoCacheSize(logLevel);
   }
@@ -3905,205 +4266,6 @@ var combineAudioDataAndClosePrevious = (audioDataArray) => {
   };
 };
 
-// src/get-sink.ts
-import { Internals as Internals14 } from "remotion";
-
-// src/video-extraction/get-frames-since-keyframe.ts
-import {
-  ALL_FORMATS as ALL_FORMATS2,
-  AudioSampleSink,
-  EncodedPacketSink,
-  Input as Input2,
-  MATROSKA,
-  UrlSource as UrlSource2,
-  VideoSampleSink,
-  WEBM
-} from "mediabunny";
-import { Internals as Internals13 } from "remotion";
-
-// src/browser-can-use-webgl2.ts
-var browserCanUseWebGl2 = null;
-var browserCanUseWebGl2Uncached = () => {
-  const canvas = new OffscreenCanvas(1, 1);
-  const context = canvas.getContext("webgl2");
-  return context !== null;
-};
-var canBrowserUseWebGl2 = () => {
-  if (browserCanUseWebGl2 !== null) {
-    return browserCanUseWebGl2;
-  }
-  browserCanUseWebGl2 = browserCanUseWebGl2Uncached();
-  return browserCanUseWebGl2;
-};
-
-// src/video-extraction/remember-actual-matroska-timestamps.ts
-var rememberActualMatroskaTimestamps = (isMatroska) => {
-  const observations = [];
-  const observeTimestamp = (startTime) => {
-    if (!isMatroska) {
-      return;
-    }
-    observations.push(startTime);
-  };
-  const getRealTimestamp = (observedTimestamp) => {
-    if (!isMatroska) {
-      return observedTimestamp;
-    }
-    return observations.find((observation) => Math.abs(observedTimestamp - observation) < 0.001) ?? null;
-  };
-  return {
-    observeTimestamp,
-    getRealTimestamp
-  };
-};
-
-// src/video-extraction/get-frames-since-keyframe.ts
-var getRetryDelay = () => {
-  return null;
-};
-var getFormatOrNullOrNetworkError = async (input) => {
-  try {
-    return await input.getFormat();
-  } catch (err) {
-    if (isNetworkError(err)) {
-      return "network-error";
-    }
-    return null;
-  }
-};
-var getSinks = async (src, logLevel, credentials, requestInit) => {
-  const resolvedRequestInit = resolveRequestInit({ credentials, requestInit });
-  const input = new Input2({
-    formats: ALL_FORMATS2,
-    source: new UrlSource2(src, {
-      getRetryDelay,
-      ...resolvedRequestInit ? { requestInit: resolvedRequestInit } : undefined
-    })
-  });
-  const format = await getFormatOrNullOrNetworkError(input);
-  const isMatroska = format === MATROSKA || format === WEBM;
-  const getVideoSinks = async () => {
-    if (format === "network-error") {
-      return "network-error";
-    }
-    if (format === null) {
-      return "unknown-container-format";
-    }
-    const videoTrack = await input.getPrimaryVideoTrack();
-    if (!videoTrack) {
-      return "no-video-track";
-    }
-    if (await videoTrack.isLive()) {
-      throw new Error("Live streams are not currently supported by Remotion. Sorry! Source: " + src);
-    }
-    if (await videoTrack.isRelativeToUnixEpoch()) {
-      throw new Error("Streams with UNIX timestamps are not currently supported by Remotion. Sorry! Source: " + src);
-    }
-    const canDecode = await videoTrack.canDecode();
-    if (!canDecode) {
-      if (videoTrack.codec === "prores") {
-        return "cannot-decode-prores";
-      }
-      return "cannot-decode";
-    }
-    const sampleSink = new VideoSampleSink(videoTrack);
-    const packetSink = new EncodedPacketSink(videoTrack);
-    const startPacket = await packetSink.getFirstPacket({
-      verifyKeyPackets: true
-    });
-    const hasAlpha = startPacket?.sideData.alpha;
-    if (hasAlpha && !canBrowserUseWebGl2()) {
-      Internals13.Log.warn({ logLevel, tag: "@remotion/media" }, `WebGL2 is not available, using the non-fast CPU path to decode alpha for ${src}.`);
-    }
-    return {
-      sampleSink
-    };
-  };
-  let videoSinksPromise = null;
-  const getVideoSinksPromise = () => {
-    if (videoSinksPromise) {
-      return videoSinksPromise;
-    }
-    videoSinksPromise = getVideoSinks();
-    return videoSinksPromise;
-  };
-  const audioSinksPromise = {};
-  const getAudioSinks = async (index) => {
-    if (format === null) {
-      return "unknown-container-format";
-    }
-    if (format === "network-error") {
-      return "network-error";
-    }
-    const [videoTrack, audioTracks] = await Promise.all([
-      input.getPrimaryVideoTrack(),
-      input.getAudioTracks()
-    ]);
-    const audioTrack = await resolveAudioTrack({
-      videoTrack,
-      audioTracks,
-      audioStreamIndex: index
-    });
-    if (!audioTrack) {
-      return "no-audio-track";
-    }
-    const canDecode = await audioTrack.canDecode();
-    if (!canDecode) {
-      return "cannot-decode-audio";
-    }
-    return {
-      sampleSink: new AudioSampleSink(audioTrack)
-    };
-  };
-  const getAudioSinksPromise = (index) => {
-    const keyIndex = index === null ? -1 : index;
-    if (audioSinksPromise[keyIndex]) {
-      return audioSinksPromise[keyIndex];
-    }
-    audioSinksPromise[keyIndex] = getAudioSinks(index);
-    return audioSinksPromise[keyIndex];
-  };
-  return {
-    getVideo: () => getVideoSinksPromise(),
-    getAudio: (index) => getAudioSinksPromise(index),
-    actualMatroskaTimestamps: rememberActualMatroskaTimestamps(isMatroska),
-    isMatroska,
-    getDuration: () => {
-      return getDurationOrCompute(input);
-    }
-  };
-};
-
-// src/get-sink.ts
-var sinkPromises = {};
-var getSinkCacheKey = ({
-  src,
-  credentials,
-  requestInit
-}) => JSON.stringify([
-  src,
-  credentials,
-  getMediaRequestInitFingerprint(requestInit)
-]);
-var getSink = (src, logLevel, credentials, requestInit) => {
-  const normalizedRequestInit = normalizeMediaRequestInit(requestInit);
-  const cacheKey = getSinkCacheKey({
-    src,
-    credentials,
-    requestInit: normalizedRequestInit
-  });
-  let promise = sinkPromises[cacheKey];
-  if (!promise) {
-    Internals14.Log.verbose({
-      logLevel,
-      tag: "@remotion/media"
-    }, `Sink for ${src} was not found, creating new sink`);
-    promise = getSinks(src, logLevel, credentials, normalizedRequestInit);
-    sinkPromises[cacheKey] = promise;
-  }
-  return promise;
-};
-
 // src/audio-extraction/extract-audio.ts
 var extractAudioInternal = async ({
   src,
@@ -4118,9 +4280,10 @@ var extractAudioInternal = async ({
   fps,
   maxCacheSize,
   credentials,
-  requestInit
+  requestInit,
+  mediaCache
 }) => {
-  const { getAudio, actualMatroskaTimestamps, isMatroska, getDuration } = await getSink(src, logLevel, credentials, requestInit);
+  const { getAudio, actualMatroskaTimestamps, isMatroska, getDuration } = await mediaCache.sinkManager.getSink(src, logLevel, credentials, requestInit);
   let mediaDurationInSeconds = null;
   if (loop) {
     mediaDurationInSeconds = await getDuration();
@@ -4153,7 +4316,7 @@ var extractAudioInternal = async ({
     return { data: null, durationInSeconds: mediaDurationInSeconds };
   }
   try {
-    const sampleIterator = await audioManager.getIterator({
+    const sampleIterator = await mediaCache.audioManager.getIterator({
       src,
       timeInSeconds,
       audioSampleSink: audio.sampleSink,
@@ -4164,7 +4327,7 @@ var extractAudioInternal = async ({
     });
     const durationInSeconds = durationNotYetApplyingPlaybackRate * playbackRate;
     const samples = await sampleIterator.getSamples(timeInSeconds, durationInSeconds);
-    audioManager.logOpenFrames();
+    mediaCache.audioManager.logOpenFrames();
     const audioDataArray = [];
     for (let i = 0;i < samples.length; i++) {
       const sample = samples[i];
@@ -4229,10 +4392,8 @@ var extractAudioInternal = async ({
     throw err;
   }
 };
-var queue = Promise.resolve(undefined);
 var extractAudio = (params) => {
-  queue = queue.then(() => extractAudioInternal(params));
-  return queue;
+  return params.mediaCache.queueAudioExtraction(() => extractAudioInternal(params));
 };
 
 // src/video-extraction/extract-frame.ts
@@ -4248,9 +4409,10 @@ var extractFrameInternal = async ({
   fps,
   maxCacheSize,
   credentials,
-  requestInit
+  requestInit,
+  mediaCache
 }) => {
-  const sink = await getSink(src, logLevel, credentials, requestInit);
+  const sink = await mediaCache.sinkManager.getSink(src, logLevel, credentials, requestInit);
   const [video, mediaDurationInSecondsRaw] = await Promise.all([
     sink.getVideo(),
     loop ? sink.getDuration() : Promise.resolve(null)
@@ -4300,7 +4462,7 @@ var extractFrameInternal = async ({
     };
   }
   try {
-    const keyframeBank = await keyframeManager.requestKeyframeBank({
+    const keyframeBank = await mediaCache.keyframeManager.requestKeyframeBank({
       videoSampleSink: video.sampleSink,
       timestamp: timeInSeconds,
       src,
@@ -4329,10 +4491,8 @@ var extractFrameInternal = async ({
     return { type: "cannot-decode", durationInSeconds: mediaDurationInSeconds };
   }
 };
-var queue2 = Promise.resolve(undefined);
 var extractFrame = (params) => {
-  queue2 = queue2.then(() => extractFrameInternal(params));
-  return queue2;
+  return params.mediaCache.queueFrameExtraction(() => extractFrameInternal(params));
 };
 
 // src/video-extraction/rotate-frame.ts
@@ -4384,7 +4544,8 @@ var extractFrameAndAudio = async ({
   fps,
   maxCacheSize,
   credentials,
-  requestInit
+  requestInit,
+  mediaCache
 }) => {
   try {
     const [video, audio] = await Promise.all([
@@ -4399,7 +4560,8 @@ var extractFrameAndAudio = async ({
         fps,
         maxCacheSize,
         credentials,
-        requestInit
+        requestInit,
+        mediaCache
       }) : null,
       includeAudio ? extractAudio({
         src,
@@ -4414,7 +4576,8 @@ var extractFrameAndAudio = async ({
         trimBefore,
         maxCacheSize,
         credentials,
-        requestInit
+        requestInit,
+        mediaCache
       }) : null
     ]);
     if (video?.type === "cannot-decode") {
@@ -4505,7 +4668,8 @@ var addBroadcastChannelListener = () => {
           fps: data.fps,
           maxCacheSize: data.maxCacheSize,
           credentials: data.credentials,
-          requestInit: data.requestInit
+          requestInit: data.requestInit,
+          mediaCache: globalMediaCache
         });
         if (result.type === "cannot-decode") {
           const cannotDecodeResponse = {
@@ -4613,7 +4777,8 @@ var extractFrameViaBroadcastChannel = async ({
   fps,
   maxCacheSize,
   credentials,
-  requestInit
+  requestInit,
+  mediaCache
 }) => {
   if (isClientSideRendering || window.remotion_isMainTab) {
     return extractFrameAndAudio({
@@ -4631,7 +4796,8 @@ var extractFrameViaBroadcastChannel = async ({
       fps,
       maxCacheSize,
       credentials,
-      requestInit
+      requestInit,
+      mediaCache
     });
   }
   await waitForMainTabToBeReady(window.remotion_broadcastChannel);
@@ -4786,6 +4952,7 @@ var AudioForRendering = ({
     sequenceContext?.durationInFrames
   ]);
   const maxCacheSize = useMaxMediaCacheSize(logLevel);
+  const mediaCache = useRenderMediaCache(logLevel);
   const audioEnabled = Internals16.useAudioEnabled();
   useLayoutEffect2(() => {
     const timestamp = frame / fps;
@@ -4825,8 +4992,12 @@ var AudioForRendering = ({
       fps,
       maxCacheSize,
       credentials,
-      requestInit: initialRequestInit
+      requestInit: initialRequestInit,
+      mediaCache
     }).then((result) => {
+      if (mediaCache.isDisposed()) {
+        return;
+      }
       const handleError = (error, clientSideError, fallbackMessage) => {
         const [action, errorToUse] = callOnErrorAndResolve({
           onError,
@@ -4888,6 +5059,9 @@ var AudioForRendering = ({
       }
       continueRender(newHandle);
     }).catch((error) => {
+      if (mediaCache.isDisposed()) {
+        return;
+      }
       cancelRender2(error);
     });
     return () => {
@@ -4924,7 +5098,8 @@ var AudioForRendering = ({
     audioEnabled,
     onError,
     credentials,
-    initialRequestInit
+    initialRequestInit,
+    mediaCache
   ]);
   if (replaceWithHtml5Audio) {
     return /* @__PURE__ */ jsx2(Html5Audio, {
@@ -5674,6 +5849,7 @@ var VideoForRendering = ({
   const audioEnabled = Internals21.useAudioEnabled();
   const videoEnabled = Internals21.useVideoEnabled();
   const maxCacheSize = useMaxMediaCacheSize(logLevel);
+  const mediaCache = useRenderMediaCache(logLevel);
   const effectChainState = Internals21.useEffectChainState();
   const [error, setError] = useState5(null);
   if (error) {
@@ -5720,8 +5896,15 @@ var VideoForRendering = ({
       fps,
       maxCacheSize,
       credentials,
-      requestInit: initialRequestInit
+      requestInit: initialRequestInit,
+      mediaCache
     }).then(async (result) => {
+      if (mediaCache.isDisposed()) {
+        if (result.type === "success") {
+          result.frame?.close();
+        }
+        return;
+      }
       const handleError = (err, clientSideError, fallbackMessage, mediaDurationInSeconds) => {
         if (environment.isClientSideRendering) {
           cancelRender3(clientSideError);
@@ -5791,7 +5974,7 @@ var VideoForRendering = ({
               width: imageBitmap.width,
               height: imageBitmap.height
             });
-            if (!completed) {
+            if (!completed || mediaCache.isDisposed()) {
               imageBitmap.close();
               return;
             }
@@ -5834,6 +6017,9 @@ var VideoForRendering = ({
       }
       continueRender(newHandle);
     }).catch((err) => {
+      if (mediaCache.isDisposed()) {
+        return;
+      }
       cancelRender3(err);
     });
     return () => {
@@ -5876,7 +6062,8 @@ var VideoForRendering = ({
     credentials,
     effectChainState,
     effects,
-    initialRequestInit
+    initialRequestInit,
+    mediaCache
   ]);
   warnAboutObjectFitInStyleOrClassName({ style, className, logLevel });
   const classNameValue = useMemo5(() => {