remotion 4.0.356 → 4.0.357

package/dist/cjs/Composition.js

@@ -28,7 +28,7 @@ const Fallback = () => {
     return null;
 };
 const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const compManager = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
     const { registerComposition, unregisterComposition } = compManager;
     const video = (0, use_video_js_1.useVideo)();
@@ -41,6 +41,10 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
     const isPlayer = (0, is_player_js_1.useIsPlayer)();
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const canUseComposition = (0, react_1.useContext)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
+    // Record seen composition IDs as early as possible so that overlays can access them
+    if (typeof window !== 'undefined') {
+        window.remotion_seenCompositionIds = Array.from(new Set([...((_a = window.remotion_seenCompositionIds) !== null && _a !== void 0 ? _a : []), id]));
+    }
     if (canUseComposition) {
         if (isPlayer) {
             throw new Error('<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.');
@@ -104,7 +108,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
                 resolved.type !== 'success-and-refreshing')) {
             return null;
         }
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_a = resolved.result.props) !== null && _a !== void 0 ? _a : {}) }) }) }), (0, portal_node_js_1.portalNode)());
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_b = resolved.result.props) !== null && _b !== void 0 ? _b : {}) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     if (environment.isRendering && video && video.component === lazy) {
         const Comp = lazy;
@@ -113,7 +117,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
                 resolved.type !== 'success-and-refreshing')) {
             return null;
         }
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_b = resolved.result.props) !== null && _b !== void 0 ? _b : {}) }) }) }), (0, portal_node_js_1.portalNode)());
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_c = resolved.result.props) !== null && _c !== void 0 ? _c : {}) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     return null;
 };

package/dist/cjs/CompositionManager.d.ts

@@ -75,10 +75,9 @@ export type InlineAudioAsset = {
     id: string;
     audio: number[];
     frame: number;
-    sampleRate: number;
-    numberOfChannels: number;
     timestamp: number;
     duration: number;
+    toneFrequency: number;
 };
 type DiscriminatedArtifact = {
     contentType: 'binary';

package/dist/cjs/audio/Audio.js

@@ -67,10 +67,10 @@ const AudioRefForwardingFunction = (props, ref) => {
         }
         const duration = durationFetched * fps;
         return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { layout: "none", durationInFrames: (0, calculate_loop_js_1.calculateLoopDuration)({
-                endAt: trimAfterValue,
-                mediaDuration: duration,
+                trimAfter: trimAfterValue,
+                mediaDurationInFrames: duration,
                 playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
-                startFrom: trimBeforeValue,
+                trimBefore: trimBeforeValue,
             }), children: (0, jsx_runtime_1.jsx)(exports.Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }) }));
     }
     if (typeof trimBeforeValue !== 'undefined' ||

package/dist/cjs/audio/AudioForPreview.js

@@ -12,6 +12,7 @@ const random_js_1 = require("../random.js");
 const use_amplification_js_1 = require("../use-amplification.js");
 const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
 const use_media_playback_js_1 = require("../use-media-playback.js");
+const use_media_tag_js_1 = require("../use-media-tag.js");
 const volume_position_state_js_1 = require("../volume-position-state.js");
 const volume_prop_js_1 = require("../volume-prop.js");
 const volume_safeguard_js_1 = require("../volume-safeguard.js");
@@ -92,7 +93,6 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     (0, use_media_in_timeline_js_1.useMediaInTimeline)({
         volume,
         mediaVolume,
-        mediaRef: audioRef,
         src,
         mediaType: 'audio',
         playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
@@ -102,9 +102,6 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         showInTimeline,
         premountDisplay: (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premountDisplay) !== null && _b !== void 0 ? _b : null,
         postmountDisplay: (_c = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmountDisplay) !== null && _c !== void 0 ? _c : 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
@@ -120,6 +117,14 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         pauseWhenBuffering,
         onAutoPlayError: null,
     });
+    (0, use_media_tag_js_1.useMediaTag)({
+        id: timelineId,
+        isPostmounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting),
+        isPremounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting),
+        mediaRef: audioRef,
+        mediaType: 'audio',
+        onAutoPlayError: null,
+    });
     (0, use_amplification_js_1.useVolume)({
         logLevel,
         mediaRef: audioRef,

package/dist/cjs/calculate-loop.d.ts

@@ -1,6 +1,6 @@
-export declare const calculateLoopDuration: ({ endAt, mediaDuration, playbackRate, startFrom, }: {
-    mediaDuration: number;
+export declare const calculateLoopDuration: ({ trimAfter, mediaDurationInFrames, playbackRate, trimBefore, }: {
+    mediaDurationInFrames: number;
     playbackRate: number;
-    startFrom: number | undefined;
-    endAt: number | undefined;
+    trimBefore: number | undefined;
+    trimAfter: number | undefined;
 }) => number;

package/dist/cjs/calculate-loop.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculateLoopDuration = void 0;
-const calculateLoopDuration = ({ endAt, mediaDuration, playbackRate, startFrom, }) => {
-    let duration = mediaDuration;
-    // Account for endAt
-    if (typeof endAt !== 'undefined') {
-        duration = endAt;
+const calculateLoopDuration = ({ trimAfter, mediaDurationInFrames, playbackRate, trimBefore, }) => {
+    let duration = mediaDurationInFrames;
+    // Account for trimAfter
+    if (typeof trimAfter !== 'undefined') {
+        duration = trimAfter;
     }
-    // Account for startFrom
-    if (typeof startFrom !== 'undefined') {
-        duration -= startFrom;
+    // Account for trimBefore
+    if (typeof trimBefore !== 'undefined') {
+        duration -= trimBefore;
     }
     const actualDuration = duration / playbackRate;
     return Math.floor(actualDuration);

package/dist/cjs/index.d.ts

@@ -22,6 +22,7 @@ declare global {
         };
         remotion_cancelledError: string | undefined;
         remotion_getCompositionNames: () => string[];
+        remotion_seenCompositionIds: string[];
         getStaticCompositions: () => Promise<VideoConfigWithSerializedProps[]>;
         remotion_calculateComposition: (compId: string) => Promise<VideoConfigWithSerializedProps>;
         remotion_setBundleMode: (bundleMode: BundleState) => void;

package/dist/cjs/internals.d.ts

@@ -85,6 +85,19 @@ export declare const Internals: {
     readonly getRoot: () => import("react").FC<{}> | null;
     readonly useMediaVolumeState: () => readonly [number, (u: number) => void];
     readonly useMediaMutedState: () => readonly [boolean, (u: React.SetStateAction<boolean>) => void];
+    readonly useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, }: {
+        volume: import("./volume-prop.js").VolumeProp | undefined;
+        mediaVolume: number;
+        src: string | undefined;
+        mediaType: "audio" | "video";
+        playbackRate: number;
+        displayName: string | null;
+        id: string;
+        stack: string | null;
+        showInTimeline: boolean;
+        premountDisplay: number | null;
+        postmountDisplay: number | null;
+    }) => void;
     readonly useLazyComponent: <Props>({ compProps, componentName, noSuspense, }: {
         compProps: CompProps<Props>;
         componentName: string;
@@ -132,6 +145,12 @@ export declare const Internals: {
         readonly audioLatencyHint: AudioContextLatencyCategory;
     }>;
     readonly invalidCompositionErrorMessage: string;
+    readonly calculateLoopDuration: ({ trimAfter, mediaDurationInFrames, playbackRate, trimBefore, }: {
+        mediaDurationInFrames: number;
+        playbackRate: number;
+        trimBefore: number | undefined;
+        trimAfter: number | undefined;
+    }) => number;
     readonly isCompositionIdValid: (id: string) => RegExpMatchArray | null;
     readonly getPreviewDomElement: () => HTMLElement | null;
     readonly compositionsRef: import("react").RefObject<{

package/dist/cjs/internals.js

@@ -40,6 +40,7 @@ const AudioForPreview_js_1 = require("./audio/AudioForPreview.js");
 const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
 const buffering_js_1 = require("./buffering.js");
+const calculate_loop_js_1 = require("./calculate-loop.js");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const CompositionManager_js_1 = require("./CompositionManager.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
@@ -71,6 +72,7 @@ const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const truthy_js_1 = require("./truthy.js");
 const use_current_scale_js_1 = require("./use-current-scale.js");
 const use_lazy_component_js_1 = require("./use-lazy-component.js");
+const use_media_in_timeline_js_1 = require("./use-media-in-timeline.js");
 const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
 const use_video_js_1 = require("./use-video.js");
 const validate_media_props_js_1 = require("./validate-media-props.js");
@@ -110,6 +112,7 @@ exports.Internals = {
     getRoot: register_root_js_1.getRoot,
     useMediaVolumeState: volume_position_state_js_1.useMediaVolumeState,
     useMediaMutedState: volume_position_state_js_1.useMediaMutedState,
+    useMediaInTimeline: use_media_in_timeline_js_1.useMediaInTimeline,
     useLazyComponent: use_lazy_component_js_1.useLazyComponent,
     truthy: truthy_js_1.truthy,
     SequenceContext: SequenceContext_js_1.SequenceContext,
@@ -123,6 +126,7 @@ exports.Internals = {
     SharedAudioContext: shared_audio_tags_js_1.SharedAudioContext,
     SharedAudioContextProvider: shared_audio_tags_js_1.SharedAudioContextProvider,
     invalidCompositionErrorMessage: validate_composition_id_js_1.invalidCompositionErrorMessage,
+    calculateLoopDuration: calculate_loop_js_1.calculateLoopDuration,
     isCompositionIdValid: validate_composition_id_js_1.isCompositionIdValid,
     getPreviewDomElement: get_preview_dom_element_js_1.getPreviewDomElement,
     compositionsRef: CompositionManager_js_1.compositionsRef,

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

@@ -1,9 +1,7 @@
-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, postmountDisplay, onAutoPlayError, isPremounting, isPostmounting, }: {
+export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
-    mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement | null>;
     src: string | undefined;
     mediaType: "audio" | "video";
     playbackRate: number;
@@ -13,7 +11,4 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src,
     showInTimeline: boolean;
     premountDisplay: number | null;
     postmountDisplay: number | null;
-    onAutoPlayError: null | (() => void);
-    isPremounting: boolean;
-    isPostmounting: boolean;
 }) => void;

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

@@ -6,9 +6,7 @@ const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
 const get_asset_file_name_js_1 = require("./get-asset-file-name.js");
-const log_level_context_js_1 = require("./log-level-context.js");
 const nonce_js_1 = require("./nonce.js");
-const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-allowed-error.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
@@ -22,20 +20,17 @@ const warnOnce = (message) => {
     console.warn(message);
     didWarn[message] = true;
 };
-const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, onAutoPlayError, isPremounting, isPostmounting, }) => {
+const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, }) => {
     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);
     const actualFrom = parentSequence
         ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
         : 0;
-    const { imperativePlaying } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
     const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
     const [initialVolume] = (0, react_1.useState)(() => volume);
-    const logLevel = (0, log_level_context_js_1.useLogLevel)();
-    const mountTime = (0, log_level_context_js_1.useMountTime)();
     const nonce = (0, nonce_js_1.useNonce)();
+    const { rootId } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
     const duration = parentSequence
         ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
         : videoConfig.durationInFrames;
@@ -63,9 +58,6 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;
-        if (!mediaRef.current) {
-            return;
-        }
         if (!src) {
             throw new Error('No src passed');
         }
@@ -111,7 +103,6 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         volumes,
         doesVolumeChange,
         nonce,
-        mediaRef,
         mediaType,
         startsAt,
         playbackRate,
@@ -122,44 +113,5 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         postmountDisplay,
         env.isStudio,
     ]);
-    (0, react_1.useEffect)(() => {
-        const tag = {
-            id,
-            play: (reason) => {
-                if (!imperativePlaying.current) {
-                    // Don't play if for example in a <Freeze> state.
-                    return;
-                }
-                if (isPremounting || isPostmounting) {
-                    return;
-                }
-                return (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)({
-                    mediaRef,
-                    mediaType,
-                    onAutoPlayError,
-                    logLevel,
-                    mountTime,
-                    reason,
-                    isPlayer: env.isPlayer,
-                });
-            },
-        };
-        audioAndVideoTags.current.push(tag);
-        return () => {
-            audioAndVideoTags.current = audioAndVideoTags.current.filter((a) => a.id !== id);
-        };
-    }, [
-        audioAndVideoTags,
-        id,
-        mediaRef,
-        mediaType,
-        onAutoPlayError,
-        imperativePlaying,
-        isPremounting,
-        isPostmounting,
-        logLevel,
-        mountTime,
-        env.isPlayer,
-    ]);
 };
 exports.useMediaInTimeline = useMediaInTimeline;

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

@@ -0,0 +1,9 @@
+import type { RefObject } from 'react';
+export declare const useMediaTag: ({ mediaRef, id, mediaType, onAutoPlayError, isPremounting, isPostmounting, }: {
+    mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement | null>;
+    id: string;
+    mediaType: "audio" | "video";
+    onAutoPlayError: null | (() => void);
+    isPremounting: boolean;
+    isPostmounting: boolean;
+}) => void;

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaTag = void 0;
+const react_1 = require("react");
+const log_level_context_js_1 = require("./log-level-context.js");
+const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-allowed-error.js");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+const useMediaTag = ({ mediaRef, id, mediaType, onAutoPlayError, isPremounting, isPostmounting, }) => {
+    const { audioAndVideoTags, imperativePlaying } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
+    const logLevel = (0, log_level_context_js_1.useLogLevel)();
+    const mountTime = (0, log_level_context_js_1.useMountTime)();
+    const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    (0, react_1.useEffect)(() => {
+        const tag = {
+            id,
+            play: (reason) => {
+                if (!imperativePlaying.current) {
+                    // Don't play if for example in a <Freeze> state.
+                    return;
+                }
+                if (isPremounting || isPostmounting) {
+                    return;
+                }
+                return (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)({
+                    mediaRef,
+                    mediaType,
+                    onAutoPlayError,
+                    logLevel,
+                    mountTime,
+                    reason,
+                    isPlayer: env.isPlayer,
+                });
+            },
+        };
+        audioAndVideoTags.current.push(tag);
+        return () => {
+            audioAndVideoTags.current = audioAndVideoTags.current.filter((a) => a.id !== id);
+        };
+    }, [
+        audioAndVideoTags,
+        id,
+        mediaRef,
+        mediaType,
+        onAutoPlayError,
+        imperativePlaying,
+        isPremounting,
+        isPostmounting,
+        logLevel,
+        mountTime,
+        env.isPlayer,
+    ]);
+};
+exports.useMediaTag = useMediaTag;

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.356";
+export declare const VERSION = "4.0.357";

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.356';
+exports.VERSION = '4.0.357';

package/dist/cjs/video/Video.js

@@ -49,10 +49,10 @@ const VideoForwardingFunction = (props, ref) => {
         }
         const mediaDuration = durationFetched * fps;
         return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { durationInFrames: (0, calculate_loop_js_1.calculateLoopDuration)({
-                endAt: trimAfterValue,
-                mediaDuration,
+                trimAfter: trimAfterValue,
+                mediaDurationInFrames: mediaDuration,
                 playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
-                startFrom: trimBeforeValue,
+                trimBefore: trimBeforeValue,
             }), layout: "none", name: name, children: (0, jsx_runtime_1.jsx)(exports.Video, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }) }));
     }
     if (typeof trimBeforeValue !== 'undefined' ||

package/dist/cjs/video/VideoForPreview.js

@@ -15,6 +15,7 @@ const prefetch_js_1 = require("../prefetch.js");
 const use_amplification_js_1 = require("../use-amplification.js");
 const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
 const use_media_playback_js_1 = require("../use-media-playback.js");
+const use_media_tag_js_1 = require("../use-media-tag.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const version_js_1 = require("../version.js");
 const volume_position_state_js_1 = require("../volume-position-state.js");
@@ -65,7 +66,6 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     });
     (0, volume_safeguard_js_1.warnAboutTooHighVolume)(userPreferredVolume);
     (0, use_media_in_timeline_js_1.useMediaInTimeline)({
-        mediaRef: videoRef,
         volume,
         mediaVolume,
         mediaType: 'video',
@@ -77,9 +77,6 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         showInTimeline,
         premountDisplay: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premountDisplay) !== null && _c !== void 0 ? _c : null,
         postmountDisplay: (_d = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.postmountDisplay) !== null && _d !== void 0 ? _d : 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
@@ -95,6 +92,14 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         pauseWhenBuffering,
         onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : null,
     });
+    (0, use_media_tag_js_1.useMediaTag)({
+        id: timelineId,
+        isPostmounting: Boolean(parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.postmounting),
+        isPremounting: Boolean(parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting),
+        mediaRef: videoRef,
+        mediaType: 'video',
+        onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : null,
+    });
     (0, use_amplification_js_1.useVolume)({
         logLevel,
         mediaRef: videoRef,

package/dist/esm/index.mjs

@@ -105,7 +105,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.356";
+var VERSION = "4.0.357";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -2283,7 +2283,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
 };
 Artifact.Thumbnail = ArtifactThumbnail;
 // src/audio/Audio.tsx
-import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext25 } from "react";
+import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext26 } from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -2298,17 +2298,17 @@ var getAbsoluteSrc = (relativeSrc) => {
 
 // src/calculate-loop.ts
 var calculateLoopDuration = ({
-  endAt,
-  mediaDuration,
+  trimAfter,
+  mediaDurationInFrames,
   playbackRate,
-  startFrom
+  trimBefore
 }) => {
-  let duration = mediaDuration;
-  if (typeof endAt !== "undefined") {
-    duration = endAt;
+  let duration = mediaDurationInFrames;
+  if (typeof trimAfter !== "undefined") {
+    duration = trimAfter;
   }
-  if (typeof startFrom !== "undefined") {
-    duration -= startFrom;
+  if (typeof trimBefore !== "undefined") {
+    duration -= trimBefore;
   }
   const actualDuration = duration / playbackRate;
   return Math.floor(actualDuration);
@@ -2743,8 +2743,8 @@ var DurationsContextProvider = ({ children }) => {
 // src/audio/AudioForPreview.tsx
 import {
   forwardRef as forwardRef4,
-  useContext as useContext23,
-  useEffect as useEffect13,
+  useContext as useContext24,
+  useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle5,
   useMemo as useMemo20,
   useRef as useRef11,
@@ -3443,7 +3443,6 @@ var warnOnce2 = (message) => {
 var useMediaInTimeline = ({
   volume,
   mediaVolume,
-  mediaRef,
   src,
   mediaType,
   playbackRate,
@@ -3452,22 +3451,16 @@ var useMediaInTimeline = ({
   stack,
   showInTimeline,
   premountDisplay,
-  postmountDisplay,
-  onAutoPlayError,
-  isPremounting,
-  isPostmounting
+  postmountDisplay
 }) => {
   const videoConfig = useVideoConfig();
-  const { rootId, audioAndVideoTags } = useContext18(TimelineContext);
   const parentSequence = useContext18(SequenceContext);
   const actualFrom = parentSequence ? parentSequence.relativeFrom + parentSequence.cumulatedFrom : 0;
-  const { imperativePlaying } = useContext18(TimelineContext);
   const startsAt = useMediaStartsAt();
   const { registerSequence, unregisterSequence } = useContext18(SequenceManager);
   const [initialVolume] = useState11(() => volume);
-  const logLevel = useLogLevel();
-  const mountTime = useMountTime();
   const nonce = useNonce();
+  const { rootId } = useContext18(TimelineContext);
   const duration = parentSequence ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames) : videoConfig.durationInFrames;
   const doesVolumeChange = typeof volume === "function";
   const volumes = useMemo15(() => {
@@ -3489,9 +3482,6 @@ var useMediaInTimeline = ({
   }, [initialVolume, mediaType, src, volume]);
   const env = useRemotionEnvironment();
   useEffect8(() => {
-    if (!mediaRef.current) {
-      return;
-    }
     if (!src) {
       throw new Error("No src passed");
     }
@@ -3537,7 +3527,6 @@ var useMediaInTimeline = ({
     volumes,
     doesVolumeChange,
     nonce,
-    mediaRef,
     mediaType,
     startsAt,
     playbackRate,
@@ -3548,44 +3537,6 @@ var useMediaInTimeline = ({
     postmountDisplay,
     env.isStudio
   ]);
-  useEffect8(() => {
-    const tag = {
-      id,
-      play: (reason) => {
-        if (!imperativePlaying.current) {
-          return;
-        }
-        if (isPremounting || isPostmounting) {
-          return;
-        }
-        return playAndHandleNotAllowedError({
-          mediaRef,
-          mediaType,
-          onAutoPlayError,
-          logLevel,
-          mountTime,
-          reason,
-          isPlayer: env.isPlayer
-        });
-      }
-    };
-    audioAndVideoTags.current.push(tag);
-    return () => {
-      audioAndVideoTags.current = audioAndVideoTags.current.filter((a) => a.id !== id);
-    };
-  }, [
-    audioAndVideoTags,
-    id,
-    mediaRef,
-    mediaType,
-    onAutoPlayError,
-    imperativePlaying,
-    isPremounting,
-    isPostmounting,
-    logLevel,
-    mountTime,
-    env.isPlayer
-  ]);
 };
 
 // src/use-media-playback.ts
@@ -4462,8 +4413,62 @@ var useMediaPlayback = ({
   ]);
 };
 
+// src/use-media-tag.ts
+import { useContext as useContext22, useEffect as useEffect13 } from "react";
+var useMediaTag = ({
+  mediaRef,
+  id,
+  mediaType,
+  onAutoPlayError,
+  isPremounting,
+  isPostmounting
+}) => {
+  const { audioAndVideoTags, imperativePlaying } = useContext22(TimelineContext);
+  const logLevel = useLogLevel();
+  const mountTime = useMountTime();
+  const env = useRemotionEnvironment();
+  useEffect13(() => {
+    const tag = {
+      id,
+      play: (reason) => {
+        if (!imperativePlaying.current) {
+          return;
+        }
+        if (isPremounting || isPostmounting) {
+          return;
+        }
+        return playAndHandleNotAllowedError({
+          mediaRef,
+          mediaType,
+          onAutoPlayError,
+          logLevel,
+          mountTime,
+          reason,
+          isPlayer: env.isPlayer
+        });
+      }
+    };
+    audioAndVideoTags.current.push(tag);
+    return () => {
+      audioAndVideoTags.current = audioAndVideoTags.current.filter((a) => a.id !== id);
+    };
+  }, [
+    audioAndVideoTags,
+    id,
+    mediaRef,
+    mediaType,
+    onAutoPlayError,
+    imperativePlaying,
+    isPremounting,
+    isPostmounting,
+    logLevel,
+    mountTime,
+    env.isPlayer
+  ]);
+};
+
 // src/volume-position-state.ts
-import { createContext as createContext16, useContext as useContext22, useMemo as useMemo19 } from "react";
+import { createContext as createContext16, useContext as useContext23, useMemo as useMemo19 } from "react";
 var MediaVolumeContext = createContext16({
   mediaMuted: false,
   mediaVolume: 1
@@ -4477,15 +4482,15 @@ var SetMediaVolumeContext = createContext16({
   }
 });
 var useMediaVolumeState = () => {
-  const { mediaVolume } = useContext22(MediaVolumeContext);
-  const { setMediaVolume } = useContext22(SetMediaVolumeContext);
+  const { mediaVolume } = useContext23(MediaVolumeContext);
+  const { setMediaVolume } = useContext23(SetMediaVolumeContext);
   return useMemo19(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var useMediaMutedState = () => {
-  const { mediaMuted } = useContext22(MediaVolumeContext);
-  const { setMediaMuted } = useContext22(SetMediaVolumeContext);
+  const { mediaMuted } = useContext23(MediaVolumeContext);
+  const { setMediaMuted } = useContext23(SetMediaVolumeContext);
   return useMemo19(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
@@ -4540,12 +4545,12 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   const [mediaVolume] = useMediaVolumeState();
   const [mediaMuted] = useMediaMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const { hidden } = useContext23(SequenceVisibilityToggleContext);
+  const { hidden } = useContext24(SequenceVisibilityToggleContext);
   if (!src) {
     throw new TypeError("No 'src' was passed to <Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext23(SequenceContext);
+  const sequenceContext = useContext24(SequenceContext);
   const [timelineId] = useState14(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
@@ -4584,7 +4589,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     props.muted,
     props.loop
   ]);
-  const context = useContext23(SharedAudioContext);
+  const context = useContext24(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -4596,7 +4601,6 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   useMediaInTimeline({
     volume,
     mediaVolume,
-    mediaRef: audioRef,
     src,
     mediaType: "audio",
     playbackRate: playbackRate ?? 1,
@@ -4605,10 +4609,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     stack: _remotionInternalStack,
     showInTimeline,
     premountDisplay: sequenceContext?.premountDisplay ?? null,
-    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
-    onAutoPlayError: null,
-    isPremounting: Boolean(sequenceContext?.premounting),
-    isPostmounting: Boolean(sequenceContext?.postmounting)
+    postmountDisplay: sequenceContext?.postmountDisplay ?? null
   });
   useMediaPlayback({
     mediaRef: audioRef,
@@ -4622,6 +4623,14 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     pauseWhenBuffering,
     onAutoPlayError: null
   });
+  useMediaTag({
+    id: timelineId,
+    isPostmounting: Boolean(sequenceContext?.postmounting),
+    isPremounting: Boolean(sequenceContext?.premounting),
+    mediaRef: audioRef,
+    mediaType: "audio",
+    onAutoPlayError: null
+  });
   useVolume({
     logLevel,
     mediaRef: audioRef,
@@ -4634,7 +4643,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   }, [audioRef]);
   const currentOnDurationCallback = useRef11(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect13(() => {
+  useEffect14(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -4666,8 +4675,8 @@ var AudioForPreview = forwardRef4(AudioForDevelopmentForwardRefFunction);
 // src/audio/AudioForRendering.tsx
 import {
   forwardRef as forwardRef5,
-  useContext as useContext24,
-  useEffect as useEffect14,
+  useContext as useContext25,
+  useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo21,
@@ -4697,8 +4706,8 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext24(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext24(RenderAssetManager);
+  const sequenceContext = useContext25(SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext25(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   const id = useMemo21(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
@@ -4715,7 +4724,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   useImperativeHandle6(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -4810,7 +4819,7 @@ var AudioForRendering = forwardRef5(AudioForRenderingRefForwardingFunction);
 // src/audio/Audio.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
 var AudioRefForwardingFunction = (props, ref) => {
-  const audioContext = useContext25(SharedAudioContext);
+  const audioContext = useContext26(SharedAudioContext);
   const {
     startFrom,
     endAt,
@@ -4826,7 +4835,7 @@ var AudioRefForwardingFunction = (props, ref) => {
   const { loop, ...propsOtherThanLoop } = props;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext25(DurationsContext);
+  const { durations, setDurations } = useContext26(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
@@ -4868,10 +4877,10 @@ var AudioRefForwardingFunction = (props, ref) => {
     return /* @__PURE__ */ jsx19(Loop, {
       layout: "none",
       durationInFrames: calculateLoopDuration({
-        endAt: trimAfterValue,
-        mediaDuration: duration,
+        trimAfter: trimAfterValue,
+        mediaDurationInFrames: duration,
         playbackRate: props.playbackRate ?? 1,
-        startFrom: trimBeforeValue
+        trimBefore: trimBeforeValue
       }),
       children: /* @__PURE__ */ jsx19(Audio, {
         ...propsOtherThanLoop,
@@ -4921,11 +4930,11 @@ var AudioRefForwardingFunction = (props, ref) => {
 var Audio = forwardRef6(AudioRefForwardingFunction);
 addSequenceStackTraces(Audio);
 // src/Composition.tsx
-import { Suspense, useContext as useContext27, useEffect as useEffect16 } from "react";
+import { Suspense, useContext as useContext28, useEffect as useEffect17 } from "react";
 import { createPortal } from "react-dom";
 
 // src/Folder.tsx
-import { createContext as createContext17, useContext as useContext26, useEffect as useEffect15, useMemo as useMemo22 } from "react";
+import { createContext as createContext17, useContext as useContext27, useEffect as useEffect16, useMemo as useMemo22 } from "react";
 
 // src/validation/validate-folder-name.ts
 var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
@@ -4950,8 +4959,8 @@ var FolderContext = createContext17({
   parentName: null
 });
 var Folder = ({ name, children }) => {
-  const parent = useContext26(FolderContext);
-  const { registerFolder, unregisterFolder } = useContext26(CompositionSetters);
+  const parent = useContext27(FolderContext);
+  const { registerFolder, unregisterFolder } = useContext27(CompositionSetters);
   validateFolderName(name);
   const parentNameArr = [parent.parentName, parent.folderName].filter(truthy);
   const parentName = parentNameArr.length === 0 ? null : parentNameArr.join("/");
@@ -4961,7 +4970,7 @@ var Folder = ({ name, children }) => {
       parentName
     };
   }, [name, parentName]);
-  useEffect15(() => {
+  useEffect16(() => {
     registerFolder(name, parentName);
     return () => {
       unregisterFolder(name, parentName);
@@ -5116,7 +5125,7 @@ var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
 import { jsx as jsx22 } from "react/jsx-runtime";
 var Fallback = () => {
   const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
-  useEffect16(() => {
+  useEffect17(() => {
     const fallback = delayRender2("Waiting for Root component to unsuspend");
     return () => continueRender2(fallback);
   }, [continueRender2, delayRender2]);
@@ -5132,7 +5141,7 @@ var InnerComposition = ({
   schema,
   ...compProps
 }) => {
-  const compManager = useContext27(CompositionSetters);
+  const compManager = useContext28(CompositionSetters);
   const { registerComposition, unregisterComposition } = compManager;
   const video = useVideo();
   const lazy = useLazyComponent({
@@ -5143,15 +5152,18 @@ var InnerComposition = ({
   const nonce = useNonce();
   const isPlayer = useIsPlayer();
   const environment = useRemotionEnvironment();
-  const canUseComposition = useContext27(CanUseRemotionHooks);
+  const canUseComposition = useContext28(CanUseRemotionHooks);
+  if (typeof window !== "undefined") {
+    window.remotion_seenCompositionIds = Array.from(new Set([...window.remotion_seenCompositionIds ?? [], id]));
+  }
   if (canUseComposition) {
     if (isPlayer) {
       throw new Error("<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.");
     }
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
-  const { folderName, parentName } = useContext27(FolderContext);
-  useEffect16(() => {
+  const { folderName, parentName } = useContext28(FolderContext);
+  useEffect17(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
     }
@@ -5190,7 +5202,7 @@ var InnerComposition = ({
     registerComposition,
     unregisterComposition
   ]);
-  useEffect16(() => {
+  useEffect17(() => {
     window.dispatchEvent(new CustomEvent(PROPS_UPDATED_EXTERNALLY, {
       detail: {
         resetUnsaved: id
@@ -5229,7 +5241,7 @@ var InnerComposition = ({
   return null;
 };
 var Composition = (props2) => {
-  const { onlyRenderComposition } = useContext27(CompositionSetters);
+  const { onlyRenderComposition } = useContext28(CompositionSetters);
   if (onlyRenderComposition && onlyRenderComposition !== props2.id) {
     return null;
   }
@@ -5489,7 +5501,7 @@ var IFrame = forwardRef7(IFrameRefForwarding);
 import {
   forwardRef as forwardRef8,
   useCallback as useCallback13,
-  useContext as useContext28,
+  useContext as useContext29,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef13
@@ -5512,7 +5524,7 @@ var ImgRefForwarding = ({
   const imageRef = useRef13(null);
   const errors = useRef13({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext28(SequenceContext);
+  const sequenceContext = useContext29(SequenceContext);
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -5861,7 +5873,7 @@ var waitForRoot = (fn) => {
 
 // src/RemotionRoot.tsx
 import {
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo25,
   useRef as useRef15,
@@ -5943,7 +5955,7 @@ var RemotionRoot = ({
       }
     };
   }, []);
-  useEffect17(() => {
+  useEffect18(() => {
     if (typeof __webpack_module__ !== "undefined") {
       if (__webpack_module__.hot) {
         __webpack_module__.hot.addStatusHandler((status) => {
@@ -6079,8 +6091,8 @@ import { useCallback as useCallback16 } from "react";
 // src/video/OffthreadVideoForRendering.tsx
 import {
   useCallback as useCallback15,
-  useContext as useContext29,
-  useEffect as useEffect18,
+  useContext as useContext30,
+  useEffect as useEffect19,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo26,
   useState as useState18
@@ -6121,9 +6133,9 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext29(SequenceContext);
+  const sequenceContext = useContext30(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext29(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -6142,7 +6154,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -6303,8 +6315,8 @@ var OffthreadVideoForRendering = ({
 // src/video/VideoForPreview.tsx
 import {
   forwardRef as forwardRef9,
-  useContext as useContext30,
-  useEffect as useEffect20,
+  useContext as useContext31,
+  useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo27,
   useRef as useRef16,
@@ -6312,12 +6324,12 @@ import {
 } from "react";
 
 // src/video/emit-video-frame.ts
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect20 } from "react";
 var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect19(() => {
+  useEffect20(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -6343,7 +6355,7 @@ var useEmitVideoFrame = ({
 // src/video/VideoForPreview.tsx
 import { jsx as jsx28 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext30(SharedAudioContext);
+  const context = useContext31(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -6391,8 +6403,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext30(SequenceContext);
-  const { hidden } = useContext30(SequenceVisibilityToggleContext);
+  const parentSequence = useContext31(SequenceContext);
+  const { hidden } = useContext31(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState19(() => String(Math.random()));
@@ -6409,7 +6421,6 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   });
   warnAboutTooHighVolume(userPreferredVolume);
   useMediaInTimeline({
-    mediaRef: videoRef,
     volume,
     mediaVolume,
     mediaType: "video",
@@ -6420,10 +6431,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     stack: _remotionInternalStack,
     showInTimeline,
     premountDisplay: parentSequence?.premountDisplay ?? null,
-    postmountDisplay: parentSequence?.postmountDisplay ?? null,
-    onAutoPlayError: onAutoPlayError ?? null,
-    isPremounting: Boolean(parentSequence?.premounting),
-    isPostmounting: Boolean(parentSequence?.postmounting)
+    postmountDisplay: parentSequence?.postmountDisplay ?? null
   });
   useMediaPlayback({
     mediaRef: videoRef,
@@ -6437,6 +6445,14 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     pauseWhenBuffering,
     onAutoPlayError: onAutoPlayError ?? null
   });
+  useMediaTag({
+    id: timelineId,
+    isPostmounting: Boolean(parentSequence?.postmounting),
+    isPremounting: Boolean(parentSequence?.premounting),
+    mediaRef: videoRef,
+    mediaType: "video",
+    onAutoPlayError: onAutoPlayError ?? null
+  });
   useVolume({
     logLevel,
     mediaRef: videoRef,
@@ -6462,7 +6478,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     tag: "video",
     mountTime
   }));
-  useEffect20(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6493,7 +6509,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef16(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect20(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6510,7 +6526,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect20(() => {
+  useEffect21(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6845,6 +6861,7 @@ var Internals = {
   getRoot,
   useMediaVolumeState,
   useMediaMutedState,
+  useMediaInTimeline,
   useLazyComponent,
   truthy,
   SequenceContext,
@@ -6858,6 +6875,7 @@ var Internals = {
   SharedAudioContext,
   SharedAudioContextProvider,
   invalidCompositionErrorMessage,
+  calculateLoopDuration,
   isCompositionIdValid,
   getPreviewDomElement,
   compositionsRef,
@@ -7728,13 +7746,13 @@ var Still = (props2) => {
   return React34.createElement(Composition, newProps);
 };
 // src/video/Video.tsx
-import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext32 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext33 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
   forwardRef as forwardRef11,
-  useContext as useContext31,
-  useEffect as useEffect21,
+  useContext as useContext32,
+  useEffect as useEffect22,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo30,
@@ -7887,13 +7905,13 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef17(null);
-  const sequenceContext = useContext31(SequenceContext);
+  const sequenceContext = useContext32(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext31(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext32(RenderAssetManager);
   const id = useMemo30(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -7909,7 +7927,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -7952,7 +7970,7 @@ var VideoForRenderingForwardFunction = ({
   useImperativeHandle10(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -8097,7 +8115,7 @@ var VideoForwardingFunction = (props2, ref) => {
   const { loop, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext32(DurationsContext);
+  const { durations, setDurations } = useContext33(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -8128,10 +8146,10 @@ var VideoForwardingFunction = (props2, ref) => {
     const mediaDuration = durationFetched * fps;
     return /* @__PURE__ */ jsx34(Loop, {
       durationInFrames: calculateLoopDuration({
-        endAt: trimAfterValue,
-        mediaDuration,
+        trimAfter: trimAfterValue,
+        mediaDurationInFrames: mediaDuration,
         playbackRate: props2.playbackRate ?? 1,
-        startFrom: trimBeforeValue
+        trimBefore: trimBeforeValue
       }),
       layout: "none",
       name,

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.356";
+var VERSION = "4.0.357";
 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.356",
+  "version": "4.0.357",
   "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.356"
+    "@remotion/eslint-config-internal": "4.0.357"
   },
   "keywords": [
     "video",