remotion 4.0.534 → 4.0.536

package/dist/cjs/Interactive.d.ts

@@ -24,13 +24,28 @@ type StyleAcceptsCssProperties<Style> = true extends StyleMemberAcceptsCssProper
 type PropsBranchAcceptsStyle<Props> = Props extends unknown ? 'style' extends keyof Props ? StyleAcceptsCssProperties<Props[Extract<'style', keyof Props>]> : false : never;
 type EveryPropsBranchAcceptsStyle<Props> = [Props] extends [never] ? false : false extends PropsBranchAcceptsStyle<Props> ? false : true;
 type ComponentAcceptingStyle<Component extends React.ElementType, ReservedKey extends PropertyKey> = ComponentWithoutReservedProps<Component, ReservedKey> & (EveryPropsBranchAcceptsStyle<React.ComponentPropsWithoutRef<Component>> extends true ? unknown : never);
-type WithSchema = {
-    <S extends InteractivitySchema, Component extends React.ElementType>(options: Omit<WithInteractivitySchemaOptions<S, React.ComponentPropsWithoutRef<Component>>, 'Component' | 'supportsEffects'> & {
+type WithSchemaOptions<Options extends {
+    schema: InteractivitySchema;
+    componentName: string;
+}, WithDefaults extends boolean> = WithDefaults extends true ? Omit<Options, 'schema' | 'componentName' | 'wrapInSequence'> & Partial<Pick<Options, 'schema' | 'componentName'>> : Options;
+type WithSequence<WithDefaults extends boolean> = {
+    <S extends InteractivitySchema, Component extends React.ElementType>(options: WithSchemaOptions<Omit<WithInteractivitySchemaOptions<S, React.ComponentPropsWithoutRef<Component>>, 'Component' | 'supportsEffects'> & {
+        readonly Component: ComponentWithoutReservedProps<Component, WithSchemaReservedKey | 'style' | 'width' | 'height'>;
+        readonly wrapInSequence: true;
+        readonly layout: 'absolute-fill';
+    }, WithDefaults>): React.FC<React.ComponentPropsWithoutRef<Component> & InteractiveBaseProps & InteractivePremountProps & InteractiveCropProps & InteractiveTransformProps & Pick<SequenceProps, 'width' | 'height'> & {
+        readonly ref?: React.Ref<HTMLDivElement>;
+    }>;
+    <S extends InteractivitySchema, Component extends React.ElementType>(options: WithSchemaOptions<Omit<WithInteractivitySchemaOptions<S, React.ComponentPropsWithoutRef<Component>>, 'Component' | 'supportsEffects'> & {
         readonly Component: ComponentAcceptingStyle<Component, WithSchemaReservedKey>;
         readonly wrapInSequence: true;
-    }): React.FC<React.ComponentPropsWithRef<Component> & InteractiveBaseProps & InteractivePremountProps & InteractiveCropProps>;
+        readonly layout?: 'none';
+    }, WithDefaults>): React.FC<React.ComponentPropsWithRef<Component> & InteractiveBaseProps & InteractivePremountProps & InteractiveCropProps>;
+};
+type WithSchema = WithSequence<false> & {
     <S extends InteractivitySchema, Props extends object>(options: WithInteractivitySchemaOptions<S, Props> & {
         readonly wrapInSequence?: false;
+        readonly layout?: never;
     }): React.ComponentType<Props>;
 };
 /**
@@ -85,6 +100,9 @@ export declare const Interactive: {
             readonly keyframable: false;
         };
     };
+    childrenSchema: {
+        children: import("./interactivity-schema.js").InteractivitySchemaField;
+    };
     transformSchema: {
         readonly 'style.transformOrigin': {
             readonly type: "transform-origin";
@@ -358,7 +376,7 @@ export declare const Interactive: {
     premountSchema: {
         readonly premountFor: {
             readonly type: "number";
-            readonly default: 0;
+            readonly default: undefined;
             readonly description: "Premount For";
             readonly min: 0;
             readonly step: 1;
@@ -532,7 +550,7 @@ export declare const Interactive: {
                     };
                     readonly premountFor: {
                         readonly type: "number";
-                        readonly default: 0;
+                        readonly default: undefined;
                         readonly description: "Premount For";
                         readonly min: 0;
                         readonly step: 1;
@@ -592,7 +610,15 @@ export declare const Interactive: {
             };
         };
     };
+    /**
+     * @deprecated Use `Interactive.create()` instead: https://www.remotion.dev/docs/interactive-create
+     */
     withSchema: WithSchema;
+    /**
+     * @description Creates a component with timing props and editable Studio controls.
+     * @see [Documentation](https://www.remotion.dev/docs/interactive-create)
+     */
+    create: WithSequence<true>;
     _internalMakeRemotionComponentIdentity: ({ packageName, componentName, }: {
         readonly packageName: RemotionComponentIdentityPackage;
         readonly componentName: string;

package/dist/cjs/Interactive.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Interactive = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const component_identity_js_1 = require("./component-identity.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const freeze_js_1 = require("./freeze.js");
@@ -78,13 +79,13 @@ const interactiveBorderElementSchema = {
 const interactiveTextElementSchema = {
     ...interactiveBorderElementSchema,
     ...interactivity_schema_js_1.textSchema,
-    ...interactivity_schema_js_1.textContentSchema,
+    ...interactivity_schema_js_1.childrenSchema,
 };
 const interactiveSvgTextElementSchema = {
     ...interactiveElementSchema,
     ...interactivity_schema_js_1.svgPaintSchema,
     ...interactivity_schema_js_1.textSchema,
-    ...interactivity_schema_js_1.textContentSchema,
+    ...interactivity_schema_js_1.childrenSchema,
 };
 const interactiveSvgElementSchema = {
     ...interactiveElementSchema,
@@ -122,16 +123,17 @@ const withSchema = (untypedOptions) => {
         (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(LegacyWrapped);
         return LegacyWrapped;
     }
-    const { Component, componentName, schema, wrapInSequence: _, ...rest } = options;
+    const { Component, componentName, schema, wrapInSequence: _, layout = 'none', ...rest } = options;
     const ComponentWrappedInSequence = (0, react_1.forwardRef)((props, ref) => {
         const { canvasContent, compositions } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
         // The render callback runs after the exported wrapper has been initialized.
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        const componentIdentity = (0, enable_sequence_stack_traces_js_1.resolveComponentIdentity)(Wrapped);
+        const componentIdentity = (0, component_identity_js_1.resolveComponentIdentity)(Wrapped);
         const isCurrentComposition = compositions.some((composition) => (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' &&
             composition.id === canvasContent.compositionId &&
             composition.componentFromProps === componentIdentity);
-        const { durationInFrames, from, trimBefore, playbackRate, loop, freeze, hidden, name, showInTimeline, controls, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, ...componentProps } = props;
+        const { width, height, ...propsWithoutDimensions } = props;
+        const { durationInFrames, from, trimBefore, playbackRate, loop, freeze, hidden, name, showInTimeline, controls, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, ...componentProps } = layout === 'absolute-fill' ? propsWithoutDimensions : props;
         const { cropLeft, cropRight, cropTop, cropBottom, style, ...componentPropsWithoutCropping } = componentProps;
         const { effectivePremountFor, effectivePostmountFor, freezeFrame, isPremountingOrPostmounting, premountingActive, postmountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
             from: from !== null && from !== void 0 ? from : 0,
@@ -155,10 +157,18 @@ const withSchema = (untypedOptions) => {
             style: premountingStyle,
             componentName,
         });
-        return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.SequenceWithoutSchema, { _remotionInternalSingleChildComponent: isCurrentComposition ? null : componentIdentity, layout: "none", durationInFrames: durationInFrames, from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : componentName, showInTimeline: isCurrentComposition ? false : showInTimeline, controls: controls, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: react_1.default.createElement(Component, {
+        return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.SequenceWithoutSchema, { _remotionInternalSingleChildComponent: isCurrentComposition ? null : componentIdentity, layout: layout, ...(layout === 'absolute-fill'
+                    ? {
+                        width,
+                        height,
+                        style: { overflow: 'hidden', ...croppedStyle },
+                        ref: ref,
+                    }
+                    : {}), durationInFrames: durationInFrames, from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : componentName, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive-create", showInTimeline: isCurrentComposition ? false : showInTimeline, controls: controls, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: react_1.default.createElement(Component, {
                     ...componentPropsWithoutCropping,
-                    style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined,
-                    ref,
+                    ...(layout === 'none'
+                        ? { style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ref }
+                        : {}),
                 }) }) }));
     });
     const Wrapped = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
@@ -177,6 +187,19 @@ const withSchema = (untypedOptions) => {
     (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Wrapped);
     return Wrapped;
 };
+const create = (untypedOptions) => {
+    var _a;
+    var _b, _c;
+    const options = untypedOptions;
+    return withSchema({
+        ...options,
+        wrapInSequence: true,
+        schema: (_b = options.schema) !== null && _b !== void 0 ? _b : {},
+        componentName: (_c = options.componentName) !== null && _c !== void 0 ? _c : (options.Component.displayName ||
+            ((_a = options.Component.name) === null || _a === void 0 ? void 0 : _a.replace(/(.+)Inner$/, '$1')) ||
+            'Component'),
+    });
+};
 const makeInteractiveElement = (tag, displayName, schema) => {
     const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
         const { durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, hidden, name, showInTimeline, controls, cropLeft, cropRight, cropTop, cropBottom, style, ...props } = propsWithControls;
@@ -240,6 +263,7 @@ const makeInteractiveSvgStrokeElement = (tag, displayName) => {
 exports.Interactive = {
     baseSchema: interactivity_schema_js_1.baseSchema,
     captionsSchema: interactivity_schema_js_1.captionsSchema,
+    childrenSchema: interactivity_schema_js_1.childrenSchema,
     transformSchema: interactivity_schema_js_1.transformSchema,
     textSchema: interactivity_schema_js_1.textSchema,
     backgroundSchema: interactivity_schema_js_1.backgroundSchema,
@@ -250,7 +274,15 @@ exports.Interactive = {
     svgStrokeSchema: interactivity_schema_js_1.svgStrokeSchema,
     premountSchema: interactivity_schema_js_1.premountSchema,
     sequenceSchema: interactivity_schema_js_1.sequenceSchema,
+    /**
+     * @deprecated Use `Interactive.create()` instead: https://www.remotion.dev/docs/interactive-create
+     */
     withSchema,
+    /**
+     * @description Creates a component with timing props and editable Studio controls.
+     * @see [Documentation](https://www.remotion.dev/docs/interactive-create)
+     */
+    create,
     _internalMakeRemotionComponentIdentity: makeRemotionComponentIdentity,
     A: makeInteractiveTextElement('a', '<Interactive.A>'),
     Article: makeInteractiveTextElement('article', '<Interactive.Article>'),

package/dist/cjs/RemotionRoot.js

@@ -11,11 +11,12 @@ const prefetch_state_js_1 = require("./prefetch-state.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_media_enabled_js_1 = require("./use-media-enabled.js");
+const use_video_js_1 = require("./use-video.js");
 const duration_state_js_1 = require("./video/duration-state.js");
 const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLatencyHint, previewSampleRate, videoEnabled, audioEnabled, frameState, _experimentalKeepAudioContextAlive, }) => {
     const logging = (0, react_1.useMemo)(() => {
         return { logLevel, mountTime: Date.now() };
     }, [logLevel]);
-    return (jsx_runtime_1.jsx(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: jsx_runtime_1.jsx(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: jsx_runtime_1.jsx(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: jsx_runtime_1.jsx(EditorProps_js_1.EditorPropsProvider, { children: jsx_runtime_1.jsx(prefetch_state_js_1.PrefetchProvider, { children: jsx_runtime_1.jsx(SequenceManager_js_1.SequenceManagerProvider, { children: jsx_runtime_1.jsx(duration_state_js_1.DurationsContextProvider, { children: jsx_runtime_1.jsx(buffering_js_1.BufferingProvider, { children: jsx_runtime_1.jsx(shared_audio_tags_js_1.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, previewSampleRate: previewSampleRate, _experimentalKeepAudioContextAlive: _experimentalKeepAudioContextAlive, children: jsx_runtime_1.jsx(shared_audio_tags_js_1.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfAudioTags, children: children }) }) }) }) }) }) }) }) }) }));
+    return (jsx_runtime_1.jsx(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: jsx_runtime_1.jsx(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: jsx_runtime_1.jsx(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: jsx_runtime_1.jsx(EditorProps_js_1.EditorPropsProvider, { children: jsx_runtime_1.jsx(prefetch_state_js_1.PrefetchProvider, { children: jsx_runtime_1.jsx(SequenceManager_js_1.SequenceManagerProvider, { children: jsx_runtime_1.jsx(duration_state_js_1.DurationsContextProvider, { children: jsx_runtime_1.jsx(buffering_js_1.BufferingProvider, { children: jsx_runtime_1.jsx(shared_audio_tags_js_1.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, previewSampleRate: previewSampleRate, _experimentalKeepAudioContextAlive: _experimentalKeepAudioContextAlive, children: jsx_runtime_1.jsx(shared_audio_tags_js_1.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfAudioTags, children: jsx_runtime_1.jsx(use_video_js_1.VideoProvider, { children: children }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionRootContexts = RemotionRootContexts;

package/dist/cjs/Sequence.d.ts

@@ -36,7 +36,7 @@ export type SequencePropsWithoutDuration = {
     /**
      * @deprecated For internal use only.
      */
-    readonly _remotionInternalTimelineTrack?: Pick<TimelineTrackItem, 'role'>;
+    readonly _remotionInternalTimelineTrack?: Pick<TimelineTrackItem, 'role' | 'seriesOffset'>;
     /**
      * @deprecated For internal use only.
      */
@@ -80,8 +80,7 @@ export type SequencePropsWithoutDuration = {
         src: string;
     };
     /**
-     * @deprecated Remotion Studio discovers rendered elements automatically.
-     * Remove this prop.
+     * @deprecated This prop has no effect. Remotion Studio discovers selection outlines automatically.
      */
     readonly outlineRef?: React.RefObject<Element | null> | null;
 } & LayoutAndStyle;

package/dist/cjs/Sequence.js

@@ -1,19 +1,56 @@
 "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.SequenceWithoutFrom = exports.Sequence = exports.SequenceWithoutSchema = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @typescript-eslint/no-use-before-define */
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const AbsoluteFillElement_js_1 = require("./AbsoluteFillElement.js");
+const committed_metadata_js_1 = require("./committed-metadata.js");
+const component_identity_js_1 = require("./component-identity.js");
+const DefaultPremountContext_js_1 = require("./DefaultPremountContext.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 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_activity_context_js_1 = require("./sequence-activity-context.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 SequenceActivityBoundary_js_1 = require("./SequenceActivityBoundary.js");
+const SequenceActivityBudget_js_1 = require("./SequenceActivityBudget.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");
@@ -23,18 +60,25 @@ const use_premounting_js_1 = require("./use-premounting.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_sequence_registration_js_1 = require("./use-sequence-registration.js");
 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 SeriesContentVisibilityContext = (0, react_1.createContext)(true);
+const SequenceContextProvider = (0, committed_metadata_js_1.withCommittedMetadata)(SequenceContext_js_1.SequenceContext.Provider);
 const EMPTY_EFFECTS = [];
-const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playbackRate = 1, loop = false, freeze, durationInFrames, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalTimelineTrack: timelineTrackItem, _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, _f;
+const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playbackRate = 1, loop = false, freeze, durationInFrames, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalTimelineTrack: timelineTrackItem, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalSingleChildComponent: childComponentOverride, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, cropLeft, cropRight, cropTop, cropBottom, ...other }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const activityRequested = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityContext);
+    const parentDormant = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityDormantContext);
+    const activitySuspended = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivitySuspensionContext);
+    const hadActivity = (0, react_1.useRef)(false);
+    const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const activityEnabled = activityRequested && env.isStudio && !env.isRendering;
     const timelineTrack = (0, react_1.useContext)(timeline_track_context_js_1.TimelineTrackContext);
     const timelineTrackRole = (_a = timelineTrackItem === null || timelineTrackItem === void 0 ? void 0 : timelineTrackItem.role) !== null && _a !== void 0 ? _a : 'clip';
-    const parentPlaybackRate = (_b = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.playbackRate) !== null && _b !== void 0 ? _b : 1;
+    const seriesOffset = (_b = timelineTrackItem === null || timelineTrackItem === void 0 ? void 0 : timelineTrackItem.seriesOffset) !== null && _b !== void 0 ? _b : null;
+    const parentPlaybackRate = (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.playbackRate) !== null && _c !== void 0 ? _c : 1;
     const cumulativePlaybackRate = parentPlaybackRate * playbackRate;
     const cumulatedFrom = parentSequence
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
@@ -110,7 +154,9 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
         lastPlaybackRate.current.playbackRate !== playbackRate) {
         throw new Error('The "playbackRate" prop of <Sequence /> must be constant. Animating playbackRate is not supported.');
     }
-    lastPlaybackRate.current = { playbackRate, frame: absoluteFrame };
+    (0, react_1.useLayoutEffect)(() => {
+        lastPlaybackRate.current = { playbackRate, frame: absoluteFrame };
+    }, [absoluteFrame, playbackRate]);
     const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
     const effectiveDurationInFrames = (0, resolve_sequence_duration_js_1.resolveSequenceDuration)({
         durationInFrames,
@@ -130,7 +176,11 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
         ? contentDurationInFrames / playbackRate
         : null;
     let loopIteration = 0;
-    if (loopPeriod !== null) {
+    if (loopPeriod !== null &&
+        (!activityEnabled ||
+            (!parentDormant &&
+                frameInParent >= from &&
+                frameInParent < from + actualDurationInFrames))) {
         const loopsElapsed = (frameInParent - from) / loopPeriod;
         const nearestIteration = Math.round(loopsElapsed);
         // Fractional periods and nested playback rates can put an exact loop
@@ -144,7 +194,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
     const clockFrom = from + loopOffset;
     const effectiveRelativeFrom = clockFrom - trimBefore / playbackRate;
     const relativeFrom = effectiveRelativeFrom / parentPlaybackRate;
-    const absoluteFrom = ((_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.absoluteFrom) !== null && _c !== void 0 ? _c : 0) + relativeFrom;
+    const absoluteFrom = ((_d = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.absoluteFrom) !== null && _d !== void 0 ? _d : 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
@@ -154,15 +204,12 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
             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
+    const automaticOutlineRef = (0, react_1.useMemo)(() => shouldDiscoverOutline && layout === 'none'
         ? sequence_outline_js_1.SequenceOutlineInternals.createRef()
-        : null, [shouldDiscoverOutline, layout, passedRefForOutline]);
+        : null, [shouldDiscoverOutline, layout]);
     const wrapperRefForOutline = (0, react_1.useRef)(null);
-    const refForOutline = other.layout === 'none'
-        ? (passedRefForOutline !== null && passedRefForOutline !== void 0 ? passedRefForOutline : automaticOutlineRef)
-        : (passedRefForOutline !== null && passedRefForOutline !== void 0 ? passedRefForOutline : wrapperRefForOutline);
+    const refForOutline = layout === 'none' ? automaticOutlineRef : wrapperRefForOutline;
     const premounting = (0, react_1.useMemo)(() => {
         // || is intentional, ?? would not trigger on `false`
         return ((parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting) ||
@@ -254,13 +301,13 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
     }, [name]);
     const resolvedDocumentationLink = documentationLink !== null && documentationLink !== void 0 ? documentationLink : 'https://www.remotion.dev/docs/sequence';
     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.
-    const stackRef = (0, react_1.useRef)(null);
-    stackRef.current = controls
-        ? ((_e = (_d = (0, enable_sequence_stack_traces_js_1.getStackForControls)(controls)) !== null && _d !== void 0 ? _d : stack) !== null && _e !== void 0 ? _e : null)
+    const singleChildComponent = (0, react_1.useMemo)(() => childComponentOverride === undefined
+        ? (0, component_identity_js_1.getSingleChildComponent)(children)
+        : childComponentOverride, [children, childComponentOverride]);
+    const registrationStack = controls
+        ? ((_f = (_e = (0, enable_sequence_stack_traces_js_1.getStackForControls)(controls)) !== null && _e !== void 0 ? _e : stack) !== null && _f !== void 0 ? _f : null)
         : (stack !== null && stack !== void 0 ? stack : null);
-    const getStack = (0, react_1.useCallback)(() => stackRef.current, []);
+    const getStack = (0, react_1.useCallback)(() => registrationStack, [registrationStack]);
     const registeredFrozenFrame = typeof freeze === 'number' ? freeze : null;
     const currentFrame = registeredFrozenFrame !== null && registeredFrozenFrame !== void 0 ? registeredFrozenFrame : (absoluteFrame - currentSequenceStart) * cumulativePlaybackRate;
     const currentFrameRef = (0, react_1.useRef)(currentFrame);
@@ -269,7 +316,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
     }, [currentFrame]);
     const getCurrentFrame = (0, react_1.useCallback)(() => currentFrameRef.current, []);
     const registeredTrimBefore = trimBefore === 0 ? null : trimBefore;
-    const parentCumulatedNegativeFrom = (_f = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.cumulatedNegativeFrom) !== null && _f !== void 0 ? _f : 0;
+    const parentCumulatedNegativeFrom = (_g = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.cumulatedNegativeFrom) !== null && _g !== void 0 ? _g : 0;
     const startMediaFrom = isMedia && isMedia.type !== 'image'
         ? isMedia.data.startMediaFrom +
             parentCumulatedNegativeFrom -
@@ -350,6 +397,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
                 timelineTrack: {
                     ...timelineTrack,
                     role: timelineTrackRole,
+                    seriesOffset,
                 },
             }
             : {};
@@ -392,7 +440,6 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
                 effectRuntimeValues,
                 displayName: timelineClipName,
                 documentationLink: resolvedDocumentationLink,
-                doesVolumeChange: isMedia.data.doesVolumeChange,
                 duration: actualDurationInFrames,
                 from,
                 trimBefore: registeredTrimBefore,
@@ -409,7 +456,6 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
                 getCurrentFrame,
                 startMediaFrom: startMediaFrom !== null && startMediaFrom !== void 0 ? startMediaFrom : isMedia.data.startMediaFrom,
                 mediaFrameAtSequenceZero,
-                volume: isMedia.data.volumes,
                 muted: isMedia.data.muted,
                 refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                 isInsideSeries,
@@ -451,6 +497,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
         id,
         timelineTrack,
         timelineTrackRole,
+        seriesOffset,
         getCurrentFrame,
         getStack,
         timelineClipName,
@@ -480,7 +527,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
         frozenMediaFrame,
         singleChildComponent,
     ]);
-    (0, use_sequence_registration_js_1.useSequenceRegistration)({
+    const registration = (0, use_sequence_registration_js_1.useSequenceRegistration)({
         getSequence: env.isStudio || sequenceRegistrationEnabled
             ? getSequenceForRegistration
             : null,
@@ -495,11 +542,33 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
         parentPlaybackRate,
         durationInFrames: effectiveDurationInFrames,
     });
-    const content = !seriesContentVisible || frameInParent - from < -boundaryTolerance
-        ? null
-        : frameInParent - endThreshold >= -boundaryTolerance
-            ? null
-            : children;
+    const contentVisible = seriesContentVisible &&
+        frameInParent - from >= -boundaryTolerance &&
+        frameInParent - endThreshold < -boundaryTolerance;
+    const activityDormant = parentDormant || !contentVisible;
+    const admitted = (0, SequenceActivityBudget_js_1.useSequenceActivityAdmission)(activityEnabled && !hidden
+        ? {
+            id,
+            parent: (_h = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _h !== void 0 ? _h : null,
+            compositionId: videoConfig.id,
+            from: firstFrame,
+            end: cumulatedFrom +
+                (from + actualDurationInFrames) / parentPlaybackRate,
+        }
+        : null);
+    const renderActivity = activityEnabled &&
+        (!activityDormant ||
+            admitted ||
+            (activitySuspended && hadActivity.current));
+    // A scene visited during playback must keep its children and registrations
+    // when it leaves the viewport, even if it was outside the discovery budget.
+    const useCommitEffect = (_j = react_1.default.useInsertionEffect) !== null && _j !== void 0 ? _j : react_1.useLayoutEffect;
+    useCommitEffect(() => {
+        hadActivity.current = renderActivity;
+    }, [renderActivity]);
+    const content = (activityEnabled ? renderActivity : contentVisible)
+        ? children
+        : null;
     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;
@@ -535,20 +604,30 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
     if (ref !== null && layout === 'none') {
         throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
     }
+    const metadata = (0, react_1.useMemo)(() => shouldDiscoverOutline || registration !== null
+        ? {
+            type: 'sequence',
+            id,
+            value: registration,
+            outlineChildrenRef: automaticOutlineRef,
+        }
+        : null, [automaticOutlineRef, id, registration, shouldDiscoverOutline]);
     if (hidden) {
-        return shouldDiscoverOutline ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: id, outlineChildrenRef: automaticOutlineRef, children: null })) : null;
+        return shouldDiscoverOutline || registration !== null ? (jsx_runtime_1.jsx(SequenceContextProvider, { value: contextValue, _remotionCommitMetadata: metadata, children: null })) : null;
     }
     // Retain resolved scene registrations so Studio can recover the natural end
     // even when seeking past an explicit wrapper trim. Scene contents stay hidden.
     const retainSeriesRegistration = env.isStudio && canInferDuration;
-    const renderedContent = loopedContent === null ? (retainSeriesRegistration ? (children) : null) : other.layout === 'none' ? (loopedContent) : (jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: sequenceRef, style: defaultStyle, className: other.className, children: loopedContent }));
-    const sequenceContent = (jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: retainSeriesRegistration ? (jsx_runtime_1.jsx(SeriesContentVisibilityContext.Provider, { value: content !== null, children: renderedContent })) : (renderedContent) }));
+    const contentForLayout = renderActivity ? (jsx_runtime_1.jsx(SequenceActivityBoundary_js_1.SequenceActivityContent, { dormant: activityDormant, children: loopedContent })) : (loopedContent);
+    const renderedContent = loopedContent === null ? (retainSeriesRegistration ? (children) : null) : other.layout === 'none' ? (contentForLayout) : (jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: sequenceRef, style: defaultStyle, className: other.className, children: contentForLayout }));
+    const activityContent = renderActivity ? (jsx_runtime_1.jsx(SequenceActivityBoundary_js_1.SequenceActivityBoundary, { dormant: activityDormant, frame: firstFrame, children: renderedContent })) : (renderedContent);
+    const sequenceContent = (jsx_runtime_1.jsx(SequenceContextProvider, { value: contextValue, _remotionCommitMetadata: metadata, children: retainSeriesRegistration ? (jsx_runtime_1.jsx(SeriesContentVisibilityContext.Provider, { value: renderActivity || contentVisible, children: activityContent })) : (activityContent) }));
     // Keep the provider mounted when track grouping changes so clip state survives.
     const sequence = (jsx_runtime_1.jsx(timeline_track_context_js_1.TimelineTrackContext.Provider, { value: timelineTrackRole === 'track' ||
             (timelineTrackRole === 'clip' && !showInTimeline)
             ? timelineTrack
             : null, children: sequenceContent }));
-    return shouldDiscoverOutline ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: id, outlineChildrenRef: automaticOutlineRef, children: sequence })) : (sequence);
+    return sequence;
 };
 const RegularSequence = (0, react_1.forwardRef)(RegularSequenceRefForwardingFunction);
 const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
@@ -570,17 +649,16 @@ 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, _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 }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(RegularSequence, { 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) => {
     var _a;
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
+    const defaultPremountInSeconds = (0, react_1.useContext)(DefaultPremountContext_js_1.DefaultPremountContext);
     if (props.layout !== 'none' && !env.isRendering) {
-        const effectivePremountFor = v5_flag_js_1.ENABLE_V5_BREAKING_CHANGES
-            ? ((_a = props.premountFor) !== null && _a !== void 0 ? _a : fps)
-            : props.premountFor;
+        const effectivePremountFor = (_a = props.premountFor) !== null && _a !== void 0 ? _a : Math.round(defaultPremountInSeconds * fps);
         if (effectivePremountFor || props.postmountFor) {
             return (jsx_runtime_1.jsx(PremountedPostmountedSequence, { ref: ref, ...props, premountFor: effectivePremountFor }));
         }

package/dist/cjs/SequenceActivityBoundary.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const SequenceActivityContent: React.NamedExoticComponent<{
+    readonly children: React.ReactNode;
+    readonly dormant: boolean;
+}>;
+export declare const SequenceActivityBoundary: React.FC<{
+    readonly children: React.ReactNode;
+    readonly dormant: boolean;
+    readonly frame: number;
+}>;