@remotion/studio 4.0.457 → 4.0.459

package/dist/components/FramePersistor.js

@@ -11,7 +11,7 @@ const FramePersistor = () => {
     (0, react_1.useEffect)(() => {
         if (!playing) {
             setFrame((f) => {
-                const newObj = { ...f, [config.id]: frame };
+                const newObj = f[config.id] === frame ? f : { ...f, [config.id]: frame };
                 remotion_1.Internals.persistCurrentFrame(newObj);
                 return newObj;
             });

package/dist/components/PlaybackRatePersistor.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const playbackrate_1 = require("../state/playbackrate");
 const PlaybackRatePersistor = () => {
-    const { setPlaybackRate, playbackRate } = remotion_1.Internals.useTimelineContext();
+    const { setPlaybackRate, playbackRate } = remotion_1.Internals.usePlaybackRate();
     (0, react_1.useEffect)(() => {
         setPlaybackRate((0, playbackrate_1.loadPlaybackRate)());
     }, [setPlaybackRate]);

package/dist/components/PreviewToolbar.js

@@ -73,7 +73,7 @@ const padding = {
     width: timeline_layout_1.TIMELINE_PADDING,
 };
 const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
-    const { playbackRate, setPlaybackRate } = remotion_1.Internals.useTimelineContext();
+    const { playbackRate, setPlaybackRate } = remotion_1.Internals.usePlaybackRate();
     const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     const { setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const Padder: React.FC<{
+    readonly depth: number;
+}>;

package/dist/components/Timeline/Padder.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Padder = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TimelineListItem_1 = require("./TimelineListItem");
+const Padder = ({ depth }) => {
+    const style = (0, react_1.useMemo)(() => ({
+        width: TimelineListItem_1.INDENT * depth,
+        flexShrink: 0,
+    }), [depth]);
+    return jsx_runtime_1.jsx("div", { style: style });
+};
+exports.Padder = Padder;

package/dist/components/Timeline/Timeline.js

@@ -73,6 +73,7 @@ const TimelineInner = () => {
     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();
@@ -104,8 +105,7 @@ const TimelineInner = () => {
                     (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) +
-                            timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
+                        ? (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 +
@@ -116,7 +116,14 @@ const TimelineInner = () => {
             minHeight: '100%',
             overflowX: 'hidden',
         };
-    }, [hasBeenCut, shown, expandedTracks, visualModeEnabled]);
+    }, [
+        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: [

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

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

package/dist/components/Timeline/TimelineEnumField.js

@@ -0,0 +1,34 @@
+"use strict";
+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 = {
+    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 { 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) {
+            return;
+        }
+        onDragValueChange(field.key, newValue);
+        onSave(field.key, 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))) }));
+};
+exports.TimelineEnumField = TimelineEnumField;

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

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

package/dist/components/Timeline/TimelineExpandArrowButton.js

@@ -22,15 +22,14 @@ const arrowButton = {
     lineHeight: 1,
 };
 const svgStyle = { display: 'block' };
-const TimelineExpandArrowButton = ({ isExpanded, onClick, label, hasExpandableContent }) => {
+const TimelineExpandArrowButton = ({ isExpanded, onClick, label }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
             ...arrowButton,
             transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
-            opacity: hasExpandableContent ? 1 : 0.2,
         };
-    }, [isExpanded, hasExpandableContent]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, onClick: onClick, disabled: !hasExpandableContent, "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]);
+    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" }) }) }));
 };
 exports.TimelineExpandArrowButton = TimelineExpandArrowButton;
 const TimelineExpandArrowSpacer = () => {

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

@@ -0,0 +1,16 @@
+import type { SequenceNodePath } from '@remotion/studio-shared';
+import React from 'react';
+import type { SequenceSchema } from 'remotion';
+import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { TimelineTreeNode } from '../../helpers/timeline-layout';
+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 validatedLocation: CodePosition | null;
+    readonly nodePath: SequenceNodePath | null;
+    readonly schema: SequenceSchema;
+}>;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineExpandedRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const Padder_1 = require("./Padder");
+const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
+const TimelineFieldRow_1 = require("./TimelineFieldRow");
+const TimelineListItem_1 = require("./TimelineListItem");
+const groupRowBase = {
+    height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
+    display: 'flex',
+    alignItems: 'center',
+    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+};
+const rowLabel = {
+    fontSize: 12,
+    color: 'rgba(255, 255, 255, 0.8)',
+    userSelect: 'none',
+};
+const labelOnlyRowBase = {
+    display: 'flex',
+    alignItems: 'center',
+    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+};
+const TimelineExpandedRow = ({ node, depth, nestedDepth, expandedTracks, toggleTrack, overrideId, validatedLocation, nodePath, schema, }) => {
+    var _a;
+    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)(() => ({
+        ...labelOnlyRowBase,
+        height: (0, timeline_layout_1.getTreeRowHeight)(node),
+        paddingLeft,
+    }), [node, paddingLeft]);
+    if (node.kind === 'group') {
+        const isExpanded = (_a = expandedTracks[node.id]) !== null && _a !== void 0 ? _a : false;
+        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 })
+            ] }));
+    }
+    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.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 })
+        ] }));
+};
+exports.TimelineExpandedRow = TimelineExpandedRow;

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 TSequence } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 export declare const TimelineExpandedSection: React.FC<{
     readonly sequence: TSequence;
     readonly originalLocation: OriginalPosition | null;
-    readonly nestedDepth: number;
     readonly nodePath: SequenceNodePath | null;
+    readonly nestedDepth: number;
 }>;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -36,12 +36,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
-const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
-const TimelineFieldRow_1 = require("./TimelineFieldRow");
-const TimelineListItem_1 = require("./TimelineListItem");
+const TimelineExpandedRow_1 = require("./TimelineExpandedRow");
 const expandedSectionBase = {
     color: 'white',
     fontFamily: 'Arial, Helvetica, sans-serif',
@@ -54,27 +53,10 @@ const separator = {
     height: 1,
     backgroundColor: colors_1.TIMELINE_TRACK_SEPARATOR,
 };
-const groupRowBase = {
-    height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
-    display: 'flex',
-    alignItems: 'center',
-    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
-};
-const rowLabel = {
-    fontSize: 12,
-    color: 'rgba(255, 255, 255, 0.8)',
-    userSelect: 'none',
-};
-const labelOnlyRowBase = {
-    display: 'flex',
-    alignItems: 'center',
-    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
-};
-const TimelineExpandedSection = ({ sequence, originalLocation, nestedDepth, nodePath }) => {
-    var _a;
-    var _b;
+const TimelineExpandedSection = ({ sequence, originalLocation, nodePath, nestedDepth }) => {
     const { expandedTracks, toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
-    const overrideId = (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : sequence.id;
+    const { dragOverrides, codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
+    const { overrideId } = sequence.controls;
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -88,56 +70,22 @@ const TimelineExpandedSection = ({ sequence, originalLocation, nestedDepth, node
             column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
         };
     }, [originalLocation]);
-    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)(sequence), [sequence]);
-    const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)(tree, expandedTracks), [tree, expandedTracks]);
-    const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)(sequence, expandedTracks), [sequence, expandedTracks]);
-    const sequenceOffsetPx = TimelineListItem_1.SPACING * 3 * nestedDepth;
-    const keysToObserve = (0, react_1.useMemo)(() => {
-        const fields = (0, timeline_layout_1.getSchemaFields)(sequence.controls);
-        if (!fields) {
-            return [];
-        }
-        return fields.map((f) => f.key);
-    }, [sequence.controls]);
+    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 style = (0, react_1.useMemo)(() => {
         return {
             ...expandedSectionBase,
             height: expandedHeight,
         };
     }, [expandedHeight]);
-    const renderRow = (0, react_1.useCallback)((node, depth) => {
-        var _a;
-        const paddingLeft = timeline_layout_1.EXPANDED_SECTION_PADDING_LEFT +
-            depth * timeline_layout_1.TREE_INDENT_PER_LEVEL +
-            sequenceOffsetPx;
-        if (node.kind === 'group') {
-            const isExpanded = (_a = expandedTracks[node.id]) !== null && _a !== void 0 ? _a : false;
-            return (jsx_runtime_1.jsxs("div", { style: { ...groupRowBase, paddingLeft }, children: [
-                    jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.id), label: `${node.label} section`, hasExpandableContent: true }), 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, nodePath: nodePath, keysToObserve: keysToObserve }));
-        }
-        return (jsx_runtime_1.jsx("div", { style: {
-                ...labelOnlyRowBase,
-                height: (0, timeline_layout_1.getTreeRowHeight)(node),
-                paddingLeft,
-            }, children: jsx_runtime_1.jsx("span", { style: rowLabel, children: node.label }) }));
-    }, [
-        expandedTracks,
-        keysToObserve,
-        nodePath,
-        overrideId,
-        sequenceOffsetPx,
-        toggleTrack,
-        validatedLocation,
-    ]);
+    const { schema } = sequence.controls;
     if (flat.length === 0) {
         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, renderRow(node, depth)] }, 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, expandedTracks: expandedTracks, toggleTrack: toggleTrack, overrideId: overrideId, validatedLocation: validatedLocation, nodePath: nodePath, schema: schema })
+                ] }, node.id));
         }) }));
 };
 exports.TimelineExpandedSection = TimelineExpandedSection;

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

@@ -1,5 +1,6 @@
 import type { SequenceNodePath } from '@remotion/studio-shared';
 import React from 'react';
+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<{
@@ -7,6 +8,7 @@ export declare const TimelineFieldRow: React.FC<{
     readonly overrideId: string;
     readonly validatedLocation: CodePosition | null;
     readonly paddingLeft: number;
+    readonly nestedDepth: number;
     readonly nodePath: SequenceNodePath | null;
-    readonly keysToObserve: string[];
+    readonly schema: SequenceSchema;
 }>;

package/dist/components/Timeline/TimelineFieldRow.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
+const Padder_1 = require("./Padder");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const fieldRowBase = {
     display: 'flex',
@@ -25,28 +26,28 @@ const fieldLabelRow = {
     alignItems: 'center',
     gap: 6,
 };
-const TimelineFieldRow = ({ field, overrideId, validatedLocation, paddingLeft, nodePath, keysToObserve, }) => {
+const TimelineFieldRow = ({ field, overrideId, validatedLocation, paddingLeft, nestedDepth, nodePath, schema, }) => {
     var _a, _b, _c, _d;
-    const { setDragOverrides, clearDragOverrides, dragOverrides, codeValues: allPropStatuses, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
-    const propStatuses = ((_a = allPropStatuses[overrideId]) !== null && _a !== void 0 ? _a : null);
-    const propStatus = (_b = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[field.key]) !== null && _b !== void 0 ? _b : null;
+    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 dragOverrideValue = (0, react_1.useMemo)(() => {
         var _a;
         return ((_a = dragOverrides[overrideId]) !== null && _a !== void 0 ? _a : {})[field.key];
     }, [dragOverrides, overrideId, field.key]);
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
-        codeValue: propStatus,
-        runtimeValue: field.currentValue,
+        codeValue,
+        runtimeValue: field.currentRuntimeValue,
         dragOverrideValue,
         defaultValue: field.fieldSchema.default,
         shouldResortToDefaultValueIfUndefined: true,
     });
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
     const onSave = (0, react_1.useCallback)((key, value) => {
-        if (!propStatuses || !validatedLocation || !nodePath) {
+        if (!codeValuesForOverride || !validatedLocation || !nodePath) {
             return Promise.reject(new Error('Cannot save'));
         }
-        const status = propStatuses[key];
+        const status = codeValuesForOverride[key];
         if (!status || !status.canUpdate) {
             return Promise.reject(new Error('Cannot save'));
         }
@@ -59,7 +60,7 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation, paddingLeft, n
             key,
             value: JSON.stringify(value),
             defaultValue,
-            observedKeys: keysToObserve,
+            schema,
         }).then((data) => {
             if (data.success) {
                 if (data.newStatus.canUpdate) {
@@ -73,11 +74,11 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation, paddingLeft, n
             return Promise.reject(new Error(data.reason));
         });
     }, [
+        codeValuesForOverride,
         field.fieldSchema.default,
-        keysToObserve,
         nodePath,
         overrideId,
-        propStatuses,
+        schema,
         setCodeValues,
         validatedLocation,
     ]);
@@ -95,7 +96,7 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation, paddingLeft, n
         };
     }, [field.rowHeight, paddingLeft]);
     return (jsx_runtime_1.jsxs("div", { style: style, children: [
-            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: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_d = propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate) !== null && _d !== void 0 ? _d : false, effectiveValue: effectiveValue, codeValue: propStatus })
+            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 })
         ] }));
 };
 exports.TimelineFieldRow = TimelineFieldRow;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
-export declare const SPACING = 5;
+export declare const INDENT = 10;
 export declare const TimelineListItem: React.FC<{
     readonly sequence: TSequence;
     readonly nestedDepth: number;

package/dist/components/Timeline/TimelineListItem.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineListItem = exports.SPACING = void 0;
+exports.TimelineListItem = exports.INDENT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -11,17 +11,14 @@ const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const Padder_1 = require("./Padder");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineStack_1 = require("./TimelineStack");
 const use_resolved_stack_1 = require("./use-resolved-stack");
 const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
-exports.SPACING = 5;
-const space = {
-    width: exports.SPACING,
-    flexShrink: 0,
-};
+exports.INDENT = 10;
 const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     var _a, _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -146,12 +143,6 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     const onToggleExpand = (0, react_1.useCallback)(() => {
         toggleTrack(sequence.id);
     }, [sequence.id, toggleTrack]);
-    const padder = (0, react_1.useMemo)(() => {
-        return {
-            width: Number(exports.SPACING) * nestedDepth,
-            flexShrink: 0,
-        };
-    }, [nestedDepth]);
     const isItemHidden = (0, react_1.useMemo)(() => {
         var _a;
         return (_a = hidden[sequence.id]) !== null && _a !== void 0 ? _a : false;
@@ -181,13 +172,13 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
             alignItems: 'center',
             wordBreak: 'break-all',
             textAlign: 'left',
-            paddingLeft: exports.SPACING,
+            paddingLeft: 5,
         };
     }, []);
     const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
     const trackRow = (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsxs("div", { style: inner, children: [
-                jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, visualModeActive ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", hasExpandableContent: hasExpandableContent })) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
+                jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx(Padder_1.Padder, { depth: nestedDepth }), visualModeActive ? (hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties" })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
             ] }) }));
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [visualModeEnvEnabled ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), visualModeActive && isExpanded && hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nestedDepth: nestedDepth, nodePath: nodePath })) : null] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [visualModeEnvEnabled ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), visualModeActive && isExpanded && hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nodePath: nodePath, nestedDepth: nestedDepth })) : null] }));
 };
 exports.TimelineListItem = TimelineListItem;

package/dist/components/Timeline/TimelinePlayCursorSyncer.js

@@ -9,10 +9,11 @@ const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 let lastTimelinePositionWhileScrolling = null;
 const TimelinePlayCursorSyncer = () => {
-    var _a, _b;
+    var _a;
     const video = remotion_1.Internals.useVideo();
-    const timelineContext = remotion_1.Internals.useTimelineContext();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const { playbackRate } = remotion_1.Internals.usePlaybackRate();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const compositionId = canvasContent && canvasContent.type === 'composition'
@@ -27,7 +28,6 @@ const TimelinePlayCursorSyncer = () => {
         (0, imperative_state_1.setCurrentDuration)(video.durationInFrames);
         (0, imperative_state_1.setCurrentFps)(video.fps);
     }
-    const playing = (_b = timelineContext.playing) !== null && _b !== void 0 ? _b : false;
     /**
      * While playing (forwards or backwards), jump one viewport width to the left or right when the cursor goes out of the viewport.
      */
@@ -39,11 +39,11 @@ const TimelinePlayCursorSyncer = () => {
             return;
         }
         (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-            direction: timelineContext.playbackRate > 0 ? 'page-right' : 'page-left',
+            direction: playbackRate > 0 ? 'page-right' : 'page-left',
             durationInFrames: video.durationInFrames,
             frame: timelinePosition,
         });
-    }, [playing, timelineContext, timelinePosition, video]);
+    }, [playbackRate, playing, timelinePosition, video]);
     /**
      * Restore state if `enter` is being pressed
      */

package/dist/components/Timeline/TimelineSchemaField.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const TimelineBooleanField_1 = require("./TimelineBooleanField");
+const TimelineEnumField_1 = require("./TimelineEnumField");
 const TimelineNumberField_1 = require("./TimelineNumberField");
 const TimelineRotationField_1 = require("./TimelineRotationField");
 const TimelineTranslateField_1 = require("./TimelineTranslateField");
@@ -44,6 +45,9 @@ const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propS
     if (field.typeName === 'boolean') {
         return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField_1.TimelineBooleanField, { field: field, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, effectiveValue: effectiveValue }) }));
     }
+    if (field.typeName === 'enum') {
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineEnumField_1.TimelineEnumField, { field: field, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, effectiveValue: effectiveValue, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+    }
     return (jsx_runtime_1.jsx("span", { style: { ...unsupportedLabel, fontStyle: 'normal' }, children: String(effectiveValue) }));
 };
 exports.TimelineFieldValue = TimelineFieldValue;

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
-export declare const TimelineSequence: React.FC<{
+export declare const TimelineSequence: React.NamedExoticComponent<{
     readonly s: TSequence;
 }>;