remotion 4.0.528 → 4.0.530

package/dist/cjs/Sequence.js

@@ -9,8 +9,11 @@ const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-trace
 const freeze_js_1 = require("./freeze.js");
 const get_sequence_boundary_tolerance_js_1 = require("./get-sequence-boundary-tolerance.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
+const loop_context_js_1 = require("./loop/loop-context.js");
+const resolve_sequence_duration_js_1 = require("./resolve-sequence-duration.js");
 const sequence_crop_js_1 = require("./sequence-crop.js");
 const sequence_order_marker_js_1 = require("./sequence-order-marker.js");
+const sequence_outline_js_1 = require("./sequence-outline.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const is_inside_series_js_1 = require("./series/is-inside-series.js");
@@ -22,7 +25,7 @@ const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 const EMPTY_EFFECTS = [];
-const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playbackRate = 1, freeze, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalSingleChildComponent: singleChildComponent, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, outlineRef: passedRefForOutline, cropLeft, cropRight, cropTop, cropBottom, ...other }, ref) => {
+const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playbackRate = 1, loop = false, freeze, durationInFrames, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalSingleChildComponent: singleChildComponent, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, outlineRef: passedRefForOutline, cropLeft, cropRight, cropTop, cropBottom, ...other }, ref) => {
     var _a, _b, _c, _d, _e;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -48,11 +51,14 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
             // @ts-expect-error
             JSON.stringify(other.style));
     }
-    if (typeof durationInFrames !== 'number') {
-        throw new TypeError(`You passed to durationInFrames an argument of type ${typeof durationInFrames}, but it must be a number.`);
+    const contentDurationInFrames = (0, resolve_sequence_duration_js_1.resolveSequenceContentDuration)({
+        durationInFrames,
+    });
+    if (typeof contentDurationInFrames !== 'number') {
+        throw new TypeError(`You passed to durationInFrames an argument of type ${typeof contentDurationInFrames}, but it must be a number.`);
     }
-    if (durationInFrames <= 0) {
-        throw new TypeError(`durationInFrames must be positive, but got ${durationInFrames}`);
+    if (contentDurationInFrames <= 0) {
+        throw new TypeError(`durationInFrames must be positive, but got ${contentDurationInFrames}`);
     }
     if (typeof from !== 'number') {
         throw new TypeError(`You passed to the "from" props of your <Sequence> an argument of type ${typeof from}, but it must be a number.`);
@@ -72,6 +78,12 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
     if (!Number.isFinite(trimBefore)) {
         throw new TypeError(`The "trimBefore" prop of <Sequence /> must be finite, but it is ${trimBefore}.`);
     }
+    if (typeof loop !== 'boolean') {
+        throw new TypeError(`The "loop" prop of <Sequence /> must be a boolean, but is of type ${typeof loop}.`);
+    }
+    if (loop && !Number.isFinite(contentDurationInFrames)) {
+        throw new Error('The "loop" prop of <Sequence /> requires a finite "durationInFrames" prop, because a <Sequence /> has no intrinsic duration.');
+    }
     if (typeof freeze !== 'undefined' && freeze !== null) {
         if (typeof freeze !== 'number') {
             throw new TypeError(`The "freeze" prop of <Sequence /> must be a number, but is of type ${typeof freeze}.`);
@@ -96,17 +108,56 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
     }
     lastPlaybackRate.current = { playbackRate, frame: absoluteFrame };
     const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
-    const effectiveRelativeFrom = from - trimBefore / playbackRate;
-    const relativeFrom = effectiveRelativeFrom / parentPlaybackRate;
-    const absoluteFrom = ((_b = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.absoluteFrom) !== null && _b !== void 0 ? _b : 0) + relativeFrom;
+    const effectiveDurationInFrames = (0, resolve_sequence_duration_js_1.resolveSequenceDuration)({
+        durationInFrames,
+        playbackRate,
+        loop,
+    });
+    const windowRelativeFrom = from - trimBefore / playbackRate;
     const parentSequenceDuration = parentSequence
-        ? Math.min(parentSequence.durationInFrames - effectiveRelativeFrom, durationInFrames)
-        : durationInFrames;
+        ? Math.min(parentSequence.durationInFrames - windowRelativeFrom, effectiveDurationInFrames)
+        : effectiveDurationInFrames;
     const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
+    // A looped sequence repeats the child range selected by `durationInFrames`. Each
+    // iteration lasts `loopPeriod` parent frames and moves the clock origin,
+    // while the visible window stays at [from, from + effectiveDurationInFrames).
+    const frameInParent = (absoluteFrame - cumulatedFrom) * parentPlaybackRate;
+    const loopPeriod = loop && Number.isFinite(contentDurationInFrames)
+        ? contentDurationInFrames / playbackRate
+        : null;
+    let loopIteration = 0;
+    if (loopPeriod !== null) {
+        const loopsElapsed = (frameInParent - from) / loopPeriod;
+        const nearestIteration = Math.round(loopsElapsed);
+        // Fractional periods and nested playback rates can put an exact loop
+        // boundary a few floating-point units before the next iteration.
+        const isAtBoundary = Math.abs(loopsElapsed - nearestIteration) <=
+            Number.EPSILON * Math.max(1, Math.abs(loopsElapsed)) * 4;
+        const lastIteration = Math.ceil(actualDurationInFrames / loopPeriod) - 1;
+        loopIteration = Math.max(0, Math.min(lastIteration, isAtBoundary ? nearestIteration : Math.floor(loopsElapsed)));
+    }
+    const loopOffset = loopPeriod === null ? 0 : loopIteration * loopPeriod;
+    const clockFrom = from + loopOffset;
+    const effectiveRelativeFrom = clockFrom - trimBefore / playbackRate;
+    const relativeFrom = effectiveRelativeFrom / parentPlaybackRate;
+    const absoluteFrom = ((_b = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.absoluteFrom) !== null && _b !== void 0 ? _b : 0) + relativeFrom;
+    // Inside a loop, the local clock ends after `durationInFrames`, except in a final
+    // iteration that the parent cuts short.
+    const localClockEnd = loopPeriod === null
+        ? actualDurationInFrames * playbackRate + trimBefore
+        : Math.min(loopPeriod, actualDurationInFrames - loopOffset) *
+            playbackRate +
+            trimBefore;
     const sequenceRegistrationEnabled = (0, react_1.useContext)(SequenceManager_js_1.SequenceRegistrationContext);
+    const canvasOutlinesEnabled = (0, react_1.useContext)(sequence_outline_js_1.SequenceOutlineContext);
+    const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const shouldDiscoverOutline = env.isStudio || canvasOutlinesEnabled;
+    const automaticOutlineRef = (0, react_1.useMemo)(() => shouldDiscoverOutline && layout === 'none' && !passedRefForOutline
+        ? sequence_outline_js_1.SequenceOutlineInternals.createRef()
+        : null, [shouldDiscoverOutline, layout, passedRefForOutline]);
     const wrapperRefForOutline = (0, react_1.useRef)(null);
     const refForOutline = other.layout === 'none'
-        ? (passedRefForOutline !== null && passedRefForOutline !== void 0 ? passedRefForOutline : null)
+        ? (passedRefForOutline !== null && passedRefForOutline !== void 0 ? passedRefForOutline : automaticOutlineRef)
         : (passedRefForOutline !== null && passedRefForOutline !== void 0 ? passedRefForOutline : wrapperRefForOutline);
     const premounting = (0, react_1.useMemo)(() => {
         // || is intentional, ?? would not trigger on `false`
@@ -139,7 +190,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
         ? parentSequenceStart -
             parentSequence.cumulatedNegativeFrom / parentPlaybackRate
         : 0;
-    const firstFrame = Math.max(0, parentFirstFrame, cumulatedFrom + from / parentPlaybackRate);
+    const firstFrame = Math.max(0, parentFirstFrame, cumulatedFrom + clockFrom / parentPlaybackRate);
     const cumulatedNegativeFrom = (currentSequenceStart - firstFrame) * cumulativePlaybackRate;
     const contextValue = (0, react_1.useMemo)(() => {
         var _a, _b, _c;
@@ -149,7 +200,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
             cumulatedFrom,
             relativeFrom,
             cumulatedNegativeFrom,
-            durationInFrames: actualDurationInFrames * playbackRate + trimBefore,
+            durationInFrames: localClockEnd,
             parentFrom: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom) !== null && _a !== void 0 ? _a : 0,
             id,
             height: (_b = height !== null && height !== void 0 ? height : parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.height) !== null && _b !== void 0 ? _b : null,
@@ -164,9 +215,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
         absoluteFrom,
         relativeFrom,
         cumulativePlaybackRate,
-        playbackRate,
-        trimBefore,
-        actualDurationInFrames,
+        localClockEnd,
         parentSequence,
         id,
         height,
@@ -177,11 +226,29 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
         postmountDisplay,
         cumulatedNegativeFrom,
     ]);
+    const loopContextValue = (0, react_1.useMemo)(() => {
+        if (loopPeriod === null) {
+            return null;
+        }
+        return {
+            iteration: loopIteration,
+            durationInFrames: contentDurationInFrames,
+        };
+    }, [contentDurationInFrames, loopIteration, loopPeriod]);
+    const resolvedLoopDisplay = (0, react_1.useMemo)(() => {
+        if (loopDisplay || loopPeriod === null) {
+            return loopDisplay;
+        }
+        return {
+            numberOfTimes: actualDurationInFrames / loopPeriod,
+            startOffset: 0,
+            durationInFrames: loopPeriod,
+        };
+    }, [actualDurationInFrames, loopDisplay, loopPeriod]);
     const timelineClipName = (0, react_1.useMemo)(() => {
         return name !== null && name !== void 0 ? name : '';
     }, [name]);
     const resolvedDocumentationLink = documentationLink !== null && documentationLink !== void 0 ? documentationLink : 'https://www.remotion.dev/docs/sequence';
-    const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const isInsideSeries = (0, react_1.useContext)(is_inside_series_js_1.IsInsideSeriesContext);
     // Our assumption: Stack doesnt' change. After we symbolicate we assign it a nodePath
     // and if it changes, it would lead to-remounting of the sequence.
@@ -204,8 +271,8 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
         ? registeredFrozenFrame === null
             ? null
             : mediaFrameAtSequenceZero +
-                (loopDisplay
-                    ? registeredFrozenFrame % loopDisplay.durationInFrames
+                (resolvedLoopDisplay
+                    ? registeredFrozenFrame % resolvedLoopDisplay.durationInFrames
                     : registeredFrozenFrame) *
                     isMedia.data.playbackRate
         : null;
@@ -264,7 +331,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
                     from,
                     trimBefore: registeredTrimBefore,
                     id,
-                    loopDisplay,
+                    loopDisplay: resolvedLoopDisplay,
                     parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
                     postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
                     premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
@@ -291,7 +358,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
                 from,
                 trimBefore: registeredTrimBefore,
                 id,
-                loopDisplay,
+                loopDisplay: resolvedLoopDisplay,
                 parent: (_b = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _b !== void 0 ? _b : null,
                 playbackRate: isMedia.data.playbackRate,
                 postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
@@ -323,7 +390,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
             type: 'sequence',
             showInTimeline,
             timelineOrder: null,
-            loopDisplay,
+            loopDisplay: resolvedLoopDisplay,
             getStack: () => stackRef.current,
             premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
             postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
@@ -344,7 +411,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
         from,
         registeredTrimBefore,
         showInTimeline,
-        loopDisplay,
+        resolvedLoopDisplay,
         premountDisplay,
         postmountDisplay,
         registrationControls,
@@ -367,14 +434,13 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
         id,
     });
     // Use an exclusive end so fractional clocks and frozen subframes remain visible.
-    const frameInParent = (absoluteFrame - cumulatedFrom) * parentPlaybackRate;
-    const endThreshold = from + durationInFrames;
+    const endThreshold = from + effectiveDurationInFrames;
     const boundaryTolerance = (0, get_sequence_boundary_tolerance_js_1.getSequenceBoundaryTolerance)({
         absoluteFrame,
         cumulatedFrom,
         from,
         parentPlaybackRate,
-        durationInFrames,
+        durationInFrames: effectiveDurationInFrames,
     });
     const content = frameInParent - from < -boundaryTolerance
         ? null
@@ -382,6 +448,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
             ? null
             : children;
     const frozenContent = content === null || typeof freeze === 'undefined' || freeze === null ? (content) : (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freeze, children: content }));
+    const loopedContent = frozenContent === null || loopContextValue === null ? (frozenContent) : (jsx_runtime_1.jsx(loop_context_js_1.LoopContext.Provider, { value: loopContextValue, children: frozenContent }));
     const styleIfThere = other.layout === 'none' ? undefined : other.style;
     const cropClipPath = (0, sequence_crop_js_1.getSequenceCropClipPath)({
         left: resolvedCropLeft,
@@ -416,20 +483,24 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
         throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
     }
     if (hidden) {
-        return env.isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: id, children: null })) : null;
+        return shouldDiscoverOutline ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: id, outlineChildrenRef: automaticOutlineRef, children: null })) : null;
     }
-    const sequence = (jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: frozenContent === null ? null : other.layout === 'none' ? (frozenContent) : (jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: sequenceRef, style: defaultStyle, className: other.className, children: frozenContent })) }));
-    return env.isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: id, children: sequence })) : (sequence);
+    const sequence = (jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: loopedContent === null ? null : other.layout === 'none' ? (loopedContent) : (jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: sequenceRef, style: defaultStyle, className: other.className, children: loopedContent })) }));
+    return shouldDiscoverOutline ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: id, outlineChildrenRef: automaticOutlineRef, children: sequence })) : (sequence);
 };
 const RegularSequence = (0, react_1.forwardRef)(RegularSequenceRefForwardingFunction);
 const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
     if (props.layout === 'none') {
         throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
     }
-    const { style: passedStyle, from = 0, durationInFrames = Infinity, premountFor = 0, postmountFor = 0, styleWhilePremounted, styleWhilePostmounted, ...otherProps } = props;
+    const { style: passedStyle, from = 0, durationInFrames, premountFor = 0, postmountFor = 0, styleWhilePremounted, styleWhilePostmounted, ...otherProps } = props;
     const { freezeFrame, isPremountingOrPostmounting, postmountingActive, premountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
         from,
-        durationInFrames,
+        durationInFrames: (0, resolve_sequence_duration_js_1.resolveSequenceDuration)({
+            durationInFrames,
+            playbackRate: otherProps.playbackRate,
+            loop: otherProps.loop,
+        }),
         premountFor,
         postmountFor,
         style: passedStyle !== null && passedStyle !== void 0 ? passedStyle : null,
@@ -437,7 +508,7 @@ const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
         styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
         hideWhilePremounted: 'opacity',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(SequenceInner, { ref: ref, from: from, durationInFrames: durationInFrames, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined, _remotionInternalPremountDisplay: premountFor, _remotionInternalPostmountDisplay: postmountFor, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...otherProps }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(SequenceInner, { ref: ref, from: from, durationInFrames: durationInFrames, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined, _remotionInternalPremountDisplay: premountFor, _remotionInternalPostmountDisplay: postmountFor, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...otherProps }) }));
 };
 const PremountedPostmountedSequence = (0, react_1.forwardRef)(PremountedPostmountedSequenceRefForwardingFunction);
 const SequenceRefForwardingFunction = (props, ref) => {

package/dist/cjs/SequenceManager.d.ts

@@ -15,6 +15,10 @@ export type SequenceNodePath = Array<string | number>;
 export declare const SequenceManager: React.Context<SequenceManagerContext>;
 export declare const SequenceManagerRefContext: React.Context<SequenceManagerRef>;
 export declare const SequenceRegistrationContext: React.Context<boolean>;
+export declare const DisableSequenceRegistrationContext: React.Context<boolean>;
+export declare const DisableSequenceRegistrationProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
 export type VisualModePropStatuses = {
     propStatuses: PropStatuses;
 };

package/dist/cjs/SequenceManager.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequenceManagerProvider = exports.VisualModeSettersContext = exports.VisualModeDragOverridesContext = exports.VisualModePropStatusesRefContext = exports.VisualModePropStatusesContext = exports.makeSequencePropsSubscriptionKey = exports.SequenceRegistrationContext = exports.SequenceManagerRefContext = exports.SequenceManager = void 0;
+exports.SequenceManagerProvider = exports.VisualModeSettersContext = exports.VisualModeDragOverridesContext = exports.VisualModePropStatusesRefContext = exports.VisualModePropStatusesContext = exports.makeSequencePropsSubscriptionKey = exports.DisableSequenceRegistrationProvider = exports.DisableSequenceRegistrationContext = exports.SequenceRegistrationContext = exports.SequenceManagerRefContext = exports.SequenceManager = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const sequence_order_marker_js_1 = require("./sequence-order-marker.js");
@@ -53,6 +53,11 @@ exports.SequenceManagerRefContext = react_1.default.createContext({
     current: [],
 });
 exports.SequenceRegistrationContext = react_1.default.createContext(false);
+exports.DisableSequenceRegistrationContext = react_1.default.createContext(false);
+const DisableSequenceRegistrationProvider = ({ children }) => {
+    return react_1.default.createElement(exports.DisableSequenceRegistrationContext.Provider, { value: true }, children);
+};
+exports.DisableSequenceRegistrationProvider = DisableSequenceRegistrationProvider;
 const makeSequencePropsSubscriptionKey = (key) => {
     return `${key.absolutePath}\0${key.nodePath.join('.')}\0${key.sequenceKeys.join('.')}\0${key.effectKeys.map((keys) => keys.join('.')).join('.')}`;
 };

package/dist/cjs/TimelineContext.d.ts

@@ -20,7 +20,7 @@ export type BufferingState = Readonly<{
 }>;
 export type SetTimelineContextValue = {
     seek: TimelineSeek | null;
-    setFrame: (u: React.SetStateAction<Record<string, number>>) => void;
+    setFrameWithoutSeek: (u: React.SetStateAction<Record<string, number>>) => void;
     setPlaying: (u: React.SetStateAction<boolean>) => void;
     setBuffering: (buffering: boolean) => void;
     subscribePlaying: (listener: (state: PlayingState) => void) => () => void;

package/dist/cjs/TimelineContext.js

@@ -13,7 +13,7 @@ const missingSetTimelineContext = () => {
 };
 exports.SetTimelineContext = (0, react_1.createContext)({
     seek: null,
-    setFrame: missingSetTimelineContext,
+    setFrameWithoutSeek: missingSetTimelineContext,
     setPlaying: missingSetTimelineContext,
     setBuffering: missingSetTimelineContext,
     subscribePlaying: () => () => undefined,
@@ -88,7 +88,7 @@ const TimelineContextProvider = ({ children, frameState }) => {
     }, [playbackRate]);
     const setTimelineContextValue = (0, react_1.useMemo)(() => {
         return {
-            setFrame,
+            setFrameWithoutSeek: setFrame,
             seek,
             setPlaying: (updater) => {
                 const current = playingStore.store.getSnapshot().playing;

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

@@ -199,6 +199,12 @@ export declare const animatedImageSchema: {
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
+    readonly loop: {
+        readonly type: "boolean";
+        readonly default: false;
+        readonly description: "Loop";
+        readonly keyframable: false;
+    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;

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

@@ -3,11 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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_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");
@@ -18,6 +20,7 @@ const with_interactivity_schema_js_1 = require("../with-interactivity-schema.js"
 const canvas_1 = require("./canvas");
 const decode_image_js_1 = require("./decode-image.js");
 const get_current_time_js_1 = require("./get-current-time.js");
+const get_duration_in_seconds_js_1 = require("./get-duration-in-seconds.js");
 const request_init_1 = require("./request-init");
 const resolve_image_source_1 = require("./resolve-image-source");
 exports.animatedImageSchema = {
@@ -47,26 +50,26 @@ const getCanvasPropsFromSequenceProps = (props) => {
     }
     return canvasProps;
 };
-const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', requestInit, effects, controls, ...props }, canvasRef) => {
+const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', requestInit, effects, controls, ...props }, canvasRef) => {
     var _a;
     const resolvedSrc = (0, resolve_image_source_1.resolveAnimatedImageSource)(src);
-    const [imageDecoder, setImageDecoder] = (0, react_1.useState)(null);
+    const [imageDecoder, setImageDecoder] = (0, react_2.useState)(null);
     const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
-    const [decodeHandle] = (0, react_1.useState)(() => delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
+    const [decodeHandle] = (0, react_2.useState)(() => delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
     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 });
-    const currentTimeRef = (0, react_1.useRef)(currentTime);
+    const currentTimeRef = (0, react_2.useRef)(currentTime);
     currentTimeRef.current = currentTime;
     const requestInitKey = (0, request_init_1.serializeRequestInit)(requestInit);
-    const requestInitRef = (0, react_1.useRef)(requestInit);
+    const requestInitRef = (0, react_2.useRef)(requestInit);
     requestInitRef.current = requestInit;
-    const ref = (0, react_1.useRef)(null);
+    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,
     });
-    (0, react_1.useImperativeHandle)(canvasRef, () => {
+    (0, react_2.useImperativeHandle)(canvasRef, () => {
         var _a;
         const c = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getCanvas();
         if (!c) {
@@ -74,8 +77,8 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
         }
         return c;
     }, []);
-    const [initialLoopBehavior] = (0, react_1.useState)(() => loopBehavior);
-    (0, react_1.useEffect)(() => {
+    const [initialLoopBehavior] = (0, react_2.useState)(() => loopBehavior);
+    (0, react_2.useEffect)(() => {
         const controller = new AbortController();
         let cancelled = false;
         let continued = false;
@@ -130,12 +133,12 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
         initialLoopBehavior,
         continueRender,
     ]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         return () => {
             imageDecoder === null || imageDecoder === void 0 ? void 0 : imageDecoder.close();
         };
     }, [imageDecoder]);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, react_2.useLayoutEffect)(() => {
         if (!imageDecoder) {
             return;
         }
@@ -191,14 +194,18 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
 });
 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 actualRef = (0, react_1.useRef)(null);
+    const actualRef = (0, react_2.useRef)(null);
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
-    (0, react_1.useImperativeHandle)(ref, () => {
+    (0, react_2.useImperativeHandle)(ref, () => {
         return actualRef.current;
     }, []);
     const { effectivePostmountFor, effectivePremountFor, freezeFrame, isPremountingOrPostmounting, postmountingActive, premountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
         from: from !== null && from !== void 0 ? from : 0,
-        durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
+        durationInFrames: (0, resolve_sequence_duration_js_1.resolveSequenceDuration)({
+            durationInFrames,
+            playbackRate,
+            loop: sequenceProps.loop,
+        }),
         premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
         postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
         style: style !== null && style !== void 0 ? style : null,
@@ -228,10 +235,72 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         requestInit,
         ...canvasProps,
     };
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, playbackRate: playbackRate, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...sequenceProps, outlineRef: actualRef, 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(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 { 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 controller = new AbortController();
+        let cancelled = false;
+        (0, get_duration_in_seconds_js_1.getAnimatedImageDurationInSeconds)({
+            resolvedSrc: (0, resolve_image_source_1.resolveAnimatedImageSource)(src),
+            signal: controller.signal,
+            requestInit: requestInitRef.current,
+            contentType: null,
+        })
+            .then((duration) => {
+            if (!cancelled) {
+                setDurationInFrames(Math.ceil(duration * fps) - (trimBefore !== null && trimBefore !== void 0 ? trimBefore : 0));
+            }
+        })
+            .catch((error) => {
+            if (cancelled) {
+                return;
+            }
+            if (onErrorRef.current) {
+                onErrorRef.current(error);
+                setFailed(true);
+            }
+            else {
+                (0, cancel_render_js_1.cancelRender)(error);
+            }
+        });
+        return () => {
+            cancelled = true;
+            controller.abort();
+            continueRender(handle);
+        };
+    }, [continueRender, fps, handle, src, trimBefore]);
+    (0, react_2.useEffect)(() => {
+        if (durationInFrames !== null || failed) {
+            continueRender(handle);
+        }
+    }, [continueRender, durationInFrames, failed, handle]);
+    if (durationInFrames === null || failed) {
+        return null;
+    }
+    return jsx_runtime_1.jsx(AnimatedImageInner, { ...props, durationInFrames: durationInFrames });
+};
+const AnimatedImageComponent = (props) => {
+    var _a;
+    if (props.loop && props.durationInFrames === undefined) {
+        const resolvedSrc = (0, resolve_image_source_1.resolveAnimatedImageSource)(props.src);
+        const requestInitKey = (0, request_init_1.serializeRequestInit)(props.requestInit);
+        return (react_1.createElement(AnimatedImageWithIntrinsicDuration, { ...props, key: `${resolvedSrc}-${requestInitKey}-${(_a = props.trimBefore) !== null && _a !== void 0 ? _a : 0}` }));
+    }
+    return jsx_runtime_1.jsx(AnimatedImageInner, { ...props });
 };
 exports.AnimatedImage = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
-    Component: AnimatedImageInner,
+    Component: AnimatedImageComponent,
     componentName: '<AnimatedImage>',
     componentIdentity: 'dev.remotion.remotion.AnimatedImage',
     schema: exports.animatedImageSchema,

package/dist/cjs/audio/AudioForPreview.js

@@ -142,7 +142,6 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         loopDisplay: undefined,
         loopVolumeCurveBehavior: loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat',
         documentationLink: 'https://www.remotion.dev/docs/html5-audio',
-        refForOutline: null,
         muted: isMutedForTimeline,
     });
     // putting playback before useVolume
@@ -219,9 +218,9 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         };
     }, [audioRef, src]);
     if (initialShouldPreMountAudioElements) {
-        return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: timelineId, children: null })) : null;
+        return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: timelineId, outlineChildrenRef: null, children: null })) : 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, children: audio })) : (audio);
+    return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: timelineId, outlineChildrenRef: null, children: audio })) : (audio);
 };
 exports.AudioForPreview = (0, react_2.forwardRef)(AudioForDevelopmentForwardRefFunction);

package/dist/cjs/audio/html5-audio.js

@@ -16,6 +16,7 @@ const use_video_config_js_1 = require("../use-video-config.js");
 const v5_flag_js_1 = require("../v5-flag.js");
 const validate_media_props_js_1 = require("../validate-media-props.js");
 const validate_start_from_props_js_1 = require("../validate-start-from-props.js");
+const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
 const duration_state_js_1 = require("../video/duration-state.js");
 const AudioForPreview_js_1 = require("./AudioForPreview.js");
 const AudioForRendering_js_1 = require("./AudioForRendering.js");
@@ -25,7 +26,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     var _a, _b, _c, _d;
     const audioTagsContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioTagsContext);
     const propsWithFreeze = props;
-    const { startFrom, endAt, trimBefore, trimAfter, name, _remotionInternalStack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, freeze, ...otherProps } = propsWithFreeze;
+    const { startFrom, endAt, trimBefore, trimAfter, durationInFrames, name, _remotionInternalStack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, freeze, ...otherProps } = propsWithFreeze;
     const { loop, freeze: _freeze, ...propsOtherThanLoop } = propsWithFreeze;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
@@ -65,32 +66,43 @@ const AudioRefForwardingFunction = (props, ref) => {
     }, [setDurations]);
     const durationFetched = (_a = durations[(0, absolute_src_js_1.getAbsoluteSrc)(preloadedSrc)]) !== null && _a !== void 0 ? _a : durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)];
     (0, validate_start_from_props_js_1.validateMediaTrimProps)({ startFrom, endAt, trimBefore, trimAfter });
+    if (durationInFrames !== undefined) {
+        (0, validate_duration_in_frames_js_1.validateDurationInFrames)(durationInFrames, {
+            component: 'of the <Html5Audio /> component',
+            allowFloats: true,
+        });
+    }
     const { trimBeforeValue, trimAfterValue } = (0, validate_start_from_props_js_1.resolveTrimProps)({
         startFrom,
         endAt,
         trimBefore,
         trimAfter,
     });
+    const effectiveTrimAfter = (0, calculate_media_duration_js_1.getMediaTrimAfter)({
+        durationInFrames,
+        trimAfter: trimAfterValue,
+        trimBefore: trimBeforeValue,
+    });
     // An explicit trim end defines the loop before metadata has loaded. Waiting
     // for metadata would leave the media unmounted when seeking into later loops.
-    const loopDuration = trimAfterValue !== null && trimAfterValue !== void 0 ? trimAfterValue : (durationFetched === undefined ? undefined : durationFetched * fps);
+    const loopDuration = effectiveTrimAfter !== null && effectiveTrimAfter !== void 0 ? effectiveTrimAfter : (durationFetched === undefined ? undefined : durationFetched * fps);
     if (loop && loopDuration !== undefined) {
         if (!Number.isFinite(loopDuration)) {
             return (jsx_runtime_1.jsx(exports.Html5Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }));
         }
         return (jsx_runtime_1.jsx(index_js_1.Loop, { layout: "none", durationInFrames: (0, calculate_media_duration_js_1.calculateMediaDuration)({
-                trimAfter: trimAfterValue,
+                trimAfter: effectiveTrimAfter,
                 mediaDurationInFrames: loopDuration,
                 playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
                 trimBefore: trimBeforeValue,
             }), children: jsx_runtime_1.jsx(exports.Html5Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }) }));
     }
     if (typeof trimBeforeValue !== 'undefined' ||
-        typeof trimAfterValue !== 'undefined') {
-        return (jsx_runtime_1.jsx(use_audio_frame_js_1.Html5MediaTrimContext.Provider, { value: trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue === undefined
+        typeof effectiveTrimAfter !== 'undefined') {
+        return (jsx_runtime_1.jsx(use_audio_frame_js_1.Html5MediaTrimContext.Provider, { value: trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: effectiveTrimAfter === undefined
                     ? undefined
                     : (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0) +
-                        (trimAfterValue - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0)) /
+                        (effectiveTrimAfter - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0)) /
                             ((_c = props.playbackRate) !== null && _c !== void 0 ? _c : 1), name: name, children: jsx_runtime_1.jsx(exports.Html5Audio, { _remotionInternalNeedsDurationCalculation: Boolean(loop), pauseWhenBuffering: shouldPauseWhenBuffering, ...otherProps, ref: ref }) }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)({