@remotion/media 4.0.388 → 4.0.391

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

@@ -69,6 +69,7 @@ const AudioForPreviewAssertedShowing = ({ src, playbackRate, logLevel, muted, vo
         throw new Error('useMediaPlayback must be used inside a <BufferingContext>');
     }
     const isPlayerBuffering = Internals.useIsPlayerBuffering(bufferingContext);
+    const initialPlaying = useRef(playing && !isPlayerBuffering);
     const initialIsPremounting = useRef(isPremounting);
     const initialIsPostmounting = useRef(isPostmounting);
     const initialGlobalPlaybackRate = useRef(globalPlaybackRate);
@@ -96,6 +97,7 @@ const AudioForPreviewAssertedShowing = ({ src, playbackRate, logLevel, muted, vo
                 isPremounting: initialIsPremounting.current,
                 globalPlaybackRate: initialGlobalPlaybackRate.current,
                 onVideoFrameCallback: null,
+                playing: initialPlaying.current,
             });
             mediaPlayerRef.current = player;
             player

package/dist/audio/audio-preview-iterator.d.ts

@@ -1,4 +1,5 @@
-import type { AudioBufferSink, WrappedAudioBuffer } from 'mediabunny';
+import type { WrappedAudioBuffer } from 'mediabunny';
+import type { PrewarmedAudioIteratorCache } from '../prewarm-iterator-for-looping';
 import { type AllowWait } from './allow-wait';
 export declare const HEALTHY_BUFFER_THRESHOLD_SECONDS = 1;
 export type QueuedNode = {
@@ -6,7 +7,7 @@ export type QueuedNode = {
     timestamp: number;
     buffer: AudioBuffer;
 };
-export declare const makeAudioIterator: (audioSink: AudioBufferSink, startFromSecond: number) => {
+export declare const makeAudioIterator: (startFromSecond: number, cache: PrewarmedAudioIteratorCache) => {
     destroy: () => void;
     getNext: () => Promise<IteratorResult<WrappedAudioBuffer, void>>;
     isDestroyed: () => boolean;

package/dist/audio/audio-preview-iterator.js

@@ -1,9 +1,9 @@
 import { roundTo4Digits } from '../helpers/round-to-4-digits';
 import { allowWaitRoutine } from './allow-wait';
 export const HEALTHY_BUFFER_THRESHOLD_SECONDS = 1;
-export const makeAudioIterator = (audioSink, startFromSecond) => {
+export const makeAudioIterator = (startFromSecond, cache) => {
     let destroyed = false;
-    const iterator = audioSink.buffers(startFromSecond);
+    const iterator = cache.makeIteratorOrUsePrewarmed(startFromSecond);
     const queuedAudioNodes = [];
     const audioChunksForAfterResuming = [];
     let mostRecentTimestamp = -Infinity;

package/dist/audio-iterator-manager.d.ts

@@ -1,12 +1,16 @@
 import type { InputAudioTrack, WrappedAudioBuffer } from 'mediabunny';
 import type { useBufferState } from 'remotion';
 import type { Nonce } from './nonce-manager';
-export declare const audioIteratorManager: ({ audioTrack, delayPlaybackHandleIfNotPremounting, sharedAudioContext, }: {
+export declare const audioIteratorManager: ({ audioTrack, delayPlaybackHandleIfNotPremounting, sharedAudioContext, getIsLooping, getEndTime, getStartTime, updatePlaybackTime, }: {
     audioTrack: InputAudioTrack;
     delayPlaybackHandleIfNotPremounting: () => {
         unblock: () => void;
     };
     sharedAudioContext: AudioContext;
+    getIsLooping: () => boolean;
+    getEndTime: () => number;
+    getStartTime: () => number;
+    updatePlaybackTime: (time: number) => void;
 }) => {
     startAudioIterator: ({ nonce, playbackRate, startFromSecond, getIsPlaying, scheduleAudioNode, }: {
         startFromSecond: number;

package/dist/audio-iterator-manager.js

@@ -1,13 +1,16 @@
 import { AudioBufferSink, InputDisposedError } from 'mediabunny';
 import { isAlreadyQueued, makeAudioIterator, } from './audio/audio-preview-iterator';
-export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremounting, sharedAudioContext, }) => {
+import { makePrewarmedAudioIteratorCache } from './prewarm-iterator-for-looping';
+export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremounting, sharedAudioContext, getIsLooping, getEndTime, getStartTime, updatePlaybackTime, }) => {
     let muted = false;
     let currentVolume = 1;
     const gainNode = sharedAudioContext.createGain();
     gainNode.connect(sharedAudioContext.destination);
     const audioSink = new AudioBufferSink(audioTrack);
+    const prewarmedAudioIteratorCache = makePrewarmedAudioIteratorCache(audioSink);
     let audioBufferIterator = null;
     let audioIteratorsCreated = 0;
+    let currentDelayHandle = null;
     const scheduleAudioChunk = ({ buffer, mediaTimestamp, playbackRate, scheduleAudioNode, }) => {
         if (!audioBufferIterator) {
             throw new Error('Audio buffer iterator not found');
@@ -43,9 +46,11 @@ export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremo
         }
     };
     const startAudioIterator = async ({ nonce, playbackRate, startFromSecond, getIsPlaying, scheduleAudioNode, }) => {
+        updatePlaybackTime(startFromSecond);
         audioBufferIterator?.destroy();
         const delayHandle = delayPlaybackHandleIfNotPremounting();
-        const iterator = makeAudioIterator(audioSink, startFromSecond);
+        currentDelayHandle = delayHandle;
+        const iterator = makeAudioIterator(startFromSecond, prewarmedAudioIteratorCache);
         audioIteratorsCreated++;
         audioBufferIterator = iterator;
         try {
@@ -53,16 +58,13 @@ export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremo
             for (let i = 0; i < 3; i++) {
                 const result = await iterator.getNext();
                 if (iterator.isDestroyed()) {
-                    delayHandle.unblock();
                     return;
                 }
                 if (nonce.isStale()) {
-                    delayHandle.unblock();
                     return;
                 }
                 if (!result.value) {
                     // media ended
-                    delayHandle.unblock();
                     return;
                 }
                 onAudioChunk({
@@ -83,6 +85,7 @@ export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremo
         }
         finally {
             delayHandle.unblock();
+            currentDelayHandle = null;
         }
     };
     const pausePlayback = () => {
@@ -92,6 +95,14 @@ export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremo
         audioBufferIterator.moveQueuedChunksToPauseQueue();
     };
     const seek = async ({ newTime, nonce, fps, playbackRate, getIsPlaying, scheduleAudioNode, bufferState, }) => {
+        if (getIsLooping()) {
+            // If less than 1 second from the end away, we pre-warm a new iterator
+            if (getEndTime() - newTime < 1) {
+                prewarmedAudioIteratorCache.prewarmIteratorForLooping({
+                    timeToSeek: getStartTime(),
+                });
+            }
+        }
         if (!audioBufferIterator) {
             await startAudioIterator({
                 nonce,
@@ -194,8 +205,13 @@ export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremo
         pausePlayback,
         getAudioBufferIterator: () => audioBufferIterator,
         destroyIterator: () => {
+            prewarmedAudioIteratorCache.destroy();
             audioBufferIterator?.destroy();
             audioBufferIterator = null;
+            if (currentDelayHandle) {
+                currentDelayHandle.unblock();
+                currentDelayHandle = null;
+            }
         },
         seek,
         getAudioIteratorsCreated: () => audioIteratorsCreated,

package/dist/esm/index.mjs

@@ -49,6 +49,25 @@ var getTimeInSeconds = ({
   }
   return timeInSeconds + (trimBefore ?? 0) / fps;
 };
+var calculateEndTime = ({
+  mediaDurationInSeconds,
+  ifNoMediaDuration,
+  src,
+  trimAfter,
+  trimBefore,
+  fps
+}) => {
+  if (mediaDurationInSeconds === null && ifNoMediaDuration === "fail") {
+    throw new Error(`Could not determine duration of ${src}, but "loop" was set.`);
+  }
+  const mediaDuration = Internals.calculateMediaDuration({
+    trimAfter,
+    mediaDurationInFrames: mediaDurationInSeconds ? mediaDurationInSeconds * fps : Infinity,
+    playbackRate: 1,
+    trimBefore
+  }) / fps;
+  return mediaDuration + (trimBefore ?? 0) / fps;
+};
 
 // src/media-player.ts
 import { ALL_FORMATS, Input, UrlSource } from "mediabunny";
@@ -80,9 +99,9 @@ var allowWaitRoutine = async (next, waitFn) => {
 };
 
 // src/audio/audio-preview-iterator.ts
-var makeAudioIterator = (audioSink, startFromSecond) => {
+var makeAudioIterator = (startFromSecond, cache) => {
   let destroyed = false;
-  const iterator = audioSink.buffers(startFromSecond);
+  const iterator = cache.makeIteratorOrUsePrewarmed(startFromSecond);
   const queuedAudioNodes = [];
   const audioChunksForAfterResuming = [];
   let mostRecentTimestamp = -Infinity;
@@ -254,19 +273,83 @@ var isAlreadyQueued = (time, queuedPeriod) => {
   return time >= queuedPeriod.from && time < queuedPeriod.until;
 };
 
+// src/prewarm-iterator-for-looping.ts
+var makePrewarmedVideoIteratorCache = (videoSink) => {
+  const prewarmedVideoIterators = new Map;
+  const prewarmIteratorForLooping = ({ timeToSeek }) => {
+    if (!prewarmedVideoIterators.has(timeToSeek)) {
+      prewarmedVideoIterators.set(timeToSeek, videoSink.canvases(timeToSeek));
+    }
+  };
+  const makeIteratorOrUsePrewarmed = (timeToSeek) => {
+    const prewarmedIterator = prewarmedVideoIterators.get(timeToSeek);
+    if (prewarmedIterator) {
+      prewarmedVideoIterators.delete(timeToSeek);
+      return prewarmedIterator;
+    }
+    const iterator = videoSink.canvases(timeToSeek);
+    return iterator;
+  };
+  const destroy = () => {
+    for (const iterator of prewarmedVideoIterators.values()) {
+      iterator.return();
+    }
+    prewarmedVideoIterators.clear();
+  };
+  return {
+    prewarmIteratorForLooping,
+    makeIteratorOrUsePrewarmed,
+    destroy
+  };
+};
+var makePrewarmedAudioIteratorCache = (audioSink) => {
+  const prewarmedAudioIterators = new Map;
+  const prewarmIteratorForLooping = ({ timeToSeek }) => {
+    if (!prewarmedAudioIterators.has(timeToSeek)) {
+      prewarmedAudioIterators.set(timeToSeek, audioSink.buffers(timeToSeek));
+    }
+  };
+  const makeIteratorOrUsePrewarmed = (timeToSeek) => {
+    const prewarmedIterator = prewarmedAudioIterators.get(timeToSeek);
+    if (prewarmedIterator) {
+      prewarmedAudioIterators.delete(timeToSeek);
+      return prewarmedIterator;
+    }
+    const iterator = audioSink.buffers(timeToSeek);
+    return iterator;
+  };
+  const destroy = () => {
+    for (const iterator of prewarmedAudioIterators.values()) {
+      iterator.return();
+    }
+    prewarmedAudioIterators.clear();
+  };
+  return {
+    prewarmIteratorForLooping,
+    makeIteratorOrUsePrewarmed,
+    destroy
+  };
+};
+
 // src/audio-iterator-manager.ts
 var audioIteratorManager = ({
   audioTrack,
   delayPlaybackHandleIfNotPremounting,
-  sharedAudioContext
+  sharedAudioContext,
+  getIsLooping,
+  getEndTime,
+  getStartTime,
+  updatePlaybackTime
 }) => {
   let muted = false;
   let currentVolume = 1;
   const gainNode = sharedAudioContext.createGain();
   gainNode.connect(sharedAudioContext.destination);
   const audioSink = new AudioBufferSink(audioTrack);
+  const prewarmedAudioIteratorCache = makePrewarmedAudioIteratorCache(audioSink);
   let audioBufferIterator = null;
   let audioIteratorsCreated = 0;
+  let currentDelayHandle = null;
   const scheduleAudioChunk = ({
     buffer,
     mediaTimestamp,
@@ -316,24 +399,23 @@ var audioIteratorManager = ({
     getIsPlaying,
     scheduleAudioNode
   }) => {
+    updatePlaybackTime(startFromSecond);
     audioBufferIterator?.destroy();
     const delayHandle = delayPlaybackHandleIfNotPremounting();
-    const iterator = makeAudioIterator(audioSink, startFromSecond);
+    currentDelayHandle = delayHandle;
+    const iterator = makeAudioIterator(startFromSecond, prewarmedAudioIteratorCache);
     audioIteratorsCreated++;
     audioBufferIterator = iterator;
     try {
       for (let i = 0;i < 3; i++) {
         const result = await iterator.getNext();
         if (iterator.isDestroyed()) {
-          delayHandle.unblock();
           return;
         }
         if (nonce.isStale()) {
-          delayHandle.unblock();
           return;
         }
         if (!result.value) {
-          delayHandle.unblock();
           return;
         }
         onAudioChunk({
@@ -350,6 +432,7 @@ var audioIteratorManager = ({
       throw e;
     } finally {
       delayHandle.unblock();
+      currentDelayHandle = null;
     }
   };
   const pausePlayback = () => {
@@ -367,6 +450,13 @@ var audioIteratorManager = ({
     scheduleAudioNode,
     bufferState
   }) => {
+    if (getIsLooping()) {
+      if (getEndTime() - newTime < 1) {
+        prewarmedAudioIteratorCache.prewarmIteratorForLooping({
+          timeToSeek: getStartTime()
+        });
+      }
+    }
     if (!audioBufferIterator) {
       await startAudioIterator({
         nonce,
@@ -467,8 +557,13 @@ var audioIteratorManager = ({
     pausePlayback,
     getAudioBufferIterator: () => audioBufferIterator,
     destroyIterator: () => {
+      prewarmedAudioIteratorCache.destroy();
       audioBufferIterator?.destroy();
       audioBufferIterator = null;
+      if (currentDelayHandle) {
+        currentDelayHandle.unblock();
+        currentDelayHandle = null;
+      }
     },
     seek,
     getAudioIteratorsCreated: () => audioIteratorsCreated,
@@ -570,9 +665,9 @@ import { CanvasSink } from "mediabunny";
 import { Internals as Internals2 } from "remotion";
 
 // src/video/video-preview-iterator.ts
-var createVideoIterator = (timeToSeek, videoSink) => {
+var createVideoIterator = (timeToSeek, cache) => {
   let destroyed = false;
-  const iterator = videoSink.canvases(timeToSeek);
+  const iterator = cache.makeIteratorOrUsePrewarmed(timeToSeek);
   let lastReturnedFrame = null;
   let iteratorEnded = false;
   const getNextOrNullIfNotAvailable = async () => {
@@ -700,11 +795,15 @@ var videoIteratorManager = ({
   drawDebugOverlay,
   logLevel,
   getOnVideoFrameCallback,
-  videoTrack
+  videoTrack,
+  getEndTime,
+  getStartTime,
+  getIsLooping
 }) => {
   let videoIteratorsCreated = 0;
   let videoFrameIterator = null;
   let framesRendered = 0;
+  let currentDelayHandle = null;
   if (canvas) {
     canvas.width = videoTrack.displayWidth;
     canvas.height = videoTrack.displayHeight;
@@ -714,6 +813,7 @@ var videoIteratorManager = ({
     fit: "contain",
     alpha: true
   });
+  const prewarmedVideoIteratorCache = makePrewarmedVideoIteratorCache(canvasSink);
   const drawFrame = (frame) => {
     if (context && canvas) {
       context.clearRect(0, 0, canvas.width, canvas.height);
@@ -729,12 +829,18 @@ var videoIteratorManager = ({
   };
   const startVideoIterator = async (timeToSeek, nonce) => {
     videoFrameIterator?.destroy();
-    const iterator = createVideoIterator(timeToSeek, canvasSink);
+    const iterator = createVideoIterator(timeToSeek, prewarmedVideoIteratorCache);
     videoIteratorsCreated++;
     videoFrameIterator = iterator;
     const delayHandle = delayPlaybackHandleIfNotPremounting();
-    const frameResult = await iterator.getNext();
-    delayHandle.unblock();
+    currentDelayHandle = delayHandle;
+    let frameResult;
+    try {
+      frameResult = await iterator.getNext();
+    } finally {
+      delayHandle.unblock();
+      currentDelayHandle = null;
+    }
     if (iterator.isDestroyed()) {
       return;
     }
@@ -753,6 +859,13 @@ var videoIteratorManager = ({
     if (!videoFrameIterator) {
       return;
     }
+    if (getIsLooping()) {
+      if (getEndTime() - newTime < 1) {
+        prewarmedVideoIteratorCache.prewarmIteratorForLooping({
+          timeToSeek: getStartTime()
+        });
+      }
+    }
     const videoSatisfyResult = await videoFrameIterator.tryToSatisfySeek(newTime);
     if (videoSatisfyResult.type === "satisfied") {
       drawFrame(videoSatisfyResult.frame);
@@ -761,17 +874,22 @@ var videoIteratorManager = ({
     if (nonce.isStale()) {
       return;
     }
-    startVideoIterator(newTime, nonce).catch(() => {});
+    await startVideoIterator(newTime, nonce);
   };
   return {
     startVideoIterator,
     getVideoIteratorsCreated: () => videoIteratorsCreated,
     seek,
     destroy: () => {
+      prewarmedVideoIteratorCache.destroy();
       videoFrameIterator?.destroy();
       if (context && canvas) {
         context.clearRect(0, 0, canvas.width, canvas.height);
       }
+      if (currentDelayHandle) {
+        currentDelayHandle.unblock();
+        currentDelayHandle = null;
+      }
       videoFrameIterator = null;
     },
     getVideoFrameIterator: () => videoFrameIterator,
@@ -823,7 +941,8 @@ class MediaPlayer {
     bufferState,
     isPremounting,
     isPostmounting,
-    onVideoFrameCallback
+    onVideoFrameCallback,
+    playing
   }) {
     this.canvas = canvas ?? null;
     this.src = src;
@@ -842,6 +961,7 @@ class MediaPlayer {
     this.isPostmounting = isPostmounting;
     this.nonceManager = makeNonceManager();
     this.onVideoFrameCallback = onVideoFrameCallback;
+    this.playing = playing;
     this.input = new Input({
       source: new UrlSource(this.src),
       formats: ALL_FORMATS
@@ -866,9 +986,24 @@ class MediaPlayer {
   initialize(startTimeUnresolved) {
     const promise = this._initialize(startTimeUnresolved);
     this.initializationPromise = promise;
+    this.seekPromiseChain = promise;
     return promise;
   }
+  getStartTime() {
+    return (this.trimBefore ?? 0) / this.fps;
+  }
+  getEndTime() {
+    return calculateEndTime({
+      mediaDurationInSeconds: this.totalDuration,
+      ifNoMediaDuration: "fail",
+      src: this.src,
+      trimAfter: this.trimAfter,
+      trimBefore: this.trimBefore,
+      fps: this.fps
+    });
+  }
   async _initialize(startTimeUnresolved) {
+    const delayHandle = this.delayPlaybackHandleIfNotPremounting();
     try {
       if (this.input.disposed) {
         return { type: "disposed" };
@@ -914,7 +1049,10 @@ class MediaPlayer {
           canvas: this.canvas,
           getOnVideoFrameCallback: () => this.onVideoFrameCallback,
           logLevel: this.logLevel,
-          drawDebugOverlay: this.drawDebugOverlay
+          drawDebugOverlay: this.drawDebugOverlay,
+          getEndTime: () => this.getEndTime(),
+          getStartTime: () => this.getStartTime(),
+          getIsLooping: () => this.loop
         });
       }
       const startTime = getTimeInSeconds({
@@ -936,21 +1074,25 @@ class MediaPlayer {
         this.audioIteratorManager = audioIteratorManager({
           audioTrack,
           delayPlaybackHandleIfNotPremounting: this.delayPlaybackHandleIfNotPremounting,
-          sharedAudioContext: this.sharedAudioContext
+          sharedAudioContext: this.sharedAudioContext,
+          getIsLooping: () => this.loop,
+          getEndTime: () => this.getEndTime(),
+          getStartTime: () => this.getStartTime(),
+          updatePlaybackTime: (time) => this.setPlaybackTime(time, this.playbackRate * this.globalPlaybackRate)
         });
       }
       const nonce = this.nonceManager.createAsyncOperation();
       try {
-        if (this.audioIteratorManager) {
-          this.audioIteratorManager.startAudioIterator({
+        await Promise.all([
+          this.audioIteratorManager ? this.audioIteratorManager.startAudioIterator({
             nonce,
             playbackRate: this.playbackRate * this.globalPlaybackRate,
             startFromSecond: startTime,
             getIsPlaying: () => this.playing,
             scheduleAudioNode: this.scheduleAudioNode
-          });
-        }
-        await this.videoIteratorManager?.startVideoIterator(startTime, nonce);
+          }) : Promise.resolve(),
+          this.videoIteratorManager ? this.videoIteratorManager.startVideoIterator(startTime, nonce) : Promise.resolve()
+        ]);
       } catch (error) {
         if (this.isDisposalError()) {
           return { type: "disposed" };
@@ -966,6 +1108,8 @@ class MediaPlayer {
       }
       Internals3.Log.error({ logLevel: this.logLevel, tag: "@remotion/media" }, "[MediaPlayer] Failed to initialize", error);
       throw error;
+    } finally {
+      delayHandle.unblock();
     }
   }
   async seekTo(time) {
@@ -996,21 +1140,26 @@ class MediaPlayer {
     if (currentPlaybackTime === newTime) {
       return;
     }
-    await this.videoIteratorManager?.seek({
-      newTime,
-      nonce
-    });
-    await this.audioIteratorManager?.seek({
-      newTime,
-      nonce,
-      fps: this.fps,
-      playbackRate: this.playbackRate * this.globalPlaybackRate,
-      getIsPlaying: () => this.playing,
-      scheduleAudioNode: this.scheduleAudioNode,
-      bufferState: this.bufferState
-    });
+    await Promise.all([
+      this.videoIteratorManager?.seek({
+        newTime,
+        nonce
+      }),
+      this.audioIteratorManager?.seek({
+        newTime,
+        nonce,
+        fps: this.fps,
+        playbackRate: this.playbackRate * this.globalPlaybackRate,
+        getIsPlaying: () => this.playing,
+        scheduleAudioNode: this.scheduleAudioNode,
+        bufferState: this.bufferState
+      })
+    ]);
   }
   async play(time) {
+    if (this.playing) {
+      return;
+    }
     const newTime = getTimeInSeconds({
       unloopedTimeInSeconds: time,
       playbackRate: this.playbackRate,
@@ -1047,6 +1196,9 @@ class MediaPlayer {
     return this.bufferState.delayPlayback();
   };
   pause() {
+    if (!this.playing) {
+      return;
+    }
     this.playing = false;
     this.audioIteratorManager?.pausePlayback();
     this.drawDebugOverlay();
@@ -1081,12 +1233,16 @@ class MediaPlayer {
     this.audioIteratorManager?.destroyIterator();
   }
   setTrimBefore(trimBefore, unloopedTimeInSeconds) {
-    this.trimBefore = trimBefore;
-    this.updateAfterTrimChange(unloopedTimeInSeconds);
+    if (this.trimBefore !== trimBefore) {
+      this.trimBefore = trimBefore;
+      this.updateAfterTrimChange(unloopedTimeInSeconds);
+    }
   }
   setTrimAfter(trimAfter, unloopedTimeInSeconds) {
-    this.trimAfter = trimAfter;
-    this.updateAfterTrimChange(unloopedTimeInSeconds);
+    if (this.trimAfter !== trimAfter) {
+      this.trimAfter = trimAfter;
+      this.updateAfterTrimChange(unloopedTimeInSeconds);
+    }
   }
   setDebugOverlay(debugOverlay) {
     this.debugOverlay = debugOverlay;
@@ -1437,6 +1593,7 @@ var AudioForPreviewAssertedShowing = ({
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isPlayerBuffering = Internals6.useIsPlayerBuffering(bufferingContext);
+  const initialPlaying = useRef(playing && !isPlayerBuffering);
   const initialIsPremounting = useRef(isPremounting);
   const initialIsPostmounting = useRef(isPostmounting);
   const initialGlobalPlaybackRate = useRef(globalPlaybackRate);
@@ -1463,7 +1620,8 @@ var AudioForPreviewAssertedShowing = ({
         isPostmounting: initialIsPostmounting.current,
         isPremounting: initialIsPremounting.current,
         globalPlaybackRate: initialGlobalPlaybackRate.current,
-        onVideoFrameCallback: null
+        onVideoFrameCallback: null,
+        playing: initialPlaying.current
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current).then((result) => {
@@ -3776,6 +3934,7 @@ var VideoForPreviewAssertedShowing = ({
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isPlayerBuffering = Internals15.useIsPlayerBuffering(buffering);
+  const initialPlaying = useRef2(playing && !isPlayerBuffering);
   const initialIsPremounting = useRef2(isPremounting);
   const initialIsPostmounting = useRef2(isPostmounting);
   const initialGlobalPlaybackRate = useRef2(globalPlaybackRate);
@@ -3802,7 +3961,8 @@ var VideoForPreviewAssertedShowing = ({
         isPremounting: initialIsPremounting.current,
         isPostmounting: initialIsPostmounting.current,
         globalPlaybackRate: initialGlobalPlaybackRate.current,
-        onVideoFrameCallback: initialOnVideoFrameRef.current ?? null
+        onVideoFrameCallback: initialOnVideoFrameRef.current ?? null,
+        playing: initialPlaying.current
       });
       mediaPlayerRef.current = player;
       player.initialize(currentTimeRef.current).then((result) => {

package/dist/get-time-in-seconds.d.ts

@@ -9,3 +9,11 @@ export declare const getTimeInSeconds: ({ loop, mediaDurationInSeconds, unlooped
     fps: number;
     ifNoMediaDuration: "fail" | "infinity";
 }) => number | null;
+export declare const calculateEndTime: ({ mediaDurationInSeconds, ifNoMediaDuration, src, trimAfter, trimBefore, fps, }: {
+    mediaDurationInSeconds: number | null;
+    ifNoMediaDuration: "fail" | "infinity";
+    src: string;
+    trimAfter: number | undefined;
+    trimBefore: number | undefined;
+    fps: number;
+}) => number;

package/dist/get-time-in-seconds.js

@@ -23,3 +23,18 @@ export const getTimeInSeconds = ({ loop, mediaDurationInSeconds, unloopedTimeInS
     }
     return timeInSeconds + (trimBefore ?? 0) / fps;
 };
+export const calculateEndTime = ({ mediaDurationInSeconds, ifNoMediaDuration, src, trimAfter, trimBefore, fps, }) => {
+    if (mediaDurationInSeconds === null && ifNoMediaDuration === 'fail') {
+        throw new Error(`Could not determine duration of ${src}, but "loop" was set.`);
+    }
+    const mediaDuration = Internals.calculateMediaDuration({
+        trimAfter,
+        mediaDurationInFrames: mediaDurationInSeconds
+            ? mediaDurationInSeconds * fps
+            : Infinity,
+        // Playback rate was already specified before
+        playbackRate: 1,
+        trimBefore,
+    }) / fps;
+    return mediaDuration + (trimBefore ?? 0) / fps;
+};

package/dist/media-player.d.ts

@@ -42,7 +42,7 @@ export declare class MediaPlayer {
     private isPremounting;
     private isPostmounting;
     private seekPromiseChain;
-    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, onVideoFrameCallback, }: {
+    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, onVideoFrameCallback, playing, }: {
         canvas: HTMLCanvasElement | OffscreenCanvas | null;
         src: string;
         logLevel: LogLevel;
@@ -59,10 +59,13 @@ export declare class MediaPlayer {
         isPremounting: boolean;
         isPostmounting: boolean;
         onVideoFrameCallback: null | ((frame: CanvasImageSource) => void);
+        playing: boolean;
     });
     private input;
     private isDisposalError;
     initialize(startTimeUnresolved: number): Promise<MediaPlayerInitResult>;
+    private getStartTime;
+    private getEndTime;
     private _initialize;
     seekTo(time: number): Promise<void>;
     seekToDoNotCallDirectly(newTime: number, nonce: Nonce): Promise<void>;

package/dist/media-player.js

@@ -3,12 +3,12 @@ import { Internals } from 'remotion';
 import { audioIteratorManager, } from './audio-iterator-manager';
 import { calculatePlaybackTime } from './calculate-playbacktime';
 import { drawPreviewOverlay } from './debug-overlay/preview-overlay';
-import { getTimeInSeconds } from './get-time-in-seconds';
+import { calculateEndTime, getTimeInSeconds } from './get-time-in-seconds';
 import { isNetworkError } from './is-type-of-error';
 import { makeNonceManager } from './nonce-manager';
 import { videoIteratorManager } from './video-iterator-manager';
 export class MediaPlayer {
-    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, onVideoFrameCallback, }) {
+    constructor({ canvas, src, logLevel, sharedAudioContext, loop, trimBefore, trimAfter, playbackRate, globalPlaybackRate, audioStreamIndex, fps, debugOverlay, bufferState, isPremounting, isPostmounting, onVideoFrameCallback, playing, }) {
         this.audioIteratorManager = null;
         this.videoIteratorManager = null;
         // this is the time difference between Web Audio timeline
@@ -71,6 +71,7 @@ export class MediaPlayer {
         this.isPostmounting = isPostmounting;
         this.nonceManager = makeNonceManager();
         this.onVideoFrameCallback = onVideoFrameCallback;
+        this.playing = playing;
         this.input = new Input({
             source: new UrlSource(this.src),
             formats: ALL_FORMATS,
@@ -95,9 +96,24 @@ export class MediaPlayer {
     initialize(startTimeUnresolved) {
         const promise = this._initialize(startTimeUnresolved);
         this.initializationPromise = promise;
+        this.seekPromiseChain = promise;
         return promise;
     }
+    getStartTime() {
+        return (this.trimBefore ?? 0) / this.fps;
+    }
+    getEndTime() {
+        return calculateEndTime({
+            mediaDurationInSeconds: this.totalDuration,
+            ifNoMediaDuration: 'fail',
+            src: this.src,
+            trimAfter: this.trimAfter,
+            trimBefore: this.trimBefore,
+            fps: this.fps,
+        });
+    }
     async _initialize(startTimeUnresolved) {
+        const delayHandle = this.delayPlaybackHandleIfNotPremounting();
         try {
             if (this.input.disposed) {
                 return { type: 'disposed' };
@@ -145,6 +161,9 @@ export class MediaPlayer {
                     getOnVideoFrameCallback: () => this.onVideoFrameCallback,
                     logLevel: this.logLevel,
                     drawDebugOverlay: this.drawDebugOverlay,
+                    getEndTime: () => this.getEndTime(),
+                    getStartTime: () => this.getStartTime(),
+                    getIsLooping: () => this.loop,
                 });
             }
             const startTime = getTimeInSeconds({
@@ -167,21 +186,28 @@ export class MediaPlayer {
                     audioTrack,
                     delayPlaybackHandleIfNotPremounting: this.delayPlaybackHandleIfNotPremounting,
                     sharedAudioContext: this.sharedAudioContext,
+                    getIsLooping: () => this.loop,
+                    getEndTime: () => this.getEndTime(),
+                    getStartTime: () => this.getStartTime(),
+                    updatePlaybackTime: (time) => this.setPlaybackTime(time, this.playbackRate * this.globalPlaybackRate),
                 });
             }
             const nonce = this.nonceManager.createAsyncOperation();
             try {
-                // intentionally not awaited
-                if (this.audioIteratorManager) {
-                    this.audioIteratorManager.startAudioIterator({
-                        nonce,
-                        playbackRate: this.playbackRate * this.globalPlaybackRate,
-                        startFromSecond: startTime,
-                        getIsPlaying: () => this.playing,
-                        scheduleAudioNode: this.scheduleAudioNode,
-                    });
-                }
-                await this.videoIteratorManager?.startVideoIterator(startTime, nonce);
+                await Promise.all([
+                    this.audioIteratorManager
+                        ? this.audioIteratorManager.startAudioIterator({
+                            nonce,
+                            playbackRate: this.playbackRate * this.globalPlaybackRate,
+                            startFromSecond: startTime,
+                            getIsPlaying: () => this.playing,
+                            scheduleAudioNode: this.scheduleAudioNode,
+                        })
+                        : Promise.resolve(),
+                    this.videoIteratorManager
+                        ? this.videoIteratorManager.startVideoIterator(startTime, nonce)
+                        : Promise.resolve(),
+                ]);
             }
             catch (error) {
                 if (this.isDisposalError()) {
@@ -200,6 +226,9 @@ export class MediaPlayer {
             Internals.Log.error({ logLevel: this.logLevel, tag: '@remotion/media' }, '[MediaPlayer] Failed to initialize', error);
             throw error;
         }
+        finally {
+            delayHandle.unblock();
+        }
     }
     async seekTo(time) {
         const newTime = getTimeInSeconds({
@@ -229,21 +258,26 @@ export class MediaPlayer {
         if (currentPlaybackTime === newTime) {
             return;
         }
-        await this.videoIteratorManager?.seek({
-            newTime,
-            nonce,
-        });
-        await this.audioIteratorManager?.seek({
-            newTime,
-            nonce,
-            fps: this.fps,
-            playbackRate: this.playbackRate * this.globalPlaybackRate,
-            getIsPlaying: () => this.playing,
-            scheduleAudioNode: this.scheduleAudioNode,
-            bufferState: this.bufferState,
-        });
+        await Promise.all([
+            this.videoIteratorManager?.seek({
+                newTime,
+                nonce,
+            }),
+            this.audioIteratorManager?.seek({
+                newTime,
+                nonce,
+                fps: this.fps,
+                playbackRate: this.playbackRate * this.globalPlaybackRate,
+                getIsPlaying: () => this.playing,
+                scheduleAudioNode: this.scheduleAudioNode,
+                bufferState: this.bufferState,
+            }),
+        ]);
     }
     async play(time) {
+        if (this.playing) {
+            return;
+        }
         const newTime = getTimeInSeconds({
             unloopedTimeInSeconds: time,
             playbackRate: this.playbackRate,
@@ -272,6 +306,9 @@ export class MediaPlayer {
         this.drawDebugOverlay();
     }
     pause() {
+        if (!this.playing) {
+            return;
+        }
         this.playing = false;
         this.audioIteratorManager?.pausePlayback();
         this.drawDebugOverlay();
@@ -308,12 +345,16 @@ export class MediaPlayer {
         this.audioIteratorManager?.destroyIterator();
     }
     setTrimBefore(trimBefore, unloopedTimeInSeconds) {
-        this.trimBefore = trimBefore;
-        this.updateAfterTrimChange(unloopedTimeInSeconds);
+        if (this.trimBefore !== trimBefore) {
+            this.trimBefore = trimBefore;
+            this.updateAfterTrimChange(unloopedTimeInSeconds);
+        }
     }
     setTrimAfter(trimAfter, unloopedTimeInSeconds) {
-        this.trimAfter = trimAfter;
-        this.updateAfterTrimChange(unloopedTimeInSeconds);
+        if (this.trimAfter !== trimAfter) {
+            this.trimAfter = trimAfter;
+            this.updateAfterTrimChange(unloopedTimeInSeconds);
+        }
     }
     setDebugOverlay(debugOverlay) {
         this.debugOverlay = debugOverlay;

package/dist/prewarm-iterator-for-looping.d.ts

@@ -0,0 +1,17 @@
+import type { AudioBufferSink, CanvasSink, WrappedAudioBuffer, WrappedCanvas } from 'mediabunny';
+export declare const makePrewarmedVideoIteratorCache: (videoSink: CanvasSink) => {
+    prewarmIteratorForLooping: ({ timeToSeek }: {
+        timeToSeek: number;
+    }) => void;
+    makeIteratorOrUsePrewarmed: (timeToSeek: number) => AsyncGenerator<WrappedCanvas, void, unknown>;
+    destroy: () => void;
+};
+export type PrewarmedVideoIteratorCache = ReturnType<typeof makePrewarmedVideoIteratorCache>;
+export declare const makePrewarmedAudioIteratorCache: (audioSink: AudioBufferSink) => {
+    prewarmIteratorForLooping: ({ timeToSeek }: {
+        timeToSeek: number;
+    }) => void;
+    makeIteratorOrUsePrewarmed: (timeToSeek: number) => AsyncGenerator<WrappedAudioBuffer, void, unknown>;
+    destroy: () => void;
+};
+export type PrewarmedAudioIteratorCache = ReturnType<typeof makePrewarmedAudioIteratorCache>;

package/dist/prewarm-iterator-for-looping.js

@@ -0,0 +1,56 @@
+export const makePrewarmedVideoIteratorCache = (videoSink) => {
+    const prewarmedVideoIterators = new Map();
+    const prewarmIteratorForLooping = ({ timeToSeek }) => {
+        if (!prewarmedVideoIterators.has(timeToSeek)) {
+            prewarmedVideoIterators.set(timeToSeek, videoSink.canvases(timeToSeek));
+        }
+    };
+    const makeIteratorOrUsePrewarmed = (timeToSeek) => {
+        const prewarmedIterator = prewarmedVideoIterators.get(timeToSeek);
+        if (prewarmedIterator) {
+            prewarmedVideoIterators.delete(timeToSeek);
+            return prewarmedIterator;
+        }
+        const iterator = videoSink.canvases(timeToSeek);
+        return iterator;
+    };
+    const destroy = () => {
+        for (const iterator of prewarmedVideoIterators.values()) {
+            iterator.return();
+        }
+        prewarmedVideoIterators.clear();
+    };
+    return {
+        prewarmIteratorForLooping,
+        makeIteratorOrUsePrewarmed,
+        destroy,
+    };
+};
+export const makePrewarmedAudioIteratorCache = (audioSink) => {
+    const prewarmedAudioIterators = new Map();
+    const prewarmIteratorForLooping = ({ timeToSeek }) => {
+        if (!prewarmedAudioIterators.has(timeToSeek)) {
+            prewarmedAudioIterators.set(timeToSeek, audioSink.buffers(timeToSeek));
+        }
+    };
+    const makeIteratorOrUsePrewarmed = (timeToSeek) => {
+        const prewarmedIterator = prewarmedAudioIterators.get(timeToSeek);
+        if (prewarmedIterator) {
+            prewarmedAudioIterators.delete(timeToSeek);
+            return prewarmedIterator;
+        }
+        const iterator = audioSink.buffers(timeToSeek);
+        return iterator;
+    };
+    const destroy = () => {
+        for (const iterator of prewarmedAudioIterators.values()) {
+            iterator.return();
+        }
+        prewarmedAudioIterators.clear();
+    };
+    return {
+        prewarmIteratorForLooping,
+        makeIteratorOrUsePrewarmed,
+        destroy,
+    };
+};

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

@@ -71,6 +71,7 @@ const VideoForPreviewAssertedShowing = ({ src: unpreloadedSrc, style, playbackRa
         throw new Error('useMediaPlayback must be used inside a <BufferingContext>');
     }
     const isPlayerBuffering = Internals.useIsPlayerBuffering(buffering);
+    const initialPlaying = useRef(playing && !isPlayerBuffering);
     const initialIsPremounting = useRef(isPremounting);
     const initialIsPostmounting = useRef(isPostmounting);
     const initialGlobalPlaybackRate = useRef(globalPlaybackRate);
@@ -98,6 +99,7 @@ const VideoForPreviewAssertedShowing = ({ src: unpreloadedSrc, style, playbackRa
                 isPostmounting: initialIsPostmounting.current,
                 globalPlaybackRate: initialGlobalPlaybackRate.current,
                 onVideoFrameCallback: initialOnVideoFrameRef.current ?? null,
+                playing: initialPlaying.current,
             });
             mediaPlayerRef.current = player;
             player

package/dist/video/video-preview-iterator.d.ts

@@ -1,5 +1,6 @@
-import type { CanvasSink, WrappedCanvas } from 'mediabunny';
-export declare const createVideoIterator: (timeToSeek: number, videoSink: CanvasSink) => {
+import type { WrappedCanvas } from 'mediabunny';
+import type { PrewarmedVideoIteratorCache } from '../prewarm-iterator-for-looping';
+export declare const createVideoIterator: (timeToSeek: number, cache: PrewarmedVideoIteratorCache) => {
     destroy: () => void;
     getNext: () => Promise<IteratorResult<WrappedCanvas, void>>;
     isDestroyed: () => boolean;

package/dist/video/video-preview-iterator.js

@@ -1,7 +1,7 @@
 import { roundTo4Digits } from '../helpers/round-to-4-digits';
-export const createVideoIterator = (timeToSeek, videoSink) => {
+export const createVideoIterator = (timeToSeek, cache) => {
     let destroyed = false;
-    const iterator = videoSink.canvases(timeToSeek);
+    const iterator = cache.makeIteratorOrUsePrewarmed(timeToSeek);
     let lastReturnedFrame = null;
     let iteratorEnded = false;
     const getNextOrNullIfNotAvailable = async () => {

package/dist/video-iterator-manager.d.ts

@@ -1,7 +1,7 @@
 import type { InputVideoTrack, WrappedCanvas } from 'mediabunny';
 import type { LogLevel } from 'remotion';
 import type { Nonce } from './nonce-manager';
-export declare const videoIteratorManager: ({ delayPlaybackHandleIfNotPremounting, canvas, context, drawDebugOverlay, logLevel, getOnVideoFrameCallback, videoTrack, }: {
+export declare const videoIteratorManager: ({ delayPlaybackHandleIfNotPremounting, canvas, context, drawDebugOverlay, logLevel, getOnVideoFrameCallback, videoTrack, getEndTime, getStartTime, getIsLooping, }: {
     videoTrack: InputVideoTrack;
     delayPlaybackHandleIfNotPremounting: () => {
         unblock: () => void;
@@ -11,6 +11,9 @@ export declare const videoIteratorManager: ({ delayPlaybackHandleIfNotPremountin
     getOnVideoFrameCallback: () => null | ((frame: CanvasImageSource) => void);
     logLevel: LogLevel;
     drawDebugOverlay: () => void;
+    getEndTime: () => number;
+    getStartTime: () => number;
+    getIsLooping: () => boolean;
 }) => {
     startVideoIterator: (timeToSeek: number, nonce: Nonce) => Promise<void>;
     getVideoIteratorsCreated: () => number;

package/dist/video-iterator-manager.js

@@ -1,10 +1,12 @@
 import { CanvasSink } from 'mediabunny';
 import { Internals } from 'remotion';
+import { makePrewarmedVideoIteratorCache } from './prewarm-iterator-for-looping';
 import { createVideoIterator, } from './video/video-preview-iterator';
-export const videoIteratorManager = ({ delayPlaybackHandleIfNotPremounting, canvas, context, drawDebugOverlay, logLevel, getOnVideoFrameCallback, videoTrack, }) => {
+export const videoIteratorManager = ({ delayPlaybackHandleIfNotPremounting, canvas, context, drawDebugOverlay, logLevel, getOnVideoFrameCallback, videoTrack, getEndTime, getStartTime, getIsLooping, }) => {
     let videoIteratorsCreated = 0;
     let videoFrameIterator = null;
     let framesRendered = 0;
+    let currentDelayHandle = null;
     if (canvas) {
         canvas.width = videoTrack.displayWidth;
         canvas.height = videoTrack.displayHeight;
@@ -14,6 +16,7 @@ export const videoIteratorManager = ({ delayPlaybackHandleIfNotPremounting, canv
         fit: 'contain',
         alpha: true,
     });
+    const prewarmedVideoIteratorCache = makePrewarmedVideoIteratorCache(canvasSink);
     const drawFrame = (frame) => {
         if (context && canvas) {
             context.clearRect(0, 0, canvas.width, canvas.height);
@@ -29,12 +32,19 @@ export const videoIteratorManager = ({ delayPlaybackHandleIfNotPremounting, canv
     };
     const startVideoIterator = async (timeToSeek, nonce) => {
         videoFrameIterator?.destroy();
-        const iterator = createVideoIterator(timeToSeek, canvasSink);
+        const iterator = createVideoIterator(timeToSeek, prewarmedVideoIteratorCache);
         videoIteratorsCreated++;
         videoFrameIterator = iterator;
         const delayHandle = delayPlaybackHandleIfNotPremounting();
-        const frameResult = await iterator.getNext();
-        delayHandle.unblock();
+        currentDelayHandle = delayHandle;
+        let frameResult;
+        try {
+            frameResult = await iterator.getNext();
+        }
+        finally {
+            delayHandle.unblock();
+            currentDelayHandle = null;
+        }
         if (iterator.isDestroyed()) {
             return;
         }
@@ -54,6 +64,14 @@ export const videoIteratorManager = ({ delayPlaybackHandleIfNotPremounting, canv
         if (!videoFrameIterator) {
             return;
         }
+        if (getIsLooping()) {
+            // If less than 1 second from the end away, we pre-warm a new iterator
+            if (getEndTime() - newTime < 1) {
+                prewarmedVideoIteratorCache.prewarmIteratorForLooping({
+                    timeToSeek: getStartTime(),
+                });
+            }
+        }
         // Should return immediately, so it's okay to not use Promise.all here
         const videoSatisfyResult = await videoFrameIterator.tryToSatisfySeek(newTime);
         // Doing this before the staleness check, because
@@ -66,20 +84,22 @@ export const videoIteratorManager = ({ delayPlaybackHandleIfNotPremounting, canv
         if (nonce.isStale()) {
             return;
         }
-        // Intentionally not awaited, letting audio start as well
-        startVideoIterator(newTime, nonce).catch(() => {
-            // Ignore errors, might be stale or disposed
-        });
+        await startVideoIterator(newTime, nonce);
     };
     return {
         startVideoIterator,
         getVideoIteratorsCreated: () => videoIteratorsCreated,
         seek,
         destroy: () => {
+            prewarmedVideoIteratorCache.destroy();
             videoFrameIterator?.destroy();
             if (context && canvas) {
                 context.clearRect(0, 0, canvas.width, canvas.height);
             }
+            if (currentDelayHandle) {
+                currentDelayHandle.unblock();
+                currentDelayHandle = null;
+            }
             videoFrameIterator = null;
         },
         getVideoFrameIterator: () => videoFrameIterator,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.388",
+	"version": "4.0.391",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -22,14 +22,14 @@
 	},
 	"dependencies": {
 		"mediabunny": "1.25.8",
-		"remotion": "4.0.388"
+		"remotion": "4.0.391"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.388",
+		"@remotion/eslint-config-internal": "4.0.391",
 		"@vitest/browser-webdriverio": "4.0.9",
 		"eslint": "9.19.0",
 		"react": "19.2.3",

package/dist/is-network-error.d.ts

@@ -1,6 +0,0 @@
-/**
- * Utility to check if error is network error
- * @param error
- * @returns
- */
-export declare function isNetworkError(error: Error): boolean;

package/dist/is-network-error.js

@@ -1,17 +0,0 @@
-/**
- * Utility to check if error is network error
- * @param error
- * @returns
- */
-export function isNetworkError(error) {
-    if (
-    // Chrome
-    error.message.includes('Failed to fetch') ||
-        // Safari
-        error.message.includes('Load failed') ||
-        // Firefox
-        error.message.includes('NetworkError when attempting to fetch resource')) {
-        return true;
-    }
-    return false;
-}