@remotion/studio 4.0.459 → 4.0.461

package/dist/components/Timeline/Timeline.js

@@ -40,16 +40,17 @@ const remotion_1 = require("remotion");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
-const timeline_layout_1 = require("../../helpers/timeline-layout");
-const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
 const SplitterElement_1 = require("../Splitter/SplitterElement");
 const SplitterHandle_1 = require("../Splitter/SplitterHandle");
 const is_collapsed_1 = require("./is-collapsed");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
+const SequencePropsObserver_1 = require("./SequencePropsObserver");
+const SubscribeToNodePaths_1 = require("./SubscribeToNodePaths");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
+const TimelineHeightContainer_1 = require("./TimelineHeightContainer");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
 const TimelineList_1 = require("./TimelineList");
 const TimelinePinchZoom_1 = require("./TimelinePinchZoom");
@@ -71,12 +72,10 @@ const noop = () => undefined;
 const TimelineInner = () => {
     var _a;
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
-    const { expandedTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
-    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { dragOverrides, codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
-    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
-        previewServerState.type === 'connected';
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const previewConnected = previewServerState.type === 'connected';
     const videoConfigIsNull = videoConfig === null;
     const timeline = (0, react_1.useMemo)(() => {
         if (videoConfigIsNull) {
@@ -84,52 +83,34 @@ const TimelineInner = () => {
         }
         return (0, calculate_timeline_1.calculateTimeline)({
             sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
         });
-    }, [sequences, videoConfigIsNull]);
+    }, [sequences, videoConfigIsNull, overrideIdToNodePathMappings]);
     const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
     const filtered = (0, react_1.useMemo)(() => {
-        const withoutHidden = timeline.filter((t) => !(0, is_collapsed_1.isTrackHidden)(t));
-        const withoutAfter = withoutHidden.filter((t) => {
-            return t.sequence.from <= durationInFrames && t.sequence.duration > 0;
-        });
-        return withoutAfter.filter((t) => t.sequence.showInTimeline);
+        return timeline.filter((t) => !(0, is_collapsed_1.isTrackHidden)(t) &&
+            t.sequence.from <= durationInFrames &&
+            t.sequence.duration > 0 &&
+            t.sequence.showInTimeline);
     }, [durationInFrames, timeline]);
-    const shown = filtered.slice(0, MaxTimelineTracks_1.MAX_TIMELINE_TRACKS);
+    const shown = (0, react_1.useMemo)(() => {
+        return filtered.length > MaxTimelineTracks_1.MAX_TIMELINE_TRACKS
+            ? filtered.slice(0, MaxTimelineTracks_1.MAX_TIMELINE_TRACKS)
+            : filtered;
+    }, [filtered]);
     const hasBeenCut = filtered.length > shown.length;
-    const inner = (0, react_1.useMemo)(() => {
-        return {
-            height: shown.reduce((acc, track) => {
-                var _a;
-                const isExpanded = visualModeEnabled && ((_a = expandedTracks[track.sequence.id]) !== null && _a !== void 0 ? _a : false);
-                return (acc +
-                    (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type) +
-                    Number(timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM) +
-                    (isExpanded
-                        ? (0, timeline_layout_1.getExpandedTrackHeight)(track.sequence, expandedTracks, dragOverrides, codeValues) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
-                        : 0));
-            }, 0) +
-                timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
-                (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
-                TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
-            display: 'flex',
-            flex: 1,
-            minHeight: '100%',
-            overflowX: 'hidden',
-        };
-    }, [
-        hasBeenCut,
-        shown,
-        expandedTracks,
-        visualModeEnabled,
-        codeValues,
-        dragOverrides,
-    ]);
-    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
-                jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsx("div", { style: inner, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
-                            jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
-                                        jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
-                                    ] }) })
-                        ] }) })
-            ] }) }));
+    return (jsx_runtime_1.jsxs("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [sequences.map((sequence) => {
+                if (!sequence.controls || !previewConnected || !sequence.stack) {
+                    return null;
+                }
+                return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, schema: sequence.controls.schema, stack: sequence.stack }, sequence.id));
+            }), jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
+                    jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
+                                jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
+                                            jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
+                                        ] }) })
+                            ] }) })
+                ] })
+        ] }));
 };
 exports.Timeline = react_1.default.memo(TimelineInner);

package/dist/components/Timeline/TimelineBooleanField.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineBooleanField: React.FC<{
     readonly field: SchemaFieldInfo;
-    readonly codeValue: unknown;
+    readonly propStatus: CanUpdateSequencePropStatus;
     readonly effectiveValue: unknown;
-    readonly canUpdate: boolean;
-    readonly onSave: (key: string, value: unknown) => Promise<void>;
+    readonly onSave: TimelineFieldOnSave;
 }>;

package/dist/components/Timeline/TimelineBooleanField.js

@@ -7,14 +7,14 @@ const Checkbox_1 = require("../Checkbox");
 const checkboxContainer = {
     marginLeft: 8,
 };
-const TimelineBooleanField = ({ field, codeValue, effectiveValue, canUpdate, onSave }) => {
+const TimelineBooleanField = ({ field, propStatus, effectiveValue, onSave }) => {
     const checked = Boolean(effectiveValue);
     const onChange = (0, react_1.useCallback)(() => {
         const newValue = !checked;
-        if (canUpdate && newValue !== codeValue) {
-            onSave(field.key, newValue);
+        if (propStatus.canUpdate && newValue !== propStatus.codeValue) {
+            onSave(newValue);
         }
-    }, [canUpdate, onSave, field.key, checked, codeValue]);
-    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: !canUpdate }) }));
+    }, [propStatus, onSave, checked]);
+    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: !propStatus.canUpdate, variant: "small" }) }));
 };
 exports.TimelineBooleanField = TimelineBooleanField;

package/dist/components/Timeline/TimelineDragHandler.js

@@ -1,9 +1,42 @@
 "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.TimelineDragHandler = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -59,10 +92,10 @@ const TimelineDragHandler = () => {
     if (!canvasContent || canvasContent.type !== 'composition') {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, children: video ? jsx_runtime_1.jsx(Inner, {}) : null }));
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.sliderAreaRef, style: containerStyle, children: video ? jsx_runtime_1.jsx(TimelineDragHandlerInnerMemo, {}) : null }));
 };
 exports.TimelineDragHandler = TimelineDragHandler;
-const Inner = () => {
+const TimelineDragHandlerInner = () => {
     var _a;
     var _b, _c;
     const videoConfig = (0, remotion_1.useVideoConfig)();
@@ -470,3 +503,4 @@ const Inner = () => {
     return (jsx_runtime_1.jsxs("div", { style: style, onPointerDown: onPointerDown, children: [
             jsx_runtime_1.jsx("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }), inFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: inContextMenu, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' }) })), outFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: outContextMenu, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }) }))] }));
 };
+const TimelineDragHandlerInnerMemo = react_1.default.memo(TimelineDragHandlerInner);

package/dist/components/Timeline/TimelineEnumField.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineEnumField: React.FC<{
     readonly field: SchemaFieldInfo;
-    readonly codeValue: unknown;
+    readonly propStatus: CanUpdateSequencePropStatus;
     readonly effectiveValue: unknown;
-    readonly canUpdate: boolean;
-    readonly onSave: (key: string, value: unknown) => Promise<void>;
-    readonly onDragValueChange: (key: string, value: unknown) => void;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;
 }>;

package/dist/components/Timeline/TimelineEnumField.js

@@ -3,32 +3,40 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineEnumField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const selectStyle = {
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const comboboxStyle = {
     marginLeft: 8,
-    background: 'transparent',
-    color: 'white',
-    border: '1px solid rgba(255, 255, 255, 0.2)',
-    borderRadius: 3,
-    fontSize: 12,
-    padding: '1px 4px',
 };
-const TimelineEnumField = ({ field, codeValue, effectiveValue, canUpdate, onSave, onDragValueChange, onDragEnd, }) => {
+const TimelineEnumField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
     const { fieldSchema } = field;
     if (fieldSchema.type !== 'enum') {
         throw new Error('TimelineEnumField rendered for non-enum field');
     }
     const variantKeys = Object.keys(fieldSchema.variants);
     const current = String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : fieldSchema.default);
-    const onChange = (0, react_1.useCallback)((e) => {
-        const newValue = e.target.value;
-        if (!canUpdate || newValue === codeValue) {
+    const onSelect = (0, react_1.useCallback)((newValue) => {
+        if (!propStatus.canUpdate || newValue === propStatus.codeValue) {
             return;
         }
-        onDragValueChange(field.key, newValue);
-        onSave(field.key, newValue).finally(() => {
+        onDragValueChange(newValue);
+        onSave(newValue).finally(() => {
             onDragEnd();
         });
-    }, [canUpdate, codeValue, field.key, onSave, onDragValueChange, onDragEnd]);
-    return (jsx_runtime_1.jsx("select", { disabled: !canUpdate, value: current, onChange: onChange, style: selectStyle, children: variantKeys.map((key) => (jsx_runtime_1.jsx("option", { value: key, children: key }, key))) }));
+    }, [propStatus, onSave, onDragValueChange, onDragEnd]);
+    const items = (0, react_1.useMemo)(() => {
+        return variantKeys.map((key) => ({
+            type: 'item',
+            id: key,
+            value: key,
+            label: key,
+            onClick: () => onSelect(key),
+            keyHint: null,
+            leftItem: null,
+            subMenu: null,
+            quickSwitcherLabel: null,
+            disabled: !propStatus.canUpdate,
+        }));
+    }, [variantKeys, onSelect, propStatus]);
+    return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { small: true, title: field.key, selectedId: current, values: items, style: comboboxStyle }));
 };
 exports.TimelineEnumField = TimelineEnumField;

package/dist/components/Timeline/TimelineExpandArrowButton.d.ts

@@ -3,5 +3,6 @@ export declare const TimelineExpandArrowButton: React.FC<{
     readonly isExpanded: boolean;
     readonly onClick: () => void;
     readonly label: string;
+    readonly disabled: boolean;
 }>;
 export declare const TimelineExpandArrowSpacer: React.FC;

package/dist/components/Timeline/TimelineExpandArrowButton.js

@@ -22,14 +22,16 @@ const arrowButton = {
     lineHeight: 1,
 };
 const svgStyle = { display: 'block' };
-const TimelineExpandArrowButton = ({ isExpanded, onClick, label }) => {
+const TimelineExpandArrowButton = ({ isExpanded, onClick, label, disabled = false }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
             ...arrowButton,
             transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+            cursor: disabled ? 'default' : 'pointer',
+            opacity: disabled ? 0.5 : 1,
         };
-    }, [isExpanded]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: onClick, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) }));
+    }, [isExpanded, disabled]);
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: onClick, disabled: disabled, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${label}`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "#ccc" }) }) }));
 };
 exports.TimelineExpandArrowButton = TimelineExpandArrowButton;
 const TimelineExpandArrowSpacer = () => {

package/dist/components/Timeline/TimelineExpandedRow.d.ts

@@ -1,16 +1,16 @@
-import type { SequenceNodePath } from '@remotion/studio-shared';
 import React from 'react';
-import type { SequenceSchema } from 'remotion';
+import type { SequenceSchema, SequenceNodePath } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { TimelineTreeNode } from '../../helpers/timeline-layout';
+import type { GetIsExpanded } from '../ExpandedTracksProvider';
 export declare const TimelineExpandedRow: React.FC<{
     readonly node: TimelineTreeNode;
     readonly depth: number;
     readonly nestedDepth: number;
-    readonly expandedTracks: Record<string, boolean>;
-    readonly toggleTrack: (id: string) => void;
-    readonly overrideId: string;
+    readonly getIsExpanded: GetIsExpanded;
+    readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
     readonly validatedLocation: CodePosition | null;
-    readonly nodePath: SequenceNodePath | null;
+    readonly nodePath: SequenceNodePath;
     readonly schema: SequenceSchema;
 }>;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -24,8 +24,7 @@ const labelOnlyRowBase = {
     alignItems: 'center',
     paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
 };
-const TimelineExpandedRow = ({ node, depth, nestedDepth, expandedTracks, toggleTrack, overrideId, validatedLocation, nodePath, schema, }) => {
-    var _a;
+const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, }) => {
     const paddingLeft = timeline_layout_1.EXPANDED_SECTION_PADDING_LEFT + depth * TimelineListItem_1.INDENT;
     const groupStyle = (0, react_1.useMemo)(() => ({ ...groupRowBase, paddingLeft }), [paddingLeft]);
     const labelOnlyStyle = (0, react_1.useMemo)(() => ({
@@ -34,13 +33,13 @@ const TimelineExpandedRow = ({ node, depth, nestedDepth, expandedTracks, toggleT
         paddingLeft,
     }), [node, paddingLeft]);
     if (node.kind === 'group') {
-        const isExpanded = (_a = expandedTracks[node.id]) !== null && _a !== void 0 ? _a : false;
+        const isExpanded = getIsExpanded(node.nodePathInfo);
         return (jsx_runtime_1.jsxs("div", { style: groupStyle, children: [
-                jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.id), label: `${node.label} section` }), jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label })
+                jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label })
             ] }));
     }
     if (node.field) {
-        return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, overrideId: overrideId, validatedLocation: validatedLocation, paddingLeft: paddingLeft, nestedDepth: nestedDepth, nodePath: nodePath, schema: schema }));
+        return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, validatedLocation: validatedLocation, paddingLeft: paddingLeft, nestedDepth: nestedDepth, nodePath: nodePath, schema: schema }));
     }
     return (jsx_runtime_1.jsxs("div", { style: labelOnlyStyle, children: [
             jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label })

package/dist/components/Timeline/TimelineExpandedSection.d.ts

@@ -1,10 +1,10 @@
-import type { SequenceNodePath } from '@remotion/studio-shared';
 import React from 'react';
 import { type TSequence } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineExpandedSection: React.FC<{
     readonly sequence: TSequence;
     readonly originalLocation: OriginalPosition | null;
-    readonly nodePath: SequenceNodePath | null;
+    readonly nodePathInfo: SequenceNodePathInfo;
     readonly nestedDepth: number;
 }>;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -53,10 +53,11 @@ const separator = {
     height: 1,
     backgroundColor: colors_1.TIMELINE_TRACK_SEPARATOR,
 };
-const TimelineExpandedSection = ({ sequence, originalLocation, nodePath, nestedDepth }) => {
-    const { expandedTracks, toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
-    const { dragOverrides, codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
-    const { overrideId } = sequence.controls;
+const TimelineExpandedSection = ({ sequence, originalLocation, nodePathInfo, nestedDepth }) => {
+    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
+    const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
+    const { getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -70,9 +71,19 @@ const TimelineExpandedSection = ({ sequence, originalLocation, nodePath, nestedD
             column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
         };
     }, [originalLocation]);
-    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({ sequence, dragOverrides, codeValues }), [sequence, dragOverrides, codeValues]);
-    const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: tree, expandedTracks }), [tree, expandedTracks]);
-    const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)(sequence, expandedTracks, dragOverrides, codeValues), [sequence, expandedTracks, dragOverrides, codeValues]);
+    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
+        sequence,
+        nodePathInfo,
+        getDragOverrides,
+        getCodeValues,
+    }), [sequence, nodePathInfo, getDragOverrides, getCodeValues]);
+    const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded }), [tree, getIsExpanded]);
+    const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)({
+        sequence,
+        nodePathInfo,
+        getIsExpanded,
+        getCodeValues,
+    }), [sequence, nodePathInfo, getIsExpanded, getCodeValues]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...expandedSectionBase,
@@ -84,8 +95,8 @@ const TimelineExpandedSection = ({ sequence, originalLocation, nodePath, nestedD
         return jsx_runtime_1.jsx("div", { style: style, children: "No schema" });
     }
     return (jsx_runtime_1.jsx("div", { style: style, children: flat.map(({ node, depth }, i) => {
-            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, expandedTracks: expandedTracks, toggleTrack: toggleTrack, overrideId: overrideId, validatedLocation: validatedLocation, nodePath: nodePath, schema: schema })
-                ] }, node.id));
+            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.nodePath, schema: schema })
+                ] }, JSON.stringify(node.nodePathInfo)));
         }) }));
 };
 exports.TimelineExpandedSection = TimelineExpandedSection;

package/dist/components/Timeline/TimelineFieldRow.d.ts

@@ -1,14 +1,13 @@
-import type { SequenceNodePath } from '@remotion/studio-shared';
 import React from 'react';
+import type { SequenceNodePath } from 'remotion';
 import type { SequenceSchema } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
 export declare const TimelineFieldRow: React.FC<{
     readonly field: SchemaFieldInfo;
-    readonly overrideId: string;
     readonly validatedLocation: CodePosition | null;
     readonly paddingLeft: number;
     readonly nestedDepth: number;
-    readonly nodePath: SequenceNodePath | null;
+    readonly nodePath: SequenceNodePath;
     readonly schema: SequenceSchema;
 }>;

package/dist/components/Timeline/TimelineFieldRow.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -26,15 +27,22 @@ const fieldLabelRow = {
     alignItems: 'center',
     gap: 6,
 };
-const TimelineFieldRow = ({ field, overrideId, validatedLocation, paddingLeft, nestedDepth, nodePath, schema, }) => {
-    var _a, _b, _c, _d;
-    const { setDragOverrides, clearDragOverrides, dragOverrides, codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
-    const codeValuesForOverride = (_a = codeValues[overrideId]) !== null && _a !== void 0 ? _a : null;
-    const codeValue = (_b = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride[field.key]) !== null && _b !== void 0 ? _b : null;
+const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth, nodePath, schema, }) => {
+    var _a, _b;
+    const { getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const codeValuesForOverride = getCodeValues(nodePath);
+    const codeValue = (_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
+    if (codeValue === null) {
+        throw new Error('Unexpectedly got null code value for field' + field.key);
+    }
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         var _a;
-        return ((_a = dragOverrides[overrideId]) !== null && _a !== void 0 ? _a : {})[field.key];
-    }, [dragOverrides, overrideId, field.key]);
+        return nodePath === null
+            ? undefined
+            : ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[field.key];
+    }, [getDragOverrides, nodePath, field.key]);
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
         codeValue,
         runtimeValue: field.currentRuntimeValue,
@@ -42,52 +50,80 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation, paddingLeft, n
         defaultValue: field.fieldSchema.default,
         shouldResortToDefaultValueIfUndefined: true,
     });
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
-    const onSave = (0, react_1.useCallback)((key, value) => {
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const onSave = (0, react_1.useCallback)((value) => {
         if (!codeValuesForOverride || !validatedLocation || !nodePath) {
             return Promise.reject(new Error('Cannot save'));
         }
-        const status = codeValuesForOverride[key];
-        if (!status || !status.canUpdate) {
+        if (!codeValue || !codeValue.canUpdate) {
             return Promise.reject(new Error('Cannot save'));
         }
         const defaultValue = field.fieldSchema.default !== undefined
             ? JSON.stringify(field.fieldSchema.default)
             : null;
+        const stringifiedValue = JSON.stringify(value);
+        if (value === codeValue.codeValue) {
+            return Promise.resolve();
+        }
+        if (defaultValue === stringifiedValue &&
+            codeValue.codeValue === undefined) {
+            return Promise.resolve();
+        }
+        let previousUpdate;
+        // Optimistic update to prevent flicker
+        setCodeValues(nodePath, (prev) => {
+            previousUpdate = prev;
+            return (0, studio_shared_1.optimisticUpdateForCodeValues)({
+                previous: prev,
+                fieldKey: field.key,
+                value,
+                schema,
+            });
+        });
         return (0, call_api_1.callApi)('/api/save-sequence-props', {
             fileName: validatedLocation.source,
             nodePath,
-            key,
-            value: JSON.stringify(value),
+            key: field.key,
+            value: stringifiedValue,
             defaultValue,
             schema,
-        }).then((data) => {
-            if (data.success) {
-                if (data.newStatus.canUpdate) {
-                    setCodeValues(overrideId, data.newStatus.props);
-                }
-                else {
-                    setCodeValues(overrideId, null);
-                }
-                return;
+        })
+            .then((data) => {
+            setCodeValues(nodePath, () => data);
+        })
+            .catch(() => {
+            // In case something went wrong, undo optimistic update
+            if (previousUpdate) {
+                setCodeValues(nodePath, (current) => {
+                    if (previousUpdate) {
+                        return previousUpdate;
+                    }
+                    return current;
+                });
             }
-            return Promise.reject(new Error(data.reason));
         });
     }, [
+        codeValue,
         codeValuesForOverride,
         field.fieldSchema.default,
+        field.key,
         nodePath,
-        overrideId,
         schema,
         setCodeValues,
         validatedLocation,
     ]);
-    const onDragValueChange = (0, react_1.useCallback)((key, value) => {
-        setDragOverrides(overrideId, key, value);
-    }, [setDragOverrides, overrideId]);
+    const onDragValueChange = (0, react_1.useCallback)((value) => {
+        if (nodePath === null) {
+            throw new Error('Cannot drag value');
+        }
+        setDragOverrides(nodePath, field.key, value);
+    }, [setDragOverrides, nodePath, field.key]);
     const onDragEnd = (0, react_1.useCallback)(() => {
-        clearDragOverrides(overrideId);
-    }, [clearDragOverrides, overrideId]);
+        if (nodePath === null) {
+            throw new Error('Cannot clear drag value');
+        }
+        clearDragOverrides(nodePath);
+    }, [clearDragOverrides, nodePath]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,
@@ -96,7 +132,7 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation, paddingLeft, n
         };
     }, [field.rowHeight, paddingLeft]);
     return (jsx_runtime_1.jsxs("div", { style: style, children: [
-            jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_d = codeValue === null || codeValue === void 0 ? void 0 : codeValue.canUpdate) !== null && _d !== void 0 ? _d : false, effectiveValue: effectiveValue, codeValue: codeValue })
+            jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth + 1 }), jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue })
         ] }));
 };
 exports.TimelineFieldRow = TimelineFieldRow;

package/dist/components/Timeline/TimelineHeightContainer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TimelineHeightContainer: React.NamedExoticComponent<{
+    readonly shown: TrackWithHash[];
+    readonly hasBeenCut: boolean;
+    readonly children: React.ReactNode;
+}>;