remotion 4.0.534 → 4.0.536

package/dist/cjs/Track.js

@@ -8,22 +8,22 @@ 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 }) }));
+    const value = (0, react_1.useMemo)(() => ({ id, name }), [id, name]);
+    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.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { SequenceControls } from '../CompositionManager.js';
-import type { EffectsProp } from '../effects/effect-types.js';
+import type { EffectsProp, EffectsOutputSize } from '../effects/effect-types.js';
 export declare const animatedImageSchema: {
     readonly 'style.transformOrigin': {
         readonly type: "transform-origin";
@@ -115,7 +115,7 @@ export declare const animatedImageSchema: {
     };
     readonly premountFor: {
         readonly type: "number";
-        readonly default: 0;
+        readonly default: undefined;
         readonly description: "Premount For";
         readonly min: 0;
         readonly step: 1;
@@ -236,6 +236,7 @@ export declare const AnimatedImage: React.ComponentType<import("../Interactive.j
     requestInit?: RequestInit | undefined;
 } & React.AriaAttributes & Record<`data-${string}`, string | undefined> & {
     readonly effects?: EffectsProp | undefined;
+    readonly effectsOutputSize?: EffectsOutputSize | undefined;
 } & {
     readonly controls?: SequenceControls | undefined;
     readonly ref?: React.Ref<HTMLCanvasElement> | undefined;

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");
@@ -51,12 +51,12 @@ 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;
+const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', requestInit, effects, effectsOutputSize, controls, ...props }, canvasRef) => {
+    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,11 +195,14 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
         fit,
         width,
         height,
+        cancelRender,
+        effectsOutputSize === null || effectsOutputSize === void 0 ? void 0 : effectsOutputSize.width,
+        effectsOutputSize === null || effectsOutputSize === void 0 ? void 0 : effectsOutputSize.height,
     ]);
-    return (jsx_runtime_1.jsx(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, effects: memoizedEffects, ...props }));
+    return (jsx_runtime_1.jsx(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, effects: memoizedEffects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, ...props }));
 });
 AnimatedImageContent.displayName = 'AnimatedImageContent';
-const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, cropLeft, cropRight, cropTop, cropBottom, requestInit, effects = [], controls, ref, ...sequenceProps }) => {
+const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, cropLeft, cropRight, cropTop, cropBottom, requestInit, effects = [], effectsOutputSize, controls, ref, ...sequenceProps }) => {
     const actualRef = (0, react_2.useRef)(null);
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     (0, react_2.useImperativeHandle)(ref, () => {
@@ -237,20 +244,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, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, 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 +266,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 +280,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 +291,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/animated-image/canvas.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { EffectDefinitionAndStack } from '../effects/effect-types.js';
+import type { EffectDefinitionAndStack, EffectsOutputSize } from '../effects/effect-types.js';
 export type AnimatedImageCanvasRef = {
     readonly draw: (imageData: VideoFrame) => Promise<boolean>;
     readonly getCanvas: () => HTMLCanvasElement | null;
@@ -12,4 +12,5 @@ export declare const Canvas: React.ForwardRefExoticComponent<{
     readonly className?: string | undefined;
     readonly style?: React.CSSProperties | undefined;
     readonly effects: EffectDefinitionAndStack<unknown>[];
+    readonly effectsOutputSize: EffectsOutputSize | null;
 } & React.AriaAttributes & Record<`data-${string}`, string | undefined> & React.RefAttributes<AnimatedImageCanvasRef>>;

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

@@ -39,9 +39,9 @@ const react_1 = __importStar(require("react"));
 const calculate_image_fit_js_1 = require("../calculate-image-fit.js");
 const run_effect_chain_js_1 = require("../effects/run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("../effects/use-effect-chain-state.js");
-const CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, ...props }, ref) => {
+const CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, effectsOutputSize, ...props }, ref) => {
     const canvasRef = (0, react_1.useRef)(null);
-    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
+    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)(effectsOutputSize);
     const sourceCanvas = (0, react_1.useMemo)(() => {
         if (typeof document === 'undefined') {
             return null;

package/dist/cjs/animated-image/props.d.ts

@@ -1,5 +1,5 @@
 import type { ImageFit } from '../calculate-image-fit.js';
-import type { EffectsProp } from '../effects/effect-types.js';
+import type { EffectsProp, EffectsOutputSize } from '../effects/effect-types.js';
 import type { InteractiveBaseProps, InteractiveCropProps, InteractivePremountProps } from '../Interactive.js';
 export type RemotionAnimatedImageLoopBehavior = 'loop' | 'pause-after-finish' | 'clear-after-finish';
 export type AnimatedImageCanvasProps = React.AriaAttributes & Record<`data-${string}`, string | undefined>;
@@ -18,5 +18,6 @@ export type RemotionAnimatedImageProps = {
 } & AnimatedImageCanvasProps;
 export type AnimatedImageProps = InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps & RemotionAnimatedImageProps & {
     readonly effects?: EffectsProp;
+    readonly effectsOutputSize?: EffectsOutputSize;
 };
 export type AnimatedImageFillMode = ImageFit;

package/dist/cjs/asset-types.d.ts

@@ -31,6 +31,10 @@ declare module '*.jpeg' {
     const src: string;
     export default src;
 }
+declare module '*.jxl' {
+    const src: string;
+    export default src;
+}
 declare module '*.bmp' {
     const src: string;
     export default src;

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/shared-audio-tags.d.ts

@@ -62,7 +62,7 @@ type SharedAudioContextValue = {
     resumeAsAutoPlay: () => Promise<void>;
     suspend: () => Promise<void>;
     getIsResumingAudioContext: () => Promise<AudioContextResumeResult> | null;
-    unscheduleAudioNode: (node: AudioBufferSourceNode) => void;
+    unscheduleAudioNode: (node: AudioBufferSourceNode) => boolean;
     _experimentalKeepAudioContextAlive: boolean;
 };
 type SharedAudioTagsContextValue = {

package/dist/cjs/audio/shared-audio-tags.js

@@ -127,7 +127,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
     const prevEndTimes = (0, react_1.useRef)({ scheduledEndTime: null, mediaEndTime: null });
     const nodesToResume = (0, react_1.useRef)(new Map());
     const unscheduleAudioNode = (0, react_1.useCallback)((node) => {
-        nodesToResume.current.delete(node);
+        return nodesToResume.current.delete(node);
     }, []);
     const scheduleAudioNode = (0, react_1.useMemo)(() => {
         return ({ node, mediaTimestamp, sourceOffset, scheduledTime, duration, offset, originalUnloopedMediaTimestamp, }) => {

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.d.ts

@@ -1,4 +1,4 @@
-import type { EffectsProp } from '../effects/effect-types.js';
+import type { EffectsProp, EffectsOutputSize } from '../effects/effect-types.js';
 import type { CanvasImageCanvasProps } from './props.js';
 export declare const canvasImageSchema: {
     readonly 'style.transformOrigin': {
@@ -114,7 +114,7 @@ export declare const canvasImageSchema: {
     };
     readonly premountFor: {
         readonly type: "number";
-        readonly default: 0;
+        readonly default: undefined;
         readonly description: "Premount For";
         readonly min: 0;
         readonly step: 1;
@@ -223,6 +223,7 @@ export declare const CanvasImage: import("react").ComponentType<Omit<import("../
     readonly height?: number | undefined;
     readonly fit?: import("../calculate-image-fit.js").ImageFit | undefined;
     readonly effects?: EffectsProp | undefined;
+    readonly effectsOutputSize?: EffectsOutputSize | undefined;
     readonly className?: string | undefined;
     readonly style?: import("react").CSSProperties | undefined;
     readonly id?: string | undefined;