@remotion/studio 4.0.483 → 4.0.484

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -78,6 +78,19 @@ const effectDropHighlight = {
     outlineOffset: -1,
 };
 const SEQUENCE_REORDER_MIME_TYPE = 'application/remotion-sequence-reorder';
+const getSequenceNameSaveAction = ({ editedName, currentDisplayName, fallbackDisplayName, hasStaticNameProp, }) => {
+    if (!hasStaticNameProp &&
+        (editedName === '' || editedName === fallbackDisplayName)) {
+        return { type: 'noop' };
+    }
+    if (hasStaticNameProp && editedName === currentDisplayName) {
+        return { type: 'noop' };
+    }
+    return {
+        type: 'save',
+        defaultValue: editedName === '' ? JSON.stringify('') : null,
+    };
+};
 let currentSequenceDrag = null;
 const TimelineSequenceExpandArrow = ({ disabled, isExpanded, nodePathInfo, onToggleExpand, sequence }) => {
     const { filteredTree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
@@ -150,9 +163,9 @@ const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
 const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, trackIndex, }) => {
-    var _a, _b, _c;
-    var _d, _e, _f;
-    const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
+    var _a, _b, _c, _d;
+    var _e, _f, _g, _h;
+    const nodePath = (_e = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _e !== void 0 ? _e : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
@@ -190,7 +203,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     }, [originalLocation]);
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
-    const parentId = (_e = sequence.parent) !== null && _e !== void 0 ? _e : null;
+    const parentId = (_f = sequence.parent) !== null && _f !== void 0 ? _f : null;
     const canReorderSequence = previewConnected &&
         Boolean(nodePath && nodePathKey && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) &&
         (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) === 1;
@@ -453,14 +466,26 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         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 fallbackDisplayName = (_g = (_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.componentName) !== null && _g !== void 0 ? _g : '<Sequence>';
+    const staticNamePropValue = (codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status) === 'static' &&
+        typeof codeNameStatus.codeValue === 'string'
+        ? codeNameStatus.codeValue
+        : null;
+    const hasStaticNameProp = staticNamePropValue !== null;
     const displayName = (0, react_1.useMemo)(() => {
-        if (codeNameStatus &&
-            codeNameStatus.status === 'static' &&
-            typeof codeNameStatus.codeValue === 'string') {
-            return codeNameStatus.codeValue;
+        if (staticNamePropValue !== null) {
+            return staticNamePropValue;
+        }
+        if ((codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status) === 'static') {
+            return fallbackDisplayName;
         }
         return sequence.displayName;
-    }, [codeNameStatus, sequence.displayName]);
+    }, [
+        codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status,
+        fallbackDisplayName,
+        sequence.displayName,
+        staticNamePropValue,
+    ]);
     const onToggleVisibility = (0, react_1.useCallback)((type) => {
         if (!sequence.controls ||
             !nodePath ||
@@ -552,7 +577,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&
         selectedItems.length === 1 &&
-        ((_b = selectedItems[0]) === null || _b === void 0 ? void 0 : _b.type) === 'sequence';
+        ((_c = selectedItems[0]) === null || _c === void 0 ? void 0 : _c.type) === 'sequence';
     const onCancelRenaming = (0, react_1.useCallback)(() => {
         setIsRenaming(false);
     }, []);
@@ -565,7 +590,13 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             setIsRenaming(false);
             return;
         }
-        if (name === displayName) {
+        const action = getSequenceNameSaveAction({
+            editedName: name,
+            currentDisplayName: displayName,
+            fallbackDisplayName,
+            hasStaticNameProp,
+        });
+        if (action.type === 'noop') {
             setIsRenaming(false);
             return;
         }
@@ -576,7 +607,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
                     nodePath,
                     fieldKey: 'name',
                     value: name,
-                    defaultValue: null,
+                    defaultValue: action.defaultValue,
                     schema: sequence.controls.schema,
                 },
             ],
@@ -590,6 +621,8 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     }, [
         canRenameThisSequence,
         displayName,
+        fallbackDisplayName,
+        hasStaticNameProp,
         nodePath,
         previewServerState,
         sequence.controls,
@@ -640,7 +673,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         sequenceFrameOffset,
         setPropStatuses,
         timelinePosition,
-        validatedSource: (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _f !== void 0 ? _f : null,
+        validatedSource: (_h = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _h !== void 0 ? _h : null,
     });
     const canAddEffect = (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects) === true &&
         previewServerState.type === 'connected' &&
@@ -747,7 +780,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const canDropEffect = previewServerState.type === 'connected' &&
         nodePath !== null &&
         validatedLocation !== null &&
-        ((_c = sequence.controls) === null || _c === void 0 ? void 0 : _c.supportsEffects) === true;
+        ((_d = sequence.controls) === null || _d === void 0 ? void 0 : _d.supportsEffects) === true;
     const sequenceReorderLineStyle = (0, react_1.useMemo)(() => {
         if (!sequenceDropIndicator) {
             return null;
@@ -805,7 +838,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewConnected, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canRenameThisSequence || canOpenInEditor
             ? onSequenceDoubleClick
             : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
-                jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
                         " ",
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const TimelineSequenceName: React.FC<{
     readonly displayName: string;
+    readonly fallbackDisplayName: string;
     readonly selected: boolean;
     readonly containsSelection: boolean;
     readonly editing: boolean;

package/dist/components/Timeline/TimelineSequenceName.js

@@ -13,7 +13,7 @@ const getTruncatedDisplayName = (displayName) => {
     }
     return displayName;
 };
-const TimelineSequenceName = ({ displayName, selected, containsSelection, editing, onCancelEditing, onSaveName, }) => {
+const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, containsSelection, editing, onCancelEditing, onSaveName, }) => {
     const inputRef = (0, react_1.useRef)(null);
     const [draftName, setDraftName] = (0, react_1.useState)(displayName);
     const cancelNextBlurRef = (0, react_1.useRef)(false);
@@ -53,10 +53,11 @@ const TimelineSequenceName = ({ displayName, selected, containsSelection, editin
             WebkitUserSelect: 'text',
         };
     }, [style]);
-    const text = getTruncatedDisplayName(displayName) || '<Sequence>';
+    const editableDisplayName = displayName || fallbackDisplayName;
+    const text = getTruncatedDisplayName(editableDisplayName);
     (0, react_1.useEffect)(() => {
         if (!editing) {
-            setDraftName(displayName);
+            setDraftName(editableDisplayName);
             return;
         }
         const input = inputRef.current;
@@ -64,10 +65,10 @@ const TimelineSequenceName = ({ displayName, selected, containsSelection, editin
             return;
         }
         input.focus();
-        const basenameIndex = displayName.lastIndexOf('.');
-        const selectionEnd = basenameIndex > 0 ? basenameIndex : displayName.length;
+        const basenameIndex = editableDisplayName.lastIndexOf('.');
+        const selectionEnd = basenameIndex > 0 ? basenameIndex : editableDisplayName.length;
         input.setSelectionRange(0, selectionEnd);
-    }, [displayName, editing]);
+    }, [editableDisplayName, editing]);
     const save = (0, react_1.useCallback)(() => {
         onSaveName(draftName).catch(() => undefined);
     }, [draftName, onSaveName]);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatusKeyframed, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
+import type { CanUpdateSequencePropStatusKeyframed, InteractivitySchema, 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 { SchemaFieldInfo } from '../../helpers/timeline-layout';

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -9,6 +9,7 @@ const client_id_1 = require("../../helpers/client-id");
 const modals_1 = require("../../state/modals");
 const ContextMenu_1 = require("../ContextMenu");
 const call_add_keyframe_1 = require("./call-add-keyframe");
+const get_animation_item_selection_for_frame_1 = require("./get-animation-item-selection-for-frame");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
@@ -19,6 +20,7 @@ const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
+const update_selected_easing_1 = require("./update-selected-easing");
 const fieldRowBase = {};
 const isKeyframedStatus = (status) => {
     return status.status === 'keyframed';
@@ -162,6 +164,9 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     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 { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const propStatusesForOverride = remotion_1.Internals.getPropStatusesCtx(visualModePropStatuses, nodePath);
@@ -303,10 +308,84 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         onReset,
         previewServerState,
     ]);
+    const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
+        setFrame((current) => {
+            const next = { ...current, [videoConfig.id]: frame };
+            remotion_1.Internals.persistCurrentFrame(next);
+            return next;
+        });
+    }, [setFrame, videoConfig.id]);
+    const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
+        if (propStatus === null || propStatus.status === 'computed') {
+            return;
+        }
+        const keyframeSelection = {
+            type: 'keyframe',
+            nodePathInfo,
+            frame: sourceFrame + keyframeDisplayOffset,
+        };
+        if (propStatus.status === 'static') {
+            if (!keyframable || previewServerState.type !== 'connected') {
+                return;
+            }
+            const value = remotion_1.Internals.getEffectiveVisualModeValue({
+                propStatus,
+                dragOverrideValue,
+                frame: sourceFrame,
+                defaultValue: field.fieldSchema.default,
+                shouldResortToDefaultValueIfUndefined: true,
+            });
+            event.stopPropagation();
+            (0, call_add_keyframe_1.callAddSequenceKeyframe)({
+                fileName: validatedLocation.source,
+                nodePath,
+                fieldKey: field.key,
+                sourceFrame,
+                value,
+                schema,
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+            }).catch(() => undefined);
+            selectItems([keyframeSelection], { reveal: true });
+            seekToDisplayFrame(keyframeSelection.frame);
+            return;
+        }
+        const targetSelection = (0, get_animation_item_selection_for_frame_1.getAnimationItemSelectionForSourceFrame)({
+            includeEasings: (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(propStatus.interpolationFunction),
+            keyframeDisplayOffset,
+            keyframes: propStatus.keyframes,
+            nodePathInfo,
+            sourceFrame,
+        });
+        if (targetSelection === null) {
+            return;
+        }
+        event.stopPropagation();
+        selectItems([targetSelection], { reveal: true });
+        if (targetSelection.type === 'keyframe') {
+            seekToDisplayFrame(targetSelection.frame);
+        }
+    }, [
+        dragOverrideValue,
+        field.fieldSchema.default,
+        field.key,
+        keyframeDisplayOffset,
+        keyframable,
+        nodePath,
+        nodePathInfo,
+        previewServerState,
+        propStatus,
+        schema,
+        seekToDisplayFrame,
+        selectItems,
+        setPropStatuses,
+        sourceFrame,
+        validatedLocation.source,
+    ]);
     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, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
+    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, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, 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(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 }));
 };

package/dist/components/Timeline/TimelineSlider.js

@@ -16,12 +16,18 @@ const container = {
     top: 0,
     pointerEvents: 'none',
 };
+const PLAYHEAD_LINE_WIDTH = 1;
 const line = {
     height: '100vh',
-    width: 1,
+    width: PLAYHEAD_LINE_WIDTH,
     position: 'fixed',
     backgroundColor: '#f02c00',
 };
+const PLAYHEAD_CENTER_OFFSET = PLAYHEAD_LINE_WIDTH / 2;
+const getTimelineSliderTransform = ({ durationInFrames, frame, width, }) => {
+    const left = (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, durationInFrames, width);
+    return `translateX(${left - PLAYHEAD_CENTER_OFFSET}px)`;
+};
 exports.redrawTimelineSliderFast = (0, react_1.createRef)();
 const TimelineSlider = () => {
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -53,7 +59,11 @@ const TimelineSliderInner = () => {
         if (!el || measuredWidth === undefined || measuredWidth === 0) {
             return;
         }
-        el.style.transform = `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(timelinePosition, videoConfig.durationInFrames, measuredWidth)}px)`;
+        el.style.transform = getTimelineSliderTransform({
+            durationInFrames: videoConfig.durationInFrames,
+            frame: timelinePosition,
+            width: measuredWidth,
+        });
     }, [
         timelinePosition,
         videoConfig.durationInFrames,
@@ -69,7 +79,11 @@ const TimelineSliderInner = () => {
                 if (!current) {
                     throw new Error('unexpectedly did not have ref to timelineslider');
                 }
-                current.style.transform = `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, (0, imperative_state_1.getCurrentDuration)(), (_b = width !== null && width !== void 0 ? width : (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0)}px)`;
+                current.style.transform = getTimelineSliderTransform({
+                    durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                    frame,
+                    width: (_b = width !== null && width !== void 0 ? width : (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0,
+                });
             },
         };
     }, []);

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

@@ -1,4 +1,4 @@
-import type { OverrideIdToNodePaths, TSequence } from 'remotion';
+import type { OverrideIdToNodePaths, PropStatuses, TSequence } from 'remotion';
 import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
 import type { SetPropStatuses } from './save-sequence-prop';
 import { type TimelineSelection } from './TimelineSelection';
@@ -10,7 +10,13 @@ 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 getTimelineSelectionAfterDeletingItems: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, timelinePosition, }: {
+    readonly selections: readonly TimelineSelection[];
+    readonly sequences?: TSequence[] | undefined;
+    readonly overrideIdsToNodePaths?: OverrideIdToNodePaths | undefined;
+    readonly propStatuses?: PropStatuses | undefined;
+    readonly timelinePosition?: number | undefined;
+}) => 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,10 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.deleteSelectedTimelineItems = exports.getTimelineSelectionAfterDeletingItems = exports.deleteSelectedTimelineItem = void 0;
+const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const delete_selected_keyframe_1 = require("./delete-selected-keyframe");
+const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const get_easing_selection_after_keyframe_delete_1 = require("./get-easing-selection-after-keyframe-delete");
+const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
 const TimelineSelection_1 = require("./TimelineSelection");
+const update_selected_easing_1 = require("./update-selected-easing");
 const confirmDeletingDuplicatedSequences = (nodePathInfos, confirm) => {
     const duplicatedNodePathInfos = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath > 1);
     if (duplicatedNodePathInfos.length === 0) {
@@ -150,7 +155,81 @@ const getSequenceSelectionAfterDeletingEffect = (selection) => {
         },
     };
 };
-const getTimelineSelectionAfterDeletingItems = (selections) => {
+const getEasingSelectionAfterDeletingKeyframes = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, timelinePosition, }) => {
+    var _a;
+    if (sequences === undefined ||
+        overrideIdsToNodePaths === undefined ||
+        propStatuses === undefined ||
+        timelinePosition === undefined) {
+        return null;
+    }
+    const keyframeSelections = selections.filter(isKeyframeSelection);
+    if (keyframeSelections.length !== 1) {
+        return null;
+    }
+    const [selection] = keyframeSelections;
+    if (!selection) {
+        return null;
+    }
+    const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(selection.nodePathInfo.auxiliaryKeys);
+    if (field === null) {
+        return null;
+    }
+    const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+        sequences,
+        overrideIdsToNodePaths,
+        nodePathInfo: selection.nodePathInfo,
+    });
+    if (!track || !track.sequence.controls) {
+        return null;
+    }
+    const nodePath = selection.nodePathInfo.sequenceSubscriptionKey;
+    const sourceFrame = selection.frame - track.keyframeDisplayOffset;
+    if (field.type === 'sequence') {
+        const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[field.fieldKey];
+        if ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) !== 'keyframed' ||
+            !(0, update_selected_easing_1.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction)) {
+            return null;
+        }
+        return (0, get_easing_selection_after_keyframe_delete_1.getEasingSelectionAfterKeyframeDelete)({
+            deletedSourceFrames: [sourceFrame],
+            keyframeDisplayOffset: track.keyframeDisplayOffset,
+            nodePathInfo: selection.nodePathInfo,
+            propStatus: sequencePropStatus,
+            timelinePosition,
+        });
+    }
+    const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
+        nodePath,
+        effectIndex: field.effectIndex,
+    });
+    const effectPropStatus = effectStatus.type === 'can-update-effect'
+        ? effectStatus.props[field.fieldKey]
+        : null;
+    if ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed' ||
+        !(0, update_selected_easing_1.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction)) {
+        return null;
+    }
+    return (0, get_easing_selection_after_keyframe_delete_1.getEasingSelectionAfterKeyframeDelete)({
+        deletedSourceFrames: [sourceFrame],
+        keyframeDisplayOffset: track.keyframeDisplayOffset,
+        nodePathInfo: selection.nodePathInfo,
+        propStatus: effectPropStatus,
+        timelinePosition,
+    });
+};
+const getTimelineSelectionAfterDeletingItems = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, timelinePosition, }) => {
+    const easingSelection = getEasingSelectionAfterDeletingKeyframes({
+        selections,
+        sequences,
+        overrideIdsToNodePaths,
+        propStatuses,
+        timelinePosition,
+    });
+    if (easingSelection !== null) {
+        return [easingSelection];
+    }
     const nextSelections = new Map();
     for (const selection of selections) {
         const nextSelection = getSequenceSelectionAfterDeletingEffect(selection);

package/dist/components/Timeline/get-animation-item-selection-for-frame.d.ts

@@ -0,0 +1,18 @@
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineSelection } from './TimelineSelection';
+type AnimationItemSelection = Extract<TimelineSelection, {
+    type: 'keyframe';
+} | {
+    type: 'easing';
+}>;
+type AnimationKeyframe = {
+    readonly frame: number;
+};
+export declare const getAnimationItemSelectionForSourceFrame: ({ includeEasings, keyframeDisplayOffset, keyframes, nodePathInfo, sourceFrame, }: {
+    readonly includeEasings: boolean;
+    readonly keyframeDisplayOffset: number;
+    readonly keyframes: readonly AnimationKeyframe[];
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly sourceFrame: number;
+}) => AnimationItemSelection | null;
+export {};

package/dist/components/Timeline/get-animation-item-selection-for-frame.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAnimationItemSelectionForSourceFrame = void 0;
+const getKeyframeSelection = ({ keyframe, keyframeDisplayOffset, nodePathInfo, }) => {
+    return {
+        type: 'keyframe',
+        nodePathInfo,
+        frame: keyframe.frame + keyframeDisplayOffset,
+    };
+};
+const getAnimationItemSelectionForSourceFrame = ({ includeEasings, keyframeDisplayOffset, keyframes, nodePathInfo, sourceFrame, }) => {
+    const firstKeyframe = keyframes[0];
+    if (!firstKeyframe) {
+        return null;
+    }
+    for (let i = 0; i < keyframes.length; i++) {
+        const keyframe = keyframes[i];
+        if (keyframe.frame === sourceFrame) {
+            return getKeyframeSelection({
+                keyframe,
+                keyframeDisplayOffset,
+                nodePathInfo,
+            });
+        }
+        const nextKeyframe = keyframes[i + 1];
+        if (!nextKeyframe) {
+            continue;
+        }
+        if (sourceFrame > keyframe.frame && sourceFrame < nextKeyframe.frame) {
+            if (!includeEasings) {
+                return null;
+            }
+            return {
+                type: 'easing',
+                nodePathInfo,
+                fromFrame: keyframe.frame + keyframeDisplayOffset,
+                toFrame: nextKeyframe.frame + keyframeDisplayOffset,
+                segmentIndex: i,
+            };
+        }
+    }
+    const lastKeyframe = keyframes[keyframes.length - 1];
+    return getKeyframeSelection({
+        keyframe: sourceFrame < firstKeyframe.frame ? firstKeyframe : lastKeyframe,
+        keyframeDisplayOffset,
+        nodePathInfo,
+    });
+};
+exports.getAnimationItemSelectionForSourceFrame = getAnimationItemSelectionForSourceFrame;

package/dist/components/Timeline/get-easing-selection-after-keyframe-delete.d.ts

@@ -0,0 +1,15 @@
+import type { CanUpdateSequencePropStatusKeyframed } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const getEasingSelectionAfterKeyframeDelete: ({ deletedSourceFrames, keyframeDisplayOffset, nodePathInfo, propStatus, timelinePosition, }: {
+    readonly deletedSourceFrames: readonly number[];
+    readonly keyframeDisplayOffset: number;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly propStatus: CanUpdateSequencePropStatusKeyframed;
+    readonly timelinePosition: number;
+}) => {
+    readonly type: "easing";
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly fromFrame: number;
+    readonly toFrame: number;
+    readonly segmentIndex: number;
+} | null;

package/dist/components/Timeline/get-easing-selection-after-keyframe-delete.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEasingSelectionAfterKeyframeDelete = void 0;
+const getEasingSelectionAfterKeyframeDelete = ({ deletedSourceFrames, keyframeDisplayOffset, nodePathInfo, propStatus, timelinePosition, }) => {
+    const deletedSourceFrameSet = new Set(deletedSourceFrames);
+    const remainingKeyframes = propStatus.keyframes.filter((keyframe) => !deletedSourceFrameSet.has(keyframe.frame));
+    const sourceFrame = timelinePosition - keyframeDisplayOffset;
+    for (let i = 0; i < remainingKeyframes.length - 1; i++) {
+        const keyframe = remainingKeyframes[i];
+        const nextKeyframe = remainingKeyframes[i + 1];
+        if (!keyframe || !nextKeyframe) {
+            continue;
+        }
+        if (sourceFrame > keyframe.frame && sourceFrame < nextKeyframe.frame) {
+            return {
+                type: 'easing',
+                nodePathInfo,
+                fromFrame: keyframe.frame + keyframeDisplayOffset,
+                toFrame: nextKeyframe.frame + keyframeDisplayOffset,
+                segmentIndex: i,
+            };
+        }
+    }
+    return null;
+};
+exports.getEasingSelectionAfterKeyframeDelete = getEasingSelectionAfterKeyframeDelete;

package/dist/components/Timeline/save-sequence-prop.js

@@ -20,6 +20,7 @@ const saveSequenceProps = ({ changes, setPropStatuses, clientId, undoLabel, redo
                 previous: prev,
                 fieldKey: change.fieldKey,
                 value: change.value,
+                defaultValue: change.defaultValue,
                 schema: change.schema,
             }),
             apiCall: () => (0, call_api_1.callApi)('/api/save-sequence-props', {
@@ -45,6 +46,7 @@ const saveSequenceProps = ({ changes, setPropStatuses, clientId, undoLabel, redo
             previous: prev,
             fieldKey: change.fieldKey,
             value: change.value,
+            defaultValue: change.defaultValue,
             schema: change.schema,
         }));
     }

package/dist/components/Timeline/update-selected-easing.d.ts

@@ -23,6 +23,7 @@ export type SelectedEasingUpdate = {
     readonly currentEasing: TimelineEasingValue;
     readonly propStatus: CanUpdateSequencePropStatusKeyframed;
 };
+export declare const canEditEasingForInterpolationFunction: (interpolationFunction: string) => boolean;
 export declare const getSelectedEasingUpdate: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
     selection: {
         readonly type: "easing";

package/dist/components/Timeline/update-selected-easing.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateSelectedTimelineEasings = exports.getTimelineEasingValueForSelection = exports.getEasingSelections = exports.makeEasingDragOverride = exports.getSelectedEasingUpdates = exports.getSelectedEasingUpdate = void 0;
+exports.updateSelectedTimelineEasings = exports.getTimelineEasingValueForSelection = exports.getEasingSelections = exports.makeEasingDragOverride = exports.getSelectedEasingUpdates = exports.getSelectedEasingUpdate = exports.canEditEasingForInterpolationFunction = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings");
@@ -8,6 +8,7 @@ const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info
 const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
 const canEditEasingForInterpolationFunction = (interpolationFunction) => interpolationFunction === 'interpolate' ||
     interpolationFunction === 'interpolateColors';
+exports.canEditEasingForInterpolationFunction = canEditEasingForInterpolationFunction;
 const isEasingSelection = (selection) => selection.type === 'easing';
 const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     var _a;
@@ -33,7 +34,7 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         }
         const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[field.fieldKey];
         if ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) !== 'keyframed' ||
-            !canEditEasingForInterpolationFunction(sequencePropStatus.interpolationFunction)) {
+            !(0, exports.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction)) {
             return null;
         }
         return {
@@ -60,7 +61,7 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         ? effectStatus.props[field.fieldKey]
         : null;
     if ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed' ||
-        !canEditEasingForInterpolationFunction(effectPropStatus.interpolationFunction)) {
+        !(0, exports.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction)) {
         return null;
     }
     return {