remotion 4.0.534 → 4.0.535

package/dist/cjs/Track.js

@@ -8,22 +8,23 @@ const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
 const timeline_track_context_js_1 = require("./timeline-track-context.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
+// A packed row has no container bar to drag. Expose its linear timing in the
+// inspector, but keep looping and freezing as programmatic operations.
+const { freeze: _freeze, layout: _layout, ...trackSequenceSchema } = interactivity_schema_js_1.sequenceSchema;
 const trackSchema = {
-    name: interactivity_schema_js_1.sequenceSchema.name,
-    hidden: interactivity_schema_js_1.sequenceSchema.hidden,
+    ...trackSequenceSchema,
+    ...interactivity_schema_js_1.sequenceTimingSchema,
 };
-// Series variants share the Track foundation while retaining their own
-// Sequence props, layout defaults, and interactivity schemas.
 const TrackWithoutSchema = ({ name = 'Track', children, layout = 'none', ...props }) => {
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const tracksEnabled = (0, react_1.useContext)(timeline_track_context_js_1.ExperimentalTracksEnabledContext);
     const value = (0, react_1.useMemo)(() => (tracksEnabled ? { id, name } : null), [id, name, tracksEnabled]);
-    return (jsx_runtime_1.jsx(timeline_track_context_js_1.TimelineTrackContext.Provider, { value: value, children: jsx_runtime_1.jsx(Sequence_js_1.SequenceWithoutSchema, { ...props, name: name, layout: layout, _remotionInternalTimelineTrack: { role: 'track' }, children: children }) }));
+    return (jsx_runtime_1.jsx(timeline_track_context_js_1.TimelineTrackContext.Provider, { value: value, children: jsx_runtime_1.jsx(Sequence_js_1.SequenceWithoutSchema, { _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/track", ...props, name: name, layout: layout, _remotionInternalTimelineTrack: { role: 'track', seriesOffset: null }, children: children }) }));
 };
 exports.TrackWithoutSchema = TrackWithoutSchema;
 /** Groups clips on one Studio timeline row and applies Sequence timing. */
 exports.Track = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
-    Component: exports.TrackWithoutSchema,
+    Component: (props) => jsx_runtime_1.jsx(exports.TrackWithoutSchema, { ...props, layout: "none" }),
     componentName: '<Track>',
     componentIdentity: 'dev.remotion.remotion.Track',
     schema: trackSchema,

package/dist/cjs/animated-image/AnimatedImage.js

@@ -4,12 +4,12 @@ exports.AnimatedImage = exports.animatedImageSchema = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("react");
-const cancel_render_js_1 = require("../cancel-render.js");
 const use_memoized_effects_js_1 = require("../effects/use-memoized-effects.js");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
 const freeze_js_1 = require("../freeze.js");
 const interactivity_schema_js_1 = require("../interactivity-schema.js");
 const resolve_sequence_duration_js_1 = require("../resolve-sequence-duration.js");
+const sequence_activity_context_js_1 = require("../sequence-activity-context.js");
 const Sequence_js_1 = require("../Sequence.js");
 const use_crop_style_js_1 = require("../use-crop-style.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
@@ -52,11 +52,11 @@ const getCanvasPropsFromSequenceProps = (props) => {
     return canvasProps;
 };
 const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', requestInit, effects, controls, ...props }, canvasRef) => {
-    var _a, _b;
+    var _a, _b, _c;
     const resolvedSrc = (0, resolve_image_source_1.resolveAnimatedImageSource)(src);
-    const [imageDecoder, setImageDecoder] = (0, react_2.useState)(null);
-    const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
-    const [decodeHandle] = (0, react_2.useState)(() => delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
+    const [decodedImage, setDecodedImage] = (0, react_2.useState)(null);
+    const imageDecoder = (_a = decodedImage === null || decodedImage === void 0 ? void 0 : decodedImage.decoder) !== null && _a !== void 0 ? _a : null;
+    const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const currentTime = (0, get_current_time_js_1.getCurrentTime)({ frame, playbackRate, fps });
@@ -68,8 +68,8 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
     const ref = (0, react_2.useRef)(null);
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
         effects,
-        overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null,
-        videoConfigValues: (_b = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _b !== void 0 ? _b : null,
+        overrideId: (_b = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _b !== void 0 ? _b : null,
+        videoConfigValues: (_c = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _c !== void 0 ? _c : null,
     });
     (0, react_2.useImperativeHandle)(canvasRef, () => {
         var _a;
@@ -80,7 +80,8 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
         return c;
     }, []);
     const [initialLoopBehavior] = (0, react_2.useState)(() => loopBehavior);
-    (0, react_2.useEffect)(() => {
+    (0, react_2.useLayoutEffect)(() => {
+        const decodeHandle = delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`);
         const controller = new AbortController();
         let cancelled = false;
         let continued = false;
@@ -103,8 +104,7 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
                 d.close();
                 return;
             }
-            setImageDecoder(d);
-            continueRenderOnce();
+            setDecodedImage({ decoder: d, handle: decodeHandle });
         })
             .catch((err) => {
             if (cancelled) {
@@ -119,7 +119,7 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
                 continueRenderOnce();
             }
             else {
-                (0, cancel_render_js_1.cancelRender)(err);
+                cancelRender(err);
             }
         });
         return () => {
@@ -129,11 +129,12 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
         };
     }, [
         resolvedSrc,
-        decodeHandle,
         onError,
         requestInitKey,
         initialLoopBehavior,
         continueRender,
+        delayRender,
+        cancelRender,
     ]);
     (0, react_2.useEffect)(() => {
         return () => {
@@ -141,10 +142,12 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
         };
     }, [imageDecoder]);
     (0, react_2.useLayoutEffect)(() => {
-        if (!imageDecoder) {
+        if (!imageDecoder || !decodedImage) {
             return;
         }
         const delay = delayRender(`Rendering frame at ${currentTime} of <AnimatedImage src="${src}"/>`);
+        // The frame hold takes over only after the decoded image has committed.
+        continueRender(decodedImage.handle);
         let cancelled = false;
         imageDecoder
             .getFrame(currentTime, loopBehavior)
@@ -172,7 +175,7 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
                 continueRender(delay);
             }
             else {
-                (0, cancel_render_js_1.cancelRender)(err);
+                cancelRender(err);
             }
         });
         return () => {
@@ -182,6 +185,7 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
     }, [
         currentTime,
         imageDecoder,
+        decodedImage,
         loopBehavior,
         onError,
         src,
@@ -191,6 +195,7 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
         fit,
         width,
         height,
+        cancelRender,
     ]);
     return (jsx_runtime_1.jsx(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, effects: memoizedEffects, ...props }));
 });
@@ -237,20 +242,20 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         requestInit,
         ...canvasProps,
     };
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, playbackRate: playbackRate, durationInFrames: durationInFrames, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...sequenceProps, children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, playbackRate: playbackRate, durationInFrames: durationInFrames, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...sequenceProps, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }) }) }));
 };
 const AnimatedImageWithIntrinsicDuration = (props) => {
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
-    const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
+    const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const { src, requestInit, trimBefore } = props;
     const requestInitRef = (0, react_2.useRef)(requestInit);
     requestInitRef.current = requestInit;
     const onErrorRef = (0, react_2.useRef)(props.onError);
     onErrorRef.current = props.onError;
-    const [handle] = (0, react_2.useState)(() => delayRender(`Finding duration of <AnimatedImage src="${src}" />`));
-    const [durationInFrames, setDurationInFrames] = (0, react_2.useState)(null);
-    const [failed, setFailed] = (0, react_2.useState)(false);
-    (0, react_2.useEffect)(() => {
+    const [duration, setDuration] = (0, react_2.useState)(null);
+    const [failedHandle, setFailedHandle] = (0, react_2.useState)(null);
+    (0, react_2.useLayoutEffect)(() => {
+        const handle = delayRender(`Finding duration of <AnimatedImage src="${src}" />`);
         const controller = new AbortController();
         let cancelled = false;
         (0, get_duration_in_seconds_js_1.getAnimatedImageDurationInSeconds)({
@@ -259,9 +264,12 @@ const AnimatedImageWithIntrinsicDuration = (props) => {
             requestInit: requestInitRef.current,
             contentType: null,
         })
-            .then((duration) => {
+            .then((durationInSeconds) => {
             if (!cancelled) {
-                setDurationInFrames(Math.ceil(duration * fps) - (trimBefore !== null && trimBefore !== void 0 ? trimBefore : 0));
+                setDuration({
+                    durationInFrames: Math.ceil(durationInSeconds * fps) - (trimBefore !== null && trimBefore !== void 0 ? trimBefore : 0),
+                    handle,
+                });
             }
         })
             .catch((error) => {
@@ -270,10 +278,10 @@ const AnimatedImageWithIntrinsicDuration = (props) => {
             }
             if (onErrorRef.current) {
                 onErrorRef.current(error);
-                setFailed(true);
+                setFailedHandle(handle);
             }
             else {
-                (0, cancel_render_js_1.cancelRender)(error);
+                cancelRender(error);
             }
         });
         return () => {
@@ -281,16 +289,19 @@ const AnimatedImageWithIntrinsicDuration = (props) => {
             controller.abort();
             continueRender(handle);
         };
-    }, [continueRender, fps, handle, src, trimBefore]);
-    (0, react_2.useEffect)(() => {
-        if (durationInFrames !== null || failed) {
-            continueRender(handle);
+    }, [cancelRender, continueRender, delayRender, fps, src, trimBefore]);
+    (0, react_2.useLayoutEffect)(() => {
+        if (duration !== null) {
+            continueRender(duration.handle);
+        }
+        if (failedHandle !== null) {
+            continueRender(failedHandle);
         }
-    }, [continueRender, durationInFrames, failed, handle]);
-    if (durationInFrames === null || failed) {
+    }, [continueRender, duration, failedHandle]);
+    if (duration === null || failedHandle !== null) {
         return null;
     }
-    return jsx_runtime_1.jsx(AnimatedImageInner, { ...props, durationInFrames: durationInFrames });
+    return (jsx_runtime_1.jsx(AnimatedImageInner, { ...props, durationInFrames: duration.durationInFrames }));
 };
 const AnimatedImageComponent = (props) => {
     var _a;

package/dist/cjs/audio/AudioForPreview.js

@@ -37,11 +37,12 @@ exports.AudioForPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = __importStar(require("react"));
+const committed_metadata_js_1 = require("../committed-metadata.js");
 const get_cross_origin_value_js_1 = require("../get-cross-origin-value.js");
 const log_level_context_js_1 = require("../log-level-context.js");
 const prefetch_js_1 = require("../prefetch.js");
 const random_js_1 = require("../random.js");
-const sequence_order_marker_js_1 = require("../sequence-order-marker.js");
+const sequence_activity_context_js_1 = require("../sequence-activity-context.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const use_amplification_js_1 = require("../use-amplification.js");
 const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
@@ -55,38 +56,24 @@ const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
 const use_audio_frame_js_1 = require("./use-audio-frame.js");
 const use_media_audio_state_js_1 = require("./use-media-audio-state.js");
 const AudioForDevelopmentForwardRefFunction = (props, ref) => {
-    var _a, _b, _c;
+    var _a;
     const [initialShouldPreMountAudioElements] = (0, react_2.useState)(props.shouldPreMountAudioTags);
     if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
         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, preservePitch, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, toneFrequency, useWebAudioApi, onError, onNativeError, audioStreamIndex, ...nativeProps } = props;
+    const { timelineId, userPreferredVolume, isMutedForPlayback, volume, muted, playbackRate, preservePitch, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, 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;
     if (!_propsValid) {
         throw new Error('typecheck error');
     }
-    const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
-    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     if (!src) {
         throw new TypeError("No 'src' was passed to <Html5Audio>.");
     }
     const preloadedSrc = (0, prefetch_js_1.usePreload)(src);
     const sequenceContext = (0, react_2.useContext)(SequenceContext_js_1.SequenceContext);
-    const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
-    const [timelineId] = (0, react_2.useState)(() => String(Math.random()));
-    const userPreferredVolume = (0, volume_prop_js_1.evaluateVolume)({
-        frame: volumePropFrame,
-        volume,
-        mediaVolume,
-    });
-    const { isMutedForTimeline, isMutedForPlayback } = (0, use_media_audio_state_js_1.useMediaAudioState)({
-        muted: muted !== null && muted !== void 0 ? muted : false,
-        volume: userPreferredVolume,
-        audioEnabled: true,
-    });
     (0, volume_safeguard_js_1.warnAboutTooHighVolume)(userPreferredVolume);
     const crossOriginValue = (0, get_cross_origin_value_js_1.getCrossOriginValue)({
         crossOrigin,
@@ -124,26 +111,6 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         premounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting),
         postmounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting),
     });
-    const getStack = (0, react_1.useCallback)(() => {
-        return _remotionInternalStack !== null && _remotionInternalStack !== void 0 ? _remotionInternalStack : null;
-    }, [_remotionInternalStack]);
-    (0, use_media_in_timeline_js_1.useMediaInTimeline)({
-        volume,
-        mediaVolume,
-        src,
-        mediaType: 'audio',
-        playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
-        displayName: name !== null && name !== void 0 ? name : null,
-        id: timelineId,
-        getStack,
-        showInTimeline,
-        premountDisplay: (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premountDisplay) !== null && _a !== void 0 ? _a : null,
-        postmountDisplay: (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmountDisplay) !== null && _b !== void 0 ? _b : null,
-        loopDisplay: undefined,
-        loopVolumeCurveBehavior: loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat',
-        documentationLink: 'https://www.remotion.dev/docs/html5-audio',
-        muted: isMutedForTimeline,
-    });
     // putting playback before useVolume
     // because volume looks at playbackrate
     (0, use_media_playback_js_1.useMediaPlayback)({
@@ -181,7 +148,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
      *
      * Need to import it from React to fix React 17 ESM support.
      */
-    const effectToUse = (_c = react_2.default.useInsertionEffect) !== null && _c !== void 0 ? _c : react_2.default.useLayoutEffect;
+    const effectToUse = (_a = react_2.default.useInsertionEffect) !== null && _a !== void 0 ? _a : react_2.default.useLayoutEffect;
     // Disconnecting the SharedElementSourceNodes if the Audio tag unmounts to prevent leak.
     // https://github.com/remotion-dev/remotion/issues/6285
     // But useInsertionEffect will fire before other effects, meaning the
@@ -218,9 +185,55 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         };
     }, [audioRef, src]);
     if (initialShouldPreMountAudioElements) {
-        return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: timelineId, outlineChildrenRef: null, children: null })) : null;
+        return null;
     }
     const audio = (jsx_runtime_1.jsx("audio", { ref: audioRef, preload: "metadata", crossOrigin: crossOriginValue, ...propsToPass }));
-    return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: timelineId, outlineChildrenRef: null, children: audio })) : (audio);
+    return audio;
+};
+const AudioForPreviewContent = (0, react_2.forwardRef)(AudioForDevelopmentForwardRefFunction);
+const AudioForPreviewRefForwardingFunction = (props, ref) => {
+    var _a, _b;
+    const { volume, muted, playbackRate, src, name, _remotionInternalStack, showInTimeline, loopVolumeCurveBehavior, } = props;
+    const [timelineId] = (0, react_2.useState)(() => String(Math.random()));
+    const sequenceContext = (0, react_2.useContext)(SequenceContext_js_1.SequenceContext);
+    const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
+    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
+    const userPreferredVolume = (0, volume_prop_js_1.evaluateVolume)({
+        frame: volumePropFrame,
+        volume,
+        mediaVolume,
+    });
+    const { isMutedForTimeline, isMutedForPlayback } = (0, use_media_audio_state_js_1.useMediaAudioState)({
+        muted: muted !== null && muted !== void 0 ? muted : false,
+        volume: userPreferredVolume,
+        audioEnabled: true,
+    });
+    const getStack = (0, react_1.useCallback)(() => {
+        return _remotionInternalStack !== null && _remotionInternalStack !== void 0 ? _remotionInternalStack : null;
+    }, [_remotionInternalStack]);
+    const { registration } = (0, use_media_in_timeline_js_1.useMediaInTimelineRegistration)({
+        src,
+        mediaType: 'audio',
+        playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
+        displayName: name !== null && name !== void 0 ? name : null,
+        id: timelineId,
+        getStack,
+        showInTimeline,
+        premountDisplay: (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premountDisplay) !== null && _a !== void 0 ? _a : null,
+        postmountDisplay: (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmountDisplay) !== null && _b !== void 0 ? _b : null,
+        loopDisplay: undefined,
+        documentationLink: 'https://www.remotion.dev/docs/html5-audio',
+        muted: isMutedForTimeline,
+    });
+    const metadata = (0, react_2.useMemo)(() => isStudio || registration !== null
+        ? {
+            type: 'sequence',
+            id: timelineId,
+            value: registration,
+            outlineChildrenRef: null,
+        }
+        : null, [isStudio, registration, timelineId]);
+    return (jsx_runtime_1.jsx(committed_metadata_js_1.CommittedMetadataProvider, { value: null, _remotionCommitMetadata: metadata, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(AudioForPreviewContent, { ...props, ref: ref, timelineId: timelineId, userPreferredVolume: userPreferredVolume, isMutedForPlayback: isMutedForPlayback }) }) }));
 };
-exports.AudioForPreview = (0, react_2.forwardRef)(AudioForDevelopmentForwardRefFunction);
+exports.AudioForPreview = (0, react_2.forwardRef)(AudioForPreviewRefForwardingFunction);

package/dist/cjs/audio/get-audio-sync-anchor-tolerance.d.ts

@@ -0,0 +1 @@
+export declare const getAudioSyncAnchorTolerance: (audioContext: AudioContext) => number;

package/dist/cjs/audio/get-audio-sync-anchor-tolerance.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAudioSyncAnchorTolerance = void 0;
+const ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
+// The tolerance is measured in AudioContext seconds.
+const getAudioSyncAnchorTolerance = (audioContext) => {
+    const { baseLatency, outputLatency } = audioContext;
+    const safeOutputLatency = outputLatency === 0 ? 0.3 : outputLatency;
+    return ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + baseLatency + safeOutputLatency;
+};
+exports.getAudioSyncAnchorTolerance = getAudioSyncAnchorTolerance;

package/dist/cjs/audio/use-audio-context.js

@@ -46,6 +46,8 @@ const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, sampleR
         // Tracks the state we are transitioning towards while resume()/suspend()
         // have been called but the native state has not updated yet.
         let transitionTarget = null;
+        let transitionId = 0;
+        let pendingResume = null;
         const getState = () => {
             const nativeState = audioContext.state;
             if (transitionTarget === 'running' && nativeState !== 'running') {
@@ -57,24 +59,41 @@ const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, sampleR
             return nativeState;
         };
         const resume = () => {
+            const id = ++transitionId;
             transitionTarget = 'running';
+            // Keep resume synchronous so it retains the browser's user activation.
             const promise = audioContext.resume();
-            promise.finally(() => {
-                if (transitionTarget === 'running') {
+            pendingResume = promise;
+            return promise.finally(() => {
+                if (pendingResume === promise) {
+                    pendingResume = null;
+                }
+                if (transitionId === id) {
                     transitionTarget = null;
                 }
             });
-            return promise;
         };
         const suspend = () => {
+            const id = ++transitionId;
             transitionTarget = 'suspended';
-            const promise = audioContext.suspend();
-            promise.finally(() => {
-                if (transitionTarget === 'suspended') {
+            // Chromium can freeze the audio clock if suspend runs before an
+            // in-flight resume settles, while its reported state is still suspended.
+            // A newer playback request must cancel this deferred suspension.
+            const promise = pendingResume
+                ? pendingResume
+                    .catch(() => { })
+                    .then(() => {
+                    if (transitionId !== id) {
+                        return;
+                    }
+                    return audioContext.suspend();
+                })
+                : audioContext.suspend();
+            return promise.finally(() => {
+                if (transitionId === id) {
                     transitionTarget = null;
                 }
             });
-            return promise;
         };
         return {
             audioContext,

package/dist/cjs/canvas-image/CanvasImage.js

@@ -12,6 +12,7 @@ const freeze_js_1 = require("../freeze.js");
 const interactivity_schema_js_1 = require("../interactivity-schema.js");
 const prefetch_js_1 = require("../prefetch.js");
 const resolve_sequence_duration_js_1 = require("../resolve-sequence-duration.js");
+const sequence_activity_context_js_1 = require("../sequence-activity-context.js");
 const Sequence_js_1 = require("../Sequence.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const truncate_src_for_label_js_1 = require("../truncate-src-for-label.js");
@@ -364,7 +365,7 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, crossOrigin, width, hei
         style: premountingStyle,
         componentName: _remotionInternalCropComponentName !== null && _remotionInternalCropComponentName !== void 0 ? _remotionInternalCropComponentName : '<CanvasImage />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, loop: loop, durationInFrames: durationInFrames, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, crossOrigin: crossOrigin, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, ...canvasProps }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, loop: loop, durationInFrames: durationInFrames, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, crossOrigin: crossOrigin, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, ...canvasProps }) }) }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.

package/dist/cjs/committed-metadata.d.ts

@@ -0,0 +1,68 @@
+import type { Provider, ProviderExoticComponent, ProviderProps, RefObject } from 'react';
+import type { AnyComposition, TSequence } from './CompositionManager.js';
+import type { TFolder } from './Folder.js';
+export declare const COMMIT_ORDER_EVENT = "remotion:commit-order";
+export declare const COMMIT_REGISTRATION_ERROR_EVENT = "remotion:commit-registration-error";
+export declare const isCommitRegistrationObserverInstalled: () => boolean;
+export type CompositionAndFolderOrderItem = {
+    readonly type: 'composition';
+    readonly id: string;
+} | {
+    readonly type: 'folder';
+    readonly id: string;
+};
+export declare const getCompositionAndFolderOrderKey: (item: CompositionAndFolderOrderItem) => string;
+export type CommitOrderEventDetail = {
+    readonly sequenceManagers: readonly {
+        readonly managerId: string;
+        readonly sequenceIds: readonly string[];
+    }[];
+};
+export declare const getFolderOrderId: ({ name, parent, }: {
+    readonly name: string;
+    readonly parent: string | null;
+}) => string;
+export type CommittedSequenceSnapshot = {
+    readonly sequences: readonly TSequence[];
+    readonly sequenceIds: readonly string[];
+};
+export type CommittedCompositionSnapshot = {
+    readonly compositions: readonly AnyComposition[];
+    readonly folders: readonly TFolder[];
+    readonly orderIds: readonly string[];
+};
+export type CommittedMetadata = {
+    readonly type: 'sequence';
+    readonly id: string;
+    readonly value: TSequence | null;
+    readonly outlineChildrenRef: RefObject<Element | null> | null;
+} | {
+    readonly type: 'composition';
+    readonly id: string;
+    readonly value: AnyComposition;
+} | {
+    readonly type: 'folder';
+    readonly id: string;
+    readonly value: TFolder;
+} | {
+    readonly type: 'sequence-manager';
+    readonly id: string;
+    readonly onCommit: ((sequences: readonly TSequence[], sequenceIds: readonly string[]) => void) | null;
+} | {
+    readonly type: 'composition-manager';
+    readonly id: string;
+    readonly onCommit: ((snapshot: CommittedCompositionSnapshot) => void) | null;
+};
+export declare const withCommittedMetadata: <T>(provider: Provider<T>) => ProviderExoticComponent<ProviderProps<T> & {
+    readonly _remotionCommitMetadata: CommittedMetadata | null;
+}>;
+export declare const CommittedMetadataProvider: ProviderExoticComponent<ProviderProps<null> & {
+    readonly _remotionCommitMetadata: CommittedMetadata | null;
+}>;
+export declare const CommittedMetadataInternals: {
+    metadataProp: "_remotionCommitMetadata";
+    eventName: string;
+    installationMarker: symbol;
+    failureMarker: symbol;
+    registrationErrorEventName: string;
+};

package/dist/cjs/committed-metadata.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommittedMetadataInternals = exports.CommittedMetadataProvider = exports.withCommittedMetadata = exports.getFolderOrderId = exports.getCompositionAndFolderOrderKey = exports.isCommitRegistrationObserverInstalled = exports.COMMIT_REGISTRATION_ERROR_EVENT = exports.COMMIT_ORDER_EVENT = void 0;
+const react_1 = require("react");
+const COMMITTED_METADATA_PROP = '_remotionCommitMetadata';
+exports.COMMIT_ORDER_EVENT = 'remotion:commit-order';
+exports.COMMIT_REGISTRATION_ERROR_EVENT = 'remotion:commit-registration-error';
+const COMMIT_OBSERVER_INSTALLATION_MARKER = Symbol.for('remotion.commit-order-observer-installed');
+const COMMIT_OBSERVER_FAILURE_MARKER = Symbol.for('remotion.commit-registration-observer-failed');
+const isCommitRegistrationObserverInstalled = () => {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    const hook = Reflect.get(window, '__REACT_DEVTOOLS_GLOBAL_HOOK__');
+    return (typeof hook === 'object' &&
+        hook !== null &&
+        Reflect.get(hook, 'isDisabled') !== true &&
+        Reflect.get(hook, COMMIT_OBSERVER_INSTALLATION_MARKER) === true &&
+        Reflect.get(hook, COMMIT_OBSERVER_FAILURE_MARKER) !== true);
+};
+exports.isCommitRegistrationObserverInstalled = isCommitRegistrationObserverInstalled;
+const getCompositionAndFolderOrderKey = (item) => `${item.type}:${item.id}`;
+exports.getCompositionAndFolderOrderKey = getCompositionAndFolderOrderKey;
+const getFolderOrderId = ({ name, parent, }) => [parent, name].filter(Boolean).join('/');
+exports.getFolderOrderId = getFolderOrderId;
+// This is the same provider, with an additional private prop type. Metadata
+// stays outside its context value, so edits do not notify context consumers.
+const withCommittedMetadata = (provider) => provider;
+exports.withCommittedMetadata = withCommittedMetadata;
+// Leaves without an existing provider still need a committed Fiber when their
+// content is null. Its constant context value never carries registry metadata.
+exports.CommittedMetadataProvider = (0, exports.withCommittedMetadata)((0, react_1.createContext)(null).Provider);
+exports.CommittedMetadataInternals = {
+    metadataProp: COMMITTED_METADATA_PROP,
+    eventName: exports.COMMIT_ORDER_EVENT,
+    installationMarker: COMMIT_OBSERVER_INSTALLATION_MARKER,
+    failureMarker: COMMIT_OBSERVER_FAILURE_MARKER,
+    registrationErrorEventName: exports.COMMIT_REGISTRATION_ERROR_EVENT,
+};

package/dist/cjs/component-identity.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type ComponentIdentityResolver = (component: unknown) => unknown;
+export declare const setComponentIdentityResolver: (resolver: ComponentIdentityResolver | null) => void;
+export declare const resolveComponentIdentity: (component: unknown) => unknown;
+export declare const getSingleChildComponent: (children: React.ReactNode) => unknown;
+export {};

package/dist/cjs/component-identity.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSingleChildComponent = exports.resolveComponentIdentity = exports.setComponentIdentityResolver = void 0;
+const react_1 = __importDefault(require("react"));
+const is_inside_series_js_1 = require("./series/is-inside-series.js");
+// Studio installs a resolver that maps refreshed component implementations to
+// the stable family object maintained by React Refresh.
+let componentIdentityResolver = null;
+const setComponentIdentityResolver = (resolver) => {
+    componentIdentityResolver = resolver;
+};
+exports.setComponentIdentityResolver = setComponentIdentityResolver;
+const resolveComponentIdentity = (component) => {
+    var _a;
+    return (_a = componentIdentityResolver === null || componentIdentityResolver === void 0 ? void 0 : componentIdentityResolver(component)) !== null && _a !== void 0 ? _a : component;
+};
+exports.resolveComponentIdentity = resolveComponentIdentity;
+const getSingleChildComponent = (children) => {
+    const mountedChildren = react_1.default.Children.toArray(children);
+    if (mountedChildren.length !== 1) {
+        return null;
+    }
+    const child = mountedChildren[0];
+    if (!react_1.default.isValidElement(child)) {
+        return null;
+    }
+    // Series inserts this transparent context boundary around its authored children.
+    if (child.type === is_inside_series_js_1.IsNotInsideSeriesProvider) {
+        return (0, exports.getSingleChildComponent)(child.props.children);
+    }
+    if (typeof child.type !== 'function' && typeof child.type !== 'object') {
+        return null;
+    }
+    return (0, exports.resolveComponentIdentity)(child.type);
+};
+exports.getSingleChildComponent = getSingleChildComponent;