@remotion/studio 4.0.473 → 4.0.474

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

@@ -30,6 +30,11 @@ export type TimelineSelection = (TimelineSelectionBase & {
 }) | (TimelineSelectionBase & {
     readonly type: 'keyframe';
     readonly frame: number;
+}) | (TimelineSelectionBase & {
+    readonly type: 'easing';
+    readonly fromFrame: number;
+    readonly toFrame: number;
+    readonly segmentIndex: number;
 });
 export type TimelineSelectionInteraction = {
     readonly shiftKey: boolean;
@@ -81,5 +86,15 @@ export declare const useTimelineKeyframeSelection: (nodePathInfo: SequenceNodePa
     selectable: boolean;
     selected: boolean;
 };
+export declare const useTimelineEasingSelection: ({ nodePathInfo, fromFrame, toFrame, segmentIndex, }: {
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly fromFrame: number;
+    readonly toFrame: number;
+    readonly segmentIndex: number;
+}) => {
+    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    selectable: boolean;
+    selected: boolean;
+};
 export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
 export {};

package/dist/components/Timeline/TimelineSelection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowContainsSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionFromNodePathInfo = exports.getTimelineSelectionAfterInteraction = exports.isTimelineSelectionModifierEvent = exports.ENABLE_OUTLINES = exports.TIMELINE_TOP_DRAG = exports.SELECTION_ENABLED = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowContainsSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionFromNodePathInfo = exports.getTimelineSelectionAfterInteraction = exports.isTimelineSelectionModifierEvent = exports.ENABLE_OUTLINES = exports.TIMELINE_TOP_DRAG = exports.SELECTION_ENABLED = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -191,6 +191,8 @@ const getTimelineSelectionKey = (item) => {
             return `${sequenceKey}.sequence-effect-prop.${item.i}.${item.key}`;
         case 'keyframe':
             return `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(item.nodePathInfo)}.keyframe.${item.frame}`;
+        case 'easing':
+            return `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(item.nodePathInfo)}.easing.${item.segmentIndex}.${item.fromFrame}.${item.toFrame}`;
         default:
             throw new Error(`Unexpected timeline selection type: ${item}`);
     }
@@ -408,6 +410,29 @@ const useTimelineKeyframeSelection = (nodePathInfo, frame) => {
     };
 };
 exports.useTimelineKeyframeSelection = useTimelineKeyframeSelection;
+const useTimelineEasingSelection = ({ nodePathInfo, fromFrame, toFrame, segmentIndex, }) => {
+    const { canSelect, isSelected, selectItem, registerSelectableItem } = (0, exports.useTimelineSelection)();
+    const selectionItem = (0, react_1.useMemo)(() => ({
+        type: 'easing',
+        nodePathInfo,
+        fromFrame,
+        toFrame,
+        segmentIndex,
+    }), [nodePathInfo, fromFrame, segmentIndex, toFrame]);
+    (0, react_1.useEffect)(() => {
+        return registerSelectableItem(selectionItem);
+    }, [registerSelectableItem, selectionItem]);
+    const selected = isSelected(selectionItem);
+    const onSelect = (0, react_1.useCallback)((interaction) => {
+        selectItem(selectionItem, interaction);
+    }, [selectItem, selectionItem]);
+    return {
+        onSelect,
+        selectable: canSelect,
+        selected,
+    };
+};
+exports.useTimelineEasingSelection = useTimelineEasingSelection;
 const useTimelineRowContainsSelection = (nodePathInfo) => {
     const { containsSelection } = (0, exports.useTimelineSelection)();
     if (nodePathInfo === null) {

package/dist/components/Timeline/TimelineSequence.js

@@ -151,15 +151,15 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
         };
     }, [originalLocation]);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
-    const codeValuesForOverride = (0, react_1.useMemo)(() => {
+    const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
-            ? remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)
+            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
             : undefined;
-    }, [codeValues, nodePath]);
-    const durationCanUpdate = Boolean(((_a = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
-    const fromCanUpdate = Boolean(((_b = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
+    }, [propStatuses, nodePath]);
+    const durationCanUpdate = Boolean(((_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
+    const fromCanUpdate = Boolean(((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
     const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
         nodePathInfo,
         windowWidth,

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -73,6 +73,9 @@ const sequenceReorderRejectionStyle = {
 const hasSequenceReorderDragType = (dataTransfer) => {
     return Array.from(dataTransfer.types).includes(SEQUENCE_REORDER_MIME_TYPE);
 };
+const isSequenceReorderDrag = (dataTransfer) => {
+    return (currentSequenceDrag !== null || hasSequenceReorderDragType(dataTransfer));
+};
 const getSequenceReorderDragData = (dataTransfer) => {
     if (currentSequenceDrag) {
         return currentSequenceDrag;
@@ -130,8 +133,8 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const previewConnected = previewServerState.type === 'connected';
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
@@ -526,26 +529,26 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         e.stopPropagation();
         openInEditor();
     }, [canOpenInEditor, openInEditor]);
-    const codeValuesForOverride = (0, react_1.useMemo)(() => {
+    const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
-            ? remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)
+            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
             : undefined;
-    }, [codeValues, nodePath]);
-    const codeHiddenStatus = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride.hidden;
+    }, [propStatuses, nodePath]);
+    const codeHiddenStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.hidden;
     const isItemHidden = (0, react_1.useMemo)(() => {
         var _a;
-        const codeValue = codeHiddenStatus && codeHiddenStatus.status === 'static'
+        const propStatus = codeHiddenStatus && codeHiddenStatus.status === 'static'
             ? codeHiddenStatus.codeValue
             : undefined;
         const runtimeValue = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation.hidden;
-        const effective = (codeValue !== null && codeValue !== void 0 ? codeValue : runtimeValue);
+        const effective = (propStatus !== null && propStatus !== void 0 ? propStatus : runtimeValue);
         return effective !== null && effective !== void 0 ? effective : false;
     }, [codeHiddenStatus, (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation]);
     const onToggleVisibility = (0, react_1.useCallback)((type) => {
         if (!sequence.controls ||
             !nodePath ||
             !validatedLocation ||
-            !codeValuesForOverride ||
+            !propStatusesForOverride ||
             !codeHiddenStatus ||
             codeHiddenStatus.status !== 'static' ||
             previewServerState.type !== 'connected') {
@@ -568,18 +571,18 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
                     schema,
                 },
             ],
-            setCodeValues,
+            setPropStatuses,
             clientId: previewServerState.clientId,
             undoLabel: newValue ? 'Hide sequence' : 'Show sequence',
             redoLabel: newValue ? 'Hide sequence again' : 'Show sequence again',
         });
     }, [
         codeHiddenStatus,
-        codeValuesForOverride,
+        propStatusesForOverride,
         nodePath,
         previewServerState,
         sequence.controls,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation,
     ]);
     const outerHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM, [sequence.type]);
@@ -623,7 +626,9 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         };
     }, [sequenceDropIndicator]);
     const onEffectDragOver = (0, react_1.useCallback)((e) => {
-        if (!canDropEffect || !hasEffectDragType(e.dataTransfer)) {
+        if (!canDropEffect ||
+            isSequenceReorderDrag(e.dataTransfer) ||
+            !hasEffectDragType(e.dataTransfer)) {
             return;
         }
         e.preventDefault();
@@ -640,7 +645,9 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         if (!canDropEffect ||
             previewServerState.type !== 'connected' ||
             nodePath === null ||
-            validatedLocation === null) {
+            validatedLocation === null ||
+            isSequenceReorderDrag(e.dataTransfer) ||
+            !hasEffectDragType(e.dataTransfer)) {
             return;
         }
         e.preventDefault();

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -37,7 +37,7 @@ const isResettableStatus = ({ status, defaultValue, }) => {
     const effectiveCodeValue = (_a = status.codeValue) !== null && _a !== void 0 ? _a : defaultValue;
     return JSON.stringify(effectiveCodeValue) !== JSON.stringify(defaultValue);
 };
-const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
+const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const dragOverrideValue = (0, react_1.useMemo)(() => {
@@ -47,12 +47,12 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
             : ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[field.key];
     }, [getDragOverrides, nodePath, field.key]);
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
-        codeValue,
+        propStatus,
         dragOverrideValue,
         defaultValue: field.fieldSchema.default,
         shouldResortToDefaultValueIfUndefined: true,
     });
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
@@ -67,11 +67,11 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
             : null;
         const stringifiedValue = JSON.stringify(value);
         const fieldLabel = (_a = field.description) !== null && _a !== void 0 ? _a : field.key;
-        if (value === codeValue.codeValue) {
+        if (value === propStatus.codeValue) {
             return Promise.resolve();
         }
         if (defaultValue === stringifiedValue &&
-            codeValue.codeValue === undefined) {
+            propStatus.codeValue === undefined) {
             return Promise.resolve();
         }
         return (0, save_sequence_prop_1.saveSequenceProps)({
@@ -85,20 +85,20 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
                     schema,
                 },
             ],
-            setCodeValues,
+            setPropStatuses,
             clientId,
             undoLabel: `Update ${fieldLabel}`,
             redoLabel: `Update ${fieldLabel} again`,
         });
     }, [
-        codeValue,
+        propStatus,
         clientId,
         field.description,
         field.fieldSchema.default,
         field.key,
         nodePath,
         schema,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation,
     ]);
     const onDragValueChange = (0, react_1.useCallback)((value) => {
@@ -113,36 +113,36 @@ const Value = ({ field, nodePath, validatedLocation, schema, codeValue }) => {
         }
         clearDragOverrides(nodePath);
     }, [clearDragOverrides, nodePath]);
-    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: codeValue, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: nodePath }));
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: nodePath }));
 };
 const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, }) => {
     var _a, _b;
-    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const { setCodeValues, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
         : null;
-    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 propStatusesForOverride = remotion_1.Internals.getPropStatusesCtx(visualModePropStatuses, nodePath);
+    const propStatus = (_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const jsxFrame = timelinePosition - keyframeDisplayOffset;
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         var _a;
         return ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[field.key];
     }, [getDragOverrides, nodePath, field.key]);
-    const keyframeControls = codeValue !== null &&
+    const keyframeControls = propStatus !== null &&
         (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
-            propStatus: codeValue,
+            propStatus,
             selected: selection.selected,
             keyframable: (0, studio_shared_1.isSchemaFieldKeyframable)({
                 schema,
                 key: field.key,
             }),
-        }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: codeValue, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: schema, effectIndex: null })) : null;
+        }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: schema, effectIndex: null })) : null;
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,
@@ -150,24 +150,24 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         };
     }, [field.rowHeight]);
     const canResetToDefault = (0, react_1.useMemo)(() => {
-        if (!codeValue || codeValue.status === 'computed') {
+        if (!propStatus || propStatus.status === 'computed') {
             return false;
         }
         return isResettableStatus({
-            status: codeValue,
+            status: propStatus,
             defaultValue: field.fieldSchema.default,
         });
-    }, [codeValue, field.fieldSchema.default]);
+    }, [propStatus, field.fieldSchema.default]);
     const canPerformReset = previewServerState.type === 'connected' &&
-        codeValue !== null &&
-        codeValue.status !== 'computed';
+        propStatus !== null &&
+        propStatus.status !== 'computed';
     const canShowReset = canPerformReset && field.fieldSchema.default !== undefined;
     const onReset = (0, react_1.useCallback)(() => {
         var _a;
         if (!canShowReset ||
             !canResetToDefault ||
             previewServerState.type !== 'connected' ||
-            codeValue === null) {
+            propStatus === null) {
             return;
         }
         const defaultValue = field.fieldSchema.default !== undefined
@@ -185,7 +185,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                     schema,
                 },
             ],
-            setCodeValues,
+            setPropStatuses,
             clientId: previewServerState.clientId,
             undoLabel: `Reset ${fieldLabel}`,
             redoLabel: `Reapply ${fieldLabel}`,
@@ -199,9 +199,9 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         nodePath,
         previewServerState,
         schema,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation.source,
-        codeValue,
+        propStatus,
     ]);
     const onSaveKeyframed = (0, react_1.useCallback)((value, sourceFrame) => {
         if (!clientId) {
@@ -214,7 +214,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             sourceFrame,
             value,
             schema,
-            setCodeValues,
+            setPropStatuses,
             clientId,
         });
     }, [
@@ -222,25 +222,25 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         field.key,
         nodePath,
         schema,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation.source,
     ]);
     const onKeyframedDragValueChange = (0, react_1.useCallback)((value) => {
-        if (codeValue === null || !isKeyframedStatus(codeValue)) {
+        if (propStatus === null || !isKeyframedStatus(propStatus)) {
             throw new Error('Expected keyframed status');
         }
         setDragOverrides(nodePath, field.key, remotion_1.Internals.makeKeyframedDragOverride({
-            status: codeValue,
+            status: propStatus,
             frame: jsxFrame,
             value,
         }));
-    }, [codeValue, field.key, jsxFrame, nodePath, setDragOverrides]);
+    }, [propStatus, field.key, jsxFrame, nodePath, setDragOverrides]);
     const onKeyframedDragEnd = (0, react_1.useCallback)(() => {
         clearDragOverrides(nodePath);
     }, [clearDragOverrides, nodePath]);
     const onOpenKeyframeSettings = (0, react_1.useCallback)(() => {
         var _a;
-        if (codeValue === null || !isKeyframedStatus(codeValue)) {
+        if (propStatus === null || !isKeyframedStatus(propStatus)) {
             return;
         }
         setSelectedModal({
@@ -249,12 +249,12 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             nodePath,
             fieldKey: field.key,
             fieldLabel: (_a = field.description) !== null && _a !== void 0 ? _a : field.key,
-            status: codeValue,
+            status: propStatus,
             schema,
             effectIndex: null,
         });
     }, [
-        codeValue,
+        propStatus,
         field.description,
         field.key,
         nodePath,
@@ -277,7 +277,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 value: 'reset-sequence-field',
             },
         ];
-        if (codeValue !== null && isKeyframedStatus(codeValue)) {
+        if (propStatus !== null && isKeyframedStatus(propStatus)) {
             values.push({
                 type: 'item',
                 id: 'keyframe-settings-sequence-field',
@@ -294,16 +294,16 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         return values;
     }, [
         canShowReset,
-        codeValue,
+        propStatus,
         onOpenKeyframeSettings,
         onReset,
         previewServerState,
     ]);
-    if (codeValue === null) {
+    if (propStatus === null) {
         return null;
     }
     const row = (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
-            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }), isKeyframedStatus(codeValue) ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: codeValue, keyframeDisplayOffset: keyframeDisplayOffset, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onKeyframedDragValueChange, onDragEnd: onKeyframedDragEnd, scaleLockNodePath: nodePath }) })) : codeValue.status === 'static' ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, codeValue: codeValue }) })) : (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: codeValue }) }))] }));
+            jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }), isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, keyframeDisplayOffset: keyframeDisplayOffset, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onKeyframedDragValueChange, onDragEnd: onKeyframedDragEnd, scaleLockNodePath: nodePath }) })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus }) })) : (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus }) }))] }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };
 exports.TimelineSequencePropItem = TimelineSequencePropItem;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CodeValues, OverrideIdToNodePaths, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type SaveSequencePropChange } from './save-sequence-prop';
 import { type TimelineSelection } from './TimelineSelection';
@@ -29,19 +29,19 @@ export declare const getTimelineSequenceFromDragChanges: ({ targets, deltaFrames
     readonly targets: readonly TimelineSequenceFromDragTarget[];
     readonly deltaFrames: number;
 }) => SaveSequencePropChange[];
-export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, codeValues, }: {
+export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
     readonly selectedItems: readonly TimelineSelection[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
-    readonly codeValues: CodeValues;
+    readonly propStatuses: PropStatuses;
 }) => TimelineSequenceDurationDragTarget[] | null;
-export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, codeValues, }: {
+export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
     readonly selectedItems: readonly TimelineSelection[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
-    readonly codeValues: CodeValues;
+    readonly propStatuses: PropStatuses;
 }) => TimelineSequenceFromDragTarget[] | null;
 export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth, timelineDurationInFrames, }: {
     readonly nodePathInfo: SequenceNodePathInfo | null;