remotion 4.0.531 → 4.0.533

package/dist/cjs/CompositionManager.d.ts

@@ -77,6 +77,12 @@ export type TSequence = {
     from: number;
     trimBefore: number | null;
     duration: number;
+    /** Infer the timeline display duration from children without changing playback. */
+    readonly autoDuration?: boolean | null;
+    /** Whether the wrapper can restore its duration from its scenes. */
+    readonly canInferDuration?: boolean | null;
+    /** Full scene duration in the parent clock, before container clipping. */
+    readonly unclippedDuration?: number | null;
     id: string;
     displayName: string;
     documentationLink: string | null;

package/dist/cjs/HtmlInCanvas.d.ts

@@ -72,6 +72,7 @@ export type HtmlInCanvasOnPaintParams = {
     readonly pixelDensity: number;
 };
 export declare const isHtmlInCanvasSupported: () => boolean;
+export declare const isHtmlInCanvasNestingSupported: () => boolean;
 /** Generic fallback for consumers that cannot inspect the current browser. */
 export declare const HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = "HTML in Canvas requires Chrome 149 or newer with Canvas Draw Element enabled at chrome://flags/#canvas-draw-element.";
 export declare const getHtmlInCanvasUnsupportedMessage: () => string;
@@ -319,4 +320,5 @@ export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<Interact
     readonly _remotionInternalCanvasSiblings?: React.ReactNode;
 } & React.RefAttributes<HTMLCanvasElement>> & {
     readonly isSupported: () => boolean;
+    readonly isNestingSupported: () => boolean;
 };

package/dist/cjs/HtmlInCanvas.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HtmlInCanvas = exports.htmlInCanvasSchema = exports.getHtmlInCanvasUnsupportedMessage = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.isHtmlInCanvasSupported = void 0;
+exports.HtmlInCanvas = exports.htmlInCanvasSchema = exports.getHtmlInCanvasUnsupportedMessage = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.isHtmlInCanvasNestingSupported = exports.isHtmlInCanvasSupported = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const run_effect_chain_js_1 = require("./effects/run-effect-chain.js");
@@ -54,6 +54,17 @@ const isHtmlInCanvasSupported = () => {
     return cachedSupport;
 };
 exports.isHtmlInCanvasSupported = isHtmlInCanvasSupported;
+const MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS = 157;
+const isHtmlInCanvasNestingSupported = () => {
+    var _a;
+    if (!(0, exports.isHtmlInCanvasSupported)() || typeof navigator === 'undefined') {
+        return false;
+    }
+    const chromeVersion = (_a = navigator.userAgent.match(/(?:Chrome|Chromium)\/(\d+)/)) === null || _a === void 0 ? void 0 : _a[1];
+    return (chromeVersion !== undefined &&
+        Number(chromeVersion) >= MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS);
+};
+exports.isHtmlInCanvasNestingSupported = isHtmlInCanvasNestingSupported;
 /** Generic fallback for consumers that cannot inspect the current browser. */
 exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = 'HTML in Canvas requires Chrome 149 or newer with Canvas Draw Element enabled at chrome://flags/#canvas-draw-element.';
 const getHtmlInCanvasUnsupportedMessage = () => {
@@ -139,8 +150,8 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     var _a;
     const isInsideAncestorHtmlInCanvas = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
     assertHtmlInCanvasDimensions(width, height);
-    if (isInsideAncestorHtmlInCanvas) {
-        throw new Error('<HtmlInCanvas> components cannot be nested. Chrome does not reliably render nested HTML-in-canvas subtrees. Consider merging the effects into one <HtmlInCanvas> if you can.');
+    if (isInsideAncestorHtmlInCanvas && !(0, exports.isHtmlInCanvasNestingSupported)()) {
+        throw new Error(`Nested <HtmlInCanvas> components require Chrome ${MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS} or newer with HTML-in-canvas enabled.`);
     }
     const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
     const canvasWidth = Math.ceil(width * resolvedPixelDensity);
@@ -471,6 +482,7 @@ const HtmlInCanvasWrapped = (0, with_interactivity_schema_js_1.withInteractivity
 });
 exports.HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
     isSupported: exports.isHtmlInCanvasSupported,
+    isNestingSupported: exports.isHtmlInCanvasNestingSupported,
 });
 exports.HtmlInCanvas.displayName = 'HtmlInCanvas';
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.HtmlInCanvas);

package/dist/cjs/Sequence.js

@@ -24,6 +24,7 @@ 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 EMPTY_EFFECTS = [];
 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;
@@ -283,6 +284,23 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
     const controlsComponentIdentity = controls === null || controls === void 0 ? void 0 : controls.componentIdentity;
     const controlsComponentName = controls === null || controls === void 0 ? void 0 : controls.componentName;
     const controlsVideoConfigValues = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues;
+    const isInsideNonPremountFreeze = (0, freeze_js_1.useIsInsideNonPremountFreeze)();
+    const canInferDuration = (controlsComponentIdentity === 'dev.remotion.remotion.Series' ||
+        controlsComponentIdentity ===
+            'dev.remotion.transitions.TransitionSeries') &&
+        !loop &&
+        registeredFrozenFrame === null &&
+        !isInsideNonPremountFreeze &&
+        !hidden;
+    const autoDuration = canInferDuration && durationInFrames === undefined;
+    const isSeriesChild = controlsComponentIdentity === 'dev.remotion.remotion.Series.Sequence' ||
+        controlsComponentIdentity ===
+            'dev.remotion.transitions.TransitionSeries.Sequence' ||
+        controlsComponentIdentity ===
+            'dev.remotion.transitions.TransitionSeries.Transition' ||
+        controlsComponentIdentity ===
+            'dev.remotion.transitions.TransitionSeries.Overlay';
+    const seriesContentVisible = (0, react_1.useContext)(SeriesContentVisibilityContext);
     const effectRuntimeValues = (0, react_1.useMemo)(() => {
         var _a;
         return (_a = _remotionInternalEffects === null || _remotionInternalEffects === void 0 ? void 0 : _remotionInternalEffects.runtimeValues) !== null && _a !== void 0 ? _a : null;
@@ -383,6 +401,9 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
             sequencePlaybackRate: playbackRate,
             trimBefore: registeredTrimBefore,
             duration: actualDurationInFrames,
+            ...(autoDuration ? { autoDuration: true } : {}),
+            ...(canInferDuration ? { canInferDuration: true } : {}),
+            ...(isSeriesChild ? { unclippedDuration: effectiveDurationInFrames } : {}),
             id,
             displayName: timelineClipName,
             documentationLink: resolvedDocumentationLink,
@@ -408,6 +429,10 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
         playbackRate,
         parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id,
         actualDurationInFrames,
+        autoDuration,
+        canInferDuration,
+        isSeriesChild,
+        effectiveDurationInFrames,
         from,
         registeredTrimBefore,
         showInTimeline,
@@ -442,7 +467,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
         parentPlaybackRate,
         durationInFrames: effectiveDurationInFrames,
     });
-    const content = frameInParent - from < -boundaryTolerance
+    const content = !seriesContentVisible || frameInParent - from < -boundaryTolerance
         ? null
         : frameInParent - endThreshold >= -boundaryTolerance
             ? null
@@ -485,7 +510,11 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
     if (hidden) {
         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: loopedContent === null ? null : other.layout === 'none' ? (loopedContent) : (jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: sequenceRef, style: defaultStyle, className: other.className, children: loopedContent })) }));
+    // 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 sequenceContent = 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 sequence = (jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: retainSeriesRegistration ? (jsx_runtime_1.jsx(SeriesContentVisibilityContext.Provider, { value: content !== null, children: sequenceContent })) : (sequenceContent) }));
     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);

package/dist/cjs/SequenceManager.d.ts

@@ -12,7 +12,10 @@ export type SequenceManagerRef = {
     current: TSequence[];
 };
 export type SequenceNodePath = Array<string | number>;
+type SequenceManagerActions = Pick<SequenceManagerContext, 'registerSequence' | 'updateSequence' | 'unregisterSequence'>;
+export declare const SequenceManagerActionsContext: React.Context<SequenceManagerActions>;
 export declare const SequenceManager: React.Context<SequenceManagerContext>;
+export declare const useSequenceManagerSequences: () => TSequence[];
 export declare const SequenceManagerRefContext: React.Context<SequenceManagerRef>;
 export declare const SequenceRegistrationContext: React.Context<boolean>;
 export declare const DisableSequenceRegistrationContext: React.Context<boolean>;
@@ -29,6 +32,14 @@ export type VisualModeDragOverrides = {
     getDragOverrides: GetDragOverrides;
     getEffectDragOverrides: GetEffectDragOverrides;
 };
+type DragOverridesSubscription = {
+    manager: SequenceManagerActions;
+    subscribe: (key: string | null, listener: () => void) => () => void;
+    getSnapshot: (key: string | null) => Record<string, DragOverrideValue>;
+    subscribeEffects: (key: string | null, listener: () => void) => () => void;
+    getEffectSnapshot: (key: string | null) => Record<string, Record<string, DragOverrideValue>>;
+};
+export declare const VisualModeDragOverridesSubscriptionContext: React.Context<DragOverridesSubscription | null>;
 export type SequencePropsStatusRemapping = {
     previousNodePath: SequencePropsSubscriptionKey;
     nodePath: SequencePropsSubscriptionKey | null;
@@ -42,6 +53,19 @@ export type VisualModeSetters = {
     setPropStatuses: (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
     remapPropStatuses: (remappings: readonly SequencePropsStatusRemapping[]) => void;
 };
+export type VisualModeBatchSetters = {
+    setDragOverridesBatch: (overrides: readonly {
+        readonly nodePath: SequencePropsSubscriptionKey;
+        readonly key: string;
+        readonly value: DragOverrideValue;
+    }[]) => void;
+    setEffectDragOverridesBatch: (overrides: readonly {
+        readonly nodePath: SequencePropsSubscriptionKey;
+        readonly effectIndex: number;
+        readonly key: string;
+        readonly value: DragOverrideValue;
+    }[]) => void;
+};
 export type CanUpdateEffectPropsResponseTrue = {
     canUpdate: true;
     callee: string;
@@ -71,7 +95,11 @@ export declare const makeSequencePropsSubscriptionKey: (key: SequencePropsSubscr
 export declare const VisualModePropStatusesContext: React.Context<VisualModePropStatuses>;
 export declare const VisualModePropStatusesRefContext: React.Context<VisualModePropStatusesRef>;
 export declare const VisualModeDragOverridesContext: React.Context<VisualModeDragOverrides>;
+export declare const useDragOverridesForNodePath: (nodePath: SequencePropsSubscriptionKey | null) => Record<string, DragOverrideValue>;
+export declare const useActiveFromDragOverrideKeys: () => ReadonlySet<string>;
+export declare const useEffectDragOverridesForNodePath: (nodePath: SequencePropsSubscriptionKey | null, effectCount: number) => Record<string, Record<string, DragOverrideValue>>;
 export declare const VisualModeSettersContext: React.Context<VisualModeSetters>;
+export declare const VisualModeBatchSettersContext: React.Context<VisualModeBatchSetters | null>;
 export type SequencePropsSubscriptionKey = {
     absolutePath: string;
     nodePath: SequenceNodePath;

package/dist/cjs/SequenceManager.js

@@ -33,13 +33,14 @@ 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.DisableSequenceRegistrationProvider = exports.DisableSequenceRegistrationContext = exports.SequenceRegistrationContext = exports.SequenceManagerRefContext = exports.SequenceManager = void 0;
+exports.SequenceManagerProvider = exports.VisualModeBatchSettersContext = exports.VisualModeSettersContext = exports.useEffectDragOverridesForNodePath = exports.useActiveFromDragOverrideKeys = exports.useDragOverridesForNodePath = exports.VisualModeDragOverridesContext = exports.VisualModePropStatusesRefContext = exports.VisualModePropStatusesContext = exports.makeSequencePropsSubscriptionKey = exports.VisualModeDragOverridesSubscriptionContext = exports.DisableSequenceRegistrationProvider = exports.DisableSequenceRegistrationContext = exports.SequenceRegistrationContext = exports.SequenceManagerRefContext = exports.useSequenceManagerSequences = exports.SequenceManager = exports.SequenceManagerActionsContext = 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");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+const use_sync_external_store_js_1 = require("./use-sync-external-store.js");
 const useIsomorphicLayoutEffect = typeof window === 'undefined' ? react_1.default.useEffect : react_1.default.useLayoutEffect;
-exports.SequenceManager = react_1.default.createContext({
+const defaultSequenceManager = {
     registerSequence: () => {
         throw new Error('SequenceManagerContext not initialized');
     },
@@ -48,7 +49,31 @@ exports.SequenceManager = react_1.default.createContext({
         throw new Error('SequenceManagerContext not initialized');
     },
     sequences: [],
+};
+exports.SequenceManagerActionsContext = react_1.default.createContext({
+    registerSequence: defaultSequenceManager.registerSequence,
+    updateSequence: defaultSequenceManager.updateSequence,
+    unregisterSequence: defaultSequenceManager.unregisterSequence,
+});
+exports.SequenceManager = react_1.default.createContext(defaultSequenceManager);
+const NativeSequenceManagerProvider = exports.SequenceManager.Provider;
+const SequenceManagerProviderWithActions = ({ value, children }) => {
+    const actions = (0, react_1.useMemo)(() => ({
+        registerSequence: value.registerSequence,
+        updateSequence: value.updateSequence,
+        unregisterSequence: value.unregisterSequence,
+    }), [value.registerSequence, value.updateSequence, value.unregisterSequence]);
+    return (jsx_runtime_1.jsx(exports.SequenceManagerActionsContext.Provider, { value: actions, children: jsx_runtime_1.jsx(NativeSequenceManagerProvider, { value: value, children: children }) }));
+};
+// Keep custom SequenceManager.Provider trees in sync with the stable actions
+// context while preserving the legacy reactive sequence-list context.
+Object.defineProperty(exports.SequenceManager, 'Provider', {
+    value: SequenceManagerProviderWithActions,
 });
+const useSequenceManagerSequences = () => {
+    return (0, react_1.useContext)(exports.SequenceManager).sequences;
+};
+exports.useSequenceManagerSequences = useSequenceManagerSequences;
 exports.SequenceManagerRefContext = react_1.default.createContext({
     current: [],
 });
@@ -58,6 +83,17 @@ const DisableSequenceRegistrationProvider = ({ children }) => {
     return react_1.default.createElement(exports.DisableSequenceRegistrationContext.Provider, { value: true }, children);
 };
 exports.DisableSequenceRegistrationProvider = DisableSequenceRegistrationProvider;
+exports.VisualModeDragOverridesSubscriptionContext = react_1.default.createContext(null);
+const ActiveFromDragOverrideKeysContext = react_1.default.createContext(null);
+const SequenceManagerScopeProviders = ({ children, dragOverridesSubscription, fromKeys }) => {
+    const manager = (0, react_1.useContext)(exports.SequenceManagerActionsContext);
+    const scopedDragOverridesSubscription = (0, react_1.useMemo)(() => ({ ...dragOverridesSubscription, manager }), [dragOverridesSubscription, manager]);
+    const activeFromDragOverrideKeys = (0, react_1.useMemo)(() => ({ manager, keys: fromKeys }), [fromKeys, manager]);
+    return (jsx_runtime_1.jsx(ActiveFromDragOverrideKeysContext.Provider, { value: activeFromDragOverrideKeys, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesSubscriptionContext.Provider, { value: scopedDragOverridesSubscription, children: children }) }));
+};
+const emptyDragOverrides = {};
+const emptyFromOverrideKeys = new Set();
+const emptyEffectDragOverrides = {};
 const makeSequencePropsSubscriptionKey = (key) => {
     return `${key.absolutePath}\0${key.nodePath.join('.')}\0${key.sequenceKeys.join('.')}\0${key.effectKeys.map((keys) => keys.join('.')).join('.')}`;
 };
@@ -76,6 +112,67 @@ exports.VisualModeDragOverridesContext = react_1.default.createContext({
         throw new Error('VisualModeDragOverridesContext not initialized');
     },
 });
+/* eslint-disable react-hooks/rules-of-hooks */
+const useDragOverridesForNodePath = (nodePath) => {
+    const subscription = (0, react_1.useContext)(exports.VisualModeDragOverridesSubscriptionContext);
+    const manager = (0, react_1.useContext)(exports.SequenceManagerActionsContext);
+    const scopedSubscription = (subscription === null || subscription === void 0 ? void 0 : subscription.manager) === manager ? subscription : null;
+    // Legacy providers only supply VisualModeDragOverridesContext. Its presence is
+    // fixed for the lifetime of a mounted tree.
+    const legacy = scopedSubscription === null
+        ? (0, react_1.useContext)(exports.VisualModeDragOverridesContext)
+        : null;
+    const key = nodePath === null ? null : (0, exports.makeSequencePropsSubscriptionKey)(nodePath);
+    const subscribe = (0, react_1.useCallback)((listener) => {
+        var _a;
+        return (_a = scopedSubscription === null || scopedSubscription === void 0 ? void 0 : scopedSubscription.subscribe(key, listener)) !== null && _a !== void 0 ? _a : (() => undefined);
+    }, [key, scopedSubscription]);
+    const getSnapshot = (0, react_1.useCallback)(() => {
+        var _a;
+        return (_a = scopedSubscription === null || scopedSubscription === void 0 ? void 0 : scopedSubscription.getSnapshot(key)) !== null && _a !== void 0 ? _a : emptyDragOverrides;
+    }, [key, scopedSubscription]);
+    const overrides = (0, use_sync_external_store_js_1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+    return legacy !== null && nodePath !== null
+        ? legacy.getDragOverrides(nodePath)
+        : overrides;
+};
+exports.useDragOverridesForNodePath = useDragOverridesForNodePath;
+const useActiveFromDragOverrideKeys = () => {
+    const snapshot = (0, react_1.useContext)(ActiveFromDragOverrideKeysContext);
+    const manager = (0, react_1.useContext)(exports.SequenceManagerActionsContext);
+    return (snapshot === null || snapshot === void 0 ? void 0 : snapshot.manager) === manager ? snapshot.keys : emptyFromOverrideKeys;
+};
+exports.useActiveFromDragOverrideKeys = useActiveFromDragOverrideKeys;
+const useEffectDragOverridesForNodePath = (nodePath, effectCount) => {
+    const subscription = (0, react_1.useContext)(exports.VisualModeDragOverridesSubscriptionContext);
+    const manager = (0, react_1.useContext)(exports.SequenceManagerActionsContext);
+    const scopedSubscription = (subscription === null || subscription === void 0 ? void 0 : subscription.manager) === manager ? subscription : null;
+    // Legacy providers only supply VisualModeDragOverridesContext. Its presence is
+    // fixed for the lifetime of a mounted tree.
+    const legacy = scopedSubscription === null
+        ? (0, react_1.useContext)(exports.VisualModeDragOverridesContext)
+        : null;
+    const key = nodePath === null ? null : (0, exports.makeSequencePropsSubscriptionKey)(nodePath);
+    const subscribe = (0, react_1.useCallback)((listener) => {
+        var _a;
+        return (_a = scopedSubscription === null || scopedSubscription === void 0 ? void 0 : scopedSubscription.subscribeEffects(key, listener)) !== null && _a !== void 0 ? _a : (() => undefined);
+    }, [key, scopedSubscription]);
+    const getSnapshot = (0, react_1.useCallback)(() => {
+        var _a;
+        return (_a = scopedSubscription === null || scopedSubscription === void 0 ? void 0 : scopedSubscription.getEffectSnapshot(key)) !== null && _a !== void 0 ? _a : emptyEffectDragOverrides;
+    }, [key, scopedSubscription]);
+    const overrides = (0, use_sync_external_store_js_1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+    if (legacy !== null && nodePath !== null) {
+        const legacyOverrides = {};
+        for (let index = 0; index < effectCount; index++) {
+            legacyOverrides[index] = legacy.getEffectDragOverrides(nodePath, index);
+        }
+        return legacyOverrides;
+    }
+    return overrides;
+};
+exports.useEffectDragOverridesForNodePath = useEffectDragOverridesForNodePath;
+/* eslint-enable react-hooks/rules-of-hooks */
 exports.VisualModeSettersContext = react_1.default.createContext({
     setDragOverrides: () => {
         throw new Error('VisualModeSettersContext not initialized');
@@ -96,6 +193,7 @@ exports.VisualModeSettersContext = react_1.default.createContext({
         throw new Error('VisualModeSettersContext not initialized');
     },
 });
+exports.VisualModeBatchSettersContext = react_1.default.createContext(null);
 const effectDragOverridesKey = (nodePath, effectIndex) => `${(0, exports.makeSequencePropsSubscriptionKey)(nodePath)}.effects.${effectIndex}`;
 const SequenceManagerProvider = ({ children }) => {
     const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
@@ -105,45 +203,202 @@ const SequenceManagerProvider = ({ children }) => {
     const [sequences, setSequences] = (0, react_1.useState)([]);
     const sequencesRef = (0, react_1.useRef)(sequences);
     sequencesRef.current = sequences;
-    const [dragOverrides, setControlOverrides] = (0, react_1.useState)({});
-    const controlOverridesRef = (0, react_1.useRef)(dragOverrides);
-    controlOverridesRef.current = dragOverrides;
+    const [dragOverrideState, setDragOverrideState] = (0, react_1.useState)(() => ({
+        overrides: {},
+        fromKeys: new Set(),
+    }));
+    const dragOverrides = dragOverrideState.overrides;
+    const dragOverridesStore = (0, react_1.useRef)({
+        snapshot: dragOverrides,
+        listeners: new Map(),
+    });
     const [effectDragOverridesState, setEffectDragOverridesState] = (0, react_1.useState)({});
+    const effectDragOverridesStore = (0, react_1.useRef)({
+        snapshot: effectDragOverridesState,
+        byNode: new Map(),
+        listeners: new Map(),
+    });
     const [propStatuses, setPropStatusesMapState] = (0, react_1.useState)({});
     const propStatusesRef = (0, react_1.useRef)(propStatuses);
     propStatusesRef.current = propStatuses;
-    const setDragOverrides = (0, react_1.useCallback)((nodePath, key, value) => {
-        setControlOverrides((prev) => ({
-            ...prev,
-            [(0, exports.makeSequencePropsSubscriptionKey)(nodePath)]: {
-                ...prev[(0, exports.makeSequencePropsSubscriptionKey)(nodePath)],
-                [key]: value,
-            },
-        }));
+    const setDragOverridesBatch = (0, react_1.useCallback)((overrides) => {
+        setDragOverrideState((prevState) => {
+            var _a;
+            const prev = prevState.overrides;
+            let next = null;
+            let nextFromKeys = prevState.fromKeys;
+            for (const { nodePath, key, value } of overrides) {
+                const mapKey = (0, exports.makeSequencePropsSubscriptionKey)(nodePath);
+                const existing = (_a = (next !== null && next !== void 0 ? next : prev)[mapKey]) === null || _a === void 0 ? void 0 : _a[key];
+                if (existing === value ||
+                    ((existing === null || existing === void 0 ? void 0 : existing.type) === 'static' &&
+                        value.type === 'static' &&
+                        Object.is(existing.value, value.value))) {
+                    continue;
+                }
+                if (next === null) {
+                    next = { ...prev };
+                }
+                if (next[mapKey] === prev[mapKey]) {
+                    next[mapKey] = { ...prev[mapKey] };
+                }
+                next[mapKey][key] = value;
+                if (key === 'from' && !nextFromKeys.has(mapKey)) {
+                    nextFromKeys = new Set(nextFromKeys);
+                    nextFromKeys.add(mapKey);
+                }
+            }
+            return next === null
+                ? prevState
+                : { overrides: next, fromKeys: nextFromKeys };
+        });
     }, []);
+    const setDragOverrides = (0, react_1.useCallback)((nodePath, key, value) => setDragOverridesBatch([{ nodePath, key, value }]), [setDragOverridesBatch]);
+    const subscribeDragOverrides = (0, react_1.useCallback)((key, listener) => {
+        if (key === null) {
+            return () => undefined;
+        }
+        let listeners = dragOverridesStore.current.listeners.get(key);
+        if (!listeners) {
+            listeners = new Set();
+            dragOverridesStore.current.listeners.set(key, listeners);
+        }
+        listeners.add(listener);
+        return () => {
+            listeners.delete(listener);
+            if (listeners.size === 0) {
+                dragOverridesStore.current.listeners.delete(key);
+            }
+        };
+    }, []);
+    const getDragOverridesSnapshot = (0, react_1.useCallback)((key) => {
+        var _a;
+        return key === null
+            ? emptyDragOverrides
+            : ((_a = dragOverridesStore.current.snapshot[key]) !== null && _a !== void 0 ? _a : emptyDragOverrides);
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+        var _a;
+        const previous = dragOverridesStore.current.snapshot;
+        dragOverridesStore.current.snapshot = dragOverrides;
+        for (const key of new Set([
+            ...Object.keys(previous),
+            ...Object.keys(dragOverrides),
+        ])) {
+            if (previous[key] !== dragOverrides[key]) {
+                for (const listener of (_a = dragOverridesStore.current.listeners.get(key)) !== null && _a !== void 0 ? _a : []) {
+                    listener();
+                }
+            }
+        }
+    }, [dragOverrides]);
+    const subscribeEffectDragOverrides = (0, react_1.useCallback)((key, listener) => {
+        if (key === null) {
+            return () => undefined;
+        }
+        let listeners = effectDragOverridesStore.current.listeners.get(key);
+        if (!listeners) {
+            listeners = new Set();
+            effectDragOverridesStore.current.listeners.set(key, listeners);
+        }
+        listeners.add(listener);
+        return () => {
+            listeners.delete(listener);
+            if (listeners.size === 0) {
+                effectDragOverridesStore.current.listeners.delete(key);
+            }
+        };
+    }, []);
+    const getEffectDragOverridesSnapshot = (0, react_1.useCallback)((key) => {
+        var _a;
+        return key === null
+            ? emptyEffectDragOverrides
+            : ((_a = effectDragOverridesStore.current.byNode.get(key)) !== null && _a !== void 0 ? _a : emptyEffectDragOverrides);
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+        var _a;
+        const previous = effectDragOverridesStore.current.snapshot;
+        const byNode = new Map(effectDragOverridesStore.current.byNode);
+        const changedNodes = new Set();
+        for (const flatKey of new Set([
+            ...Object.keys(previous),
+            ...Object.keys(effectDragOverridesState),
+        ])) {
+            if (previous[flatKey] === effectDragOverridesState[flatKey]) {
+                continue;
+            }
+            const separator = flatKey.lastIndexOf('.effects.');
+            if (separator === -1) {
+                throw new Error('Invalid effect drag override key');
+            }
+            const nodeKey = flatKey.slice(0, separator);
+            const effectIndex = flatKey.slice(separator + '.effects.'.length);
+            if (!changedNodes.has(nodeKey)) {
+                byNode.set(nodeKey, { ...byNode.get(nodeKey) });
+                changedNodes.add(nodeKey);
+            }
+            const next = byNode.get(nodeKey);
+            if (effectDragOverridesState[flatKey] === undefined) {
+                delete next[effectIndex];
+            }
+            else {
+                next[effectIndex] = effectDragOverridesState[flatKey];
+            }
+        }
+        for (const nodeKey of changedNodes) {
+            if (Object.keys(byNode.get(nodeKey)).length === 0) {
+                byNode.delete(nodeKey);
+            }
+        }
+        effectDragOverridesStore.current.snapshot = effectDragOverridesState;
+        effectDragOverridesStore.current.byNode = byNode;
+        for (const nodeKey of changedNodes) {
+            for (const listener of (_a = effectDragOverridesStore.current.listeners.get(nodeKey)) !== null && _a !== void 0 ? _a : []) {
+                listener();
+            }
+        }
+    }, [effectDragOverridesState]);
     const clearDragOverrides = (0, react_1.useCallback)((nodePath) => {
-        setControlOverrides((prev) => {
+        setDragOverrideState((prevState) => {
+            const prev = prevState.overrides;
             const key = (0, exports.makeSequencePropsSubscriptionKey)(nodePath);
             if (!prev[key]) {
-                return prev;
+                return prevState;
             }
             const next = { ...prev };
             delete next[key];
-            return next;
+            const nextFromKeys = prevState.fromKeys.has(key)
+                ? new Set(prevState.fromKeys)
+                : prevState.fromKeys;
+            nextFromKeys.delete(key);
+            return { overrides: next, fromKeys: nextFromKeys };
         });
     }, []);
-    const setEffectDragOverrides = (0, react_1.useCallback)((nodePath, effectIndex, key, value) => {
+    const setEffectDragOverridesBatch = (0, react_1.useCallback)((overrides) => {
         setEffectDragOverridesState((prev) => {
-            const mapKey = effectDragOverridesKey(nodePath, effectIndex);
-            return {
-                ...prev,
-                [mapKey]: {
-                    ...prev[mapKey],
-                    [key]: value,
-                },
-            };
+            var _a;
+            let next = null;
+            for (const { nodePath, effectIndex, key, value } of overrides) {
+                const mapKey = effectDragOverridesKey(nodePath, effectIndex);
+                const existing = (_a = (next !== null && next !== void 0 ? next : prev)[mapKey]) === null || _a === void 0 ? void 0 : _a[key];
+                if (existing === value ||
+                    ((existing === null || existing === void 0 ? void 0 : existing.type) === 'static' &&
+                        value.type === 'static' &&
+                        Object.is(existing.value, value.value))) {
+                    continue;
+                }
+                if (next === null) {
+                    next = { ...prev };
+                }
+                if (next[mapKey] === prev[mapKey]) {
+                    next[mapKey] = { ...prev[mapKey] };
+                }
+                next[mapKey][key] = value;
+            }
+            return next !== null && next !== void 0 ? next : prev;
         });
     }, []);
+    const setEffectDragOverrides = (0, react_1.useCallback)((nodePath, effectIndex, key, value) => setEffectDragOverridesBatch([{ nodePath, effectIndex, key, value }]), [setEffectDragOverridesBatch]);
     const clearEffectDragOverrides = (0, react_1.useCallback)((nodePath, effectIndex) => {
         setEffectDragOverridesState((prev) => {
             const mapKey = effectDragOverridesKey(nodePath, effectIndex);
@@ -269,6 +524,17 @@ const SequenceManagerProvider = ({ children }) => {
             unregisterSequence,
         };
     }, [registerSequence, sequences, unregisterSequence, updateSequence]);
+    const dragOverridesSubscription = (0, react_1.useMemo)(() => ({
+        subscribe: subscribeDragOverrides,
+        getSnapshot: getDragOverridesSnapshot,
+        subscribeEffects: subscribeEffectDragOverrides,
+        getEffectSnapshot: getEffectDragOverridesSnapshot,
+    }), [
+        getDragOverridesSnapshot,
+        getEffectDragOverridesSnapshot,
+        subscribeDragOverrides,
+        subscribeEffectDragOverrides,
+    ]);
     const getDragOverrides = (0, react_1.useCallback)((nodePath) => {
         var _a;
         return (_a = dragOverrides[(0, exports.makeSequencePropsSubscriptionKey)(nodePath)]) !== null && _a !== void 0 ? _a : {};
@@ -305,7 +571,8 @@ const SequenceManagerProvider = ({ children }) => {
         setPropStatuses,
         remapPropStatuses,
     ]);
-    const providers = (jsx_runtime_1.jsx(exports.SequenceManagerRefContext.Provider, { value: sequencesRef, children: jsx_runtime_1.jsx(exports.SequenceManager.Provider, { value: sequenceContext, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesRefContext.Provider, { value: propStatusesRef, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesContext.Provider, { value: propStatusesContext, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesContext.Provider, { value: dragOverridesContext, children: jsx_runtime_1.jsx(exports.VisualModeSettersContext.Provider, { value: settersContext, children: children }) }) }) }) }) }));
+    const batchSettersContext = (0, react_1.useMemo)(() => ({ setDragOverridesBatch, setEffectDragOverridesBatch }), [setDragOverridesBatch, setEffectDragOverridesBatch]);
+    const providers = (jsx_runtime_1.jsx(exports.SequenceManagerRefContext.Provider, { value: sequencesRef, children: jsx_runtime_1.jsx(exports.SequenceManager.Provider, { value: sequenceContext, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesRefContext.Provider, { value: propStatusesRef, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesContext.Provider, { value: propStatusesContext, children: jsx_runtime_1.jsx(SequenceManagerScopeProviders, { dragOverridesSubscription: dragOverridesSubscription, fromKeys: dragOverrideState.fromKeys, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesContext.Provider, { value: dragOverridesContext, children: jsx_runtime_1.jsx(exports.VisualModeSettersContext.Provider, { value: settersContext, children: jsx_runtime_1.jsx(exports.VisualModeBatchSettersContext.Provider, { value: batchSettersContext, children: children }) }) }) }) }) }) }) }));
     return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceManagerOrderMarker, { managerId: sequenceManagerId, children: providers })) : (providers);
 };
 exports.SequenceManagerProvider = SequenceManagerProvider;

package/dist/cjs/effects/use-memoized-effects.js

@@ -8,6 +8,7 @@ const runtime_value_store_js_1 = require("../runtime-value-store.js");
 const sequence_node_path_js_1 = require("../sequence-node-path.js");
 const SequenceManager_js_1 = require("../SequenceManager.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
+const emptyDragOverrides = {};
 const mergeOverrides = ({ descriptor, propStatusOverrides, dragOverrides, frame, }) => {
     if (!propStatusOverrides && !dragOverrides) {
         return { params: descriptor.params, effectKey: descriptor.effectKey };
@@ -123,14 +124,15 @@ const useMemoizedEffects = ({ effects, overrideId, }) => {
     var _a;
     const previousRef = (0, react_1.useRef)(null);
     const { propStatuses } = (0, react_1.useContext)(SequenceManager_js_1.VisualModePropStatusesContext);
-    const { getEffectDragOverrides } = (0, react_1.useContext)(SequenceManager_js_1.VisualModeDragOverridesContext);
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(sequence_node_path_js_1.OverrideIdsToNodePathsGettersContext);
     const previous = previousRef.current;
     const nodePath = overrideId
         ? ((_a = overrideIdToNodePathMappings[overrideId]) !== null && _a !== void 0 ? _a : null)
         : null;
+    const effectDragOverrides = (0, SequenceManager_js_1.useEffectDragOverridesForNodePath)(nodePath, effects.length);
     const resolved = effects.map((descriptor, index) => {
+        var _a;
         if (nodePath === null) {
             return {
                 descriptor,
@@ -146,7 +148,7 @@ const useMemoizedEffects = ({ effects, overrideId, }) => {
         const propStatusOverrides = effectStatus.type === 'can-update-effect'
             ? resolvePropStatusOverrides(effectStatus.props, frame)
             : null;
-        const dragOverridesMap = getEffectDragOverrides(nodePath, index);
+        const dragOverridesMap = (_a = effectDragOverrides[index]) !== null && _a !== void 0 ? _a : emptyDragOverrides;
         const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
         const { params, effectKey } = mergeOverrides({
             descriptor,