remotion 4.0.336 → 4.0.340

package/dist/cjs/CompositionManager.d.ts

@@ -56,6 +56,7 @@ export type TSequence = {
     loopDisplay: LoopDisplay | undefined;
     stack: string | null;
     premountDisplay: number | null;
+    postmountDisplay: number | null;
 } & EnhancedTSequenceData;
 export type AudioOrVideoAsset = {
     type: 'audio' | 'video';
@@ -67,6 +68,7 @@ export type AudioOrVideoAsset = {
     playbackRate: number;
     toneFrequency: number | null;
     audioStartFrame: number;
+    audioStreamIndex: number;
 };
 type DiscriminatedArtifact = {
     contentType: 'binary';

package/dist/cjs/Img.js

@@ -71,6 +71,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
     }, [maxRetries, onError, retryIn]);
     if (typeof window !== 'undefined') {
         const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
+        const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
             var _a, _b;
@@ -88,7 +89,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
                 retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
                 timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
             });
-            const unblock = pauseWhenLoading && !isPremounting
+            const unblock = pauseWhenLoading && !isPremounting && !isPostmounting
                 ? delayPlayback().unblock
                 : () => undefined;
             let unmounted = false;
@@ -148,6 +149,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
             delayRenderTimeoutInMilliseconds,
             pauseWhenLoading,
             isPremounting,
+            isPostmounting,
             onImageFrame,
         ]);
     }

package/dist/cjs/Sequence.d.ts

@@ -3,8 +3,10 @@ import type { LoopDisplay } from './CompositionManager.js';
 export type AbsoluteFillLayout = {
     layout?: 'absolute-fill';
     premountFor?: number;
+    postmountFor?: number;
     style?: React.CSSProperties;
     styleWhilePremounted?: React.CSSProperties;
+    styleWhilePostmounted?: React.CSSProperties;
     className?: string;
 };
 export type LayoutAndStyle = AbsoluteFillLayout | {
@@ -25,6 +27,10 @@ export type SequencePropsWithoutDuration = {
      * @deprecated For internal use only.
      */
     readonly _remotionInternalPremountDisplay?: number | null;
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly _remotionInternalPostmountDisplay?: number | null;
     /**
      * @deprecated For internal use only.
      */
@@ -33,6 +39,10 @@ export type SequencePropsWithoutDuration = {
      * @deprecated For internal use only.
      */
     readonly _remotionInternalIsPremounting?: boolean;
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly _remotionInternalIsPostmounting?: boolean;
 } & LayoutAndStyle;
 export type SequenceProps = {
     readonly durationInFrames?: number;

package/dist/cjs/Sequence.js

@@ -13,7 +13,7 @@ const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const freeze_js_1 = require("./freeze.js");
 const use_current_frame_1 = require("./use-current-frame");
-const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, ...other }, ref) => {
+const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, ...other }, ref) => {
     var _a;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -55,6 +55,11 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         return ((parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting) ||
             Boolean(other._remotionInternalIsPremounting));
     }, [other._remotionInternalIsPremounting, parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting]);
+    const postmounting = (0, react_1.useMemo)(() => {
+        // || is intentional, ?? would not trigger on `false`
+        return ((parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.postmounting) ||
+            Boolean(other._remotionInternalIsPostmounting));
+    }, [other._remotionInternalIsPostmounting, parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.postmounting]);
     const contextValue = (0, react_1.useMemo)(() => {
         var _a, _b, _c;
         return {
@@ -66,6 +71,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
             height: (_b = height !== null && height !== void 0 ? height : parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.height) !== null && _b !== void 0 ? _b : null,
             width: (_c = width !== null && width !== void 0 ? width : parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.width) !== null && _c !== void 0 ? _c : null,
             premounting,
+            postmounting,
         };
     }, [
         cumulatedFrom,
@@ -76,6 +82,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         height,
         width,
         premounting,
+        postmounting,
     ]);
     const timelineClipName = (0, react_1.useMemo)(() => {
         return name !== null && name !== void 0 ? name : '';
@@ -98,6 +105,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
             loopDisplay,
             stack: stack !== null && stack !== void 0 ? stack : null,
             premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
+            postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
         });
         return () => {
             unregisterSequence(id);
@@ -118,6 +126,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         loopDisplay,
         stack,
         premountDisplay,
+        postmountDisplay,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958
@@ -146,32 +155,48 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     return ((0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: content === null ? null : other.layout === 'none' ? (content) : ((0, jsx_runtime_1.jsx)(AbsoluteFill_js_1.AbsoluteFill, { ref: ref, style: defaultStyle, className: other.className, children: content })) }));
 };
 const RegularSequence = (0, react_1.forwardRef)(RegularSequenceRefForwardingFunction);
-const PremountedSequenceRefForwardingFunction = (props, ref) => {
+const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
     const frame = (0, use_current_frame_1.useCurrentFrame)();
     if (props.layout === 'none') {
-        throw new Error('`<Sequence>` with `premountFor` prop does not support layout="none"');
+        throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
     }
-    const { style: passedStyle, from = 0, premountFor = 0, styleWhilePremounted, ...otherProps } = props;
+    const { style: passedStyle, from = 0, durationInFrames = Infinity, premountFor = 0, postmountFor = 0, styleWhilePremounted, styleWhilePostmounted, ...otherProps } = props;
+    const endThreshold = Math.ceil(from + durationInFrames - 1);
     const premountingActive = frame < from && frame >= from - premountFor;
+    const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
+    // Determine which freeze frame to use
+    const freezeFrame = premountingActive
+        ? from
+        : postmountingActive
+            ? from + durationInFrames - 1
+            : 0;
+    const isFreezingActive = premountingActive || postmountingActive;
     const style = (0, react_1.useMemo)(() => {
         var _a;
         return {
             ...passedStyle,
-            opacity: premountingActive ? 0 : 1,
-            pointerEvents: premountingActive
+            opacity: premountingActive || postmountingActive ? 0 : 1,
+            pointerEvents: premountingActive || postmountingActive
                 ? 'none'
                 : ((_a = passedStyle === null || passedStyle === void 0 ? void 0 : passedStyle.pointerEvents) !== null && _a !== void 0 ? _a : undefined),
             ...(premountingActive ? styleWhilePremounted : {}),
+            ...(postmountingActive ? styleWhilePostmounted : {}),
         };
-    }, [passedStyle, premountingActive, styleWhilePremounted]);
-    return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: from, active: premountingActive, children: (0, jsx_runtime_1.jsx)(exports.Sequence, { ref: ref, from: from, style: style, _remotionInternalPremountDisplay: premountFor, _remotionInternalIsPremounting: premountingActive, ...otherProps }) }));
+    }, [
+        passedStyle,
+        premountingActive,
+        postmountingActive,
+        styleWhilePremounted,
+        styleWhilePostmounted,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: freezeFrame, active: isFreezingActive, children: (0, jsx_runtime_1.jsx)(exports.Sequence, { ref: ref, from: from, durationInFrames: durationInFrames, style: style, _remotionInternalPremountDisplay: premountFor, _remotionInternalPostmountDisplay: postmountFor, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...otherProps }) }));
 };
-const PremountedSequence = (0, react_1.forwardRef)(PremountedSequenceRefForwardingFunction);
+const PremountedPostmountedSequence = (0, react_1.forwardRef)(PremountedPostmountedSequenceRefForwardingFunction);
 const SequenceRefForwardingFunction = (props, ref) => {
-    if (props.layout !== 'none' &&
-        props.premountFor &&
-        !(0, get_remotion_environment_js_1.getRemotionEnvironment)().isRendering) {
-        return (0, jsx_runtime_1.jsx)(PremountedSequence, { ...props, ref: ref });
+    if (props.layout !== 'none' && !(0, get_remotion_environment_js_1.getRemotionEnvironment)().isRendering) {
+        if (props.premountFor || props.postmountFor) {
+            return (0, jsx_runtime_1.jsx)(PremountedPostmountedSequence, { ...props, ref: ref });
+        }
     }
     return (0, jsx_runtime_1.jsx)(RegularSequence, { ...props, ref: ref });
 };

package/dist/cjs/SequenceContext.d.ts

@@ -8,4 +8,5 @@ export type SequenceContextType = {
     width: number | null;
     height: number | null;
     premounting: boolean;
+    postmounting: boolean;
 };

package/dist/cjs/audio/Audio.d.ts

@@ -16,6 +16,7 @@ export declare const Audio: React.ForwardRefExoticComponent<Omit<import("./props
     delayRenderRetries?: number;
     loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior;
     onError?: (err: Error) => void;
+    audioStreamIndex?: number;
 } & RemotionMainAudioProps & {
     /**
      * @deprecated For internal use only

package/dist/cjs/audio/AudioForPreview.js

@@ -23,7 +23,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         throw new Error('Cannot change the behavior for pre-mounting audio tags dynamically.');
     }
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
-    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, stack, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, toneFrequency, useWebAudioApi, onError, onNativeError, ...nativeProps } = props;
+    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, stack, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, toneFrequency, useWebAudioApi, onError, onNativeError, audioStreamIndex, ...nativeProps } = props;
     // Typecheck that we are not accidentially passing unrecognized props
     // to the DOM
     const _propsValid = true;
@@ -99,8 +99,10 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         stack: _remotionInternalStack,
         showInTimeline,
         premountDisplay: null,
+        postmountDisplay: null,
         onAutoPlayError: null,
         isPremounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting),
+        isPostmounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting),
     });
     // putting playback before useVolume
     // because volume looks at playbackrate
@@ -112,6 +114,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         onlyWarnForMediaSeekingError: false,
         acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : null,
         isPremounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting),
+        isPostmounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting),
         pauseWhenBuffering,
         onAutoPlayError: null,
     });

package/dist/cjs/audio/AudioForRendering.js

@@ -14,7 +14,7 @@ const volume_prop_js_1 = require("../volume-prop.js");
 const use_audio_frame_js_1 = require("./use-audio-frame.js");
 const AudioForRenderingRefForwardingFunction = (props, ref) => {
     const audioRef = (0, react_1.useRef)(null);
-    const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, onNativeError, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, pauseWhenBuffering, ...nativeProps } = props;
+    const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, onNativeError, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, pauseWhenBuffering, audioStreamIndex, ...nativeProps } = props;
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
@@ -63,6 +63,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
             playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
             toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : null,
             audioStartFrame: Math.max(0, -((_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _b !== void 0 ? _b : 0)),
+            audioStreamIndex: audioStreamIndex !== null && audioStreamIndex !== void 0 ? audioStreamIndex : 0,
         });
         return () => unregisterRenderAsset(id);
     }, [
@@ -79,6 +80,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         props.playbackRate,
         toneFrequency,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
+        audioStreamIndex,
     ]);
     const { src } = props;
     // The <audio> tag is only rendered if the duration needs to be calculated for the `loop`

package/dist/cjs/audio/props.d.ts

@@ -38,6 +38,7 @@ export type RemotionAudioProps = NativeAudioProps & {
     delayRenderRetries?: number;
     loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
     onError?: (err: Error) => void;
+    audioStreamIndex?: number;
 };
 type IsNever<T> = [T] extends [never] ? true : false;
 export type IsExact<T, U> = (<G>() => G extends T ? 1 : 2) extends <G>() => G extends U ? 1 : 2 ? IsNever<Exclude<keyof T, keyof U>> extends true ? IsNever<Exclude<keyof U, keyof T>> extends true ? true : false : false : false;

package/dist/cjs/internals.d.ts

@@ -53,6 +53,7 @@ export declare const Internals: {
         delayRenderRetries?: number;
         onError?: (err: Error) => void;
         onAutoPlayError?: null | (() => void);
+        audioStreamIndex?: number;
     } & {
         readonly onlyWarnForMediaSeekingError: boolean;
         readonly onDuration: (src: string, durationInSeconds: number) => void;

package/dist/cjs/use-media-buffering.d.ts

@@ -1,9 +1,10 @@
 import type React from 'react';
 import type { LogLevel } from './log';
-export declare const useMediaBuffering: ({ element, shouldBuffer, isPremounting, logLevel, mountTime, src, }: {
+export declare const useMediaBuffering: ({ element, shouldBuffer, isPremounting, isPostmounting, logLevel, mountTime, src, }: {
     element: React.RefObject<HTMLVideoElement | HTMLAudioElement | null>;
     shouldBuffer: boolean;
     isPremounting: boolean;
+    isPostmounting: boolean;
     logLevel: LogLevel;
     mountTime: number;
     src: string | null;

package/dist/cjs/use-media-buffering.js

@@ -4,7 +4,7 @@ exports.useMediaBuffering = void 0;
 const react_1 = require("react");
 const playback_logging_1 = require("./playback-logging");
 const use_buffer_state_1 = require("./use-buffer-state");
-const useMediaBuffering = ({ element, shouldBuffer, isPremounting, logLevel, mountTime, src, }) => {
+const useMediaBuffering = ({ element, shouldBuffer, isPremounting, isPostmounting, logLevel, mountTime, src, }) => {
     const buffer = (0, use_buffer_state_1.useBufferState)();
     const [isBuffering, setIsBuffering] = (0, react_1.useState)(false);
     // Buffer state based on `waiting` and `canplay`
@@ -17,7 +17,7 @@ const useMediaBuffering = ({ element, shouldBuffer, isPremounting, logLevel, mou
         if (!shouldBuffer) {
             return;
         }
-        if (isPremounting) {
+        if (isPremounting || isPostmounting) {
             // Needed by iOS Safari which will not load by default
             // and therefore not fire the canplay event.
             // Be cautious about using `current.load()` as it will
@@ -25,7 +25,8 @@ const useMediaBuffering = ({ element, shouldBuffer, isPremounting, logLevel, mou
             // Therefore only calling it after checking if the video
             // has no future data.
             // Breaks on Firefox though: https://github.com/remotion-dev/remotion/issues/3915
-            if (current.readyState < current.HAVE_FUTURE_DATA) {
+            if ((isPremounting || isPostmounting) &&
+                current.readyState < current.HAVE_FUTURE_DATA) {
                 if (!navigator.userAgent.includes('Firefox/')) {
                     (0, playback_logging_1.playbackLogging)({
                         logLevel,
@@ -38,6 +39,7 @@ const useMediaBuffering = ({ element, shouldBuffer, isPremounting, logLevel, mou
                     current.playbackRate = previousPlaybackRate;
                 }
             }
+            // Don't trigger buffering during premount or postmount
             return;
         }
         const cleanup = (reason) => {
@@ -143,7 +145,16 @@ const useMediaBuffering = ({ element, shouldBuffer, isPremounting, logLevel, mou
         // `src` should be in it, because if changing the source and pausing at the same time,
         // it gives the chance to load the new source.
         // https://github.com/remotion-dev/remotion/issues/5218
-    }, [buffer, src, element, isPremounting, logLevel, shouldBuffer, mountTime]);
+    }, [
+        buffer,
+        src,
+        element,
+        isPremounting,
+        isPostmounting,
+        logLevel,
+        shouldBuffer,
+        mountTime,
+    ]);
     return isBuffering;
 };
 exports.useMediaBuffering = useMediaBuffering;

package/dist/cjs/use-media-in-timeline.d.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 import type { VolumeProp } from './volume-prop.js';
-export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, onAutoPlayError, isPremounting, }: {
+export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, onAutoPlayError, isPremounting, isPostmounting, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
     mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement | null>;
@@ -12,6 +12,8 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src,
     stack: string | null;
     showInTimeline: boolean;
     premountDisplay: number | null;
+    postmountDisplay: number | null;
     onAutoPlayError: null | (() => void);
     isPremounting: boolean;
+    isPostmounting: boolean;
 }) => void;

package/dist/cjs/use-media-in-timeline.js

@@ -22,7 +22,7 @@ const warnOnce = (message) => {
     console.warn(message);
     didWarn[message] = true;
 };
-const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, onAutoPlayError, isPremounting, }) => {
+const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, onAutoPlayError, isPremounting, isPostmounting, }) => {
     const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
     const { rootId, audioAndVideoTags } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -93,6 +93,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
             playbackRate,
             stack,
             premountDisplay,
+            postmountDisplay,
         });
         return () => {
             unregisterSequence(id);
@@ -118,6 +119,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         stack,
         showInTimeline,
         premountDisplay,
+        postmountDisplay,
     ]);
     (0, react_1.useEffect)(() => {
         const tag = {
@@ -127,7 +129,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
                     // Don't play if for example in a <Freeze> state.
                     return;
                 }
-                if (isPremounting) {
+                if (isPremounting || isPostmounting) {
                     return;
                 }
                 return (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)({
@@ -152,6 +154,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         onAutoPlayError,
         imperativePlaying,
         isPremounting,
+        isPostmounting,
         logLevel,
         mountTime,
     ]);

package/dist/cjs/use-media-playback.d.ts

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, onAutoPlayError, }: {
+export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, isPostmounting, onAutoPlayError, }: {
     mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement | null>;
     src: string | undefined;
     mediaType: "audio" | "video";
@@ -8,5 +8,6 @@ export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate
     acceptableTimeshift: number | null;
     pauseWhenBuffering: boolean;
     isPremounting: boolean;
+    isPostmounting: boolean;
     onAutoPlayError: null | (() => void);
 }) => void;

package/dist/cjs/use-media-playback.js

@@ -18,7 +18,7 @@ const use_request_video_callback_time_js_1 = require("./use-request-video-callba
 const use_video_config_js_1 = require("./use-video-config.js");
 const get_current_time_js_1 = require("./video/get-current-time.js");
 const warn_about_non_seekable_media_js_1 = require("./warn-about-non-seekable-media.js");
-const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, onAutoPlayError, }) => {
+const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, isPostmounting, onAutoPlayError, }) => {
     const { playbackRate: globalPlaybackRate } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
@@ -61,6 +61,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         element: mediaRef,
         shouldBuffer: pauseWhenBuffering,
         isPremounting,
+        isPostmounting,
         logLevel,
         mountTime,
         src: src !== null && src !== void 0 ? src : null,
@@ -97,7 +98,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
             (0, playback_logging_js_1.playbackLogging)({
                 logLevel,
                 tag: 'pause',
-                message: `Pausing ${(_b = mediaRef.current) === null || _b === void 0 ? void 0 : _b.src} because ${isPremounting ? 'media is premounting' : 'Player is not playing'}`,
+                message: `Pausing ${(_b = mediaRef.current) === null || _b === void 0 ? void 0 : _b.src} because ${isPremounting ? 'media is premounting' : isPostmounting ? 'media is postmounting' : 'Player is not playing'}`,
                 mountTime,
             });
             (_c = mediaRef.current) === null || _c === void 0 ? void 0 : _c.pause();
@@ -125,6 +126,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         mediaType,
         mountTime,
         playing,
+        isPostmounting,
     ]);
     // This must be a useLayoutEffect, because afterwards, useVolume() looks at the playbackRate
     // and it is also in a useLayoutEffect.
@@ -168,7 +170,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
                 mediaRef: mediaRef.current,
                 time: shouldBeTime,
                 logLevel,
-                why: `because time shift is too big. shouldBeTime = ${shouldBeTime}, isTime = ${mediaTagTime}, requestVideoCallbackTime = ${rvcTime}, timeShift = ${timeShift}${isVariableFpsVideo ? ', isVariableFpsVideo = true' : ''}, isPremounting = ${isPremounting}, pauseWhenBuffering = ${pauseWhenBuffering}`,
+                why: `because time shift is too big. shouldBeTime = ${shouldBeTime}, isTime = ${mediaTagTime}, requestVideoCallbackTime = ${rvcTime}, timeShift = ${timeShift}${isVariableFpsVideo ? ', isVariableFpsVideo = true' : ''}, isPremounting = ${isPremounting}, isPostmounting = ${isPostmounting}, pauseWhenBuffering = ${pauseWhenBuffering}`,
                 mountTime,
             });
             lastSeekDueToShift.current = lastSeek.current;
@@ -262,6 +264,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         src,
         onAutoPlayError,
         isPremounting,
+        isPostmounting,
         pauseWhenBuffering,
         mountTime,
         mediaTagCurrentTime,

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.336";
+export declare const VERSION = "4.0.340";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.336';
+exports.VERSION = '4.0.340';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -22,7 +22,7 @@ const offthread_video_source_js_1 = require("./offthread-video-source.js");
 const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate, src, muted, allowAmplificationDuringRender, transparent = false, toneMapped = true, toneFrequency, name, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, onVideoFrame, 
 // Remove crossOrigin prop during rendering
 // https://discord.com/channels/809501355504959528/844143007183667220/1311639632496033813
-crossOrigin, ...props }) => {
+crossOrigin, audioStreamIndex, ...props }) => {
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const volumePropsFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
@@ -73,6 +73,7 @@ crossOrigin, ...props }) => {
             playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
             toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : null,
             audioStartFrame: Math.max(0, -((_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _a !== void 0 ? _a : 0)),
+            audioStreamIndex: audioStreamIndex !== null && audioStreamIndex !== void 0 ? audioStreamIndex : 0,
         });
         return () => unregisterRenderAsset(id);
     }, [
@@ -87,6 +88,7 @@ crossOrigin, ...props }) => {
         playbackRate,
         toneFrequency,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
+        audioStreamIndex,
     ]);
     const currentTime = (0, react_1.useMemo)(() => {
         return ((0, get_current_time_js_1.getExpectedMediaFrameUncorrected)({

package/dist/cjs/video/Video.d.ts

@@ -15,6 +15,7 @@ export declare const Video: React.ForwardRefExoticComponent<Omit<import("./props
     delayRenderRetries?: number;
     onError?: (err: Error) => void;
     onAutoPlayError?: null | (() => void);
+    audioStreamIndex?: number;
 } & RemotionMainVideoProps & {
     /**
      * @deprecated For internal use only

package/dist/cjs/video/VideoForPreview.js

@@ -39,7 +39,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     }, [context.audioContext]);
     const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
     // @ts-expect-error
-    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, style, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, onError, onAutoPlayError, onVideoFrame, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, allowAmplificationDuringRender, useWebAudioApi, ...nativeProps } = props;
+    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, style, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, onError, onAutoPlayError, onVideoFrame, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, allowAmplificationDuringRender, useWebAudioApi, audioStreamIndex, ...nativeProps } = props;
     const _propsValid = true;
     if (!_propsValid) {
         throw new Error('typecheck error');
@@ -74,8 +74,10 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         stack: _remotionInternalStack,
         showInTimeline,
         premountDisplay: null,
+        postmountDisplay: null,
         onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : null,
         isPremounting: Boolean(parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting),
+        isPostmounting: Boolean(parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.postmounting),
     });
     // putting playback before useVolume
     // because volume looks at playbackrate
@@ -87,6 +89,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         onlyWarnForMediaSeekingError,
         acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : null,
         isPremounting: Boolean(parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting),
+        isPostmounting: Boolean(parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.postmounting),
         pauseWhenBuffering,
         onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : null,
     });

package/dist/cjs/video/VideoForRendering.js

@@ -18,7 +18,7 @@ const use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");
 const volume_prop_js_1 = require("../volume-prop.js");
 const get_current_time_js_1 = require("./get-current-time.js");
 const seek_until_right_js_1 = require("./seek-until-right.js");
-const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, acceptableTimeShiftInSeconds, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, ...props }, ref) => {
+const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, acceptableTimeShiftInSeconds, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, audioStreamIndex, ...props }, ref) => {
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const volumePropsFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
@@ -73,6 +73,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
             toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : null,
             audioStartFrame: Math.max(0, -((_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _a !== void 0 ? _a : 0)),
+            audioStreamIndex: audioStreamIndex !== null && audioStreamIndex !== void 0 ? audioStreamIndex : 0,
         });
         return () => unregisterRenderAsset(id);
     }, [
@@ -87,6 +88,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         playbackRate,
         toneFrequency,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
+        audioStreamIndex,
     ]);
     (0, react_1.useImperativeHandle)(ref, () => {
         return videoRef.current;

package/dist/cjs/video/props.d.ts

@@ -39,6 +39,7 @@ export type RemotionVideoProps = NativeVideoProps & {
     delayRenderRetries?: number;
     onError?: (err: Error) => void;
     onAutoPlayError?: null | (() => void);
+    audioStreamIndex?: number;
 };
 type DeprecatedOffthreadVideoProps = {
     /**
@@ -74,6 +75,7 @@ export type RemotionOffthreadVideoProps = {
     onAutoPlayError?: null | (() => void);
     onVideoFrame?: OnVideoFrame;
     crossOrigin?: '' | 'anonymous' | 'use-credentials';
+    audioStreamIndex?: number;
 } & RemotionMainVideoProps & DeprecatedOffthreadVideoProps;
 export type OnVideoFrame = (frame: CanvasImageSource) => void;
 export {};

package/dist/esm/index.mjs

@@ -104,7 +104,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.336";
+var VERSION = "4.0.340";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1325,6 +1325,7 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
   _remotionInternalPremountDisplay: premountDisplay,
+  _remotionInternalPostmountDisplay: postmountDisplay,
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
@@ -1360,6 +1361,9 @@ var RegularSequenceRefForwardingFunction = ({
   const premounting = useMemo9(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
+  const postmounting = useMemo9(() => {
+    return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
+  }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
   const contextValue = useMemo9(() => {
     return {
       cumulatedFrom,
@@ -1369,7 +1373,8 @@ var RegularSequenceRefForwardingFunction = ({
       id,
       height: height ?? parentSequence?.height ?? null,
       width: width ?? parentSequence?.width ?? null,
-      premounting
+      premounting,
+      postmounting
     };
   }, [
     cumulatedFrom,
@@ -1379,7 +1384,8 @@ var RegularSequenceRefForwardingFunction = ({
     id,
     height,
     width,
-    premounting
+    premounting,
+    postmounting
   ]);
   const timelineClipName = useMemo9(() => {
     return name ?? "";
@@ -1400,7 +1406,8 @@ var RegularSequenceRefForwardingFunction = ({
       nonce,
       loopDisplay,
       stack: stack ?? null,
-      premountDisplay: premountDisplay ?? null
+      premountDisplay: premountDisplay ?? null,
+      postmountDisplay: postmountDisplay ?? null
     });
     return () => {
       unregisterSequence(id);
@@ -1420,7 +1427,8 @@ var RegularSequenceRefForwardingFunction = ({
     nonce,
     loopDisplay,
     stack,
-    premountDisplay
+    premountDisplay,
+    postmountDisplay
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
@@ -1451,47 +1459,66 @@ var RegularSequenceRefForwardingFunction = ({
   });
 };
 var RegularSequence = forwardRef2(RegularSequenceRefForwardingFunction);
-var PremountedSequenceRefForwardingFunction = (props, ref) => {
+var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
   const frame = useCurrentFrame();
   if (props.layout === "none") {
-    throw new Error('`<Sequence>` with `premountFor` prop does not support layout="none"');
+    throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
   }
   const {
     style: passedStyle,
     from = 0,
+    durationInFrames = Infinity,
     premountFor = 0,
+    postmountFor = 0,
     styleWhilePremounted,
+    styleWhilePostmounted,
     ...otherProps
   } = props;
+  const endThreshold = Math.ceil(from + durationInFrames - 1);
   const premountingActive = frame < from && frame >= from - premountFor;
+  const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
+  const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
+  const isFreezingActive = premountingActive || postmountingActive;
   const style = useMemo9(() => {
     return {
       ...passedStyle,
-      opacity: premountingActive ? 0 : 1,
-      pointerEvents: premountingActive ? "none" : passedStyle?.pointerEvents ?? undefined,
-      ...premountingActive ? styleWhilePremounted : {}
+      opacity: premountingActive || postmountingActive ? 0 : 1,
+      pointerEvents: premountingActive || postmountingActive ? "none" : passedStyle?.pointerEvents ?? undefined,
+      ...premountingActive ? styleWhilePremounted : {},
+      ...postmountingActive ? styleWhilePostmounted : {}
     };
-  }, [passedStyle, premountingActive, styleWhilePremounted]);
+  }, [
+    passedStyle,
+    premountingActive,
+    postmountingActive,
+    styleWhilePremounted,
+    styleWhilePostmounted
+  ]);
   return /* @__PURE__ */ jsx8(Freeze, {
-    frame: from,
-    active: premountingActive,
+    frame: freezeFrame,
+    active: isFreezingActive,
     children: /* @__PURE__ */ jsx8(Sequence, {
       ref,
       from,
+      durationInFrames,
       style,
       _remotionInternalPremountDisplay: premountFor,
+      _remotionInternalPostmountDisplay: postmountFor,
       _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
       ...otherProps
     })
   });
 };
-var PremountedSequence = forwardRef2(PremountedSequenceRefForwardingFunction);
+var PremountedPostmountedSequence = forwardRef2(PremountedPostmountedSequenceRefForwardingFunction);
 var SequenceRefForwardingFunction = (props, ref) => {
-  if (props.layout !== "none" && props.premountFor && !getRemotionEnvironment().isRendering) {
-    return /* @__PURE__ */ jsx8(PremountedSequence, {
-      ...props,
-      ref
-    });
+  if (props.layout !== "none" && !getRemotionEnvironment().isRendering) {
+    if (props.premountFor || props.postmountFor) {
+      return /* @__PURE__ */ jsx8(PremountedPostmountedSequence, {
+        ...props,
+        ref
+      });
+    }
   }
   return /* @__PURE__ */ jsx8(RegularSequence, {
     ...props,
@@ -3321,8 +3348,10 @@ var useMediaInTimeline = ({
   stack,
   showInTimeline,
   premountDisplay,
+  postmountDisplay,
   onAutoPlayError,
-  isPremounting
+  isPremounting,
+  isPostmounting
 }) => {
   const videoConfig = useVideoConfig();
   const { rootId, audioAndVideoTags } = useContext17(TimelineContext);
@@ -3384,7 +3413,8 @@ var useMediaInTimeline = ({
       loopDisplay: undefined,
       playbackRate,
       stack,
-      premountDisplay
+      premountDisplay,
+      postmountDisplay
     });
     return () => {
       unregisterSequence(id);
@@ -3409,7 +3439,8 @@ var useMediaInTimeline = ({
     displayName,
     stack,
     showInTimeline,
-    premountDisplay
+    premountDisplay,
+    postmountDisplay
   ]);
   useEffect8(() => {
     const tag = {
@@ -3418,7 +3449,7 @@ var useMediaInTimeline = ({
         if (!imperativePlaying.current) {
           return;
         }
-        if (isPremounting) {
+        if (isPremounting || isPostmounting) {
           return;
         }
         return playAndHandleNotAllowedError({
@@ -3443,6 +3474,7 @@ var useMediaInTimeline = ({
     onAutoPlayError,
     imperativePlaying,
     isPremounting,
+    isPostmounting,
     logLevel,
     mountTime
   ]);
@@ -3722,6 +3754,7 @@ var useMediaBuffering = ({
   element,
   shouldBuffer,
   isPremounting,
+  isPostmounting,
   logLevel,
   mountTime,
   src
@@ -3737,8 +3770,8 @@ var useMediaBuffering = ({
     if (!shouldBuffer) {
       return;
     }
-    if (isPremounting) {
-      if (current.readyState < current.HAVE_FUTURE_DATA) {
+    if (isPremounting || isPostmounting) {
+      if ((isPremounting || isPostmounting) && current.readyState < current.HAVE_FUTURE_DATA) {
         if (!navigator.userAgent.includes("Firefox/")) {
           playbackLogging({
             logLevel,
@@ -3842,7 +3875,16 @@ var useMediaBuffering = ({
     return () => {
       cleanup("element was unmounted or prop changed");
     };
-  }, [buffer, src, element, isPremounting, logLevel, shouldBuffer, mountTime]);
+  }, [
+    buffer,
+    src,
+    element,
+    isPremounting,
+    isPostmounting,
+    logLevel,
+    shouldBuffer,
+    mountTime
+  ]);
   return isBuffering;
 };
 
@@ -4080,6 +4122,7 @@ var useMediaPlayback = ({
   acceptableTimeshift,
   pauseWhenBuffering,
   isPremounting,
+  isPostmounting,
   onAutoPlayError
 }) => {
   const { playbackRate: globalPlaybackRate } = useContext20(TimelineContext);
@@ -4124,6 +4167,7 @@ var useMediaPlayback = ({
     element: mediaRef,
     shouldBuffer: pauseWhenBuffering,
     isPremounting,
+    isPostmounting,
     logLevel,
     mountTime,
     src: src ?? null
@@ -4155,7 +4199,7 @@ var useMediaPlayback = ({
       playbackLogging({
         logLevel,
         tag: "pause",
-        message: `Pausing ${mediaRef.current?.src} because ${isPremounting ? "media is premounting" : "Player is not playing"}`,
+        message: `Pausing ${mediaRef.current?.src} because ${isPremounting ? "media is premounting" : isPostmounting ? "media is postmounting" : "Player is not playing"}`,
         mountTime
       });
       mediaRef.current?.pause();
@@ -4182,7 +4226,8 @@ var useMediaPlayback = ({
     mediaRef,
     mediaType,
     mountTime,
-    playing
+    playing,
+    isPostmounting
   ]);
   useLayoutEffect5(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
@@ -4212,7 +4257,7 @@ var useMediaPlayback = ({
         mediaRef: mediaRef.current,
         time: shouldBeTime,
         logLevel,
-        why: `because time shift is too big. shouldBeTime = ${shouldBeTime}, isTime = ${mediaTagTime}, requestVideoCallbackTime = ${rvcTime}, timeShift = ${timeShift}${isVariableFpsVideo ? ", isVariableFpsVideo = true" : ""}, isPremounting = ${isPremounting}, pauseWhenBuffering = ${pauseWhenBuffering}`,
+        why: `because time shift is too big. shouldBeTime = ${shouldBeTime}, isTime = ${mediaTagTime}, requestVideoCallbackTime = ${rvcTime}, timeShift = ${timeShift}${isVariableFpsVideo ? ", isVariableFpsVideo = true" : ""}, isPremounting = ${isPremounting}, isPostmounting = ${isPostmounting}, pauseWhenBuffering = ${pauseWhenBuffering}`,
         mountTime
       });
       lastSeekDueToShift.current = lastSeek.current;
@@ -4298,6 +4343,7 @@ var useMediaPlayback = ({
     src,
     onAutoPlayError,
     isPremounting,
+    isPostmounting,
     pauseWhenBuffering,
     mountTime,
     mediaTagCurrentTime
@@ -4365,6 +4411,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     useWebAudioApi,
     onError,
     onNativeError,
+    audioStreamIndex,
     ...nativeProps
   } = props;
   const _propsValid = true;
@@ -4438,8 +4485,10 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     stack: _remotionInternalStack,
     showInTimeline,
     premountDisplay: null,
+    postmountDisplay: null,
     onAutoPlayError: null,
-    isPremounting: Boolean(sequenceContext?.premounting)
+    isPremounting: Boolean(sequenceContext?.premounting),
+    isPostmounting: Boolean(sequenceContext?.postmounting)
   });
   useMediaPlayback({
     mediaRef: audioRef,
@@ -4449,6 +4498,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     onlyWarnForMediaSeekingError: false,
     acceptableTimeshift: acceptableTimeShiftInSeconds ?? null,
     isPremounting: Boolean(sequenceContext?.premounting),
+    isPostmounting: Boolean(sequenceContext?.postmounting),
     pauseWhenBuffering,
     onAutoPlayError: null
   });
@@ -4521,6 +4571,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     delayRenderTimeoutInMilliseconds,
     loopVolumeCurveBehavior,
     pauseWhenBuffering,
+    audioStreamIndex,
     ...nativeProps
   } = props;
   const absoluteFrame = useTimelinePosition();
@@ -4564,7 +4615,8 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
       mediaFrame: frame,
       playbackRate: props.playbackRate ?? 1,
       toneFrequency: toneFrequency ?? null,
-      audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0))
+      audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0)),
+      audioStreamIndex: audioStreamIndex ?? 0
     });
     return () => unregisterRenderAsset(id);
   }, [
@@ -4580,7 +4632,8 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     playbackRate,
     props.playbackRate,
     toneFrequency,
-    sequenceContext?.relativeFrom
+    sequenceContext?.relativeFrom,
+    audioStreamIndex
   ]);
   const { src } = props;
   const needsToRenderAudioTag = ref || _remotionInternalNeedsDurationCalculation;
@@ -5381,6 +5434,7 @@ var ImgRefForwarding = ({
   }, [maxRetries, onError, retryIn]);
   if (typeof window !== "undefined") {
     const isPremounting = Boolean(sequenceContext?.premounting);
+    const isPostmounting = Boolean(sequenceContext?.postmounting);
     useLayoutEffect7(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
@@ -5396,7 +5450,7 @@ var ImgRefForwarding = ({
         retries: delayRenderRetries ?? undefined,
         timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
       });
-      const unblock = pauseWhenLoading && !isPremounting ? delayPlayback().unblock : () => {
+      const unblock = pauseWhenLoading && !isPremounting && !isPostmounting ? delayPlayback().unblock : () => {
         return;
       };
       let unmounted = false;
@@ -5445,6 +5499,7 @@ var ImgRefForwarding = ({
       delayRenderTimeoutInMilliseconds,
       pauseWhenLoading,
       isPremounting,
+      isPostmounting,
       onImageFrame
     ]);
   }
@@ -5969,6 +6024,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     delayRenderTimeoutInMilliseconds,
     allowAmplificationDuringRender,
     useWebAudioApi,
+    audioStreamIndex,
     ...nativeProps
   } = props2;
   const _propsValid = true;
@@ -6005,8 +6061,10 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     stack: _remotionInternalStack,
     showInTimeline,
     premountDisplay: null,
+    postmountDisplay: null,
     onAutoPlayError: onAutoPlayError ?? null,
-    isPremounting: Boolean(parentSequence?.premounting)
+    isPremounting: Boolean(parentSequence?.premounting),
+    isPostmounting: Boolean(parentSequence?.postmounting)
   });
   useMediaPlayback({
     mediaRef: videoRef,
@@ -6016,6 +6074,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     onlyWarnForMediaSeekingError,
     acceptableTimeshift: acceptableTimeShiftInSeconds ?? null,
     isPremounting: Boolean(parentSequence?.premounting),
+    isPostmounting: Boolean(parentSequence?.postmounting),
     pauseWhenBuffering,
     onAutoPlayError: onAutoPlayError ?? null
   });
@@ -7187,6 +7246,7 @@ var OffthreadVideoForRendering = ({
   delayRenderTimeoutInMilliseconds,
   onVideoFrame,
   crossOrigin,
+  audioStreamIndex,
   ...props2
 }) => {
   const absoluteFrame = useTimelinePosition();
@@ -7235,7 +7295,8 @@ var OffthreadVideoForRendering = ({
       mediaFrame: frame,
       playbackRate: playbackRate ?? 1,
       toneFrequency: toneFrequency ?? null,
-      audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0))
+      audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0)),
+      audioStreamIndex: audioStreamIndex ?? 0
     });
     return () => unregisterRenderAsset(id);
   }, [
@@ -7249,7 +7310,8 @@ var OffthreadVideoForRendering = ({
     absoluteFrame,
     playbackRate,
     toneFrequency,
-    sequenceContext?.relativeFrom
+    sequenceContext?.relativeFrom,
+    audioStreamIndex
   ]);
   const currentTime = useMemo29(() => {
     return getExpectedMediaFrameUncorrected({
@@ -7591,6 +7653,7 @@ var VideoForRenderingForwardFunction = ({
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
   loopVolumeCurveBehavior,
+  audioStreamIndex,
   ...props2
 }, ref) => {
   const absoluteFrame = useTimelinePosition();
@@ -7640,7 +7703,8 @@ var VideoForRenderingForwardFunction = ({
       mediaFrame: frame,
       playbackRate: playbackRate ?? 1,
       toneFrequency: toneFrequency ?? null,
-      audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0))
+      audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0)),
+      audioStreamIndex: audioStreamIndex ?? 0
     });
     return () => unregisterRenderAsset(id);
   }, [
@@ -7654,7 +7718,8 @@ var VideoForRenderingForwardFunction = ({
     absoluteFrame,
     playbackRate,
     toneFrequency,
-    sequenceContext?.relativeFrom
+    sequenceContext?.relativeFrom,
+    audioStreamIndex
   ]);
   useImperativeHandle10(ref, () => {
     return videoRef.current;

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.336";
+var VERSION = "4.0.340";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
   },
   "name": "remotion",
-  "version": "4.0.336",
+  "version": "4.0.340",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
     "webpack": "5.96.1",
     "zod": "3.22.3",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.336"
+    "@remotion/eslint-config-internal": "4.0.340"
   },
   "keywords": [
     "video",