@remotion/studio 4.0.460 → 4.0.462

package/dist/components/Timeline/TimelineEffectFieldRow.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineEffectFieldRow = 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");
+const call_api_1 = require("../call-api");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const Padder_1 = require("./Padder");
+const TimelineSchemaField_1 = require("./TimelineSchemaField");
+const fieldRowBase = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+};
+const fieldName = {
+    fontSize: 12,
+    color: 'rgba(255, 255, 255, 0.8)',
+    userSelect: 'none',
+};
+const fieldLabelRow = {
+    flex: '0 0 50%',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+};
+const Value = ({ field, nodePath, validatedLocation }) => {
+    var _a;
+    var _b;
+    const { setEffectDragOverrides, clearEffectDragOverrides, setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
+        codeValues: visualModeCodeValues,
+        nodePath,
+        effectIndex: field.effectIndex,
+    });
+    const propStatus = effectStatus.type === 'can-update-effect'
+        ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a[field.key]) !== null && _b !== void 0 ? _b : null)
+        : null;
+    const onDragValueChange = (0, react_1.useCallback)((value) => {
+        setEffectDragOverrides(nodePath, field.effectIndex, field.key, value);
+    }, [setEffectDragOverrides, nodePath, field.effectIndex, field.key]);
+    const onDragEnd = (0, react_1.useCallback)(() => {
+        clearEffectDragOverrides(nodePath, field.effectIndex);
+    }, [clearEffectDragOverrides, nodePath, field.effectIndex]);
+    const dragOverrideValue = (0, react_1.useMemo)(() => {
+        const overrides = getEffectDragOverrides(nodePath, field.effectIndex);
+        return overrides[field.key];
+    }, [getEffectDragOverrides, nodePath, field.effectIndex, field.key]);
+    const onSave = (0, react_1.useCallback)((value) => {
+        if (!validatedLocation) {
+            return Promise.reject(new Error('Cannot save'));
+        }
+        if (!propStatus) {
+            return Promise.reject(new Error('Cannot save'));
+        }
+        if (!propStatus.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 === propStatus.codeValue) {
+            return Promise.resolve();
+        }
+        if (defaultValue === stringifiedValue &&
+            propStatus.codeValue === undefined) {
+            return Promise.resolve();
+        }
+        let previousUpdate;
+        setCodeValues(nodePath, (prev) => {
+            previousUpdate = prev;
+            return (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
+                previous: prev,
+                effectIndex: field.effectIndex,
+                fieldKey: field.key,
+                value,
+                schema: field.effectSchema,
+            });
+        });
+        return (0, call_api_1.callApi)('/api/save-effect-props', {
+            fileName: validatedLocation.source,
+            sequenceNodePath: nodePath,
+            effectIndex: field.effectIndex,
+            key: field.key,
+            value: stringifiedValue,
+            defaultValue,
+            schema: field.effectSchema,
+        })
+            .then((data) => {
+            setCodeValues(nodePath, (prev) => {
+                if (!prev.canUpdate) {
+                    return prev;
+                }
+                const idx = prev.effects.findIndex((e) => e.effectIndex === field.effectIndex);
+                if (idx === -1) {
+                    return {
+                        ...prev,
+                        effects: [...prev.effects, data],
+                    };
+                }
+                const next = [...prev.effects];
+                next[idx] = data;
+                return { ...prev, effects: next };
+            });
+        })
+            .catch((err) => {
+            setCodeValues(nodePath, (current) => {
+                if (previousUpdate) {
+                    return previousUpdate;
+                }
+                return current;
+            });
+            (0, NotificationCenter_1.showNotification)(`Could not save effect prop: ${err instanceof Error ? err.message : String(err)}`, 4000);
+        });
+    }, [
+        field.effectIndex,
+        field.effectSchema,
+        field.fieldSchema.default,
+        field.key,
+        nodePath,
+        propStatus,
+        setCodeValues,
+        validatedLocation,
+    ]);
+    if (effectStatus.type === 'cannot-update-effect') {
+        if (effectStatus.reason === 'computed') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "computed" });
+        }
+        if (effectStatus.reason === 'not-call-expression') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not inline" });
+        }
+        if (effectStatus.reason === 'not-found') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code" });
+        }
+        throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
+    }
+    if (effectStatus.type === 'cannot-update-sequence') {
+        if (effectStatus.reason === 'not-found') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "not found in code" });
+        }
+        if (effectStatus.reason === 'error') {
+            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "error" });
+        }
+        throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
+    }
+    if (propStatus === null || !propStatus.canUpdate) {
+        return null;
+    }
+    const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
+        codeValue: propStatus,
+        dragOverrideValue,
+        defaultValue: field.fieldSchema.default,
+        shouldResortToDefaultValueIfUndefined: true,
+    });
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
+};
+const TimelineEffectFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth, nodePath }) => {
+    var _a;
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...fieldRowBase,
+            height: field.rowHeight,
+            paddingLeft,
+        };
+    }, [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: (_a = field.description) !== null && _a !== void 0 ? _a : field.key }) }), jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation })
+        ] }));
+};
+exports.TimelineEffectFieldRow = TimelineEffectFieldRow;

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

@@ -7,7 +7,7 @@ const ComboBox_1 = require("../NewComposition/ComboBox");
 const comboboxStyle = {
     marginLeft: 8,
 };
-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');
@@ -15,14 +15,14 @@ const TimelineEnumField = ({ field, codeValue, effectiveValue, canUpdate, onSave
     const variantKeys = Object.keys(fieldSchema.variants);
     const current = String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : fieldSchema.default);
     const onSelect = (0, react_1.useCallback)((newValue) => {
-        if (!canUpdate || newValue === codeValue) {
+        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]);
+    }, [propStatus, onSave, onDragValueChange, onDragEnd]);
     const items = (0, react_1.useMemo)(() => {
         return variantKeys.map((key) => ({
             type: 'item',
@@ -34,9 +34,9 @@ const TimelineEnumField = ({ field, codeValue, effectiveValue, canUpdate, onSave
             leftItem: null,
             subMenu: null,
             quickSwitcherLabel: null,
-            disabled: !canUpdate,
+            disabled: !propStatus.canUpdate,
         }));
-    }, [variantKeys, onSelect, 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.js

@@ -31,7 +31,7 @@ const TimelineExpandArrowButton = ({ isExpanded, onClick, label, disabled = fals
             opacity: disabled ? 0.5 : 1,
         };
     }, [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: "white" }) }) }));
+    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,5 +1,5 @@
 import React from 'react';
-import type { SequenceSchema, SequenceNodePath } from 'remotion';
+import type { SequenceSchema, SequencePropsSubscriptionKey } 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';
@@ -10,7 +10,7 @@ export declare const TimelineExpandedRow: React.FC<{
     readonly nestedDepth: number;
     readonly getIsExpanded: GetIsExpanded;
     readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
-    readonly validatedLocation: CodePosition | null;
-    readonly nodePath: SequenceNodePath;
+    readonly validatedLocation: CodePosition;
+    readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: SequenceSchema;
 }>;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -5,6 +5,7 @@ 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 TimelineEffectFieldRow_1 = require("./TimelineEffectFieldRow");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldRow_1 = require("./TimelineFieldRow");
 const TimelineListItem_1 = require("./TimelineListItem");
@@ -39,7 +40,13 @@ const TimelineExpandedRow = ({ node, depth, nestedDepth, getIsExpanded, toggleTr
             ] }));
     }
     if (node.field) {
-        return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, validatedLocation: validatedLocation, paddingLeft: paddingLeft, nestedDepth: nestedDepth, nodePath: nodePath, schema: schema }));
+        if (node.field.kind === 'effect-field') {
+            return (jsx_runtime_1.jsx(TimelineEffectFieldRow_1.TimelineEffectFieldRow, { field: node.field, validatedLocation: validatedLocation, paddingLeft: paddingLeft, nestedDepth: nestedDepth, nodePath: nodePath }));
+        }
+        if (node.field.kind === 'sequence-field') {
+            return (jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: node.field, validatedLocation: validatedLocation, paddingLeft: paddingLeft, nestedDepth: nestedDepth, nodePath: nodePath, schema: schema }));
+        }
+        throw new Error('Unexpected field kind: ' + JSON.stringify(node.field));
     }
     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 React from 'react';
 import { type TSequence } from 'remotion';
-import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { CodePosition } 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 validatedLocation: CodePosition;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly nestedDepth: number;
 }>;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -53,37 +53,24 @@ const separator = {
     height: 1,
     backgroundColor: colors_1.TIMELINE_TRACK_SEPARATOR,
 };
-const TimelineExpandedSection = ({ sequence, originalLocation, nodePathInfo, nestedDepth }) => {
+const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const { getDragOverrides, getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeGettersContext);
-    const validatedLocation = (0, react_1.useMemo)(() => {
-        var _a;
-        if (!originalLocation ||
-            !originalLocation.source ||
-            !originalLocation.line) {
-            return null;
-        }
-        return {
-            source: originalLocation.source,
-            line: originalLocation.line,
-            column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
-        };
-    }, [originalLocation]);
+    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
         getDragOverrides,
-        getCodeValues,
-    }), [sequence, nodePathInfo, getDragOverrides, getCodeValues]);
+        codeValues: visualModeCodeValues,
+    }), [sequence, nodePathInfo, getDragOverrides, visualModeCodeValues]);
     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,
-        getDragOverrides,
-        getCodeValues,
-    }), [sequence, nodePathInfo, getIsExpanded, getDragOverrides, getCodeValues]);
+        codeValues: visualModeCodeValues,
+    }), [sequence, nodePathInfo, getIsExpanded, visualModeCodeValues]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...expandedSectionBase,
@@ -95,7 +82,7 @@ const TimelineExpandedSection = ({ sequence, originalLocation, nodePathInfo, nes
         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, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.nodePath, schema: schema })
+            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.sequenceSubscriptionKey, schema: schema })
                 ] }, JSON.stringify(node.nodePathInfo)));
         }) }));
 };

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

@@ -1,13 +1,13 @@
 import React from 'react';
-import type { SequenceNodePath } from 'remotion';
+import type { SequencePropsSubscriptionKey } 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 validatedLocation: CodePosition | null;
+    readonly validatedLocation: CodePosition;
     readonly paddingLeft: number;
     readonly nestedDepth: number;
-    readonly nodePath: SequenceNodePath;
+    readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: SequenceSchema;
 }>;

package/dist/components/Timeline/TimelineFieldRow.js

@@ -2,10 +2,12 @@
 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");
 const call_api_1 = require("../call-api");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const Padder_1 = require("./Padder");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const fieldRowBase = {
@@ -26,12 +28,9 @@ const fieldLabelRow = {
     alignItems: 'center',
     gap: 6,
 };
-const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth, nodePath, schema, }) => {
-    var _a, _b, _c;
-    const { getDragOverrides, getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeGettersContext);
+const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
+    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;
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         var _a;
         return nodePath === null
@@ -40,57 +39,95 @@ const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth,
     }, [getDragOverrides, nodePath, field.key]);
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
         codeValue,
-        runtimeValue: field.currentRuntimeValue,
         dragOverrideValue,
         defaultValue: field.fieldSchema.default,
         shouldResortToDefaultValueIfUndefined: true,
     });
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const onSave = (0, react_1.useCallback)((key, value) => {
-        if (!codeValuesForOverride || !validatedLocation || !nodePath) {
-            return Promise.reject(new Error('Cannot save'));
-        }
-        const status = codeValuesForOverride[key];
-        if (!status || !status.canUpdate) {
+    const onSave = (0, react_1.useCallback)((value) => {
+        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) {
-                setCodeValues(nodePath, data.newStatus);
-                return;
-            }
-            return Promise.reject(new Error(data.reason));
+        })
+            .then((data) => {
+            setCodeValues(nodePath, (prev) => {
+                if (!data.canUpdate) {
+                    return data;
+                }
+                return {
+                    canUpdate: true,
+                    props: data.props,
+                    effects: prev.canUpdate ? prev.effects : [],
+                };
+            });
+        })
+            .catch((err) => {
+            // In case something went wrong, undo optimistic update
+            setCodeValues(nodePath, (current) => {
+                if (previousUpdate) {
+                    return previousUpdate;
+                }
+                return current;
+            });
+            (0, NotificationCenter_1.showNotification)(`Could not save sequence prop: ${err instanceof Error ? err.message : String(err)}`, 4000);
         });
     }, [
-        codeValuesForOverride,
+        codeValue,
         field.fieldSchema.default,
+        field.key,
         nodePath,
         schema,
         setCodeValues,
         validatedLocation,
     ]);
-    const onDragValueChange = (0, react_1.useCallback)((key, value) => {
+    const onDragValueChange = (0, react_1.useCallback)((value) => {
         if (nodePath === null) {
             throw new Error('Cannot drag value');
         }
-        setDragOverrides(nodePath, key, value);
-    }, [setDragOverrides, nodePath]);
+        setDragOverrides(nodePath, field.key, value);
+    }, [setDragOverrides, nodePath, field.key]);
     const onDragEnd = (0, react_1.useCallback)(() => {
         if (nodePath === null) {
             throw new Error('Cannot clear drag value');
         }
         clearDragOverrides(nodePath);
     }, [clearDragOverrides, nodePath]);
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
+};
+const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth, nodePath, schema, }) => {
+    var _a, _b;
+    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const codeValuesForOverride = remotion_1.Internals.getCodeValuesCtx(visualModeCodeValues, nodePath);
+    const codeValue = (_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,
@@ -98,8 +135,10 @@ const TimelineFieldRow = ({ field, validatedLocation, paddingLeft, nestedDepth,
             paddingLeft,
         };
     }, [field.rowHeight, paddingLeft]);
+    if (codeValue === null) {
+        return null;
+    }
     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: (_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, canUpdate: (_c = codeValue === null || codeValue === void 0 ? void 0 : codeValue.canUpdate) !== null && _c !== void 0 ? _c : 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 }) }), codeValue.canUpdate ? (jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, codeValue: codeValue })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }))] }));
 };
 exports.TimelineFieldRow = TimelineFieldRow;

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

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

package/dist/components/Timeline/TimelineHeightContainer.js

@@ -1,8 +1,41 @@
 "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.TimelineHeightContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const use_timeline_height_1 = require("./use-timeline-height");
 const baseStyle = {
     display: 'flex',
@@ -10,9 +43,9 @@ const baseStyle = {
     minHeight: '100%',
     overflowX: 'hidden',
 };
-const TimelineHeightContainer = ({ shown, hasBeenCut, children }) => {
+const TimelineHeightContainerInner = ({ shown, hasBeenCut, children }) => {
     const height = (0, use_timeline_height_1.useTimelineHeight)({ shown, hasBeenCut });
     const style = (0, react_1.useMemo)(() => ({ ...baseStyle, height }), [height]);
     return jsx_runtime_1.jsx("div", { style: style, children: children });
 };
-exports.TimelineHeightContainer = TimelineHeightContainer;
+exports.TimelineHeightContainer = react_1.default.memo(TimelineHeightContainerInner);