@remotion/media 4.0.362 → 4.0.364

package/dist/esm/index.mjs

@@ -10,171 +10,7 @@ import {
   useCurrentFrame as useCurrentFrame2
 } from "remotion";
 
-// src/show-in-timeline.ts
-import { useMemo } from "react";
-import { Internals, useVideoConfig } from "remotion";
-var useLoopDisplay = ({
-  loop,
-  mediaDurationInSeconds,
-  playbackRate,
-  trimAfter,
-  trimBefore
-}) => {
-  const { durationInFrames: compDuration, fps } = useVideoConfig();
-  const loopDisplay = useMemo(() => {
-    if (!loop || !mediaDurationInSeconds) {
-      return;
-    }
-    const durationInFrames = Internals.calculateMediaDuration({
-      mediaDurationInFrames: mediaDurationInSeconds * fps,
-      playbackRate,
-      trimAfter,
-      trimBefore
-    });
-    const maxTimes = compDuration / durationInFrames;
-    return {
-      numberOfTimes: maxTimes,
-      startOffset: 0,
-      durationInFrames
-    };
-  }, [
-    compDuration,
-    fps,
-    loop,
-    mediaDurationInSeconds,
-    playbackRate,
-    trimAfter,
-    trimBefore
-  ]);
-  return loopDisplay;
-};
-
-// src/use-media-in-timeline.ts
-import { useContext, useEffect, useState } from "react";
-import { Internals as Internals2, useCurrentFrame } from "remotion";
-var useMediaInTimeline = ({
-  volume,
-  mediaVolume,
-  src,
-  mediaType,
-  playbackRate,
-  displayName,
-  stack,
-  showInTimeline,
-  premountDisplay,
-  postmountDisplay,
-  loopDisplay,
-  trimBefore,
-  trimAfter
-}) => {
-  const parentSequence = useContext(Internals2.SequenceContext);
-  const startsAt = Internals2.useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext(Internals2.SequenceManager);
-  const [sequenceId] = useState(() => String(Math.random()));
-  const [mediaId] = useState(() => String(Math.random()));
-  const frame = useCurrentFrame();
-  const {
-    volumes,
-    duration,
-    doesVolumeChange,
-    nonce,
-    rootId,
-    isStudio,
-    finalDisplayName
-  } = Internals2.useBasicMediaInTimeline({
-    volume,
-    mediaVolume,
-    mediaType,
-    src,
-    displayName,
-    trimBefore,
-    trimAfter,
-    playbackRate
-  });
-  useEffect(() => {
-    if (!src) {
-      throw new Error("No src passed");
-    }
-    if (!isStudio && window.process?.env?.NODE_ENV !== "test") {
-      return;
-    }
-    if (!showInTimeline) {
-      return;
-    }
-    const loopIteration = loopDisplay ? Math.floor(frame / loopDisplay.durationInFrames) : 0;
-    if (loopDisplay) {
-      registerSequence({
-        type: "sequence",
-        premountDisplay,
-        postmountDisplay,
-        parent: parentSequence?.id ?? null,
-        displayName: finalDisplayName,
-        rootId,
-        showInTimeline: true,
-        nonce,
-        loopDisplay,
-        stack,
-        from: 0,
-        duration,
-        id: sequenceId
-      });
-    }
-    registerSequence({
-      type: mediaType,
-      src,
-      id: mediaId,
-      duration: loopDisplay?.durationInFrames ?? duration,
-      from: loopDisplay ? loopIteration * loopDisplay.durationInFrames : 0,
-      parent: loopDisplay ? sequenceId : parentSequence?.id ?? null,
-      displayName: finalDisplayName,
-      rootId,
-      volume: volumes,
-      showInTimeline: true,
-      nonce,
-      startMediaFrom: 0 - startsAt,
-      doesVolumeChange,
-      loopDisplay: undefined,
-      playbackRate,
-      stack,
-      premountDisplay: null,
-      postmountDisplay: null
-    });
-    return () => {
-      if (loopDisplay) {
-        unregisterSequence(sequenceId);
-      }
-      unregisterSequence(mediaId);
-    };
-  }, [
-    doesVolumeChange,
-    duration,
-    finalDisplayName,
-    isStudio,
-    loopDisplay,
-    mediaId,
-    mediaType,
-    nonce,
-    parentSequence?.id,
-    playbackRate,
-    postmountDisplay,
-    premountDisplay,
-    registerSequence,
-    rootId,
-    sequenceId,
-    showInTimeline,
-    src,
-    stack,
-    startsAt,
-    unregisterSequence,
-    volumes,
-    frame
-  ]);
-  return {
-    id: mediaId
-  };
-};
-
-// src/video/media-player.ts
+// src/media-player.ts
 import {
   ALL_FORMATS,
   AudioBufferSink,
@@ -182,10 +18,71 @@ import {
   Input,
   UrlSource
 } from "mediabunny";
-import { Internals as Internals4 } from "remotion";
+import { Internals as Internals2 } from "remotion";
+
+// src/audio/audio-preview-iterator.ts
+var HEALTHY_BUFFER_THRESHOLD_SECONDS = 1;
+var makeAudioIterator = (audioSink, startFromSecond) => {
+  let destroyed = false;
+  const iterator = audioSink.buffers(startFromSecond);
+  let audioIteratorStarted = false;
+  let audioBufferHealth = 0;
+  const queuedAudioNodes = new Set;
+  const cleanupAudioQueue = () => {
+    for (const node of queuedAudioNodes) {
+      node.stop();
+    }
+    queuedAudioNodes.clear();
+  };
+  return {
+    cleanupAudioQueue,
+    destroy: () => {
+      cleanupAudioQueue();
+      destroyed = true;
+      iterator.return().catch(() => {
+        return;
+      });
+    },
+    isReadyToPlay: () => {
+      return audioIteratorStarted && audioBufferHealth > 0;
+    },
+    setAudioIteratorStarted: (started) => {
+      audioIteratorStarted = started;
+    },
+    getNext: () => {
+      return iterator.next();
+    },
+    setAudioBufferHealth: (health) => {
+      audioBufferHealth = health;
+    },
+    isDestroyed: () => {
+      return destroyed;
+    },
+    addQueuedAudioNode: (node) => {
+      queuedAudioNodes.add(node);
+    },
+    removeQueuedAudioNode: (node) => {
+      queuedAudioNodes.delete(node);
+    }
+  };
+};
+
+// src/debug-overlay/preview-overlay.ts
+var drawPreviewOverlay = (context, stats, audioContextState, audioSyncAnchor) => {
+  context.fillStyle = "rgba(0, 0, 0, 1)";
+  context.fillRect(20, 20, 600, 180);
+  context.fillStyle = "white";
+  context.font = "24px sans-serif";
+  context.textBaseline = "top";
+  context.fillText(`Debug overlay`, 30, 30);
+  context.fillText(`Video iterators created: ${stats.videoIteratorsCreated}`, 30, 60);
+  context.fillText(`Frames rendered: ${stats.framesRendered}`, 30, 90);
+  context.fillText(`Audio context state: ${audioContextState}`, 30, 120);
+  context.fillText(`Audio time: ${audioSyncAnchor.toFixed(3)}s`, 30, 150);
+};
 
 // src/get-time-in-seconds.ts
-import { Internals as Internals3 } from "remotion";
+import { Internals } from "remotion";
 var getTimeInSeconds = ({
   loop,
   mediaDurationInSeconds,
@@ -200,7 +97,7 @@ var getTimeInSeconds = ({
   if (mediaDurationInSeconds === null && loop && ifNoMediaDuration === "fail") {
     throw new Error(`Could not determine duration of ${src}, but "loop" was set.`);
   }
-  const loopDuration = loop ? Internals3.calculateMediaDuration({
+  const loopDuration = loop ? Internals.calculateMediaDuration({
     trimAfter,
     mediaDurationInFrames: mediaDurationInSeconds ? mediaDurationInSeconds * fps : Infinity,
     playbackRate: 1,
@@ -250,8 +147,135 @@ function withTimeout(promise, timeoutMs, errorMessage = "Operation timed out") {
   ]);
 }
 
-// src/video/media-player.ts
-var SEEK_THRESHOLD = 0.05;
+// src/helpers/round-to-4-digits.ts
+var roundTo4Digits = (timestamp) => {
+  return Math.round(timestamp * 1000) / 1000;
+};
+
+// src/video/video-preview-iterator.ts
+var createVideoIterator = (timeToSeek, videoSink) => {
+  let destroyed = false;
+  const iterator = videoSink.canvases(timeToSeek);
+  let lastReturnedFrame = null;
+  let iteratorEnded = false;
+  const getNextOrNullIfNotAvailable = async () => {
+    const next = iterator.next();
+    const result = await Promise.race([
+      next,
+      new Promise((resolve) => {
+        Promise.resolve().then(() => resolve());
+      })
+    ]);
+    if (!result) {
+      return {
+        type: "need-to-wait-for-it",
+        waitPromise: async () => {
+          const res = await next;
+          if (res.value) {
+            lastReturnedFrame = res.value;
+          } else {
+            iteratorEnded = true;
+          }
+          return res.value;
+        }
+      };
+    }
+    if (result.value) {
+      lastReturnedFrame = result.value;
+    } else {
+      iteratorEnded = true;
+    }
+    return {
+      type: "got-frame-or-end",
+      frame: result.value ?? null
+    };
+  };
+  const destroy = () => {
+    destroyed = true;
+    lastReturnedFrame = null;
+    iterator.return().catch(() => {
+      return;
+    });
+  };
+  const tryToSatisfySeek = async (time) => {
+    if (lastReturnedFrame) {
+      const frameTimestamp = roundTo4Digits(lastReturnedFrame.timestamp);
+      if (roundTo4Digits(time) < frameTimestamp) {
+        return {
+          type: "not-satisfied",
+          reason: `iterator is too far, most recently returned ${frameTimestamp}`
+        };
+      }
+      const frameEndTimestamp = roundTo4Digits(lastReturnedFrame.timestamp + lastReturnedFrame.duration);
+      const timestamp = roundTo4Digits(time);
+      if (frameTimestamp <= timestamp && frameEndTimestamp > timestamp) {
+        return {
+          type: "satisfied",
+          frame: lastReturnedFrame
+        };
+      }
+    }
+    if (iteratorEnded) {
+      if (lastReturnedFrame) {
+        return {
+          type: "satisfied",
+          frame: lastReturnedFrame
+        };
+      }
+      return {
+        type: "not-satisfied",
+        reason: "iterator ended"
+      };
+    }
+    while (true) {
+      const frame = await getNextOrNullIfNotAvailable();
+      if (frame.type === "need-to-wait-for-it") {
+        return {
+          type: "not-satisfied",
+          reason: "iterator did not have frame ready"
+        };
+      }
+      if (frame.type === "got-frame-or-end") {
+        if (frame.frame === null) {
+          iteratorEnded = true;
+          if (lastReturnedFrame) {
+            return {
+              type: "satisfied",
+              frame: lastReturnedFrame
+            };
+          }
+          return {
+            type: "not-satisfied",
+            reason: "iterator ended and did not have frame ready"
+          };
+        }
+        const frameTimestamp = roundTo4Digits(frame.frame.timestamp);
+        const frameEndTimestamp = roundTo4Digits(frame.frame.timestamp + frame.frame.duration);
+        const timestamp = roundTo4Digits(time);
+        if (frameTimestamp <= timestamp && frameEndTimestamp > timestamp) {
+          return {
+            type: "satisfied",
+            frame: frame.frame
+          };
+        }
+        continue;
+      }
+      throw new Error("Unreachable");
+    }
+  };
+  return {
+    destroy,
+    getNext: () => {
+      return iterator.next();
+    },
+    isDestroyed: () => {
+      return destroyed;
+    },
+    tryToSatisfySeek
+  };
+};
+
+// src/media-player.ts
 var AUDIO_BUFFER_TOLERANCE_THRESHOLD = 0.1;
 
 class MediaPlayer {
@@ -263,10 +287,12 @@ class MediaPlayer {
   audioStreamIndex;
   canvasSink = null;
   videoFrameIterator = null;
-  nextFrame = null;
+  debugStats = {
+    videoIteratorsCreated: 0,
+    framesRendered: 0
+  };
   audioSink = null;
   audioBufferIterator = null;
-  queuedAudioNodes = new Set;
   gainNode = null;
   currentVolume = 1;
   sharedAudioContext;
@@ -277,18 +303,15 @@ class MediaPlayer {
   fps;
   trimBefore;
   trimAfter;
-  animationFrameId = null;
-  videoAsyncId = 0;
-  audioAsyncId = 0;
   initialized = false;
   totalDuration;
   isBuffering = false;
   onBufferingChangeCallback;
-  audioBufferHealth = 0;
-  audioIteratorStarted = false;
-  HEALTHY_BUFER_THRESHOLD_SECONDS = 1;
   mediaEnded = false;
+  debugOverlay = false;
   onVideoFrameCallback;
+  initializationPromise = null;
+  bufferState;
   constructor({
     canvas,
     src,
@@ -299,7 +322,9 @@ class MediaPlayer {
     trimAfter,
     playbackRate,
     audioStreamIndex,
-    fps
+    fps,
+    debugOverlay,
+    bufferState
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
@@ -311,6 +336,8 @@ class MediaPlayer {
     this.trimAfter = trimAfter;
     this.audioStreamIndex = audioStreamIndex ?? 0;
     this.fps = fps;
+    this.debugOverlay = debugOverlay;
+    this.bufferState = bufferState;
     if (canvas) {
       const context = canvas.getContext("2d", {
         alpha: true,
@@ -326,7 +353,7 @@ class MediaPlayer {
   }
   input = null;
   isReady() {
-    return this.initialized && Boolean(this.sharedAudioContext);
+    return this.initialized && Boolean(this.sharedAudioContext) && !this.input?.disposed;
   }
   hasAudio() {
     return Boolean(this.audioSink && this.sharedAudioContext && this.gainNode);
@@ -334,7 +361,15 @@ class MediaPlayer {
   isCurrentlyBuffering() {
     return this.isBuffering && Boolean(this.bufferingStartedAtMs);
   }
-  async initialize(startTimeUnresolved) {
+  isDisposalError() {
+    return this.input?.disposed === true;
+  }
+  initialize(startTimeUnresolved) {
+    const promise = this._initialize(startTimeUnresolved);
+    this.initializationPromise = promise;
+    return promise;
+  }
+  async _initialize(startTimeUnresolved) {
     try {
       const urlSource = new UrlSource(this.src);
       const input = new Input({
@@ -342,14 +377,20 @@ class MediaPlayer {
         formats: ALL_FORMATS
       });
       this.input = input;
+      if (input.disposed) {
+        return { type: "disposed" };
+      }
       try {
-        await this.input.getFormat();
+        await input.getFormat();
       } catch (error) {
+        if (this.isDisposalError()) {
+          return { type: "disposed" };
+        }
         const err = error;
         if (isNetworkError(err)) {
           throw error;
         }
-        Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Failed to recognize format for ${this.src}`, error);
+        Internals2.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([
@@ -399,19 +440,23 @@ class MediaPlayer {
         this.audioSyncAnchor = this.sharedAudioContext.currentTime - startTime;
       }
       this.initialized = true;
-      await Promise.all([
-        this.startAudioIterator(startTime),
-        this.startVideoIterator(startTime)
-      ]);
-      this.startRenderLoop();
+      try {
+        this.startAudioIterator(startTime);
+        await this.startVideoIterator(startTime, this.currentSeekNonce);
+      } catch (error) {
+        if (this.isDisposalError()) {
+          return { type: "disposed" };
+        }
+        Internals2.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)) {
-        Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Network/CORS error for ${this.src}`, err);
+        Internals2.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Network/CORS error for ${this.src}`, err);
         return { type: "network-error" };
       }
-      Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to initialize", error);
+      Internals2.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to initialize", error);
       throw error;
     }
   }
@@ -420,20 +465,19 @@ class MediaPlayer {
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
     }
   }
-  cleanupAudioQueue() {
-    for (const node of this.queuedAudioNodes) {
-      node.stop();
-    }
-    this.queuedAudioNodes.clear();
-  }
-  async cleanAudioIteratorAndNodes() {
-    await this.audioBufferIterator?.return();
-    this.audioBufferIterator = null;
-    this.audioIteratorStarted = false;
-    this.audioBufferHealth = 0;
-    this.cleanupAudioQueue();
-  }
+  currentSeekNonce = 0;
+  seekPromiseChain = Promise.resolve();
   async seekTo(time) {
+    this.currentSeekNonce++;
+    const nonce = this.currentSeekNonce;
+    await this.seekPromiseChain;
+    this.seekPromiseChain = this.seekToDoNotCallDirectly(time, nonce);
+    await this.seekPromiseChain;
+  }
+  async seekToDoNotCallDirectly(time, nonce) {
+    if (nonce !== this.currentSeekNonce) {
+      return;
+    }
     if (!this.isReady())
       return;
     const newTime = getTimeInSeconds({
@@ -448,29 +492,29 @@ class MediaPlayer {
       src: this.src
     });
     if (newTime === null) {
-      this.videoAsyncId++;
-      this.nextFrame = null;
+      this.videoFrameIterator?.destroy();
+      this.videoFrameIterator = null;
       this.clearCanvas();
-      await this.cleanAudioIteratorAndNodes();
+      this.audioBufferIterator?.destroy();
+      this.audioBufferIterator = null;
       return;
     }
     const currentPlaybackTime = this.getPlaybackTime();
-    const isSignificantSeek = currentPlaybackTime === null || Math.abs(newTime - currentPlaybackTime) > SEEK_THRESHOLD;
-    if (isSignificantSeek) {
-      this.nextFrame = null;
-      this.audioSyncAnchor = this.sharedAudioContext.currentTime - newTime;
-      this.mediaEnded = false;
-      if (this.audioSink) {
-        await this.cleanAudioIteratorAndNodes();
-      }
-      await Promise.all([
-        this.startAudioIterator(newTime),
-        this.startVideoIterator(newTime)
-      ]);
+    if (currentPlaybackTime === newTime) {
+      return;
     }
-    if (!this.playing) {
-      this.render();
+    const satisfyResult = await this.videoFrameIterator?.tryToSatisfySeek(newTime);
+    if (satisfyResult?.type === "satisfied") {
+      this.drawFrame(satisfyResult.frame);
+      return;
     }
+    if (this.currentSeekNonce !== nonce) {
+      return;
+    }
+    this.mediaEnded = false;
+    this.audioSyncAnchor = this.sharedAudioContext.currentTime - newTime;
+    this.startAudioIterator(newTime);
+    this.startVideoIterator(newTime, nonce);
   }
   async play() {
     if (!this.isReady())
@@ -480,13 +524,11 @@ class MediaPlayer {
         await this.sharedAudioContext.resume();
       }
       this.playing = true;
-      this.startRenderLoop();
     }
   }
   pause() {
     this.playing = false;
-    this.cleanupAudioQueue();
-    this.stopRenderLoop();
+    this.audioBufferIterator?.cleanupAudioQueue();
   }
   setMuted(muted) {
     this.muted = muted;
@@ -504,6 +546,9 @@ class MediaPlayer {
       this.gainNode.gain.value = appliedVolume;
     }
   }
+  setDebugOverlay(debugOverlay) {
+    this.debugOverlay = debugOverlay;
+  }
   setPlaybackRate(rate) {
     this.playbackRate = rate;
   }
@@ -513,12 +558,18 @@ class MediaPlayer {
   setLoop(loop) {
     this.loop = loop;
   }
-  dispose() {
+  async dispose() {
+    this.initialized = false;
+    if (this.initializationPromise) {
+      try {
+        await this.initializationPromise;
+      } catch {}
+    }
     this.input?.dispose();
-    this.stopRenderLoop();
-    this.videoFrameIterator?.return();
-    this.cleanAudioIteratorAndNodes();
-    this.videoAsyncId++;
+    this.videoFrameIterator?.destroy();
+    this.videoFrameIterator = null;
+    this.audioBufferIterator?.destroy();
+    this.audioBufferIterator = null;
   }
   getPlaybackTime() {
     return this.sharedAudioContext.currentTime - this.audioSyncAnchor;
@@ -535,8 +586,8 @@ class MediaPlayer {
     } else {
       node.start(this.sharedAudioContext.currentTime, -delay);
     }
-    this.queuedAudioNodes.add(node);
-    node.onended = () => this.queuedAudioNodes.delete(node);
+    this.audioBufferIterator?.addQueuedAudioNode(node);
+    node.onended = () => this.audioBufferIterator?.removeQueuedAudioNode(node);
   }
   onBufferingChange(callback) {
     this.onBufferingChangeCallback = callback;
@@ -557,225 +608,322 @@ class MediaPlayer {
       }
     };
   }
-  canRenderVideo() {
-    return !this.hasAudio() || this.audioIteratorStarted && this.audioBufferHealth >= this.HEALTHY_BUFER_THRESHOLD_SECONDS;
-  }
-  startRenderLoop() {
-    if (this.animationFrameId !== null) {
-      return;
-    }
-    this.render();
-  }
-  stopRenderLoop() {
-    if (this.animationFrameId !== null) {
-      cancelAnimationFrame(this.animationFrameId);
-      this.animationFrameId = null;
-    }
-  }
-  render = () => {
-    if (this.isBuffering) {
-      this.maybeForceResumeFromBuffering();
-    }
-    if (this.shouldRenderFrame()) {
-      this.drawCurrentFrame();
-    }
-    if (this.playing) {
-      this.animationFrameId = requestAnimationFrame(this.render);
-    } else {
-      this.animationFrameId = null;
-    }
-  };
-  shouldRenderFrame() {
-    const playbackTime = this.getPlaybackTime();
-    if (playbackTime === null) {
-      return false;
-    }
-    return !this.isBuffering && this.canRenderVideo() && this.nextFrame !== null && this.nextFrame.timestamp <= playbackTime;
-  }
-  drawCurrentFrame() {
-    if (this.context && this.nextFrame) {
-      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-      this.context.drawImage(this.nextFrame.canvas, 0, 0);
+  drawFrame = (frame) => {
+    if (!this.context) {
+      throw new Error("Context not initialized");
     }
+    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.context.drawImage(frame.canvas, 0, 0);
+    this.debugStats.framesRendered++;
+    this.drawDebugOverlay();
     if (this.onVideoFrameCallback && this.canvas) {
       this.onVideoFrameCallback(this.canvas);
     }
-    this.nextFrame = null;
-    this.updateNextFrame();
-  }
-  startAudioIterator = async (startFromSecond) => {
+    Internals2.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
+  };
+  startAudioIterator = (startFromSecond) => {
     if (!this.hasAudio())
       return;
-    this.audioAsyncId++;
-    const currentAsyncId = this.audioAsyncId;
-    await this.audioBufferIterator?.return();
-    this.audioIteratorStarted = false;
-    this.audioBufferHealth = 0;
+    this.audioBufferIterator?.destroy();
     try {
-      this.audioBufferIterator = this.audioSink.buffers(startFromSecond);
-      this.runAudioIterator(startFromSecond, currentAsyncId);
+      const iterator = makeAudioIterator(this.audioSink, startFromSecond);
+      this.audioBufferIterator = iterator;
+      this.runAudioIterator(startFromSecond, iterator);
     } catch (error) {
-      Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start audio iterator", error);
+      if (this.isDisposalError()) {
+        return;
+      }
+      Internals2.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start audio iterator", error);
     }
   };
-  startVideoIterator = async (timeToSeek) => {
+  drawDebugOverlay() {
+    if (!this.debugOverlay)
+      return;
+    if (this.context && this.canvas) {
+      drawPreviewOverlay(this.context, this.debugStats, this.sharedAudioContext.state, this.sharedAudioContext.currentTime);
+    }
+  }
+  startVideoIterator = async (timeToSeek, nonce) => {
     if (!this.canvasSink) {
       return;
     }
-    this.videoAsyncId++;
-    const currentAsyncId = this.videoAsyncId;
-    this.videoFrameIterator?.return().catch(() => {
+    this.videoFrameIterator?.destroy();
+    const iterator = createVideoIterator(timeToSeek, this.canvasSink);
+    this.debugStats.videoIteratorsCreated++;
+    this.videoFrameIterator = iterator;
+    const delayHandle = this.bufferState?.delayPlayback();
+    const frameResult = await iterator.getNext();
+    delayHandle?.unblock();
+    if (iterator.isDestroyed()) {
+      return;
+    }
+    if (nonce !== this.currentSeekNonce) {
       return;
-    });
-    this.videoFrameIterator = this.canvasSink.canvases(timeToSeek);
-    try {
-      const firstFrame = (await this.videoFrameIterator.next()).value ?? null;
-      const secondFrame = (await this.videoFrameIterator.next()).value ?? null;
-      if (currentAsyncId !== this.videoAsyncId) {
-        return;
-      }
-      if (firstFrame && this.context) {
-        Internals4.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew initial frame ${firstFrame.timestamp.toFixed(3)}s`);
-        this.context.drawImage(firstFrame.canvas, 0, 0);
-        if (this.onVideoFrameCallback && this.canvas) {
-          this.onVideoFrameCallback(this.canvas);
-        }
-      }
-      this.nextFrame = secondFrame ?? null;
-      if (secondFrame) {
-        Internals4.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Buffered next frame ${secondFrame.timestamp.toFixed(3)}s`);
-      }
-    } catch (error) {
-      Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start video iterator", error);
     }
+    if (this.videoFrameIterator.isDestroyed()) {
+      return;
+    }
+    if (frameResult.value) {
+      this.audioSyncAnchor = this.sharedAudioContext.currentTime - frameResult.value.timestamp;
+      this.drawFrame(frameResult.value);
+    } else {}
   };
-  updateNextFrame = async () => {
-    if (!this.videoFrameIterator) {
+  bufferingStartedAtMs = null;
+  minBufferingTimeoutMs = 500;
+  setBufferingState(isBuffering) {
+    if (this.isBuffering !== isBuffering) {
+      this.isBuffering = isBuffering;
+      if (isBuffering) {
+        this.bufferingStartedAtMs = performance.now();
+        this.onBufferingChangeCallback?.(true);
+      } else {
+        this.bufferingStartedAtMs = null;
+        this.onBufferingChangeCallback?.(false);
+      }
+    }
+  }
+  maybeResumeFromBuffering(currentBufferDuration) {
+    if (!this.isCurrentlyBuffering())
       return;
+    const now = performance.now();
+    const bufferingDuration = now - this.bufferingStartedAtMs;
+    const minTimeElapsed = bufferingDuration >= this.minBufferingTimeoutMs;
+    const bufferHealthy = currentBufferDuration >= HEALTHY_BUFFER_THRESHOLD_SECONDS;
+    if (minTimeElapsed && bufferHealthy) {
+      Internals2.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Resuming from buffering after ${bufferingDuration}ms - buffer recovered`);
+      this.setBufferingState(false);
     }
+  }
+  runAudioIterator = async (startFromSecond, audioIterator) => {
+    if (!this.hasAudio())
+      return;
     try {
+      let totalBufferDuration = 0;
+      let isFirstBuffer = true;
+      audioIterator.setAudioIteratorStarted(true);
       while (true) {
-        const newNextFrame = (await this.videoFrameIterator.next()).value ?? null;
-        if (!newNextFrame) {
+        if (audioIterator.isDestroyed()) {
+          return;
+        }
+        const BUFFERING_TIMEOUT_MS = 50;
+        let result;
+        try {
+          result = await withTimeout(audioIterator.getNext(), BUFFERING_TIMEOUT_MS, "Iterator timeout");
+        } catch (error) {
+          if (error instanceof TimeoutError && !this.mediaEnded) {
+            this.setBufferingState(true);
+          }
+          await sleep(10);
+          continue;
+        }
+        if (result.done || !result.value) {
           this.mediaEnded = true;
           break;
         }
+        const { buffer, timestamp, duration } = result.value;
+        totalBufferDuration += duration;
+        audioIterator.setAudioBufferHealth(Math.max(0, totalBufferDuration / this.playbackRate));
+        this.maybeResumeFromBuffering(totalBufferDuration / this.playbackRate);
+        if (this.playing) {
+          if (isFirstBuffer) {
+            this.audioSyncAnchor = this.sharedAudioContext.currentTime - timestamp;
+            isFirstBuffer = false;
+          }
+          if (timestamp < startFromSecond - AUDIO_BUFFER_TOLERANCE_THRESHOLD) {
+            continue;
+          }
+          this.scheduleAudioChunk(buffer, timestamp);
+        }
         const playbackTime = this.getPlaybackTime();
         if (playbackTime === null) {
           continue;
         }
-        if (newNextFrame.timestamp <= playbackTime) {
-          continue;
-        } else {
-          this.nextFrame = newNextFrame;
-          Internals4.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Buffered next frame ${newNextFrame.timestamp.toFixed(3)}s`);
-          break;
+        if (timestamp - playbackTime >= 1) {
+          await new Promise((resolve) => {
+            const check = () => {
+              const currentPlaybackTime = this.getPlaybackTime();
+              if (currentPlaybackTime !== null && timestamp - currentPlaybackTime < 1) {
+                resolve();
+              } else {
+                requestAnimationFrame(check);
+              }
+            };
+            check();
+          });
         }
       }
     } catch (error) {
-      Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to update next frame", error);
+      if (this.isDisposalError()) {
+        return;
+      }
+      Internals2.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to run audio iterator", error);
     }
   };
-  bufferingStartedAtMs = null;
-  minBufferingTimeoutMs = 500;
-  setBufferingState(isBuffering) {
-    if (this.isBuffering !== isBuffering) {
-      this.isBuffering = isBuffering;
-      if (isBuffering) {
-        this.bufferingStartedAtMs = performance.now();
-        this.onBufferingChangeCallback?.(true);
-      } else {
-        this.bufferingStartedAtMs = null;
-        this.onBufferingChangeCallback?.(false);
-      }
+}
+
+// src/show-in-timeline.ts
+import { useMemo } from "react";
+import { Internals as Internals3, useVideoConfig } from "remotion";
+var useLoopDisplay = ({
+  loop,
+  mediaDurationInSeconds,
+  playbackRate,
+  trimAfter,
+  trimBefore
+}) => {
+  const { durationInFrames: compDuration, fps } = useVideoConfig();
+  const loopDisplay = useMemo(() => {
+    if (!loop || !mediaDurationInSeconds) {
+      return;
+    }
+    const durationInFrames = Internals3.calculateMediaDuration({
+      mediaDurationInFrames: mediaDurationInSeconds * fps,
+      playbackRate,
+      trimAfter,
+      trimBefore
+    });
+    const maxTimes = compDuration / durationInFrames;
+    return {
+      numberOfTimes: maxTimes,
+      startOffset: 0,
+      durationInFrames
+    };
+  }, [
+    compDuration,
+    fps,
+    loop,
+    mediaDurationInSeconds,
+    playbackRate,
+    trimAfter,
+    trimBefore
+  ]);
+  return loopDisplay;
+};
+
+// src/use-media-in-timeline.ts
+import { useContext, useEffect, useState } from "react";
+import { Internals as Internals4, useCurrentFrame } from "remotion";
+var useMediaInTimeline = ({
+  volume,
+  mediaVolume,
+  src,
+  mediaType,
+  playbackRate,
+  displayName,
+  stack,
+  showInTimeline,
+  premountDisplay,
+  postmountDisplay,
+  loopDisplay,
+  trimBefore,
+  trimAfter
+}) => {
+  const parentSequence = useContext(Internals4.SequenceContext);
+  const startsAt = Internals4.useMediaStartsAt();
+  const { registerSequence, unregisterSequence } = useContext(Internals4.SequenceManager);
+  const [sequenceId] = useState(() => String(Math.random()));
+  const [mediaId] = useState(() => String(Math.random()));
+  const frame = useCurrentFrame();
+  const {
+    volumes,
+    duration,
+    doesVolumeChange,
+    nonce,
+    rootId,
+    isStudio,
+    finalDisplayName
+  } = Internals4.useBasicMediaInTimeline({
+    volume,
+    mediaVolume,
+    mediaType,
+    src,
+    displayName,
+    trimBefore,
+    trimAfter,
+    playbackRate
+  });
+  useEffect(() => {
+    if (!src) {
+      throw new Error("No src passed");
     }
-  }
-  maybeResumeFromBuffering(currentBufferDuration) {
-    if (!this.isCurrentlyBuffering())
+    if (!isStudio && window.process?.env?.NODE_ENV !== "test") {
       return;
-    const now = performance.now();
-    const bufferingDuration = now - this.bufferingStartedAtMs;
-    const minTimeElapsed = bufferingDuration >= this.minBufferingTimeoutMs;
-    const bufferHealthy = currentBufferDuration >= this.HEALTHY_BUFER_THRESHOLD_SECONDS;
-    if (minTimeElapsed && bufferHealthy) {
-      Internals4.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Resuming from buffering after ${bufferingDuration}ms - buffer recovered`);
-      this.setBufferingState(false);
     }
-  }
-  maybeForceResumeFromBuffering() {
-    if (!this.isCurrentlyBuffering())
+    if (!showInTimeline) {
       return;
-    const now = performance.now();
-    const bufferingDuration = now - this.bufferingStartedAtMs;
-    const forceTimeout = bufferingDuration > this.minBufferingTimeoutMs * 10;
-    if (forceTimeout) {
-      Internals4.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Force resuming from buffering after ${bufferingDuration}ms`);
-      this.setBufferingState(false);
     }
-  }
-  runAudioIterator = async (startFromSecond, audioAsyncId) => {
-    if (!this.hasAudio() || !this.audioBufferIterator)
-      return;
-    try {
-      let totalBufferDuration = 0;
-      let isFirstBuffer = true;
-      this.audioIteratorStarted = true;
-      while (true) {
-        if (audioAsyncId !== this.audioAsyncId) {
-          return;
-        }
-        const BUFFERING_TIMEOUT_MS = 50;
-        let result;
-        try {
-          result = await withTimeout(this.audioBufferIterator.next(), BUFFERING_TIMEOUT_MS, "Iterator timeout");
-        } catch (error) {
-          if (error instanceof TimeoutError && !this.mediaEnded) {
-            this.setBufferingState(true);
-          }
-          await sleep(10);
-          continue;
-        }
-        if (result.done || !result.value) {
-          this.mediaEnded = true;
-          break;
-        }
-        const { buffer, timestamp, duration } = result.value;
-        totalBufferDuration += duration;
-        this.audioBufferHealth = Math.max(0, totalBufferDuration / this.playbackRate);
-        this.maybeResumeFromBuffering(totalBufferDuration / this.playbackRate);
-        if (this.playing) {
-          if (isFirstBuffer) {
-            this.audioSyncAnchor = this.sharedAudioContext.currentTime - timestamp;
-            isFirstBuffer = false;
-          }
-          if (timestamp < startFromSecond - AUDIO_BUFFER_TOLERANCE_THRESHOLD) {
-            continue;
-          }
-          this.scheduleAudioChunk(buffer, timestamp);
-        }
-        const playbackTime = this.getPlaybackTime();
-        if (playbackTime === null) {
-          continue;
-        }
-        if (timestamp - playbackTime >= 1) {
-          await new Promise((resolve) => {
-            const check = () => {
-              const currentPlaybackTime = this.getPlaybackTime();
-              if (currentPlaybackTime !== null && timestamp - currentPlaybackTime < 1) {
-                resolve();
-              } else {
-                requestAnimationFrame(check);
-              }
-            };
-            check();
-          });
-        }
-      }
-    } catch (error) {
-      Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to run audio iterator", error);
+    const loopIteration = loopDisplay ? Math.floor(frame / loopDisplay.durationInFrames) : 0;
+    if (loopDisplay) {
+      registerSequence({
+        type: "sequence",
+        premountDisplay,
+        postmountDisplay,
+        parent: parentSequence?.id ?? null,
+        displayName: finalDisplayName,
+        rootId,
+        showInTimeline: true,
+        nonce,
+        loopDisplay,
+        stack,
+        from: 0,
+        duration,
+        id: sequenceId
+      });
     }
+    registerSequence({
+      type: mediaType,
+      src,
+      id: mediaId,
+      duration: loopDisplay?.durationInFrames ?? duration,
+      from: loopDisplay ? loopIteration * loopDisplay.durationInFrames : 0,
+      parent: loopDisplay ? sequenceId : parentSequence?.id ?? null,
+      displayName: finalDisplayName,
+      rootId,
+      volume: volumes,
+      showInTimeline: true,
+      nonce,
+      startMediaFrom: 0 - startsAt,
+      doesVolumeChange,
+      loopDisplay: undefined,
+      playbackRate,
+      stack,
+      premountDisplay: null,
+      postmountDisplay: null
+    });
+    return () => {
+      if (loopDisplay) {
+        unregisterSequence(sequenceId);
+      }
+      unregisterSequence(mediaId);
+    };
+  }, [
+    doesVolumeChange,
+    duration,
+    finalDisplayName,
+    isStudio,
+    loopDisplay,
+    mediaId,
+    mediaType,
+    nonce,
+    parentSequence?.id,
+    playbackRate,
+    postmountDisplay,
+    premountDisplay,
+    registerSequence,
+    rootId,
+    sequenceId,
+    showInTimeline,
+    src,
+    stack,
+    startsAt,
+    unregisterSequence,
+    volumes,
+    frame
+  ]);
+  return {
+    id: mediaId
   };
-}
+};
 
 // src/audio/audio-for-preview.tsx
 import { jsx } from "react/jsx-runtime";
@@ -878,7 +1026,9 @@ var NewAudioForPreview = ({
         fps: videoConfig.fps,
         canvas: null,
         playbackRate,
-        audioStreamIndex: audioStreamIndex ?? 0
+        audioStreamIndex: audioStreamIndex ?? 0,
+        debugOverlay: false,
+        bufferState: buffer
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current).then((result) => {
@@ -950,7 +1100,8 @@ var NewAudioForPreview = ({
     playbackRate,
     videoConfig.fps,
     audioStreamIndex,
-    disallowFallbackToHtml5Audio
+    disallowFallbackToHtml5Audio,
+    buffer
   ]);
   useEffect2(() => {
     const audioPlayer = mediaPlayerRef.current;
@@ -1297,7 +1448,7 @@ var warnAboutMatroskaOnce = (src, logLevel) => {
   warned[src] = true;
   Internals6.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 makeAudioIterator = ({
+var makeAudioIterator2 = ({
   audioSampleSink,
   isMatroska,
   startTimestamp,
@@ -1422,7 +1573,7 @@ var makeAudioManager = () => {
     actualMatroskaTimestamps,
     logLevel
   }) => {
-    const iterator = makeAudioIterator({
+    const iterator = makeAudioIterator2({
       audioSampleSink,
       isMatroska,
       startTimestamp: timeInSeconds,
@@ -1584,20 +1735,43 @@ import {
 
 // src/video-extraction/keyframe-bank.ts
 import { Internals as Internals8 } from "remotion";
-var roundTo4Digits = (timestamp) => {
-  return Math.round(timestamp * 1000) / 1000;
-};
 var makeKeyframeBank = ({
   startTimestampInSeconds,
   endTimestampInSeconds,
   sampleIterator,
-  logLevel: parentLogLevel
+  logLevel: parentLogLevel,
+  src
 }) => {
   Internals8.Log.verbose({ logLevel: parentLogLevel, tag: "@remotion/media" }, `Creating keyframe bank from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
   const frames = {};
   const frameTimestamps = [];
   let lastUsed = Date.now();
   let allocationSize = 0;
+  const deleteFramesBeforeTimestamp = ({
+    logLevel,
+    timestampInSeconds
+  }) => {
+    const deletedTimestamps = [];
+    for (const frameTimestamp of frameTimestamps.slice()) {
+      const isLast = frameTimestamp === frameTimestamps[frameTimestamps.length - 1];
+      if (isLast) {
+        continue;
+      }
+      if (frameTimestamp < timestampInSeconds) {
+        if (!frames[frameTimestamp]) {
+          continue;
+        }
+        allocationSize -= frames[frameTimestamp].allocationSize();
+        frameTimestamps.splice(frameTimestamps.indexOf(frameTimestamp), 1);
+        frames[frameTimestamp].close();
+        delete frames[frameTimestamp];
+        deletedTimestamps.push(frameTimestamp);
+      }
+    }
+    if (deletedTimestamps.length > 0) {
+      Internals8.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${deletedTimestamps.length} frame${deletedTimestamps.length === 1 ? "" : "s"} ${renderTimestampRange(deletedTimestamps)} for src ${src} because it is lower than ${timestampInSeconds}. Remaining: ${renderTimestampRange(frameTimestamps)}`);
+    }
+  };
   const hasDecodedEnoughForTimestamp = (timestamp) => {
     const lastFrameTimestamp = frameTimestamps[frameTimestamps.length - 1];
     if (!lastFrameTimestamp) {
@@ -1615,8 +1789,8 @@ var makeKeyframeBank = ({
     allocationSize += frame.allocationSize();
     lastUsed = Date.now();
   };
-  const ensureEnoughFramesForTimestamp = async (timestamp) => {
-    while (!hasDecodedEnoughForTimestamp(timestamp)) {
+  const ensureEnoughFramesForTimestamp = async (timestampInSeconds) => {
+    while (!hasDecodedEnoughForTimestamp(timestampInSeconds)) {
       const sample = await sampleIterator.next();
       if (sample.value) {
         addFrame(sample.value);
@@ -1624,6 +1798,10 @@ var makeKeyframeBank = ({
       if (sample.done) {
         break;
       }
+      deleteFramesBeforeTimestamp({
+        logLevel: parentLogLevel,
+        timestampInSeconds: timestampInSeconds - SAFE_BACK_WINDOW_IN_SECONDS
+      });
     }
     lastUsed = Date.now();
   };
@@ -1658,6 +1836,7 @@ var makeKeyframeBank = ({
       }
       return null;
     });
+    let framesDeleted = 0;
     for (const frameTimestamp of frameTimestamps) {
       if (!frames[frameTimestamp]) {
         continue;
@@ -1665,34 +1844,10 @@ var makeKeyframeBank = ({
       allocationSize -= frames[frameTimestamp].allocationSize();
       frames[frameTimestamp].close();
       delete frames[frameTimestamp];
+      framesDeleted++;
     }
     frameTimestamps.length = 0;
-  };
-  const deleteFramesBeforeTimestamp = ({
-    logLevel,
-    src,
-    timestampInSeconds
-  }) => {
-    const deletedTimestamps = [];
-    for (const frameTimestamp of frameTimestamps.slice()) {
-      const isLast = frameTimestamp === frameTimestamps[frameTimestamps.length - 1];
-      if (isLast) {
-        continue;
-      }
-      if (frameTimestamp < timestampInSeconds) {
-        if (!frames[frameTimestamp]) {
-          continue;
-        }
-        allocationSize -= frames[frameTimestamp].allocationSize();
-        frameTimestamps.splice(frameTimestamps.indexOf(frameTimestamp), 1);
-        frames[frameTimestamp].close();
-        delete frames[frameTimestamp];
-        deletedTimestamps.push(frameTimestamp);
-      }
-    }
-    if (deletedTimestamps.length > 0) {
-      Internals8.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${deletedTimestamps.length} frame${deletedTimestamps.length === 1 ? "" : "s"} ${renderTimestampRange(deletedTimestamps)} for src ${src} because it is lower than ${timestampInSeconds}. Remaining: ${renderTimestampRange(frameTimestamps)}`);
-    }
+    return { framesDeleted };
   };
   const getOpenFrameCount = () => {
     return {
@@ -1711,13 +1866,11 @@ var makeKeyframeBank = ({
       queue = queue.then(() => getFrameFromTimestamp(timestamp));
       return queue;
     },
-    prepareForDeletion: (logLevel) => {
-      queue = queue.then(() => prepareForDeletion(logLevel));
-      return queue;
-    },
+    prepareForDeletion,
     hasTimestampInSecond,
     addFrame,
     deleteFramesBeforeTimestamp,
+    src,
     getOpenFrameCount,
     getLastUsed
   };
@@ -1829,7 +1982,8 @@ var getFramesSinceKeyframe = async ({
   packetSink,
   videoSampleSink,
   startPacket,
-  logLevel
+  logLevel,
+  src
 }) => {
   const nextKeyPacket = await packetSink.getNextKeyPacket(startPacket, {
     verifyKeyPackets: true
@@ -1839,7 +1993,8 @@ var getFramesSinceKeyframe = async ({
     startTimestampInSeconds: startPacket.timestamp,
     endTimestampInSeconds: nextKeyPacket ? nextKeyPacket.timestamp : Infinity,
     sampleIterator,
-    logLevel
+    logLevel,
+    src
   });
   return keyframeBank;
 };
@@ -1891,6 +2046,7 @@ var makeKeyframeManager = () => {
   const getTheKeyframeBankMostInThePast = async () => {
     let mostInThePast = null;
     let mostInThePastBank = null;
+    let numberOfBanks = 0;
     for (const src in sources) {
       for (const b in sources[src]) {
         const bank = await sources[src][b];
@@ -1899,26 +2055,38 @@ var makeKeyframeManager = () => {
           mostInThePast = lastUsed;
           mostInThePastBank = { src, bank };
         }
+        numberOfBanks++;
       }
     }
     if (!mostInThePastBank) {
       throw new Error("No keyframe bank found");
     }
-    return mostInThePastBank;
+    return { mostInThePastBank, numberOfBanks };
   };
   const deleteOldestKeyframeBank = async (logLevel) => {
-    const { bank: mostInThePastBank, src: mostInThePastSrc } = await getTheKeyframeBankMostInThePast();
+    const {
+      mostInThePastBank: { bank: mostInThePastBank, src: mostInThePastSrc },
+      numberOfBanks
+    } = await getTheKeyframeBankMostInThePast();
+    if (numberOfBanks < 2) {
+      return { finish: true };
+    }
     if (mostInThePastBank) {
-      await mostInThePastBank.prepareForDeletion(logLevel);
+      const { framesDeleted } = mostInThePastBank.prepareForDeletion(logLevel);
       delete sources[mostInThePastSrc][mostInThePastBank.startTimestampInSeconds];
-      Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
+      Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `Deleted ${framesDeleted} frames for src ${mostInThePastSrc} from ${mostInThePastBank.startTimestampInSeconds}sec to ${mostInThePastBank.endTimestampInSeconds}sec to free up memory.`);
     }
+    return { finish: false };
   };
   const ensureToStayUnderMaxCacheSize = async (logLevel) => {
     let cacheStats = await getTotalCacheStats();
     const maxCacheSize = getMaxVideoCacheSize(logLevel);
     while (cacheStats.totalSize > maxCacheSize) {
-      await deleteOldestKeyframeBank(logLevel);
+      const { finish } = await deleteOldestKeyframeBank(logLevel);
+      if (finish) {
+        break;
+      }
+      Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, "Deleted oldest keyframe bank to stay under max cache size", (cacheStats.totalSize / 1024 / 1024).toFixed(1), "out of", (maxCacheSize / 1024 / 1024).toFixed(1));
       cacheStats = await getTotalCacheStats();
     }
   };
@@ -1936,14 +2104,13 @@ var makeKeyframeManager = () => {
       const bank = await sources[src][startTimeInSeconds];
       const { endTimestampInSeconds, startTimestampInSeconds } = bank;
       if (endTimestampInSeconds < threshold) {
-        await bank.prepareForDeletion(logLevel);
+        bank.prepareForDeletion(logLevel);
         Internals9.Log.verbose({ logLevel, tag: "@remotion/media" }, `[Video] Cleared frames for src ${src} from ${startTimestampInSeconds}sec to ${endTimestampInSeconds}sec`);
         delete sources[src][startTimeInSeconds];
       } else {
         bank.deleteFramesBeforeTimestamp({
           timestampInSeconds: threshold,
-          logLevel,
-          src
+          logLevel
         });
       }
     }
@@ -1973,7 +2140,8 @@ var makeKeyframeManager = () => {
         packetSink,
         videoSampleSink,
         startPacket,
-        logLevel
+        logLevel,
+        src
       });
       addKeyframeBank({ src, bank: newKeyframeBank, startTimestampInSeconds });
       return newKeyframeBank;
@@ -1988,7 +2156,8 @@ var makeKeyframeManager = () => {
       packetSink,
       videoSampleSink,
       startPacket,
-      logLevel
+      logLevel,
+      src
     });
     addKeyframeBank({ src, bank: replacementKeybank, startTimestampInSeconds });
     return replacementKeybank;
@@ -2062,7 +2231,7 @@ var getTotalCacheStats = async () => {
   };
 };
 var getUncachedMaxCacheSize = (logLevel) => {
-  if (window.remotion_mediaCacheSizeInBytes !== undefined && window.remotion_mediaCacheSizeInBytes !== null) {
+  if (typeof window !== "undefined" && window.remotion_mediaCacheSizeInBytes !== undefined && window.remotion_mediaCacheSizeInBytes !== null) {
     if (window.remotion_mediaCacheSizeInBytes < 240 * 1024 * 1024) {
       cancelRender(new Error(`The minimum value for the "mediaCacheSizeInBytes" prop is 240MB (${240 * 1024 * 1024}), got: ${window.remotion_mediaCacheSizeInBytes}`));
     }
@@ -2072,7 +2241,7 @@ var getUncachedMaxCacheSize = (logLevel) => {
     Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set using "mediaCacheSizeInBytes": ${(window.remotion_mediaCacheSizeInBytes / 1024 / 1024).toFixed(1)} MB`);
     return window.remotion_mediaCacheSizeInBytes;
   }
-  if (window.remotion_initialMemoryAvailable !== undefined && window.remotion_initialMemoryAvailable !== null) {
+  if (typeof window !== "undefined" && window.remotion_initialMemoryAvailable !== undefined && window.remotion_initialMemoryAvailable !== null) {
     const value = window.remotion_initialMemoryAvailable / 2;
     if (value < 500 * 1024 * 1024) {
       Internals10.Log.verbose({ logLevel, tag: "@remotion/media" }, `Using cache size set based on minimum value of 500MB (which is more than half of the available system memory!)`);
@@ -2446,7 +2615,7 @@ var extractFrameAndAudio = async ({
 };
 
 // src/video-extraction/extract-frame-via-broadcast-channel.ts
-if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
+if (typeof window !== "undefined" && window.remotion_broadcastChannel && window.remotion_isMainTab) {
   window.remotion_broadcastChannel.addEventListener("message", async (event) => {
     const data = event.data;
     if (data.type === "request") {
@@ -2654,7 +2823,7 @@ var AudioForRendering = ({
   loopVolumeCurveBehavior,
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
-  logLevel = window.remotion_logLevel,
+  logLevel,
   loop,
   fallbackHtml5AudioProps,
   audioStreamIndex,
@@ -2712,7 +2881,7 @@ var AudioForRendering = ({
       timeInSeconds: timestamp,
       durationInSeconds,
       playbackRate: playbackRate ?? 1,
-      logLevel,
+      logLevel: logLevel ?? window.remotion_logLevel,
       includeAudio: shouldRenderAudio,
       includeVideo: false,
       isClientSideRendering: environment.isClientSideRendering,
@@ -2726,7 +2895,10 @@ var AudioForRendering = ({
         if (disallowFallbackToHtml5Audio) {
           cancelRender2(new Error(`Unknown container format ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
         }
-        Internals12.Log.warn({ logLevel, tag: "@remotion/media" }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
+        Internals12.Log.warn({
+          logLevel: logLevel ?? window.remotion_logLevel,
+          tag: "@remotion/media"
+        }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
         setReplaceWithHtml5Audio(true);
         return;
       }
@@ -2734,7 +2906,10 @@ var AudioForRendering = ({
         if (disallowFallbackToHtml5Audio) {
           cancelRender2(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
         }
-        Internals12.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${src}, falling back to <Html5Audio>`);
+        Internals12.Log.warn({
+          logLevel: logLevel ?? window.remotion_logLevel,
+          tag: "@remotion/media"
+        }, `Cannot decode ${src}, falling back to <Html5Audio>`);
         setReplaceWithHtml5Audio(true);
         return;
       }
@@ -2745,7 +2920,10 @@ var AudioForRendering = ({
         if (disallowFallbackToHtml5Audio) {
           cancelRender2(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
         }
-        Internals12.Log.warn({ logLevel, tag: "@remotion/media" }, `Network error fetching ${src}, falling back to <Html5Audio>`);
+        Internals12.Log.warn({
+          logLevel: logLevel ?? window.remotion_logLevel,
+          tag: "@remotion/media"
+        }, `Network error fetching ${src}, falling back to <Html5Audio>`);
         setReplaceWithHtml5Audio(true);
         return;
       }
@@ -2861,7 +3039,14 @@ Internals13.addSequenceStackTraces(Audio);
 import { Internals as Internals16, useRemotionEnvironment as useRemotionEnvironment4 } from "remotion";
 
 // src/video/video-for-preview.tsx
-import { useContext as useContext4, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef2, useState as useState4 } from "react";
+import {
+  useContext as useContext4,
+  useEffect as useEffect3,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo4,
+  useRef as useRef2,
+  useState as useState4
+} from "react";
 import { Html5Video, Internals as Internals14, useBufferState as useBufferState2, useCurrentFrame as useCurrentFrame4 } from "remotion";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var {
@@ -2895,7 +3080,8 @@ var VideoForPreview = ({
   stack,
   disallowFallbackToOffthreadVideo,
   fallbackOffthreadVideoProps,
-  audioStreamIndex
+  audioStreamIndex,
+  debugOverlay
 }) => {
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
@@ -2947,9 +3133,6 @@ var VideoForPreview = ({
   if (!videoConfig) {
     throw new Error("No video config found");
   }
-  if (!src) {
-    throw new TypeError("No `src` was passed to <NewVideoForPreview>.");
-  }
   const currentTime = frame / videoConfig.fps;
   const currentTimeRef = useRef2(currentTime);
   currentTimeRef.current = currentTime;
@@ -2972,10 +3155,15 @@ var VideoForPreview = ({
         trimBefore,
         fps: videoConfig.fps,
         playbackRate,
-        audioStreamIndex
+        audioStreamIndex,
+        debugOverlay,
+        bufferState: buffer
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current).then((result) => {
+        if (result.type === "disposed") {
+          return;
+        }
         if (result.type === "unknown-container-format") {
           if (disallowFallbackToOffthreadVideo) {
             throw new Error(`Unknown container format ${preloadedSrc}, and 'disallowFallbackToOffthreadVideo' was set.`);
@@ -3013,16 +3201,16 @@ var VideoForPreview = ({
           setMediaDurationInSeconds(result.durationInSeconds);
         }
       }).catch((error) => {
-        Internals14.Log.error({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] Failed to initialize MediaPlayer", error);
+        Internals14.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to initialize MediaPlayer", error);
         setShouldFallbackToNativeVideo(true);
       });
     } catch (error) {
-      Internals14.Log.error({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] MediaPlayer initialization failed", error);
+      Internals14.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer initialization failed", error);
       setShouldFallbackToNativeVideo(true);
     }
     return () => {
       if (mediaPlayerRef.current) {
-        Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewVideoForPreview] Disposing MediaPlayer`);
+        Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Disposing MediaPlayer`);
         mediaPlayerRef.current.dispose();
         mediaPlayerRef.current = null;
       }
@@ -3039,7 +3227,9 @@ var VideoForPreview = ({
     videoConfig.fps,
     playbackRate,
     disallowFallbackToOffthreadVideo,
-    audioStreamIndex
+    audioStreamIndex,
+    debugOverlay,
+    buffer
   ]);
   const classNameValue = useMemo4(() => {
     return [Internals14.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals14.truthy).join(" ");
@@ -3050,18 +3240,18 @@ var VideoForPreview = ({
       return;
     if (playing) {
       mediaPlayer.play().catch((error) => {
-        Internals14.Log.error({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] Failed to play", error);
+        Internals14.Log.error({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] Failed to play", error);
       });
     } else {
       mediaPlayer.pause();
     }
   }, [playing, logLevel, mediaPlayerReady]);
-  useEffect3(() => {
+  useLayoutEffect2(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady)
       return;
     mediaPlayer.seekTo(currentTime);
-    Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewVideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
+    Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
   }, [currentTime, logLevel, mediaPlayerReady]);
   useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
@@ -3071,11 +3261,11 @@ var VideoForPreview = ({
     const unsubscribe = mediaPlayer.onBufferingChange((newBufferingState) => {
       if (newBufferingState && !currentBlock) {
         currentBlock = buffer.delayPlayback();
-        Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] MediaPlayer buffering - blocking Remotion playback");
+        Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer buffering - blocking Remotion playback");
       } else if (!newBufferingState && currentBlock) {
         currentBlock.unblock();
         currentBlock = null;
-        Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] MediaPlayer unbuffering - unblocking Remotion playback");
+        Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, "[VideoForPreview] MediaPlayer unbuffering - unblocking Remotion playback");
       }
     });
     return () => {
@@ -3100,6 +3290,13 @@ var VideoForPreview = ({
     }
     mediaPlayer.setVolume(userPreferredVolume);
   }, [userPreferredVolume, mediaPlayerReady]);
+  useEffect3(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setDebugOverlay(debugOverlay);
+  }, [debugOverlay, mediaPlayerReady]);
   const effectivePlaybackRate = useMemo4(() => playbackRate * globalPlaybackRate, [playbackRate, globalPlaybackRate]);
   useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
@@ -3168,7 +3365,7 @@ var VideoForPreview = ({
 // src/video/video-for-rendering.tsx
 import {
   useContext as useContext5,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo5,
   useRef as useRef3,
   useState as useState5
@@ -3183,26 +3380,6 @@ import {
   useRemotionEnvironment as useRemotionEnvironment3,
   useVideoConfig as useVideoConfig2
 } from "remotion";
-
-// ../core/src/calculate-media-duration.ts
-var calculateMediaDuration = ({
-  trimAfter,
-  mediaDurationInFrames,
-  playbackRate,
-  trimBefore
-}) => {
-  let duration = mediaDurationInFrames;
-  if (typeof trimAfter !== "undefined") {
-    duration = trimAfter;
-  }
-  if (typeof trimBefore !== "undefined") {
-    duration -= trimBefore;
-  }
-  const actualDuration = duration / playbackRate;
-  return Math.floor(actualDuration);
-};
-
-// src/video/video-for-rendering.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 var VideoForRendering = ({
   volume: volumeProp,
@@ -3245,7 +3422,9 @@ var VideoForRendering = ({
   const { delayRender, continueRender } = useDelayRender2();
   const canvasRef = useRef3(null);
   const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState5(false);
-  useLayoutEffect2(() => {
+  const audioEnabled = Internals15.useAudioEnabled();
+  const videoEnabled = Internals15.useVideoEnabled();
+  useLayoutEffect3(() => {
     if (!canvasRef.current) {
       return;
     }
@@ -3259,7 +3438,7 @@ var VideoForRendering = ({
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
     const shouldRenderAudio = (() => {
-      if (!window.remotion_audioEnabled) {
+      if (!audioEnabled) {
         return false;
       }
       if (muted) {
@@ -3274,7 +3453,7 @@ var VideoForRendering = ({
       playbackRate,
       logLevel,
       includeAudio: shouldRenderAudio,
-      includeVideo: window.remotion_videoEnabled,
+      includeVideo: videoEnabled,
       isClientSideRendering: environment.isClientSideRendering,
       loop,
       audioStreamIndex,
@@ -3344,7 +3523,7 @@ var VideoForRendering = ({
         context.canvas.style.aspectRatio = `${context.canvas.width} / ${context.canvas.height}`;
         context.drawImage(imageBitmap, 0, 0);
         imageBitmap.close();
-      } else if (window.remotion_videoEnabled) {
+      } else if (videoEnabled) {
         const context = canvasRef.current?.getContext("2d", {
           alpha: true
         });
@@ -3412,7 +3591,9 @@ var VideoForRendering = ({
     disallowFallbackToOffthreadVideo,
     toneFrequency,
     trimAfterValue,
-    trimBeforeValue
+    trimBeforeValue,
+    audioEnabled,
+    videoEnabled
   ]);
   const classNameValue = useMemo5(() => {
     return [Internals15.OBJECTFIT_CONTAIN_CLASS_NAME, className].filter(Internals15.truthy).join(" ");
@@ -3458,7 +3639,7 @@ var VideoForRendering = ({
       }
       return /* @__PURE__ */ jsx5(Loop, {
         layout: "none",
-        durationInFrames: calculateMediaDuration({
+        durationInFrames: Internals15.calculateMediaDuration({
           trimAfter: trimAfterValue,
           mediaDurationInFrames: replaceWithOffthreadVideo.durationInSeconds * fps,
           playbackRate,
@@ -3500,7 +3681,8 @@ var InnerVideo = ({
   volume,
   stack,
   toneFrequency,
-  showInTimeline
+  showInTimeline,
+  debugOverlay
 }) => {
   const environment = useRemotionEnvironment4();
   if (typeof src !== "string") {
@@ -3561,7 +3743,8 @@ var InnerVideo = ({
     trimBefore: trimBeforeValue,
     stack: stack ?? null,
     disallowFallbackToOffthreadVideo,
-    fallbackOffthreadVideoProps
+    fallbackOffthreadVideoProps,
+    debugOverlay: debugOverlay ?? false
   });
 };
 var Video = ({
@@ -3585,7 +3768,8 @@ var Video = ({
   trimBefore,
   volume,
   stack,
-  toneFrequency
+  toneFrequency,
+  debugOverlay
 }) => {
   return /* @__PURE__ */ jsx6(InnerVideo, {
     audioStreamIndex: audioStreamIndex ?? 0,
@@ -3594,7 +3778,7 @@ var Video = ({
     delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? null,
     disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo ?? false,
     fallbackOffthreadVideoProps: fallbackOffthreadVideoProps ?? {},
-    logLevel: logLevel ?? window.remotion_logLevel,
+    logLevel: logLevel ?? (typeof window !== "undefined" ? window.remotion_logLevel : "info"),
     loop: loop ?? false,
     loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
     muted: muted ?? false,
@@ -3608,7 +3792,8 @@ var Video = ({
     trimBefore,
     volume: volume ?? 1,
     toneFrequency: toneFrequency ?? 1,
-    stack
+    stack,
+    debugOverlay: debugOverlay ?? false
   });
 };
 Internals16.addSequenceStackTraces(Video);