remotion 4.0.533 → 4.0.535

package/dist/cjs/SequenceRegistryProvider.js

@@ -0,0 +1,292 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceRegistryProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const committed_metadata_js_1 = require("./committed-metadata.js");
+const registry_store_js_1 = require("./registry-store.js");
+const sequence_registry_context_js_1 = require("./sequence-registry-context.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? react_1.default.useEffect : react_1.default.useLayoutEffect;
+const SequenceManagerRefProvider = (0, committed_metadata_js_1.withCommittedMetadata)(sequence_registry_context_js_1.SequenceManagerRefContext.Provider);
+const SequenceRegistryProvider = ({ children }) => {
+    const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const sequenceRegistrationEnabled = (0, react_1.useContext)(sequence_registry_context_js_1.SequenceRegistrationContext);
+    const shouldObserveCommits = isStudio || sequenceRegistrationEnabled;
+    const [sequenceManagerId] = (0, react_1.useState)(() => String(Math.random()));
+    const [commitRegistrationEnabled, setCommitRegistrationEnabled] = (0, react_1.useState)(() => shouldObserveCommits && (0, committed_metadata_js_1.isCommitRegistrationObserverInstalled)());
+    const observedCommitRef = (0, react_1.useRef)(false);
+    const rootObservationFailedRef = (0, react_1.useRef)(false);
+    const committedRegistrationIdsRef = (0, react_1.useRef)(new Set());
+    const committedDescriptorsRef = (0, react_1.useRef)(new Map());
+    const pendingCommittedSequencesRef = (0, react_1.useRef)(new Map());
+    const committedScopesRef = (0, react_1.useRef)(new Map([
+        [sequenceManagerId, { sequences: [], sequenceIds: [] }],
+    ]));
+    const registrationObserverFailedRef = (0, react_1.useRef)(false);
+    const registrationUnmountedRef = (0, react_1.useRef)(false);
+    const committedOrderRef = (0, react_1.useRef)(null);
+    const committedOrderIdsRef = (0, react_1.useRef)(null);
+    const [registry] = (0, react_1.useState)(() => (0, registry_store_js_1.createRegistryStore)([]));
+    const setSequences = registry.setSnapshot;
+    const sequencesRef = (0, react_1.useMemo)(() => ({
+        get current() {
+            return registry.getSnapshot();
+        },
+    }), [registry]);
+    const onCommitSequences = (0, react_1.useCallback)((scopeId, snapshot, sequenceIds) => {
+        var _a;
+        if (registrationObserverFailedRef.current ||
+            registrationUnmountedRef.current) {
+            return;
+        }
+        const previousSnapshot = (_a = pendingCommittedSequencesRef.current.get(scopeId)) !== null && _a !== void 0 ? _a : committedScopesRef.current.get(scopeId);
+        if ((previousSnapshot === null || previousSnapshot === void 0 ? void 0 : previousSnapshot.sequences) === snapshot &&
+            previousSnapshot.sequenceIds === sequenceIds) {
+            return;
+        }
+        const alreadyPending = pendingCommittedSequencesRef.current.size > 0;
+        pendingCommittedSequencesRef.current.set(scopeId, {
+            sequences: snapshot,
+            sequenceIds,
+        });
+        if (alreadyPending) {
+            return;
+        }
+        // Publish after React finishes committing, and coalesce successive snapshots.
+        queueMicrotask(() => {
+            const pending = pendingCommittedSequencesRef.current;
+            pendingCommittedSequencesRef.current = new Map();
+            if (pending.size === 0 ||
+                registrationObserverFailedRef.current ||
+                registrationUnmountedRef.current) {
+                return;
+            }
+            const previousIds = committedRegistrationIdsRef.current;
+            const previousDescriptors = committedDescriptorsRef.current;
+            for (const [id, scope] of pending) {
+                if (id !== sequenceManagerId && scope.sequenceIds.length === 0) {
+                    committedScopesRef.current.delete(id);
+                }
+                else {
+                    committedScopesRef.current.set(id, scope);
+                }
+            }
+            // A forwarded renderer owns only its fragment. Publishing or removing it
+            // must never replace the descriptors committed by the other roots.
+            const scopes = [...committedScopesRef.current.values()];
+            const sequences = scopes.flatMap((scope) => scope.sequences);
+            const ids = scopes.flatMap((scope) => scope.sequenceIds);
+            committedDescriptorsRef.current = new Map(sequences.map((sequence) => [sequence.id, sequence]));
+            const nextIds = new Set(sequences.map((sequence) => sequence.id));
+            const order = new Map(ids.map((id, index) => [id, index]));
+            committedOrderIdsRef.current = ids;
+            committedOrderRef.current = order;
+            committedRegistrationIdsRef.current = nextIds;
+            setSequences((current) => (0, registry_store_js_1.reconcileRegistryEntries)({
+                current,
+                entries: sequences,
+                previousDescriptors,
+                previousKeys: previousIds,
+                nextKeys: nextIds,
+                getKey: (sequence) => sequence.id,
+                order,
+                orderProperty: 'timelineOrder',
+            }));
+        });
+    }, [sequenceManagerId, setSequences]);
+    const onCommitRootSequences = (0, react_1.useCallback)((sequences, sequenceIds) => {
+        if (!rootObservationFailedRef.current) {
+            observedCommitRef.current = true;
+            onCommitSequences(sequenceManagerId, sequences, sequenceIds);
+        }
+    }, [onCommitSequences, sequenceManagerId]);
+    const registryScope = (0, react_1.useMemo)(() => ({
+        onCommitSequences,
+        commitRegistrationRequested: shouldObserveCommits,
+    }), [onCommitSequences, shouldObserveCommits]);
+    useIsomorphicLayoutEffect(() => {
+        if (!shouldObserveCommits) {
+            return;
+        }
+        let unmounted = false;
+        registrationUnmountedRef.current = false;
+        const onRegistrationError = () => {
+            if (registrationObserverFailedRef.current) {
+                return;
+            }
+            registrationObserverFailedRef.current = true;
+            pendingCommittedSequencesRef.current.clear();
+            queueMicrotask(() => {
+                if (registrationUnmountedRef.current) {
+                    return;
+                }
+                const previousIds = committedRegistrationIdsRef.current;
+                committedRegistrationIdsRef.current = new Set();
+                committedScopesRef.current.clear();
+                setSequences((current) => current.filter((sequence) => !previousIds.has(sequence.id)));
+                setCommitRegistrationEnabled(false);
+            });
+        };
+        const onCommitOrder = (event) => {
+            const { detail } = event;
+            const managerOrder = detail.sequenceManagers.find((item) => item.managerId === sequenceManagerId);
+            if (!managerOrder) {
+                return;
+            }
+            if (commitRegistrationEnabled) {
+                return;
+            }
+            const previousOrder = committedOrderIdsRef.current;
+            if (previousOrder === managerOrder.sequenceIds ||
+                (previousOrder !== null &&
+                    previousOrder.length === managerOrder.sequenceIds.length &&
+                    previousOrder.every((sequenceId, index) => sequenceId === managerOrder.sequenceIds[index]))) {
+                return;
+            }
+            const order = new Map(managerOrder.sequenceIds.map((sequenceId, index) => [
+                sequenceId,
+                index,
+            ]));
+            committedOrderIdsRef.current = managerOrder.sequenceIds;
+            committedOrderRef.current = order;
+            queueMicrotask(() => {
+                if (unmounted) {
+                    return;
+                }
+                setSequences((currentSequences) => {
+                    let changed = false;
+                    const nextSequences = currentSequences.map((sequence) => {
+                        var _a;
+                        const timelineOrder = (_a = order.get(sequence.id)) !== null && _a !== void 0 ? _a : null;
+                        if (sequence.timelineOrder === timelineOrder) {
+                            return sequence;
+                        }
+                        changed = true;
+                        return { ...sequence, timelineOrder };
+                    });
+                    return changed ? nextSequences : currentSequences;
+                });
+            });
+        };
+        window.addEventListener(committed_metadata_js_1.COMMIT_ORDER_EVENT, onCommitOrder);
+        window.addEventListener(committed_metadata_js_1.COMMIT_REGISTRATION_ERROR_EVENT, onRegistrationError);
+        if (commitRegistrationEnabled) {
+            // React invokes its commit hook after layout effects. Installation alone
+            // does not prove this renderer connected to the hook during initialization.
+            queueMicrotask(() => {
+                if (unmounted ||
+                    observedCommitRef.current ||
+                    registrationObserverFailedRef.current) {
+                    return;
+                }
+                rootObservationFailedRef.current = true;
+                onCommitSequences(sequenceManagerId, [], []);
+                setCommitRegistrationEnabled(false);
+            });
+        }
+        return () => {
+            unmounted = true;
+            registrationUnmountedRef.current = true;
+            // Effect replay must not discard a snapshot already collected by React.
+            window.removeEventListener(committed_metadata_js_1.COMMIT_ORDER_EVENT, onCommitOrder);
+            window.removeEventListener(committed_metadata_js_1.COMMIT_REGISTRATION_ERROR_EVENT, onRegistrationError);
+        };
+    }, [
+        shouldObserveCommits,
+        sequenceManagerId,
+        setSequences,
+        commitRegistrationEnabled,
+        onCommitSequences,
+    ]);
+    const registerSequence = (0, react_1.useCallback)((seq) => {
+        setSequences((seqs) => {
+            var _a;
+            var _b;
+            return [
+                ...seqs,
+                {
+                    ...seq,
+                    timelineOrder: (_b = (_a = committedOrderRef.current) === null || _a === void 0 ? void 0 : _a.get(seq.id)) !== null && _b !== void 0 ? _b : null,
+                },
+            ];
+        });
+    }, [setSequences]);
+    const updateSequence = (0, react_1.useCallback)((seq) => {
+        setSequences((seqs) => {
+            var _a;
+            var _b;
+            const index = seqs.findIndex((item) => item.id === seq.id);
+            if (index === -1) {
+                return seqs;
+            }
+            const updatedSequence = {
+                ...seq,
+                timelineOrder: (_b = (_a = committedOrderRef.current) === null || _a === void 0 ? void 0 : _a.get(seq.id)) !== null && _b !== void 0 ? _b : null,
+            };
+            if ((0, registry_store_js_1.areRegistryEntriesEqual)(seqs[index], updatedSequence)) {
+                return seqs;
+            }
+            const next = [...seqs];
+            next[index] = updatedSequence;
+            return next;
+        });
+    }, [setSequences]);
+    const unregisterSequence = (0, react_1.useCallback)((seq) => {
+        setSequences((seqs) => seqs.filter((s) => s.id !== seq));
+    }, [setSequences]);
+    const actions = (0, react_1.useMemo)(() => {
+        return {
+            registerSequence,
+            updateSequence,
+            unregisterSequence,
+        };
+    }, [registerSequence, unregisterSequence, updateSequence]);
+    const metadata = (0, react_1.useMemo)(() => shouldObserveCommits
+        ? {
+            type: 'sequence-manager',
+            id: sequenceManagerId,
+            onCommit: commitRegistrationEnabled ? onCommitRootSequences : null,
+        }
+        : null, [
+        commitRegistrationEnabled,
+        onCommitRootSequences,
+        sequenceManagerId,
+        shouldObserveCommits,
+    ]);
+    return (jsx_runtime_1.jsx(SequenceManagerRefProvider, { value: sequencesRef, _remotionCommitMetadata: metadata, children: jsx_runtime_1.jsx(sequence_registry_context_js_1.SequenceRegistryScopeContext.Provider, { value: registryScope, children: jsx_runtime_1.jsx(sequence_registry_context_js_1.SequenceManagerActionsContext.Provider, { value: actions, children: jsx_runtime_1.jsx(sequence_registry_context_js_1.SequenceRegistryContext.Provider, { value: registry, children: jsx_runtime_1.jsx(sequence_registry_context_js_1.SequenceCommitRegistrationContext.Provider, { value: commitRegistrationEnabled, children: children }) }) }) }) }));
+};
+exports.SequenceRegistryProvider = SequenceRegistryProvider;

package/dist/cjs/Track.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type AbsoluteFillLayout, type SequenceProps } from './Sequence.js';
+export type TrackProps = Omit<SequenceProps, keyof AbsoluteFillLayout | 'cropLeft' | 'cropRight' | 'cropTop' | 'cropBottom' | `_remotionInternal${string}` | 'outlineRef'>;
+export type TrackWithoutSchemaProps = Omit<SequenceProps, keyof AbsoluteFillLayout> & ((AbsoluteFillLayout & {
+    layout: 'absolute-fill';
+}) | ({
+    layout?: 'none';
+} & {
+    [Key in Exclude<keyof AbsoluteFillLayout, 'layout'>]?: never;
+}));
+export declare const TrackWithoutSchema: React.FC<TrackWithoutSchemaProps>;
+/** Groups clips on one Studio timeline row and applies Sequence timing. */
+export declare const Track: React.ComponentType<TrackProps>;

package/dist/cjs/Track.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Track = exports.TrackWithoutSchema = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+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 = {
+    ...trackSequenceSchema,
+    ...interactivity_schema_js_1.sequenceTimingSchema,
+};
+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, { _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: (props) => jsx_runtime_1.jsx(exports.TrackWithoutSchema, { ...props, layout: "none" }),
+    componentName: '<Track>',
+    componentIdentity: 'dev.remotion.remotion.Track',
+    schema: trackSchema,
+    supportsEffects: false,
+});
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Track);

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;
+    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,7 +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,
+        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;
@@ -79,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;
@@ -102,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) {
@@ -118,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 () => {
@@ -128,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 () => {
@@ -140,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)
@@ -171,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 () => {
@@ -181,6 +185,7 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
     }, [
         currentTime,
         imageDecoder,
+        decodedImage,
         loopBehavior,
         onError,
         src,
@@ -190,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 }));
 });
@@ -236,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)({
@@ -258,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) => {
@@ -269,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 () => {
@@ -280,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;