@remotion/media 4.0.363 → 4.0.365

package/dist/esm/index.mjs

@@ -10,182 +10,235 @@ 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/media-player.ts
+import {
+  ALL_FORMATS,
+  AudioBufferSink,
+  CanvasSink,
+  Input,
+  UrlSource
+} from "mediabunny";
+import { Internals as Internals2 } from "remotion";
+
+// src/helpers/round-to-4-digits.ts
+var roundTo4Digits = (timestamp) => {
+  return Math.round(timestamp * 1000) / 1000;
 };
 
-// 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");
+// src/audio/audio-preview-iterator.ts
+var makeAudioIterator = (audioSink, startFromSecond) => {
+  let destroyed = false;
+  const iterator = audioSink.buffers(startFromSecond);
+  const queuedAudioNodes = [];
+  const cleanupAudioQueue = () => {
+    for (const node of queuedAudioNodes) {
+      node.node.stop();
+    }
+    queuedAudioNodes.length = 0;
+  };
+  let lastReturnedBuffer = 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) {
+            lastReturnedBuffer = res.value;
+          } else {
+            iteratorEnded = true;
+          }
+          return res.value;
+        }
+      };
     }
-    if (!isStudio && window.process?.env?.NODE_ENV !== "test") {
-      return;
+    if (result.value) {
+      lastReturnedBuffer = result.value;
+    } else {
+      iteratorEnded = true;
     }
-    if (!showInTimeline) {
-      return;
+    return {
+      type: "got-buffer-or-end",
+      buffer: result.value ?? null
+    };
+  };
+  const tryToSatisfySeek = async (time) => {
+    if (lastReturnedBuffer) {
+      const bufferTimestamp = roundTo4Digits(lastReturnedBuffer.timestamp);
+      const bufferEndTimestamp = roundTo4Digits(lastReturnedBuffer.timestamp + lastReturnedBuffer.duration);
+      if (roundTo4Digits(time) < bufferTimestamp) {
+        return {
+          type: "not-satisfied",
+          reason: `iterator is too far, most recently returned ${bufferTimestamp}-${bufferEndTimestamp}, requested ${time}`
+        };
+      }
+      if (roundTo4Digits(time) <= bufferEndTimestamp) {
+        return {
+          type: "satisfied",
+          buffers: [lastReturnedBuffer]
+        };
+      }
     }
-    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
-      });
+    if (iteratorEnded) {
+      if (lastReturnedBuffer) {
+        return {
+          type: "satisfied",
+          buffers: [lastReturnedBuffer]
+        };
+      }
+      return {
+        type: "not-satisfied",
+        reason: "iterator ended"
+      };
     }
-    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);
+    const toBeReturned = [];
+    while (true) {
+      const buffer = await getNextOrNullIfNotAvailable();
+      if (buffer.type === "need-to-wait-for-it") {
+        return {
+          type: "not-satisfied",
+          reason: "iterator did not have buffer ready"
+        };
       }
-      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
-  ]);
+      if (buffer.type === "got-buffer-or-end") {
+        if (buffer.buffer === null) {
+          iteratorEnded = true;
+          if (lastReturnedBuffer) {
+            return {
+              type: "satisfied",
+              buffers: [lastReturnedBuffer]
+            };
+          }
+          return {
+            type: "not-satisfied",
+            reason: "iterator ended and did not have buffer ready"
+          };
+        }
+        const bufferTimestamp = roundTo4Digits(buffer.buffer.timestamp);
+        const bufferEndTimestamp = roundTo4Digits(buffer.buffer.timestamp + buffer.buffer.duration);
+        const timestamp = roundTo4Digits(time);
+        if (bufferTimestamp <= timestamp && bufferEndTimestamp > timestamp) {
+          return {
+            type: "satisfied",
+            buffers: [...toBeReturned, buffer.buffer]
+          };
+        }
+        toBeReturned.push(buffer.buffer);
+        continue;
+      }
+      throw new Error("Unreachable");
+    }
+  };
   return {
-    id: mediaId
+    destroy: () => {
+      cleanupAudioQueue();
+      destroyed = true;
+      iterator.return().catch(() => {
+        return;
+      });
+    },
+    getNext: () => {
+      return iterator.next();
+    },
+    isDestroyed: () => {
+      return destroyed;
+    },
+    addQueuedAudioNode: (node, timestamp, buffer) => {
+      queuedAudioNodes.push({ node, timestamp, buffer });
+    },
+    removeQueuedAudioNode: (node) => {
+      const index = queuedAudioNodes.findIndex((n) => n.node === node);
+      if (index !== -1) {
+        queuedAudioNodes.splice(index, 1);
+      }
+    },
+    removeAndReturnAllQueuedAudioNodes: () => {
+      const nodes = queuedAudioNodes.slice();
+      for (const node of nodes) {
+        node.node.stop();
+      }
+      queuedAudioNodes.length = 0;
+      return nodes;
+    },
+    getQueuedPeriod: () => {
+      const lastNode = queuedAudioNodes[queuedAudioNodes.length - 1];
+      if (!lastNode) {
+        return null;
+      }
+      const firstNode = queuedAudioNodes[0];
+      if (!firstNode) {
+        return null;
+      }
+      return {
+        from: firstNode.timestamp,
+        until: lastNode.timestamp + lastNode.buffer.duration
+      };
+    },
+    tryToSatisfySeek
   };
 };
+var isAlreadyQueued = (time, queuedPeriod) => {
+  if (!queuedPeriod) {
+    return false;
+  }
+  return time >= queuedPeriod.from && time < queuedPeriod.until;
+};
 
-// src/video/media-player.ts
-import {
-  ALL_FORMATS,
-  AudioBufferSink,
-  CanvasSink,
-  Input,
-  UrlSource
-} from "mediabunny";
-import { Internals as Internals4 } from "remotion";
+// src/debug-overlay/preview-overlay.ts
+var drawPreviewOverlay = ({
+  context,
+  stats,
+  audioTime,
+  audioContextState,
+  audioIterator,
+  audioSyncAnchor,
+  audioChunksForAfterResuming,
+  playing
+}) => {
+  const lines = [
+    "Debug overlay",
+    `Video iterators created: ${stats.videoIteratorsCreated}`,
+    `Audio iterators created: ${stats.audioIteratorsCreated}`,
+    `Frames rendered: ${stats.framesRendered}`,
+    `Audio context state: ${audioContextState}`,
+    `Audio time: ${(audioTime - audioSyncAnchor).toFixed(3)}s`
+  ];
+  if (audioIterator) {
+    const queuedPeriod = audioIterator.getQueuedPeriod();
+    if (queuedPeriod) {
+      lines.push(`Audio queued until: ${(queuedPeriod.until - (audioTime - audioSyncAnchor)).toFixed(3)}s`);
+    } else if (audioChunksForAfterResuming.length > 0) {
+      lines.push(`Audio chunks for after resuming: ${audioChunksForAfterResuming.length}`);
+    }
+    lines.push(`Playing: ${playing}`);
+  }
+  const lineHeight = 30;
+  const boxPaddingX = 10;
+  const boxPaddingY = 10;
+  const boxLeft = 20;
+  const boxTop = 20;
+  const boxWidth = 600;
+  const boxHeight = lines.length * lineHeight + 2 * boxPaddingY;
+  context.fillStyle = "rgba(0, 0, 0, 1)";
+  context.fillRect(boxLeft, boxTop, boxWidth, boxHeight);
+  context.fillStyle = "white";
+  context.font = "24px sans-serif";
+  context.textBaseline = "top";
+  for (let i = 0;i < lines.length; i++) {
+    context.fillText(lines[i], boxLeft + boxPaddingX, boxTop + boxPaddingY + i * lineHeight);
+  }
+};
 
 // src/get-time-in-seconds.ts
-import { Internals as Internals3 } from "remotion";
+import { Internals } from "remotion";
 var getTimeInSeconds = ({
   loop,
   mediaDurationInSeconds,
@@ -200,7 +253,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,
@@ -224,36 +277,130 @@ function isNetworkError(error) {
   return false;
 }
 
-// src/video/timeout-utils.ts
-var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
-
-class TimeoutError extends Error {
-  constructor(message = "Operation timed out") {
-    super(message);
-    this.name = "TimeoutError";
-  }
-}
-function withTimeout(promise, timeoutMs, errorMessage = "Operation timed out") {
-  let timeoutId = null;
-  const timeoutPromise = new Promise((_, reject) => {
-    timeoutId = window.setTimeout(() => {
-      reject(new TimeoutError(errorMessage));
-    }, timeoutMs);
-  });
-  return Promise.race([
-    promise.finally(() => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
+// 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}`
+        };
       }
-    }),
-    timeoutPromise
-  ]);
-}
-
-// src/video/media-player.ts
-var SEEK_THRESHOLD = 0.05;
-var AUDIO_BUFFER_TOLERANCE_THRESHOLD = 0.1;
+      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
 class MediaPlayer {
   canvas;
   context;
@@ -263,10 +410,13 @@ class MediaPlayer {
   audioStreamIndex;
   canvasSink = null;
   videoFrameIterator = null;
-  nextFrame = null;
+  debugStats = {
+    videoIteratorsCreated: 0,
+    audioIteratorsCreated: 0,
+    framesRendered: 0
+  };
   audioSink = null;
   audioBufferIterator = null;
-  queuedAudioNodes = new Set;
   gainNode = null;
   currentVolume = 1;
   sharedAudioContext;
@@ -277,18 +427,12 @@ 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 +443,9 @@ class MediaPlayer {
     trimAfter,
     playbackRate,
     audioStreamIndex,
-    fps
+    fps,
+    debugOverlay,
+    bufferState
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
@@ -311,6 +457,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,15 +474,20 @@ 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);
   }
-  isCurrentlyBuffering() {
-    return this.isBuffering && Boolean(this.bufferingStartedAtMs);
+  isDisposalError() {
+    return this.input?.disposed === true;
   }
-  async initialize(startTimeUnresolved) {
+  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 +495,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([
@@ -396,22 +555,26 @@ class MediaPlayer {
         return { type: "success", durationInSeconds: this.totalDuration };
       }
       if (this.sharedAudioContext) {
-        this.audioSyncAnchor = this.sharedAudioContext.currentTime - startTime;
+        this.setPlaybackTime(startTime);
       }
       this.initialized = true;
-      await Promise.all([
-        this.startAudioIterator(startTime),
-        this.startVideoIterator(startTime)
-      ]);
-      this.startRenderLoop();
+      try {
+        this.startAudioIterator(startTime, this.currentSeekNonce);
+        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 +583,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,45 +610,98 @@ 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;
+    }
+    const newAudioSyncAnchor = this.sharedAudioContext.currentTime - newTime;
+    const diff = Math.abs(newAudioSyncAnchor - this.audioSyncAnchor);
+    if (diff > 0.1) {
+      this.setPlaybackTime(newTime);
+    }
+    const videoSatisfyResult = await this.videoFrameIterator?.tryToSatisfySeek(newTime);
+    if (videoSatisfyResult?.type === "satisfied") {
+      this.drawFrame(videoSatisfyResult.frame);
+    } else if (videoSatisfyResult && this.currentSeekNonce === nonce) {
+      this.startVideoIterator(newTime, nonce);
+    }
+    const queuedPeriod = this.audioBufferIterator?.getQueuedPeriod();
+    const currentTimeIsAlreadyQueued = isAlreadyQueued(newTime, queuedPeriod);
+    const toBeScheduled = [];
+    if (!currentTimeIsAlreadyQueued) {
+      const audioSatisfyResult = await this.audioBufferIterator?.tryToSatisfySeek(newTime);
+      if (this.currentSeekNonce !== nonce) {
+        return;
+      }
+      if (!audioSatisfyResult) {
+        return;
+      }
+      if (audioSatisfyResult.type === "not-satisfied") {
+        await this.startAudioIterator(newTime, nonce);
+        return;
+      }
+      toBeScheduled.push(...audioSatisfyResult.buffers);
     }
-    if (!this.playing) {
-      this.render();
+    const nextTime = newTime + 1 / this.fps * this.playbackRate + 1 / this.fps * this.playbackRate;
+    const nextIsAlreadyQueued = isAlreadyQueued(nextTime, queuedPeriod);
+    if (!nextIsAlreadyQueued) {
+      const audioSatisfyResult = await this.audioBufferIterator?.tryToSatisfySeek(nextTime);
+      if (this.currentSeekNonce !== nonce) {
+        return;
+      }
+      if (!audioSatisfyResult) {
+        return;
+      }
+      if (audioSatisfyResult.type === "not-satisfied") {
+        await this.startAudioIterator(nextTime, nonce);
+        return;
+      }
+      toBeScheduled.push(...audioSatisfyResult.buffers);
+    }
+    for (const buffer of toBeScheduled) {
+      if (this.playing) {
+        this.scheduleAudioChunk(buffer.buffer, buffer.timestamp);
+      } else {
+        this.audioChunksForAfterResuming.push({
+          buffer: buffer.buffer,
+          timestamp: buffer.timestamp
+        });
+      }
     }
   }
-  async play() {
+  async play(time) {
     if (!this.isReady())
       return;
-    if (!this.playing) {
-      if (this.sharedAudioContext.state === "suspended") {
-        await this.sharedAudioContext.resume();
-      }
-      this.playing = true;
-      this.startRenderLoop();
+    this.setPlaybackTime(time);
+    this.playing = true;
+    for (const chunk of this.audioChunksForAfterResuming) {
+      this.scheduleAudioChunk(chunk.buffer, chunk.timestamp);
+    }
+    if (this.sharedAudioContext.state === "suspended") {
+      await this.sharedAudioContext.resume();
     }
+    this.audioChunksForAfterResuming.length = 0;
+    this.drawDebugOverlay();
   }
   pause() {
     this.playing = false;
-    this.cleanupAudioQueue();
-    this.stopRenderLoop();
+    const toQueue = this.audioBufferIterator?.removeAndReturnAllQueuedAudioNodes();
+    if (toQueue) {
+      for (const chunk of toQueue) {
+        this.audioChunksForAfterResuming.push({
+          buffer: chunk.buffer,
+          timestamp: chunk.timestamp
+        });
+      }
+    }
+    this.drawDebugOverlay();
   }
   setMuted(muted) {
     this.muted = muted;
@@ -504,6 +719,9 @@ class MediaPlayer {
       this.gainNode.gain.value = appliedVolume;
     }
   }
+  setDebugOverlay(debugOverlay) {
+    this.debugOverlay = debugOverlay;
+  }
   setPlaybackRate(rate) {
     this.playbackRate = rate;
   }
@@ -513,37 +731,41 @@ 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;
   }
+  setPlaybackTime(time) {
+    this.audioSyncAnchor = this.sharedAudioContext.currentTime - time;
+  }
+  audioChunksForAfterResuming = [];
   scheduleAudioChunk(buffer, mediaTimestamp) {
-    const targetTime = mediaTimestamp + this.audioSyncAnchor;
-    const delay = targetTime - this.sharedAudioContext.currentTime;
+    const targetTime = (mediaTimestamp - (this.trimBefore ?? 0) / this.fps) / this.playbackRate;
+    const delay = targetTime + this.audioSyncAnchor - this.sharedAudioContext.currentTime;
     const node = this.sharedAudioContext.createBufferSource();
     node.buffer = buffer;
     node.playbackRate.value = this.playbackRate;
     node.connect(this.gainNode);
     if (delay >= 0) {
-      node.start(targetTime);
+      node.start(targetTime + this.audioSyncAnchor);
     } else {
       node.start(this.sharedAudioContext.currentTime, -delay);
     }
-    this.queuedAudioNodes.add(node);
-    node.onended = () => this.queuedAudioNodes.delete(node);
-  }
-  onBufferingChange(callback) {
-    this.onBufferingChangeCallback = callback;
-    return () => {
-      if (this.onBufferingChangeCallback === callback) {
-        this.onBufferingChangeCallback = undefined;
-      }
+    this.audioBufferIterator.addQueuedAudioNode(node, mediaTimestamp, buffer);
+    node.onended = () => {
+      return this.audioBufferIterator.removeQueuedAudioNode(node);
     };
   }
   onVideoFrame(callback) {
@@ -557,225 +779,256 @@ 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;
+  drawFrame = (frame) => {
+    if (!this.context) {
+      throw new Error("Context not initialized");
     }
-  }
-  render = () => {
-    if (this.isBuffering) {
-      this.maybeForceResumeFromBuffering();
-    }
-    if (this.shouldRenderFrame()) {
-      this.drawCurrentFrame();
+    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);
     }
-    if (this.playing) {
-      this.animationFrameId = requestAnimationFrame(this.render);
-    } else {
-      this.animationFrameId = null;
+    Internals2.Log.trace({ logLevel: this.logLevel, tag: "@remotion/media" }, `[MediaPlayer] Drew frame ${frame.timestamp.toFixed(3)}s`);
+  };
+  startAudioIterator = async (startFromSecond, nonce) => {
+    if (!this.hasAudio())
+      return;
+    this.audioBufferIterator?.destroy();
+    this.audioChunksForAfterResuming = [];
+    const delayHandle = this.bufferState.delayPlayback();
+    const iterator = makeAudioIterator(this.audioSink, startFromSecond);
+    this.debugStats.audioIteratorsCreated++;
+    this.audioBufferIterator = iterator;
+    for (let i = 0;i < 3; i++) {
+      const result = await iterator.getNext();
+      if (iterator.isDestroyed()) {
+        delayHandle.unblock();
+        return;
+      }
+      if (nonce !== this.currentSeekNonce) {
+        delayHandle.unblock();
+        return;
+      }
+      if (!result.value) {
+        delayHandle.unblock();
+        return;
+      }
+      const { buffer, timestamp } = result.value;
+      this.audioChunksForAfterResuming.push({
+        buffer,
+        timestamp
+      });
     }
+    delayHandle.unblock();
   };
-  shouldRenderFrame() {
-    const playbackTime = this.getPlaybackTime();
-    if (playbackTime === null) {
-      return false;
+  drawDebugOverlay() {
+    if (!this.debugOverlay)
+      return;
+    if (this.context && this.canvas) {
+      drawPreviewOverlay({
+        context: this.context,
+        stats: this.debugStats,
+        audioTime: this.sharedAudioContext.currentTime,
+        audioContextState: this.sharedAudioContext.state,
+        audioSyncAnchor: this.audioSyncAnchor,
+        audioIterator: this.audioBufferIterator,
+        audioChunksForAfterResuming: this.audioChunksForAfterResuming,
+        playing: this.playing
+      });
     }
-    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);
+  startVideoIterator = async (timeToSeek, nonce) => {
+    if (!this.canvasSink) {
+      return;
     }
-    if (this.onVideoFrameCallback && this.canvas) {
-      this.onVideoFrameCallback(this.canvas);
+    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;
     }
-    this.nextFrame = null;
-    this.updateNextFrame();
-  }
-  startAudioIterator = async (startFromSecond) => {
-    if (!this.hasAudio())
+    if (nonce !== this.currentSeekNonce) {
       return;
-    this.audioAsyncId++;
-    const currentAsyncId = this.audioAsyncId;
-    await this.audioBufferIterator?.return();
-    this.audioIteratorStarted = false;
-    this.audioBufferHealth = 0;
-    try {
-      this.audioBufferIterator = this.audioSink.buffers(startFromSecond);
-      this.runAudioIterator(startFromSecond, currentAsyncId);
-    } catch (error) {
-      Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to start audio iterator", error);
     }
-  };
-  startVideoIterator = async (timeToSeek) => {
-    if (!this.canvasSink) {
+    if (this.videoFrameIterator.isDestroyed()) {
       return;
     }
-    this.videoAsyncId++;
-    const currentAsyncId = this.videoAsyncId;
-    this.videoFrameIterator?.return().catch(() => {
+    if (!frameResult.value) {
       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);
     }
+    this.drawFrame(frameResult.value);
   };
-  updateNextFrame = async () => {
-    if (!this.videoFrameIterator) {
+}
+
+// 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;
     }
-    try {
-      while (true) {
-        const newNextFrame = (await this.videoFrameIterator.next()).value ?? null;
-        if (!newNextFrame) {
-          this.mediaEnded = true;
-          break;
-        }
-        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;
-        }
-      }
-    } catch (error) {
-      Internals4.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to update next frame", 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);
-      }
+    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";
@@ -862,6 +1115,11 @@ var NewAudioForPreview = ({
     trimAfter,
     trimBefore
   });
+  const buffering = useContext2(Internals5.BufferingContextReact);
+  if (!buffering) {
+    throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
+  }
+  const isPlayerBuffering = Internals5.useIsPlayerBuffering(buffering);
   useEffect2(() => {
     if (!sharedAudioContext)
       return;
@@ -878,7 +1136,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,20 +1210,19 @@ var NewAudioForPreview = ({
     playbackRate,
     videoConfig.fps,
     audioStreamIndex,
-    disallowFallbackToHtml5Audio
+    disallowFallbackToHtml5Audio,
+    buffer
   ]);
   useEffect2(() => {
     const audioPlayer = mediaPlayerRef.current;
     if (!audioPlayer)
       return;
-    if (playing) {
-      audioPlayer.play().catch((error) => {
-        Internals5.Log.error({ logLevel, tag: "@remotion/media" }, "[NewAudioForPreview] Failed to play", error);
-      });
+    if (playing && !isPlayerBuffering) {
+      audioPlayer.play(currentTimeRef.current);
     } else {
       audioPlayer.pause();
     }
-  }, [playing, logLevel, mediaPlayerReady]);
+  }, [isPlayerBuffering, logLevel, playing]);
   useEffect2(() => {
     const audioPlayer = mediaPlayerRef.current;
     if (!audioPlayer || !mediaPlayerReady)
@@ -971,21 +1230,6 @@ var NewAudioForPreview = ({
     audioPlayer.seekTo(currentTime);
     Internals5.Log.trace({ logLevel, tag: "@remotion/media" }, `[NewAudioForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
   }, [currentTime, logLevel, mediaPlayerReady]);
-  useEffect2(() => {
-    const audioPlayer = mediaPlayerRef.current;
-    if (!audioPlayer || !mediaPlayerReady)
-      return;
-    audioPlayer.onBufferingChange((newBufferingState) => {
-      if (newBufferingState && !delayHandleRef.current) {
-        delayHandleRef.current = buffer.delayPlayback();
-        Internals5.Log.trace({ logLevel, tag: "@remotion/media" }, "[NewAudioForPreview] MediaPlayer buffering - blocking Remotion playback");
-      } else if (!newBufferingState && delayHandleRef.current) {
-        delayHandleRef.current.unblock();
-        delayHandleRef.current = null;
-        Internals5.Log.trace({ logLevel, tag: "@remotion/media" }, "[NewAudioForPreview] MediaPlayer unbuffering - unblocking Remotion playback");
-      }
-    });
-  }, [mediaPlayerReady, buffer, logLevel]);
   const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
   useEffect2(() => {
     const audioPlayer = mediaPlayerRef.current;
@@ -1297,7 +1541,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 +1666,7 @@ var makeAudioManager = () => {
     actualMatroskaTimestamps,
     logLevel
   }) => {
-    const iterator = makeAudioIterator({
+    const iterator = makeAudioIterator2({
       audioSampleSink,
       isMatroska,
       startTimestamp: timeInSeconds,
@@ -1584,9 +1828,6 @@ 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,
@@ -2891,7 +3132,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 {
@@ -2925,7 +3173,8 @@ var VideoForPreview = ({
   stack,
   disallowFallbackToOffthreadVideo,
   fallbackOffthreadVideoProps,
-  audioStreamIndex
+  audioStreamIndex,
+  debugOverlay
 }) => {
   const src = usePreload2(unpreloadedSrc);
   const canvasRef = useRef2(null);
@@ -2977,13 +3226,15 @@ 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;
   const preloadedSrc = usePreload2(src);
+  const buffering = useContext4(Internals14.BufferingContextReact);
+  if (!buffering) {
+    throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
+  }
+  const isPlayerBuffering = Internals14.useIsPlayerBuffering(buffering);
   useEffect3(() => {
     if (!canvasRef.current)
       return;
@@ -3002,10 +3253,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.`);
@@ -3043,16 +3299,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;
       }
@@ -3069,7 +3325,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(" ");
@@ -3078,44 +3336,19 @@ var VideoForPreview = ({
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer)
       return;
-    if (playing) {
-      mediaPlayer.play().catch((error) => {
-        Internals14.Log.error({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] Failed to play", error);
-      });
+    if (playing && !isPlayerBuffering) {
+      mediaPlayer.play(currentTimeRef.current);
     } else {
       mediaPlayer.pause();
     }
-  }, [playing, logLevel, mediaPlayerReady]);
-  useEffect3(() => {
+  }, [isPlayerBuffering, playing, logLevel, mediaPlayerReady]);
+  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;
-    if (!mediaPlayer || !mediaPlayerReady)
-      return;
-    let currentBlock = null;
-    const unsubscribe = mediaPlayer.onBufferingChange((newBufferingState) => {
-      if (newBufferingState && !currentBlock) {
-        currentBlock = buffer.delayPlayback();
-        Internals14.Log.trace({ logLevel, tag: "@remotion/media" }, "[NewVideoForPreview] 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");
-      }
-    });
-    return () => {
-      unsubscribe();
-      if (currentBlock) {
-        currentBlock.unblock();
-        currentBlock = null;
-      }
-    };
-  }, [mediaPlayerReady, buffer, logLevel]);
   const effectiveMuted = isSequenceHidden || muted || mediaMuted || userPreferredVolume <= 0;
   useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
@@ -3130,6 +3363,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;
@@ -3198,7 +3438,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
@@ -3257,7 +3497,7 @@ var VideoForRendering = ({
   const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState5(false);
   const audioEnabled = Internals15.useAudioEnabled();
   const videoEnabled = Internals15.useVideoEnabled();
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!canvasRef.current) {
       return;
     }
@@ -3514,7 +3754,8 @@ var InnerVideo = ({
   volume,
   stack,
   toneFrequency,
-  showInTimeline
+  showInTimeline,
+  debugOverlay
 }) => {
   const environment = useRemotionEnvironment4();
   if (typeof src !== "string") {
@@ -3575,7 +3816,8 @@ var InnerVideo = ({
     trimBefore: trimBeforeValue,
     stack: stack ?? null,
     disallowFallbackToOffthreadVideo,
-    fallbackOffthreadVideoProps
+    fallbackOffthreadVideoProps,
+    debugOverlay: debugOverlay ?? false
   });
 };
 var Video = ({
@@ -3599,7 +3841,8 @@ var Video = ({
   trimBefore,
   volume,
   stack,
-  toneFrequency
+  toneFrequency,
+  debugOverlay
 }) => {
   return /* @__PURE__ */ jsx6(InnerVideo, {
     audioStreamIndex: audioStreamIndex ?? 0,
@@ -3622,7 +3865,8 @@ var Video = ({
     trimBefore,
     volume: volume ?? 1,
     toneFrequency: toneFrequency ?? 1,
-    stack
+    stack,
+    debugOverlay: debugOverlay ?? false
   });
 };
 Internals16.addSequenceStackTraces(Video);