@remotion/media 4.0.382 → 4.0.384

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-extraction/extract-audio.js

@@ -4,6 +4,7 @@ import { convertAudioData, fixFloatingPoint, } from '../convert-audiodata/conver
 import { TARGET_NUMBER_OF_CHANNELS, TARGET_SAMPLE_RATE, } from '../convert-audiodata/resample-audiodata';
 import { getSink } from '../get-sink';
 import { getTimeInSeconds } from '../get-time-in-seconds';
+import { isNetworkError, isUnsupportedConfigurationError, } from '../is-type-of-error';
 const extractAudioInternal = async ({ src, timeInSeconds: unloopedTimeInSeconds, durationInSeconds: durationNotYetApplyingPlaybackRate, logLevel, loop, playbackRate, audioStreamIndex, trimBefore, trimAfter, fps, maxCacheSize, }) => {
     const { getAudio, actualMatroskaTimestamps, isMatroska, getDuration } = await getSink(src, logLevel);
     let mediaDurationInSeconds = null;
@@ -47,70 +48,82 @@ const extractAudioInternal = async ({ src, timeInSeconds: unloopedTimeInSeconds,
         maxCacheSize,
     });
     const durationInSeconds = durationNotYetApplyingPlaybackRate * playbackRate;
-    const samples = await sampleIterator.getSamples(timeInSeconds, durationInSeconds);
-    audioManager.logOpenFrames();
-    const audioDataArray = [];
-    for (let i = 0; i < samples.length; i++) {
-        const sample = samples[i];
-        // Less than 1 sample would be included - we did not need it after all!
-        if (Math.abs(sample.timestamp - (timeInSeconds + durationInSeconds)) *
-            sample.sampleRate <
-            1) {
-            continue;
-        }
-        // Less than 1 sample would be included - we did not need it after all!
-        if (sample.timestamp + sample.duration <= timeInSeconds) {
-            continue;
-        }
-        const isFirstSample = i === 0;
-        const isLastSample = i === samples.length - 1;
-        const audioDataRaw = sample.toAudioData();
-        // amount of samples to shave from start and end
-        let trimStartInSeconds = 0;
-        let trimEndInSeconds = 0;
-        let leadingSilence = null;
-        if (isFirstSample) {
-            trimStartInSeconds = fixFloatingPoint(timeInSeconds - sample.timestamp);
-            if (trimStartInSeconds < 0) {
-                const silenceFrames = Math.ceil(fixFloatingPoint(-trimStartInSeconds * TARGET_SAMPLE_RATE));
-                leadingSilence = {
-                    data: new Int16Array(silenceFrames * TARGET_NUMBER_OF_CHANNELS),
-                    numberOfFrames: silenceFrames,
-                    timestamp: timeInSeconds * 1000000,
-                    durationInMicroSeconds: (silenceFrames / TARGET_SAMPLE_RATE) * 1000000,
-                };
-                trimStartInSeconds = 0;
+    try {
+        const samples = await sampleIterator.getSamples(timeInSeconds, durationInSeconds);
+        audioManager.logOpenFrames();
+        const audioDataArray = [];
+        for (let i = 0; i < samples.length; i++) {
+            const sample = samples[i];
+            // Less than 1 sample would be included - we did not need it after all!
+            if (Math.abs(sample.timestamp - (timeInSeconds + durationInSeconds)) *
+                sample.sampleRate <
+                1) {
+                continue;
+            }
+            // Less than 1 sample would be included - we did not need it after all!
+            if (sample.timestamp + sample.duration <= timeInSeconds) {
+                continue;
+            }
+            const isFirstSample = i === 0;
+            const isLastSample = i === samples.length - 1;
+            const audioDataRaw = sample.toAudioData();
+            // amount of samples to shave from start and end
+            let trimStartInSeconds = 0;
+            let trimEndInSeconds = 0;
+            let leadingSilence = null;
+            if (isFirstSample) {
+                trimStartInSeconds = fixFloatingPoint(timeInSeconds - sample.timestamp);
+                if (trimStartInSeconds < 0) {
+                    const silenceFrames = Math.ceil(fixFloatingPoint(-trimStartInSeconds * TARGET_SAMPLE_RATE));
+                    leadingSilence = {
+                        data: new Int16Array(silenceFrames * TARGET_NUMBER_OF_CHANNELS),
+                        numberOfFrames: silenceFrames,
+                        timestamp: timeInSeconds * 1000000,
+                        durationInMicroSeconds: (silenceFrames / TARGET_SAMPLE_RATE) * 1000000,
+                    };
+                    trimStartInSeconds = 0;
+                }
+            }
+            if (isLastSample) {
+                trimEndInSeconds =
+                    // clamp to 0 in case the audio ends early
+                    Math.max(0, sample.timestamp +
+                        sample.duration -
+                        (timeInSeconds + durationInSeconds));
             }
+            const audioData = convertAudioData({
+                audioData: audioDataRaw,
+                trimStartInSeconds,
+                trimEndInSeconds,
+                playbackRate,
+                audioDataTimestamp: sample.timestamp,
+                isLast: isLastSample,
+            });
+            audioDataRaw.close();
+            if (audioData.numberOfFrames === 0) {
+                continue;
+            }
+            if (leadingSilence) {
+                audioDataArray.push(leadingSilence);
+            }
+            audioDataArray.push(audioData);
         }
-        if (isLastSample) {
-            trimEndInSeconds =
-                // clamp to 0 in case the audio ends early
-                Math.max(0, sample.timestamp +
-                    sample.duration -
-                    (timeInSeconds + durationInSeconds));
+        if (audioDataArray.length === 0) {
+            return { data: null, durationInSeconds: mediaDurationInSeconds };
         }
-        const audioData = convertAudioData({
-            audioData: audioDataRaw,
-            trimStartInSeconds,
-            trimEndInSeconds,
-            playbackRate,
-            audioDataTimestamp: sample.timestamp,
-            isLast: isLastSample,
-        });
-        audioDataRaw.close();
-        if (audioData.numberOfFrames === 0) {
-            continue;
+        const combined = combineAudioDataAndClosePrevious(audioDataArray);
+        return { data: combined, durationInSeconds: mediaDurationInSeconds };
+    }
+    catch (err) {
+        const error = err;
+        if (isNetworkError(error)) {
+            return 'network-error';
         }
-        if (leadingSilence) {
-            audioDataArray.push(leadingSilence);
+        if (isUnsupportedConfigurationError(error)) {
+            return 'cannot-decode';
         }
-        audioDataArray.push(audioData);
-    }
-    if (audioDataArray.length === 0) {
-        return { data: null, durationInSeconds: mediaDurationInSeconds };
+        throw err;
     }
-    const combined = combineAudioDataAndClosePrevious(audioDataArray);
-    return { data: combined, durationInSeconds: mediaDurationInSeconds };
 };
 let queue = Promise.resolve(undefined);
 export const extractAudio = (params) => {

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;
     },
@@ -538,13 +539,16 @@ var drawPreviewOverlay = ({
   }
 };
 
-// src/is-network-error.ts
+// src/is-type-of-error.ts
 function isNetworkError(error) {
   if (error.message.includes("Failed to fetch") || error.message.includes("Load failed") || error.message.includes("NetworkError when attempting to fetch resource")) {
     return true;
   }
   return false;
 }
+function isUnsupportedConfigurationError(error) {
+  return error.message.includes("Unsupported configuration");
+}
 
 // src/nonce-manager.ts
 var makeNonceManager = () => {
@@ -1048,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;
@@ -1102,7 +1128,7 @@ class MediaPlayer {
     }
     this.nonceManager.createAsyncOperation();
     this.videoIteratorManager?.destroy();
-    this.audioIteratorManager?.destroy();
+    this.audioIteratorManager?.destroyIterator();
     this.input.dispose();
   }
   scheduleAudioNode = (node, mediaTimestamp) => {
@@ -1344,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();
@@ -1396,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;
@@ -1412,8 +1440,8 @@ var AudioForPreviewAssertedShowing = ({
         logLevel,
         sharedAudioContext: sharedAudioContext.audioContext,
         loop,
-        trimAfter,
-        trimBefore,
+        trimAfter: initialTrimAfterRef.current,
+        trimBefore: initialTrimBeforeRef.current,
         fps: videoConfig.fps,
         canvas: null,
         playbackRate,
@@ -1489,8 +1517,6 @@ var AudioForPreviewAssertedShowing = ({
     sharedAudioContext,
     currentTimeRef,
     loop,
-    trimAfter,
-    trimBefore,
     playbackRate,
     videoConfig.fps,
     audioStreamIndex,
@@ -1500,7 +1526,7 @@ var AudioForPreviewAssertedShowing = ({
     isPostmounting,
     globalPlaybackRate
   ]);
-  useEffect2(() => {
+  useLayoutEffect(() => {
     const audioPlayer = mediaPlayerRef.current;
     if (!audioPlayer)
       return;
@@ -1511,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;
@@ -1538,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,
@@ -2902,61 +2928,72 @@ var extractAudioInternal = async ({
     maxCacheSize
   });
   const durationInSeconds = durationNotYetApplyingPlaybackRate * playbackRate;
-  const samples = await sampleIterator.getSamples(timeInSeconds, durationInSeconds);
-  audioManager.logOpenFrames();
-  const audioDataArray = [];
-  for (let i = 0;i < samples.length; i++) {
-    const sample = samples[i];
-    if (Math.abs(sample.timestamp - (timeInSeconds + durationInSeconds)) * sample.sampleRate < 1) {
-      continue;
-    }
-    if (sample.timestamp + sample.duration <= timeInSeconds) {
-      continue;
-    }
-    const isFirstSample = i === 0;
-    const isLastSample = i === samples.length - 1;
-    const audioDataRaw = sample.toAudioData();
-    let trimStartInSeconds = 0;
-    let trimEndInSeconds = 0;
-    let leadingSilence = null;
-    if (isFirstSample) {
-      trimStartInSeconds = fixFloatingPoint2(timeInSeconds - sample.timestamp);
-      if (trimStartInSeconds < 0) {
-        const silenceFrames = Math.ceil(fixFloatingPoint2(-trimStartInSeconds * TARGET_SAMPLE_RATE));
-        leadingSilence = {
-          data: new Int16Array(silenceFrames * TARGET_NUMBER_OF_CHANNELS),
-          numberOfFrames: silenceFrames,
-          timestamp: timeInSeconds * 1e6,
-          durationInMicroSeconds: silenceFrames / TARGET_SAMPLE_RATE * 1e6
-        };
-        trimStartInSeconds = 0;
+  try {
+    const samples = await sampleIterator.getSamples(timeInSeconds, durationInSeconds);
+    audioManager.logOpenFrames();
+    const audioDataArray = [];
+    for (let i = 0;i < samples.length; i++) {
+      const sample = samples[i];
+      if (Math.abs(sample.timestamp - (timeInSeconds + durationInSeconds)) * sample.sampleRate < 1) {
+        continue;
+      }
+      if (sample.timestamp + sample.duration <= timeInSeconds) {
+        continue;
+      }
+      const isFirstSample = i === 0;
+      const isLastSample = i === samples.length - 1;
+      const audioDataRaw = sample.toAudioData();
+      let trimStartInSeconds = 0;
+      let trimEndInSeconds = 0;
+      let leadingSilence = null;
+      if (isFirstSample) {
+        trimStartInSeconds = fixFloatingPoint2(timeInSeconds - sample.timestamp);
+        if (trimStartInSeconds < 0) {
+          const silenceFrames = Math.ceil(fixFloatingPoint2(-trimStartInSeconds * TARGET_SAMPLE_RATE));
+          leadingSilence = {
+            data: new Int16Array(silenceFrames * TARGET_NUMBER_OF_CHANNELS),
+            numberOfFrames: silenceFrames,
+            timestamp: timeInSeconds * 1e6,
+            durationInMicroSeconds: silenceFrames / TARGET_SAMPLE_RATE * 1e6
+          };
+          trimStartInSeconds = 0;
+        }
+      }
+      if (isLastSample) {
+        trimEndInSeconds = Math.max(0, sample.timestamp + sample.duration - (timeInSeconds + durationInSeconds));
+      }
+      const audioData = convertAudioData({
+        audioData: audioDataRaw,
+        trimStartInSeconds,
+        trimEndInSeconds,
+        playbackRate,
+        audioDataTimestamp: sample.timestamp,
+        isLast: isLastSample
+      });
+      audioDataRaw.close();
+      if (audioData.numberOfFrames === 0) {
+        continue;
+      }
+      if (leadingSilence) {
+        audioDataArray.push(leadingSilence);
       }
+      audioDataArray.push(audioData);
     }
-    if (isLastSample) {
-      trimEndInSeconds = Math.max(0, sample.timestamp + sample.duration - (timeInSeconds + durationInSeconds));
+    if (audioDataArray.length === 0) {
+      return { data: null, durationInSeconds: mediaDurationInSeconds };
     }
-    const audioData = convertAudioData({
-      audioData: audioDataRaw,
-      trimStartInSeconds,
-      trimEndInSeconds,
-      playbackRate,
-      audioDataTimestamp: sample.timestamp,
-      isLast: isLastSample
-    });
-    audioDataRaw.close();
-    if (audioData.numberOfFrames === 0) {
-      continue;
+    const combined = combineAudioDataAndClosePrevious(audioDataArray);
+    return { data: combined, durationInSeconds: mediaDurationInSeconds };
+  } catch (err) {
+    const error = err;
+    if (isNetworkError(error)) {
+      return "network-error";
     }
-    if (leadingSilence) {
-      audioDataArray.push(leadingSilence);
+    if (isUnsupportedConfigurationError(error)) {
+      return "cannot-decode";
     }
-    audioDataArray.push(audioData);
-  }
-  if (audioDataArray.length === 0) {
-    return { data: null, durationInSeconds: mediaDurationInSeconds };
+    throw err;
   }
-  const combined = combineAudioDataAndClosePrevious(audioDataArray);
-  return { data: combined, durationInSeconds: mediaDurationInSeconds };
 };
 var queue = Promise.resolve(undefined);
 var extractAudio = (params) => {
@@ -3394,7 +3431,7 @@ var AudioForRendering = ({
   loopVolumeCurveBehavior,
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
-  logLevel,
+  logLevel = window.remotion_logLevel ?? "info",
   loop,
   fallbackHtml5AudioProps,
   audioStreamIndex,
@@ -3422,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;
@@ -3440,7 +3478,7 @@ var AudioForRendering = ({
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
     const shouldRenderAudio = (() => {
-      if (!window.remotion_audioEnabled) {
+      if (!audioEnabled) {
         return false;
       }
       if (muted) {
@@ -3520,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,
@@ -3561,7 +3599,8 @@ var AudioForRendering = ({
     trimAfter,
     trimBefore,
     replaceWithHtml5Audio,
-    maxCacheSize
+    maxCacheSize,
+    audioEnabled
   ]);
   if (replaceWithHtml5Audio) {
     return /* @__PURE__ */ jsx2(Html5Audio, {
@@ -3668,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();
@@ -3738,8 +3779,8 @@ var VideoForPreviewAssertedShowing = ({
         logLevel,
         sharedAudioContext: sharedAudioContext.audioContext,
         loop,
-        trimAfter,
-        trimBefore,
+        trimAfter: initialTrimAfterRef.current,
+        trimBefore: initialTrimBeforeRef.current,
         fps: videoConfig.fps,
         playbackRate,
         audioStreamIndex,
@@ -3812,8 +3853,6 @@ var VideoForPreviewAssertedShowing = ({
     logLevel,
     sharedAudioContext,
     loop,
-    trimAfter,
-    trimBefore,
     videoConfig.fps,
     playbackRate,
     disallowFallbackToOffthreadVideo,
@@ -3837,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,
@@ -4115,7 +4154,7 @@ var VideoForRendering = ({
           cancelRender3(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
         }
         if (window.remotion_isMainTab) {
-          Internals16.Log.info({ logLevel, tag: "@remotion/media" }, `Cannot decode ${src}, falling back to <OffthreadVideo>`);
+          Internals16.Log.warn({ logLevel, tag: "@remotion/media" }, `Cannot decode ${src}, falling back to <OffthreadVideo>`);
         }
         setReplaceWithOffthreadVideo({
           durationInSeconds: result.durationInSeconds
@@ -4189,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/extract-frame-and-audio.js

@@ -1,5 +1,5 @@
 import { extractAudio } from './audio-extraction/extract-audio';
-import { isNetworkError } from './is-network-error';
+import { isNetworkError } from './is-type-of-error';
 import { extractFrame } from './video-extraction/extract-frame';
 import { rotateFrame } from './video-extraction/rotate-frame';
 export const extractFrameAndAudio = async ({ src, timeInSeconds, logLevel, durationInSeconds, playbackRate, includeAudio, includeVideo, loop, audioStreamIndex, trimAfter, trimBefore, fps, maxCacheSize, }) => {

package/dist/is-type-of-error.d.ts

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

package/dist/is-type-of-error.js

@@ -0,0 +1,20 @@
+/**
+ * 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;
+}
+export function isUnsupportedConfigurationError(error) {
+    return error.message.includes('Unsupported configuration');
+}

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

@@ -4,7 +4,7 @@ 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 { isNetworkError } from './is-network-error';
+import { isNetworkError } from './is-type-of-error';
 import { makeNonceManager } from './nonce-manager';
 import { videoIteratorManager } from './video-iterator-manager';
 export class MediaPlayer {
@@ -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

@@ -92,7 +92,7 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
                     cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
                 }
                 if (window.remotion_isMainTab) {
-                    Internals.Log.info({ logLevel, tag: '@remotion/media' }, `Cannot decode ${src}, falling back to <OffthreadVideo>`);
+                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Cannot decode ${src}, falling back to <OffthreadVideo>`);
                 }
                 setReplaceWithOffthreadVideo({
                     durationInSeconds: result.durationInSeconds,
@@ -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/dist/video-extraction/get-frames-since-keyframe.js

@@ -1,5 +1,5 @@
 import { ALL_FORMATS, AudioSampleSink, EncodedPacketSink, Input, MATROSKA, UrlSource, VideoSampleSink, WEBM, } from 'mediabunny';
-import { isNetworkError } from '../is-network-error';
+import { isNetworkError } from '../is-type-of-error';
 import { makeKeyframeBank } from './keyframe-bank';
 import { rememberActualMatroskaTimestamps } from './remember-actual-matroska-timestamps';
 const getRetryDelay = (() => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/media",
-	"version": "4.0.382",
+	"version": "4.0.384",
 	"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.382"
+		"mediabunny": "1.25.8",
+		"remotion": "4.0.384"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.382",
+		"@remotion/eslint-config-internal": "4.0.384",
 		"@vitest/browser-webdriverio": "4.0.7",
 		"eslint": "9.19.0",
 		"react": "19.2.1",