@remotion/media 4.0.383 → 4.0.385

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

@@ -10,6 +10,8 @@ const AudioForPreviewAssertedShowing = ({ src, playbackRate, logLevel, muted, vo
     const videoConfig = useUnsafeVideoConfig();
     const frame = useCurrentFrame();
     const mediaPlayerRef = useRef(null);
+    const initialTrimBeforeRef = useRef(trimBefore);
+    const initialTrimAfterRef = useRef(trimAfter);
     const [mediaPlayerReady, setMediaPlayerReady] = useState(false);
     const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState(false);
     const [playing] = Timeline.usePlayingState();
@@ -62,11 +64,11 @@ const AudioForPreviewAssertedShowing = ({ src, playbackRate, logLevel, muted, vo
         trimAfter,
         trimBefore,
     });
-    const buffering = useContext(Internals.BufferingContextReact);
-    if (!buffering) {
+    const bufferingContext = useContext(Internals.BufferingContextReact);
+    if (!bufferingContext) {
         throw new Error('useMediaPlayback must be used inside a <BufferingContext>');
     }
-    const isPlayerBuffering = Internals.useIsPlayerBuffering(buffering);
+    const isPlayerBuffering = Internals.useIsPlayerBuffering(bufferingContext);
     useEffect(() => {
         if (!sharedAudioContext)
             return;
@@ -78,8 +80,8 @@ const AudioForPreviewAssertedShowing = ({ src, playbackRate, logLevel, muted, vo
                 logLevel,
                 sharedAudioContext: sharedAudioContext.audioContext,
                 loop,
-                trimAfter,
-                trimBefore,
+                trimAfter: initialTrimAfterRef.current,
+                trimBefore: initialTrimBeforeRef.current,
                 fps: videoConfig.fps,
                 canvas: null,
                 playbackRate,
@@ -159,8 +161,6 @@ const AudioForPreviewAssertedShowing = ({ src, playbackRate, logLevel, muted, vo
         sharedAudioContext,
         currentTimeRef,
         loop,
-        trimAfter,
-        trimBefore,
         playbackRate,
         videoConfig.fps,
         audioStreamIndex,
@@ -170,7 +170,7 @@ const AudioForPreviewAssertedShowing = ({ src, playbackRate, logLevel, muted, vo
         isPostmounting,
         globalPlaybackRate,
     ]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const audioPlayer = mediaPlayerRef.current;
         if (!audioPlayer)
             return;
@@ -182,16 +182,21 @@ const AudioForPreviewAssertedShowing = ({ src, playbackRate, logLevel, muted, vo
         }
     }, [isPlayerBuffering, logLevel, playing]);
     useLayoutEffect(() => {
-        const audioPlayer = mediaPlayerRef.current;
-        if (!audioPlayer || !mediaPlayerReady)
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
             return;
-        audioPlayer.seekTo(currentTime).catch(() => {
-            // Might be disposed
-        });
-        Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[AudioForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
-    }, [currentTime, logLevel, mediaPlayerReady]);
+        }
+        mediaPlayer.setTrimBefore(trimBefore, currentTimeRef.current);
+    }, [trimBefore, mediaPlayerReady]);
+    useLayoutEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setTrimAfter(trimAfter, currentTimeRef.current);
+    }, [trimAfter, mediaPlayerReady]);
     const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
-    useEffect(() => {
+    useLayoutEffect(() => {
         const audioPlayer = mediaPlayerRef.current;
         if (!audioPlayer || !mediaPlayerReady)
             return;
@@ -211,55 +216,50 @@ const AudioForPreviewAssertedShowing = ({ src, playbackRate, logLevel, muted, vo
         }
         audioPlayer.setPlaybackRate(playbackRate);
     }, [playbackRate, mediaPlayerReady]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const audioPlayer = mediaPlayerRef.current;
         if (!audioPlayer || !mediaPlayerReady) {
             return;
         }
         audioPlayer.setGlobalPlaybackRate(globalPlaybackRate);
     }, [globalPlaybackRate, mediaPlayerReady]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const audioPlayer = mediaPlayerRef.current;
         if (!audioPlayer || !mediaPlayerReady) {
             return;
         }
         audioPlayer.setFps(videoConfig.fps);
     }, [videoConfig.fps, mediaPlayerReady]);
-    useEffect(() => {
-        const mediaPlayer = mediaPlayerRef.current;
-        if (!mediaPlayer || !mediaPlayerReady) {
-            return;
-        }
-        mediaPlayer.setTrimBefore(trimBefore);
-    }, [trimBefore, mediaPlayerReady]);
-    useEffect(() => {
-        const mediaPlayer = mediaPlayerRef.current;
-        if (!mediaPlayer || !mediaPlayerReady) {
-            return;
-        }
-        mediaPlayer.setTrimAfter(trimAfter);
-    }, [trimAfter, mediaPlayerReady]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady) {
             return;
         }
         mediaPlayer.setLoop(loop);
     }, [loop, mediaPlayerReady]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady) {
             return;
         }
         mediaPlayer.setIsPremounting(isPremounting);
     }, [isPremounting, mediaPlayerReady]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady) {
             return;
         }
         mediaPlayer.setIsPostmounting(isPostmounting);
     }, [isPostmounting, mediaPlayerReady]);
+    useLayoutEffect(() => {
+        const audioPlayer = mediaPlayerRef.current;
+        if (!audioPlayer || !mediaPlayerReady)
+            return;
+        audioPlayer.seekTo(currentTime).catch(() => {
+            // Might be disposed
+        });
+        Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[AudioForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
+    }, [currentTime, logLevel, mediaPlayerReady]);
     if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
         return (_jsx(RemotionAudio, { src: src, muted: muted, volume: volume, startFrom: trimBefore, endAt: trimAfter, playbackRate: playbackRate, loopVolumeCurveBehavior: loopVolumeCurveBehavior, name: name, loop: loop, showInTimeline: showInTimeline, stack: stack ?? undefined, toneFrequency: toneFrequency, audioStreamIndex: audioStreamIndex, pauseWhenBuffering: fallbackHtml5AudioProps?.pauseWhenBuffering, crossOrigin: fallbackHtml5AudioProps?.crossOrigin, ...fallbackHtml5AudioProps }));
     }

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

@@ -6,7 +6,7 @@ import { applyVolume } from '../convert-audiodata/apply-volume';
 import { TARGET_SAMPLE_RATE } from '../convert-audiodata/resample-audiodata';
 import { frameForVolumeProp } from '../looped-frame';
 import { extractFrameViaBroadcastChannel } from '../video-extraction/extract-frame-via-broadcast-channel';
-export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, logLevel, loop, fallbackHtml5AudioProps, audioStreamIndex, showInTimeline, style, name, disallowFallbackToHtml5Audio, toneFrequency, trimAfter, trimBefore, }) => {
+export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, logLevel = window.remotion_logLevel ?? 'info', loop, fallbackHtml5AudioProps, audioStreamIndex, showInTimeline, style, name, disallowFallbackToHtml5Audio, toneFrequency, trimAfter, trimBefore, }) => {
     const frame = useCurrentFrame();
     const absoluteFrame = Internals.useTimelinePosition();
     const videoConfig = Internals.useUnsafeVideoConfig();
@@ -25,13 +25,14 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
     const sequenceContext = useContext(Internals.SequenceContext);
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
-    const id = useMemo(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+    const id = useMemo(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
         src,
         sequenceContext?.cumulatedFrom,
         sequenceContext?.relativeFrom,
         sequenceContext?.durationInFrames,
     ]);
     const maxCacheSize = useMaxMediaCacheSize(logLevel ?? window.remotion_logLevel);
+    const audioEnabled = Internals.useAudioEnabled();
     useLayoutEffect(() => {
         const timestamp = frame / fps;
         const durationInSeconds = 1 / fps;
@@ -43,7 +44,7 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
         });
         const shouldRenderAudio = (() => {
-            if (!window.remotion_audioEnabled) {
+            if (!audioEnabled) {
                 return false;
             }
             if (muted) {
@@ -124,7 +125,9 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 registerRenderAsset({
                     type: 'inline-audio',
                     id,
-                    audio: Array.from(audio.data),
+                    audio: environment.isClientSideRendering
+                        ? audio.data
+                        : Array.from(audio.data),
                     frame: absoluteFrame,
                     timestamp: audio.timestamp,
                     duration: (audio.numberOfFrames / TARGET_SAMPLE_RATE) * 1000000,
@@ -167,6 +170,7 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
         trimBefore,
         replaceWithHtml5Audio,
         maxCacheSize,
+        audioEnabled,
     ]);
     if (replaceWithHtml5Audio) {
         return (_jsx(Html5Audio, { src: src, playbackRate: playbackRate, muted: muted, loop: loop, volume: volumeProp, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, style: style, loopVolumeCurveBehavior: loopVolumeCurveBehavior, audioStreamIndex: audioStreamIndex, useWebAudioApi: fallbackHtml5AudioProps?.useWebAudioApi, onError: fallbackHtml5AudioProps?.onError, toneFrequency: toneFrequency, acceptableTimeShiftInSeconds: fallbackHtml5AudioProps?.acceptableTimeShiftInSeconds, name: name, showInTimeline: showInTimeline }));

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

@@ -46,7 +46,7 @@ export declare const audioIteratorManager: ({ audioTrack, delayPlaybackHandleIfN
         moveQueuedChunksToPauseQueue: () => void;
         getNumberOfChunksAfterResuming: () => number;
     } | null;
-    destroy: () => void;
+    destroyIterator: () => void;
     seek: ({ newTime, nonce, fps, playbackRate, getIsPlaying, scheduleAudioNode, bufferState, }: {
         newTime: number;
         nonce: Nonce;

package/dist/audio-iterator-manager.js

@@ -102,7 +102,8 @@ export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremo
             });
             return;
         }
-        const currentTimeIsAlreadyQueued = isAlreadyQueued(newTime, audioBufferIterator.getQueuedPeriod());
+        const queuedPeriod = audioBufferIterator.getQueuedPeriod();
+        const currentTimeIsAlreadyQueued = isAlreadyQueued(newTime, queuedPeriod);
         if (!currentTimeIsAlreadyQueued) {
             const audioSatisfyResult = await audioBufferIterator.tryToSatisfySeek(newTime, null, (buffer) => {
                 if (!nonce.isStale()) {
@@ -192,7 +193,7 @@ export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremo
         resumeScheduledAudioChunks,
         pausePlayback,
         getAudioBufferIterator: () => audioBufferIterator,
-        destroy: () => {
+        destroyIterator: () => {
             audioBufferIterator?.destroy();
             audioBufferIterator = null;
         },

package/dist/esm/index.mjs

@@ -377,7 +377,8 @@ var audioIteratorManager = ({
       });
       return;
     }
-    const currentTimeIsAlreadyQueued = isAlreadyQueued(newTime, audioBufferIterator.getQueuedPeriod());
+    const queuedPeriod = audioBufferIterator.getQueuedPeriod();
+    const currentTimeIsAlreadyQueued = isAlreadyQueued(newTime, queuedPeriod);
     if (!currentTimeIsAlreadyQueued) {
       const audioSatisfyResult = await audioBufferIterator.tryToSatisfySeek(newTime, null, (buffer) => {
         if (!nonce.isStale()) {
@@ -465,7 +466,7 @@ var audioIteratorManager = ({
     resumeScheduledAudioChunks,
     pausePlayback,
     getAudioBufferIterator: () => audioBufferIterator,
-    destroy: () => {
+    destroyIterator: () => {
       audioBufferIterator?.destroy();
       audioBufferIterator = null;
     },
@@ -1051,11 +1052,33 @@ class MediaPlayer {
     }
     this.audioIteratorManager.setVolume(volume);
   }
-  setTrimBefore(trimBefore) {
+  updateAfterTrimChange(unloopedTimeInSeconds) {
+    if (!this.audioIteratorManager && !this.videoIteratorManager) {
+      return;
+    }
+    const newMediaTime = getTimeInSeconds({
+      unloopedTimeInSeconds,
+      playbackRate: this.playbackRate,
+      loop: this.loop,
+      trimBefore: this.trimBefore,
+      trimAfter: this.trimAfter,
+      mediaDurationInSeconds: this.totalDuration ?? null,
+      fps: this.fps,
+      ifNoMediaDuration: "infinity",
+      src: this.src
+    });
+    if (newMediaTime !== null) {
+      this.setPlaybackTime(newMediaTime, this.playbackRate * this.globalPlaybackRate);
+    }
+    this.audioIteratorManager?.destroyIterator();
+  }
+  setTrimBefore(trimBefore, unloopedTimeInSeconds) {
     this.trimBefore = trimBefore;
+    this.updateAfterTrimChange(unloopedTimeInSeconds);
   }
-  setTrimAfter(trimAfter) {
+  setTrimAfter(trimAfter, unloopedTimeInSeconds) {
     this.trimAfter = trimAfter;
+    this.updateAfterTrimChange(unloopedTimeInSeconds);
   }
   setDebugOverlay(debugOverlay) {
     this.debugOverlay = debugOverlay;
@@ -1105,7 +1128,7 @@ class MediaPlayer {
     }
     this.nonceManager.createAsyncOperation();
     this.videoIteratorManager?.destroy();
-    this.audioIteratorManager?.destroy();
+    this.audioIteratorManager?.destroyIterator();
     this.input.dispose();
   }
   scheduleAudioNode = (node, mediaTimestamp) => {
@@ -1347,6 +1370,8 @@ var AudioForPreviewAssertedShowing = ({
   const videoConfig = useUnsafeVideoConfig();
   const frame = useCurrentFrame2();
   const mediaPlayerRef = useRef(null);
+  const initialTrimBeforeRef = useRef(trimBefore);
+  const initialTrimAfterRef = useRef(trimAfter);
   const [mediaPlayerReady, setMediaPlayerReady] = useState2(false);
   const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState2(false);
   const [playing] = Timeline.usePlayingState();
@@ -1399,11 +1424,11 @@ var AudioForPreviewAssertedShowing = ({
     trimAfter,
     trimBefore
   });
-  const buffering = useContext2(Internals6.BufferingContextReact);
-  if (!buffering) {
+  const bufferingContext = useContext2(Internals6.BufferingContextReact);
+  if (!bufferingContext) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
-  const isPlayerBuffering = Internals6.useIsPlayerBuffering(buffering);
+  const isPlayerBuffering = Internals6.useIsPlayerBuffering(bufferingContext);
   useEffect2(() => {
     if (!sharedAudioContext)
       return;
@@ -1415,8 +1440,8 @@ var AudioForPreviewAssertedShowing = ({
         logLevel,
         sharedAudioContext: sharedAudioContext.audioContext,
         loop,
-        trimAfter,
-        trimBefore,
+        trimAfter: initialTrimAfterRef.current,
+        trimBefore: initialTrimBeforeRef.current,
         fps: videoConfig.fps,
         canvas: null,
         playbackRate,
@@ -1492,8 +1517,6 @@ var AudioForPreviewAssertedShowing = ({
     sharedAudioContext,
     currentTimeRef,
     loop,
-    trimAfter,
-    trimBefore,
     playbackRate,
     videoConfig.fps,
     audioStreamIndex,
@@ -1503,7 +1526,7 @@ var AudioForPreviewAssertedShowing = ({
     isPostmounting,
     globalPlaybackRate
   ]);
-  useEffect2(() => {
+  useLayoutEffect(() => {
     const audioPlayer = mediaPlayerRef.current;
     if (!audioPlayer)
       return;
@@ -1514,14 +1537,21 @@ var AudioForPreviewAssertedShowing = ({
     }
   }, [isPlayerBuffering, logLevel, playing]);
   useLayoutEffect(() => {
-    const audioPlayer = mediaPlayerRef.current;
-    if (!audioPlayer || !mediaPlayerReady)
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
       return;
-    audioPlayer.seekTo(currentTime).catch(() => {});
-    Internals6.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
-  }, [currentTime, logLevel, mediaPlayerReady]);
+    }
+    mediaPlayer.setTrimBefore(trimBefore, currentTimeRef.current);
+  }, [trimBefore, mediaPlayerReady]);
+  useLayoutEffect(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setTrimAfter(trimAfter, currentTimeRef.current);
+  }, [trimAfter, mediaPlayerReady]);
   const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
-  useEffect2(() => {
+  useLayoutEffect(() => {
     const audioPlayer = mediaPlayerRef.current;
     if (!audioPlayer || !mediaPlayerReady)
       return;
@@ -1541,55 +1571,48 @@ var AudioForPreviewAssertedShowing = ({
     }
     audioPlayer.setPlaybackRate(playbackRate);
   }, [playbackRate, mediaPlayerReady]);
-  useEffect2(() => {
+  useLayoutEffect(() => {
     const audioPlayer = mediaPlayerRef.current;
     if (!audioPlayer || !mediaPlayerReady) {
       return;
     }
     audioPlayer.setGlobalPlaybackRate(globalPlaybackRate);
   }, [globalPlaybackRate, mediaPlayerReady]);
-  useEffect2(() => {
+  useLayoutEffect(() => {
     const audioPlayer = mediaPlayerRef.current;
     if (!audioPlayer || !mediaPlayerReady) {
       return;
     }
     audioPlayer.setFps(videoConfig.fps);
   }, [videoConfig.fps, mediaPlayerReady]);
-  useEffect2(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setTrimBefore(trimBefore);
-  }, [trimBefore, mediaPlayerReady]);
-  useEffect2(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setTrimAfter(trimAfter);
-  }, [trimAfter, mediaPlayerReady]);
-  useEffect2(() => {
+  useLayoutEffect(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setLoop(loop);
   }, [loop, mediaPlayerReady]);
-  useEffect2(() => {
+  useLayoutEffect(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setIsPremounting(isPremounting);
   }, [isPremounting, mediaPlayerReady]);
-  useEffect2(() => {
+  useLayoutEffect(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setIsPostmounting(isPostmounting);
   }, [isPostmounting, mediaPlayerReady]);
+  useLayoutEffect(() => {
+    const audioPlayer = mediaPlayerRef.current;
+    if (!audioPlayer || !mediaPlayerReady)
+      return;
+    audioPlayer.seekTo(currentTime).catch(() => {});
+    Internals6.Log.trace({ logLevel, tag: "@remotion/media" }, `[AudioForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
+  }, [currentTime, logLevel, mediaPlayerReady]);
   if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
     return /* @__PURE__ */ jsx(RemotionAudio, {
       src,
@@ -3408,7 +3431,7 @@ var AudioForRendering = ({
   loopVolumeCurveBehavior,
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
-  logLevel,
+  logLevel = window.remotion_logLevel ?? "info",
   loop,
   fallbackHtml5AudioProps,
   audioStreamIndex,
@@ -3436,13 +3459,14 @@ var AudioForRendering = ({
   const { delayRender, continueRender } = useDelayRender();
   const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState3(false);
   const sequenceContext = useContext3(Internals13.SequenceContext);
-  const id = useMemo3(() => `media-video-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo3(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
     sequenceContext?.durationInFrames
   ]);
   const maxCacheSize = useMaxMediaCacheSize(logLevel ?? window.remotion_logLevel);
+  const audioEnabled = Internals13.useAudioEnabled();
   useLayoutEffect2(() => {
     const timestamp = frame / fps;
     const durationInSeconds = 1 / fps;
@@ -3454,7 +3478,7 @@ var AudioForRendering = ({
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
     const shouldRenderAudio = (() => {
-      if (!window.remotion_audioEnabled) {
+      if (!audioEnabled) {
         return false;
       }
       if (muted) {
@@ -3534,7 +3558,7 @@ var AudioForRendering = ({
         registerRenderAsset({
           type: "inline-audio",
           id,
-          audio: Array.from(audio.data),
+          audio: environment.isClientSideRendering ? audio.data : Array.from(audio.data),
           frame: absoluteFrame,
           timestamp: audio.timestamp,
           duration: audio.numberOfFrames / TARGET_SAMPLE_RATE * 1e6,
@@ -3575,7 +3599,8 @@ var AudioForRendering = ({
     trimAfter,
     trimBefore,
     replaceWithHtml5Audio,
-    maxCacheSize
+    maxCacheSize,
+    audioEnabled
   ]);
   if (replaceWithHtml5Audio) {
     return /* @__PURE__ */ jsx2(Html5Audio, {
@@ -3682,6 +3707,8 @@ var VideoForPreviewAssertedShowing = ({
   const videoConfig = useUnsafeVideoConfig2();
   const frame = useCurrentFrame4();
   const mediaPlayerRef = useRef2(null);
+  const initialTrimBeforeRef = useRef2(trimBefore);
+  const initialTrimAfterRef = useRef2(trimAfter);
   const [mediaPlayerReady, setMediaPlayerReady] = useState4(false);
   const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState4(false);
   const [playing] = Timeline2.usePlayingState();
@@ -3752,8 +3779,8 @@ var VideoForPreviewAssertedShowing = ({
         logLevel,
         sharedAudioContext: sharedAudioContext.audioContext,
         loop,
-        trimAfter,
-        trimBefore,
+        trimAfter: initialTrimAfterRef.current,
+        trimBefore: initialTrimBeforeRef.current,
         fps: videoConfig.fps,
         playbackRate,
         audioStreamIndex,
@@ -3826,8 +3853,6 @@ var VideoForPreviewAssertedShowing = ({
     logLevel,
     sharedAudioContext,
     loop,
-    trimAfter,
-    trimBefore,
     videoConfig.fps,
     playbackRate,
     disallowFallbackToOffthreadVideo,
@@ -3851,97 +3876,97 @@ var VideoForPreviewAssertedShowing = ({
       mediaPlayer.pause();
     }
   }, [isPlayerBuffering, playing, logLevel, mediaPlayerReady]);
-  useLayoutEffect3(() => {
+  useEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady)
+    if (!mediaPlayer || !mediaPlayerReady) {
       return;
-    mediaPlayer.seekTo(currentTime).catch(() => {});
-    Internals15.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
-  }, [currentTime, logLevel, mediaPlayerReady]);
-  const effectiveMuted = isSequenceHidden || muted || mediaMuted || userPreferredVolume <= 0;
+    }
+    mediaPlayer.setTrimBefore(trimBefore, currentTimeRef.current);
+  }, [trimBefore, mediaPlayerReady]);
   useEffect3(() => {
+    const mediaPlayer = mediaPlayerRef.current;
+    if (!mediaPlayer || !mediaPlayerReady) {
+      return;
+    }
+    mediaPlayer.setTrimAfter(trimAfter, currentTimeRef.current);
+  }, [trimAfter, mediaPlayerReady]);
+  const effectiveMuted = isSequenceHidden || muted || mediaMuted || userPreferredVolume <= 0;
+  useLayoutEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady)
       return;
     mediaPlayer.setMuted(effectiveMuted);
   }, [effectiveMuted, mediaPlayerReady]);
-  useEffect3(() => {
+  useLayoutEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setVolume(userPreferredVolume);
   }, [userPreferredVolume, mediaPlayerReady]);
-  useEffect3(() => {
+  useLayoutEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setDebugOverlay(debugOverlay);
   }, [debugOverlay, mediaPlayerReady]);
-  useEffect3(() => {
+  useLayoutEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setPlaybackRate(playbackRate);
   }, [playbackRate, mediaPlayerReady]);
-  useEffect3(() => {
+  useLayoutEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setGlobalPlaybackRate(globalPlaybackRate);
   }, [globalPlaybackRate, mediaPlayerReady]);
-  useEffect3(() => {
+  useLayoutEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setLoop(loop);
   }, [loop, mediaPlayerReady]);
-  useEffect3(() => {
+  useLayoutEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setIsPremounting(isPremounting);
   }, [isPremounting, mediaPlayerReady]);
-  useEffect3(() => {
+  useLayoutEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setIsPostmounting(isPostmounting);
   }, [isPostmounting, mediaPlayerReady]);
-  useEffect3(() => {
+  useLayoutEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setFps(videoConfig.fps);
   }, [videoConfig.fps, mediaPlayerReady]);
-  useEffect3(() => {
+  useLayoutEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer || !mediaPlayerReady) {
       return;
     }
     mediaPlayer.setVideoFrameCallback(onVideoFrame ?? null);
   }, [onVideoFrame, mediaPlayerReady]);
-  useEffect3(() => {
-    const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
-      return;
-    }
-    mediaPlayer.setTrimBefore(trimBefore);
-  }, [trimBefore, mediaPlayerReady]);
-  useEffect3(() => {
+  useLayoutEffect3(() => {
     const mediaPlayer = mediaPlayerRef.current;
-    if (!mediaPlayer || !mediaPlayerReady) {
+    if (!mediaPlayer || !mediaPlayerReady)
       return;
-    }
-    mediaPlayer.setTrimAfter(trimAfter);
-  }, [trimAfter, mediaPlayerReady]);
+    mediaPlayer.seekTo(currentTime).catch(() => {});
+    Internals15.Log.trace({ logLevel, tag: "@remotion/media" }, `[VideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
+  }, [currentTime, logLevel, mediaPlayerReady]);
   const actualStyle = useMemo4(() => {
     return {
       ...style,
@@ -4203,7 +4228,7 @@ var VideoForRendering = ({
         registerRenderAsset({
           type: "inline-audio",
           id,
-          audio: Array.from(audio.data),
+          audio: environment.isClientSideRendering ? audio.data : Array.from(audio.data),
           frame: absoluteFrame,
           timestamp: audio.timestamp,
           duration: audio.numberOfFrames / TARGET_SAMPLE_RATE * 1e6,

package/dist/media-player.d.ts

@@ -70,8 +70,9 @@ export declare class MediaPlayer {
     pause(): void;
     setMuted(muted: boolean): void;
     setVolume(volume: number): void;
-    setTrimBefore(trimBefore: number | undefined): void;
-    setTrimAfter(trimAfter: number | undefined): void;
+    private updateAfterTrimChange;
+    setTrimBefore(trimBefore: number | undefined, unloopedTimeInSeconds: number): void;
+    setTrimAfter(trimAfter: number | undefined, unloopedTimeInSeconds: number): void;
     setDebugOverlay(debugOverlay: boolean): void;
     private updateAfterPlaybackRateChange;
     setPlaybackRate(rate: number): void;

package/dist/media-player.js

@@ -284,11 +284,35 @@ export class MediaPlayer {
         }
         this.audioIteratorManager.setVolume(volume);
     }
-    setTrimBefore(trimBefore) {
+    updateAfterTrimChange(unloopedTimeInSeconds) {
+        if (!this.audioIteratorManager && !this.videoIteratorManager) {
+            return;
+        }
+        const newMediaTime = getTimeInSeconds({
+            unloopedTimeInSeconds,
+            playbackRate: this.playbackRate,
+            loop: this.loop,
+            trimBefore: this.trimBefore,
+            trimAfter: this.trimAfter,
+            mediaDurationInSeconds: this.totalDuration ?? null,
+            fps: this.fps,
+            ifNoMediaDuration: 'infinity',
+            src: this.src,
+        });
+        if (newMediaTime !== null) {
+            this.setPlaybackTime(newMediaTime, this.playbackRate * this.globalPlaybackRate);
+        }
+        // audio iterator will be re-created on next play/seek
+        // video iterator doesn't need to be re-created
+        this.audioIteratorManager?.destroyIterator();
+    }
+    setTrimBefore(trimBefore, unloopedTimeInSeconds) {
         this.trimBefore = trimBefore;
+        this.updateAfterTrimChange(unloopedTimeInSeconds);
     }
-    setTrimAfter(trimAfter) {
+    setTrimAfter(trimAfter, unloopedTimeInSeconds) {
         this.trimAfter = trimAfter;
+        this.updateAfterTrimChange(unloopedTimeInSeconds);
     }
     setDebugOverlay(debugOverlay) {
         this.debugOverlay = debugOverlay;
@@ -345,7 +369,7 @@ export class MediaPlayer {
         // Mark all async operations as stale
         this.nonceManager.createAsyncOperation();
         this.videoIteratorManager?.destroy();
-        this.audioIteratorManager?.destroy();
+        this.audioIteratorManager?.destroyIterator();
         this.input.dispose();
     }
     getPlaybackTime() {

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

@@ -12,6 +12,8 @@ const VideoForPreviewAssertedShowing = ({ src: unpreloadedSrc, style, playbackRa
     const videoConfig = useUnsafeVideoConfig();
     const frame = useCurrentFrame();
     const mediaPlayerRef = useRef(null);
+    const initialTrimBeforeRef = useRef(trimBefore);
+    const initialTrimAfterRef = useRef(trimAfter);
     const [mediaPlayerReady, setMediaPlayerReady] = useState(false);
     const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState(false);
     const [playing] = Timeline.usePlayingState();
@@ -82,8 +84,8 @@ const VideoForPreviewAssertedShowing = ({ src: unpreloadedSrc, style, playbackRa
                 logLevel,
                 sharedAudioContext: sharedAudioContext.audioContext,
                 loop,
-                trimAfter,
-                trimBefore,
+                trimAfter: initialTrimAfterRef.current,
+                trimBefore: initialTrimBeforeRef.current,
                 fps: videoConfig.fps,
                 playbackRate,
                 audioStreamIndex,
@@ -160,8 +162,6 @@ const VideoForPreviewAssertedShowing = ({ src: unpreloadedSrc, style, playbackRa
         logLevel,
         sharedAudioContext,
         loop,
-        trimAfter,
-        trimBefore,
         videoConfig.fps,
         playbackRate,
         disallowFallbackToOffthreadVideo,
@@ -188,99 +188,99 @@ const VideoForPreviewAssertedShowing = ({ src: unpreloadedSrc, style, playbackRa
             mediaPlayer.pause();
         }
     }, [isPlayerBuffering, playing, logLevel, mediaPlayerReady]);
-    useLayoutEffect(() => {
+    useEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
-        if (!mediaPlayer || !mediaPlayerReady)
+        if (!mediaPlayer || !mediaPlayerReady) {
             return;
-        mediaPlayer.seekTo(currentTime).catch(() => {
-            // Might be disposed
-        });
-        Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[VideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
-    }, [currentTime, logLevel, mediaPlayerReady]);
-    const effectiveMuted = isSequenceHidden || muted || mediaMuted || userPreferredVolume <= 0;
+        }
+        mediaPlayer.setTrimBefore(trimBefore, currentTimeRef.current);
+    }, [trimBefore, mediaPlayerReady]);
     useEffect(() => {
+        const mediaPlayer = mediaPlayerRef.current;
+        if (!mediaPlayer || !mediaPlayerReady) {
+            return;
+        }
+        mediaPlayer.setTrimAfter(trimAfter, currentTimeRef.current);
+    }, [trimAfter, mediaPlayerReady]);
+    const effectiveMuted = isSequenceHidden || muted || mediaMuted || userPreferredVolume <= 0;
+    useLayoutEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady)
             return;
         mediaPlayer.setMuted(effectiveMuted);
     }, [effectiveMuted, mediaPlayerReady]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady) {
             return;
         }
         mediaPlayer.setVolume(userPreferredVolume);
     }, [userPreferredVolume, mediaPlayerReady]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady) {
             return;
         }
         mediaPlayer.setDebugOverlay(debugOverlay);
     }, [debugOverlay, mediaPlayerReady]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady) {
             return;
         }
         mediaPlayer.setPlaybackRate(playbackRate);
     }, [playbackRate, mediaPlayerReady]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady) {
             return;
         }
         mediaPlayer.setGlobalPlaybackRate(globalPlaybackRate);
     }, [globalPlaybackRate, mediaPlayerReady]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady) {
             return;
         }
         mediaPlayer.setLoop(loop);
     }, [loop, mediaPlayerReady]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady) {
             return;
         }
         mediaPlayer.setIsPremounting(isPremounting);
     }, [isPremounting, mediaPlayerReady]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady) {
             return;
         }
         mediaPlayer.setIsPostmounting(isPostmounting);
     }, [isPostmounting, mediaPlayerReady]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady) {
             return;
         }
         mediaPlayer.setFps(videoConfig.fps);
     }, [videoConfig.fps, mediaPlayerReady]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
         if (!mediaPlayer || !mediaPlayerReady) {
             return;
         }
         mediaPlayer.setVideoFrameCallback(onVideoFrame ?? null);
     }, [onVideoFrame, mediaPlayerReady]);
-    useEffect(() => {
-        const mediaPlayer = mediaPlayerRef.current;
-        if (!mediaPlayer || !mediaPlayerReady) {
-            return;
-        }
-        mediaPlayer.setTrimBefore(trimBefore);
-    }, [trimBefore, mediaPlayerReady]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         const mediaPlayer = mediaPlayerRef.current;
-        if (!mediaPlayer || !mediaPlayerReady) {
+        if (!mediaPlayer || !mediaPlayerReady)
             return;
-        }
-        mediaPlayer.setTrimAfter(trimAfter);
-    }, [trimAfter, mediaPlayerReady]);
+        mediaPlayer.seekTo(currentTime).catch(() => {
+            // Might be disposed
+        });
+        Internals.Log.trace({ logLevel, tag: '@remotion/media' }, `[VideoForPreview] Updating target time to ${currentTime.toFixed(3)}s`);
+    }, [currentTime, logLevel, mediaPlayerReady]);
     const actualStyle = useMemo(() => {
         return {
             ...style,

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

@@ -165,7 +165,9 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 registerRenderAsset({
                     type: 'inline-audio',
                     id,
-                    audio: Array.from(audio.data),
+                    audio: environment.isClientSideRendering
+                        ? audio.data
+                        : Array.from(audio.data),
                     frame: absoluteFrame,
                     timestamp: audio.timestamp,
                     duration: (audio.numberOfFrames / TARGET_SAMPLE_RATE) * 1000000,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.383",
+	"version": "4.0.385",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -21,15 +21,15 @@
 		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
 	},
 	"dependencies": {
-		"mediabunny": "1.25.3",
-		"remotion": "4.0.383"
+		"mediabunny": "1.25.8",
+		"remotion": "4.0.385"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.383",
+		"@remotion/eslint-config-internal": "4.0.385",
 		"@vitest/browser-webdriverio": "4.0.7",
 		"eslint": "9.19.0",
 		"react": "19.2.1",