@remotion/studio 4.0.478 → 4.0.479

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -63,6 +63,7 @@ const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceName_1 = require("./TimelineSequenceName");
 const use_open_sequence_in_editor_1 = require("./use-open-sequence-in-editor");
+const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
 const labelContainerStyle = {
     alignItems: 'center',
     alignSelf: 'stretch',
@@ -139,7 +140,7 @@ const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
 };
 const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, trackIndex, }) => {
     var _a, _b, _c;
-    var _d, _e;
+    var _d, _e, _f;
     const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
@@ -616,59 +617,18 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         }
         setIsRenaming(true);
     }, [canRenameThisSequence]);
-    const freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
-    const isFrozen = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static' &&
-        typeof freezeStatus.codeValue === 'number';
-    const canToggleFreeze = previewConnected &&
-        Boolean(sequence.controls) &&
-        nodePath !== null &&
-        validatedLocation !== null &&
-        freezeStatus !== undefined &&
-        freezeStatus !== null &&
-        freezeStatus.status === 'static';
-    const onToggleFreezeFrame = (0, react_1.useCallback)(() => {
-        if (!canToggleFreeze ||
-            !sequence.controls ||
-            !nodePath ||
-            !validatedLocation ||
-            previewServerState.type !== 'connected') {
-            return;
-        }
-        const rawFreezeFrame = Math.round(timelinePosition - sequence.from + sequenceFrameOffset);
-        const maxFrame = Number.isFinite(sequence.duration)
-            ? Math.max(0, sequence.duration - 1)
-            : rawFreezeFrame;
-        const freezeFrame = Math.min(Math.max(0, rawFreezeFrame), maxFrame);
-        const remove = isFrozen;
-        (0, save_sequence_prop_1.saveSequenceProps)({
-            changes: [
-                {
-                    fileName: validatedLocation.source,
-                    nodePath,
-                    fieldKey: 'freeze',
-                    value: remove ? null : freezeFrame,
-                    defaultValue: null,
-                    schema: sequence.controls.schema,
-                },
-            ],
-            setPropStatuses,
-            clientId: previewServerState.clientId,
-            undoLabel: remove ? 'Unfreeze sequence' : 'Freeze sequence',
-            redoLabel: remove ? 'Freeze sequence again' : 'Unfreeze sequence again',
-        });
-    }, [
-        canToggleFreeze,
-        isFrozen,
+    const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.useSequenceFreezeFrameMenuItem)({
+        clientId: previewServerState.type === 'connected'
+            ? previewServerState.clientId
+            : null,
         nodePath,
-        previewServerState,
-        sequence.controls,
-        sequence.duration,
-        sequence.from,
+        propStatusesForOverride,
+        sequence,
         sequenceFrameOffset,
         setPropStatuses,
         timelinePosition,
-        validatedLocation,
-    ]);
+        validatedSource: (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _f !== void 0 ? _f : null,
+    });
     const contextMenuValues = (0, react_1.useMemo)(() => {
         if (!previewConnected) {
             return [];
@@ -703,37 +663,22 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
                     subMenu: null,
                     value: 'rename-sequence',
                 },
-                {
-                    type: 'item',
-                    id: 'toggle-freeze-frame',
-                    keyHint: null,
-                    label: isFrozen ? 'Unfreeze frame' : 'Freeze frame',
-                    leftItem: null,
-                    disabled: !canToggleFreeze,
-                    onClick: () => {
-                        onToggleFreezeFrame();
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    value: 'toggle-freeze-frame',
-                },
+                freezeFrameMenuItem,
             ],
         });
     }, [
         assetLinkInfo,
         canOpenInEditor,
         canRenameThisSequence,
-        canToggleFreeze,
         deleteDisabled,
         disableInteractivityDisabled,
         duplicateDisabled,
         fileLocation,
-        isFrozen,
+        freezeFrameMenuItem,
         onDeleteSequenceFromSource,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         onRenameSequence,
-        onToggleFreezeFrame,
         openInEditor,
         originalLocation,
         previewConnected,

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

@@ -1,14 +1,24 @@
 import React from 'react';
-import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { CanUpdateSequencePropStatusKeyframed, SequencePropsSubscriptionKey, InteractivitySchema } 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 { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import { type TimelineKeyframeControlsMode } from './TimelineKeyframeControls';
+export declare const TimelineSequenceKeyframedValue: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: InteractivitySchema;
+    readonly propStatus: CanUpdateSequencePropStatusKeyframed;
+    readonly sourceFrame: number;
+}>;
 export declare const TimelineSequencePropItem: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly validatedLocation: CodePosition;
     readonly rowDepth: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly nodePathInfo: SequenceNodePathInfo;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
     readonly keyframeDisplayOffset: number;
+    readonly keyframeControlsMode?: TimelineKeyframeControlsMode;
 }>;

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineSequencePropItem = void 0;
+exports.TimelineSequencePropItem = exports.TimelineSequenceKeyframedValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -115,34 +115,73 @@ const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
     }, [clearDragOverrides, 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 { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+const TimelineSequenceKeyframedValue = ({ field, fileName, nodePath, schema, propStatus, sourceFrame }) => {
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     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 dragOverrideValue = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[field.key];
+    }, [getDragOverrides, nodePath, field.key]);
+    const onSaveKeyframed = (0, react_1.useCallback)((value, frame) => {
+        if (!clientId) {
+            return Promise.reject(new Error('Not connected to studio server'));
+        }
+        return (0, call_add_keyframe_1.callAddSequenceKeyframe)({
+            fileName,
+            nodePath,
+            fieldKey: field.key,
+            sourceFrame: frame,
+            value,
+            schema,
+            setPropStatuses,
+            clientId,
+        });
+    }, [clientId, field.key, fileName, nodePath, schema, setPropStatuses]);
+    const onKeyframedDragValueChange = (0, react_1.useCallback)((value) => {
+        setDragOverrides(nodePath, field.key, remotion_1.Internals.makeKeyframedDragOverride({
+            status: propStatus,
+            frame: sourceFrame,
+            value,
+        }));
+    }, [propStatus, field.key, nodePath, setDragOverrides, sourceFrame]);
+    const onKeyframedDragEnd = (0, react_1.useCallback)(() => {
+        clearDragOverrides(nodePath);
+    }, [clearDragOverrides, nodePath]);
+    return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, sourceFrame: sourceFrame, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onKeyframedDragValueChange, onDragEnd: onKeyframedDragEnd, scaleLockNodePath: nodePath }));
+};
+exports.TimelineSequenceKeyframedValue = TimelineSequenceKeyframedValue;
+const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, keyframeControlsMode = 'timeline', }) => {
+    var _a, _b;
+    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setPropStatuses } = (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 timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const sourceFrame = timelinePosition - keyframeDisplayOffset;
     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 keyframable = (0, studio_shared_1.isSchemaFieldKeyframable)({
+        schema,
+        key: field.key,
+    });
     const keyframeControls = propStatus !== null &&
-        (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
-            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: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: schema, effectIndex: null, nodePathInfo: nodePathInfo })) : null;
+        (keyframeControlsMode === 'inspector'
+            ? keyframable
+            : (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
+                propStatus,
+                selected: selection.selected,
+                keyframable,
+            })) ? (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, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
     const style = (0, react_1.useMemo)(() => {
         return {
             ...fieldRowBase,
@@ -203,41 +242,6 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         validatedLocation.source,
         propStatus,
     ]);
-    const onSaveKeyframed = (0, react_1.useCallback)((value, sourceFrame) => {
-        if (!clientId) {
-            return Promise.reject(new Error('Not connected to studio server'));
-        }
-        return (0, call_add_keyframe_1.callAddSequenceKeyframe)({
-            fileName: validatedLocation.source,
-            nodePath,
-            fieldKey: field.key,
-            sourceFrame,
-            value,
-            schema,
-            setPropStatuses,
-            clientId,
-        });
-    }, [
-        clientId,
-        field.key,
-        nodePath,
-        schema,
-        setPropStatuses,
-        validatedLocation.source,
-    ]);
-    const onKeyframedDragValueChange = (0, react_1.useCallback)((value) => {
-        if (propStatus === null || !isKeyframedStatus(propStatus)) {
-            throw new Error('Expected keyframed status');
-        }
-        setDragOverrides(nodePath, field.key, remotion_1.Internals.makeKeyframedDragOverride({
-            status: propStatus,
-            frame: jsxFrame,
-            value,
-        }));
-    }, [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 (propStatus === null || !isKeyframedStatus(propStatus)) {
@@ -303,7 +307,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         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(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 }) }))] }));
+            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(exports.TimelineSequenceKeyframedValue, { field: field, fileName: validatedLocation.source, nodePath: nodePath, schema: schema, propStatus: propStatus, sourceFrame: sourceFrame }) })) : 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/TimelineTransformOriginField.js

@@ -4,6 +4,7 @@ exports.TimelineTransformOriginField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const transform_origin_utils_1 = require("./transform-origin-utils");
@@ -31,13 +32,11 @@ const TimelineTransformOriginField = ({ field, propStatus, effectiveValue, onSav
         step: configuredStep,
     }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const formatted = (0, timeline_field_utils_1.formatTimelineNumber)({
-            decimalPlaces,
-            fixed: false,
+        return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+            fieldSchema: field.fieldSchema,
             value: v,
         });
-        return `${formatted}%`;
-    }, [decimalPlaces]);
+    }, [field.fieldSchema]);
     const serialize = (0, react_1.useCallback)((x, y) => {
         var _a;
         return (0, transform_origin_utils_1.serializeTransformOrigin)({

package/dist/components/Timeline/TimelineTranslateField.js

@@ -4,6 +4,7 @@ exports.TimelineTranslateField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const timeline_translate_utils_1 = require("./timeline-translate-utils");
 const leftDraggerStyle = {
@@ -27,13 +28,11 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
         step: configuredStep,
     }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const formatted = (0, timeline_field_utils_1.formatTimelineNumber)({
-            decimalPlaces,
-            fixed: false,
+        return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+            fieldSchema: field.fieldSchema,
             value: v,
         });
-        return `${formatted}px`;
-    }, [decimalPlaces]);
+    }, [field.fieldSchema]);
     // --- X callbacks ---
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);

package/dist/components/Timeline/TimelineUvCoordinateField.js

@@ -4,6 +4,7 @@ exports.TimelineUvCoordinateField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const leftDraggerStyle = {
     paddingLeft: 0,
@@ -49,12 +50,11 @@ const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave,
         step: configuredStep,
     }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        return (0, timeline_field_utils_1.formatTimelineNumber)({
-            decimalPlaces,
-            fixed: true,
+        return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+            fieldSchema: field.fieldSchema,
             value: v,
         });
-    }, [decimalPlaces]);
+    }, [field.fieldSchema]);
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;

package/dist/components/Timeline/call-add-keyframe.d.ts

@@ -1,4 +1,4 @@
-import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 export type AddSequenceKeyframeChange = {
     fileName: string;
@@ -6,7 +6,7 @@ export type AddSequenceKeyframeChange = {
     fieldKey: string;
     sourceFrame: number;
     value: unknown;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type AddEffectKeyframeChange = AddSequenceKeyframeChange & {
     effectIndex: number;
@@ -17,7 +17,7 @@ export declare const callAddSequenceKeyframe: ({ fileName, nodePath, fieldKey, s
     fieldKey: string;
     sourceFrame: number;
     value: unknown;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;
@@ -34,7 +34,7 @@ export declare const callAddEffectKeyframe: ({ fileName, nodePath, effectIndex,
     fieldKey: string;
     sourceFrame: number;
     value: unknown;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;

package/dist/components/Timeline/call-delete-keyframe.d.ts

@@ -1,11 +1,11 @@
-import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 export type DeleteSequenceKeyframeChange = {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     fieldKey: string;
     sourceFrame: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type DeleteEffectKeyframeChange = DeleteSequenceKeyframeChange & {
     effectIndex: number;
@@ -15,7 +15,7 @@ export declare const callDeleteSequenceKeyframe: ({ fileName, nodePath, fieldKey
     nodePath: SequencePropsSubscriptionKey;
     fieldKey: string;
     sourceFrame: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;
@@ -25,7 +25,7 @@ export declare const callDeleteEffectKeyframe: ({ fileName, nodePath, effectInde
     effectIndex: number;
     fieldKey: string;
     sourceFrame: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;

package/dist/components/Timeline/call-move-keyframe.d.ts

@@ -1,4 +1,4 @@
-import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 export type MoveSequenceKeyframeChange = {
     fileName: string;
@@ -6,7 +6,7 @@ export type MoveSequenceKeyframeChange = {
     fieldKey: string;
     fromFrame: number;
     toFrame: number;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type MoveEffectKeyframeChange = MoveSequenceKeyframeChange & {
     effectIndex: number;

package/dist/components/Timeline/call-update-keyframe-settings.d.ts

@@ -1,12 +1,12 @@
 import { type KeyframeSettings } from '@remotion/studio-shared';
-import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 export declare const callUpdateSequenceKeyframeSettings: ({ fileName, nodePath, fieldKey, settings, schema, setPropStatuses, clientId, }: {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     fieldKey: string;
     settings: KeyframeSettings;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;
@@ -16,7 +16,7 @@ export declare const callUpdateEffectKeyframeSettings: ({ fileName, nodePath, ef
     effectIndex: number;
     fieldKey: string;
     settings: KeyframeSettings;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;

package/dist/components/Timeline/delete-selected-timeline-item.d.ts

@@ -1,7 +1,7 @@
 import type { OverrideIdToNodePaths, TSequence } from 'remotion';
 import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
 import type { SetPropStatuses } from './save-sequence-prop';
-import type { TimelineSelection } from './TimelineSelection';
+import { type TimelineSelection } from './TimelineSelection';
 export declare const deleteSelectedTimelineItem: ({ selection, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }: {
     selection: TimelineSelection;
     sequences: TSequence[];
@@ -10,6 +10,7 @@ export declare const deleteSelectedTimelineItem: ({ selection, sequences, overri
     clientId: string;
     confirm: ConfirmationDialogFunction;
 }) => Promise<boolean> | null;
+export declare const getTimelineSelectionAfterDeletingItems: (selections: readonly TimelineSelection[]) => readonly TimelineSelection[];
 export declare const deleteSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }: {
     selections: readonly TimelineSelection[];
     sequences: TSequence[];

package/dist/components/Timeline/delete-selected-timeline-item.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deleteSelectedTimelineItems = exports.deleteSelectedTimelineItem = void 0;
+exports.deleteSelectedTimelineItems = exports.getTimelineSelectionAfterDeletingItems = exports.deleteSelectedTimelineItem = void 0;
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const delete_selected_keyframe_1 = require("./delete-selected-keyframe");
+const TimelineSelection_1 = require("./TimelineSelection");
 const confirmDeletingDuplicatedSequences = (nodePathInfos, confirm) => {
     const duplicatedNodePathInfos = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath > 1);
     if (duplicatedNodePathInfos.length === 0) {
@@ -136,6 +137,31 @@ const isSequenceRowSelection = (selection) => selection.type === 'sequence';
 const isSequenceEffectSelection = (selection) => selection.type === 'sequence-effect';
 const isSequenceAllEffectsSelection = (selection) => selection.type === 'sequence-all-effects';
 const isKeyframeSelection = (selection) => selection.type === 'keyframe';
+const getSequenceSelectionAfterDeletingEffect = (selection) => {
+    if (selection.type !== 'sequence-effect' &&
+        selection.type !== 'sequence-all-effects') {
+        return null;
+    }
+    return {
+        type: 'sequence',
+        nodePathInfo: {
+            ...selection.nodePathInfo,
+            auxiliaryKeys: [],
+        },
+    };
+};
+const getTimelineSelectionAfterDeletingItems = (selections) => {
+    const nextSelections = new Map();
+    for (const selection of selections) {
+        const nextSelection = getSequenceSelectionAfterDeletingEffect(selection);
+        if (!nextSelection) {
+            return [];
+        }
+        nextSelections.set((0, TimelineSelection_1.getTimelineSelectionKey)(nextSelection), nextSelection);
+    }
+    return Array.from(nextSelections.values());
+};
+exports.getTimelineSelectionAfterDeletingItems = getTimelineSelectionAfterDeletingItems;
 const areSelectionsOnlyOfType = (selections, type) => selections.every((selection) => selection.type === type);
 const assertTimelineSelectionsHaveSameType = (selections) => {
     const firstSelection = selections[0];

package/dist/components/Timeline/parse-keyframe-field-from-node-path.js

@@ -6,7 +6,7 @@ const parseKeyframeFieldFromNodePath = (auxiliaryKeys) => {
     if (auxiliaryKeys[0] === 'controls' && auxiliaryKeys.length >= 2) {
         return {
             type: 'sequence',
-            fieldKey: auxiliaryKeys[1],
+            fieldKey: auxiliaryKeys.slice(1).join('.'),
         };
     }
     // Effect field: ['effects', effectIndex, fieldKey]
@@ -18,7 +18,7 @@ const parseKeyframeFieldFromNodePath = (auxiliaryKeys) => {
         return {
             type: 'effect',
             effectIndex,
-            fieldKey: auxiliaryKeys[2],
+            fieldKey: auxiliaryKeys.slice(2).join('.'),
         };
     }
     return null;

package/dist/components/Timeline/reset-selected-timeline-props.d.ts

@@ -1,4 +1,4 @@
-import type { OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, SequenceSchema, TSequence } from 'remotion';
+import type { OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, InteractivitySchema, TSequence } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 import type { TimelineSelection } from './TimelineSelection';
 type SequencePropResetTarget = {
@@ -8,7 +8,7 @@ type SequencePropResetTarget = {
     readonly fieldKey: string;
     readonly value: unknown;
     readonly defaultValue: string | null;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
 };
 type EffectPropResetTarget = {
     readonly type: 'effect-prop';
@@ -18,7 +18,7 @@ type EffectPropResetTarget = {
     readonly fieldKey: string;
     readonly value: unknown;
     readonly defaultValue: string | null;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
 };
 type TimelinePropResetTarget = SequencePropResetTarget | EffectPropResetTarget;
 export declare const getTimelinePropResetTargets: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }: {

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -34,9 +34,11 @@ const isResettablePropStatus = ({ propStatus, defaultValue, }) => {
 const getDefaultValue = (fieldSchema) => fieldSchema.default !== undefined
     ? JSON.stringify(fieldSchema.default)
     : null;
+const getActiveFieldSchema = ({ schema, key, resolveValue, }) => {
+    return remotion_1.Internals.flattenActiveSchema(schema, resolveValue)[key];
+};
 const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     var _a;
-    var _b;
     const propSelections = selections.filter(isPropResetSelection);
     if (propSelections.length === 0) {
         return null;
@@ -52,7 +54,7 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
             overrideIdsToNodePaths,
             nodePathInfo: selection.nodePathInfo,
         });
-        const sequence = (_b = track === null || track === void 0 ? void 0 : track.sequence) !== null && _b !== void 0 ? _b : null;
+        const sequence = (_a = track === null || track === void 0 ? void 0 : track.sequence) !== null && _a !== void 0 ? _a : null;
         if (!sequence) {
             continue;
         }
@@ -61,11 +63,23 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
             if (!sequence.controls) {
                 continue;
             }
-            const sequenceFieldSchema = sequence.controls.schema[selection.key];
-            const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[selection.key];
+            const sequencePropStatus = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
+            const { merged: sequenceValuesDotNotation } = remotion_1.Internals.computeEffectiveSchemaValuesDotNotation({
+                schema: sequence.controls.schema,
+                currentValue: sequence.controls.currentRuntimeValueDotNotation,
+                overrideValues: {},
+                propStatus: sequencePropStatus,
+                frame: null,
+            });
+            const sequenceFieldSchema = getActiveFieldSchema({
+                schema: sequence.controls.schema,
+                key: selection.key,
+                resolveValue: (key) => sequenceValuesDotNotation[key],
+            });
+            const selectedPropStatus = sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus[selection.key];
             if (!isVisibleFieldSchema(sequenceFieldSchema) ||
                 !isResettablePropStatus({
-                    propStatus: sequencePropStatus,
+                    propStatus: selectedPropStatus,
                     defaultValue: sequenceFieldSchema.default,
                 })) {
                 continue;