@remotion/studio 4.0.482 → 4.0.484

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceDurationDragValue = void 0;
+exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -32,12 +32,25 @@ const canUpdateFrom = ({ propStatuses, nodePath, }) => {
     const status = (_b = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.from) === null || _b === void 0 ? void 0 : _b.status;
     return status === 'static';
 };
+const canUpdateTrimBefore = ({ propStatuses, nodePath, }) => {
+    var _a, _b;
+    const status = (_b = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.trimBefore) === null || _b === void 0 ? void 0 : _b.status;
+    return status === 'static';
+};
 const isDurationDraggableSequence = (sequence) => {
     return ((sequence.type === 'sequence' || sequence.type === 'image') &&
         !sequence.loopDisplay &&
         !sequence.isInsideSeries &&
         Boolean(sequence.controls));
 };
+const isLeftEdgeDraggableSequence = (sequence) => {
+    return (!sequence.isInsideSeries &&
+        Boolean(sequence.controls) &&
+        (sequence.type === 'sequence' ||
+            sequence.type === 'image' ||
+            sequence.type === 'audio' ||
+            sequence.type === 'video'));
+};
 const isFromDraggableSequence = (sequence) => {
     return (!sequence.loopDisplay &&
         !sequence.isInsideSeries &&
@@ -45,6 +58,68 @@ const isFromDraggableSequence = (sequence) => {
 };
 const getTimelineSequenceDurationDragValue = ({ initialDuration, deltaFrames, }) => Math.max(1, initialDuration + deltaFrames);
 exports.getTimelineSequenceDurationDragValue = getTimelineSequenceDurationDragValue;
+const getTimelineSequenceLeftEdgeDragDelta = ({ initialDuration, initialTrimBefore, deltaFrames, }) => {
+    const minDeltaFrames = 0 - initialTrimBefore;
+    const maxDeltaFrames = initialDuration - 1;
+    return Math.max(minDeltaFrames, Math.min(deltaFrames, maxDeltaFrames));
+};
+exports.getTimelineSequenceLeftEdgeDragDelta = getTimelineSequenceLeftEdgeDragDelta;
+const getTimelineSequenceLeftEdgeDragValues = ({ initialDuration, initialFrom, initialTrimBefore, deltaFrames, }) => {
+    const clampedDeltaFrames = (0, exports.getTimelineSequenceLeftEdgeDragDelta)({
+        initialDuration,
+        initialTrimBefore,
+        deltaFrames,
+    });
+    return {
+        durationInFrames: initialDuration - clampedDeltaFrames,
+        from: initialFrom + clampedDeltaFrames,
+        trimBefore: initialTrimBefore + clampedDeltaFrames,
+    };
+};
+exports.getTimelineSequenceLeftEdgeDragValues = getTimelineSequenceLeftEdgeDragValues;
+const getTimelineSequenceLeftEdgeDragChanges = ({ targets, deltaFrames, }) => {
+    return targets.flatMap((target) => {
+        const nextValues = (0, exports.getTimelineSequenceLeftEdgeDragValues)({
+            initialDuration: target.initialDuration,
+            initialFrom: target.initialFrom,
+            initialTrimBefore: target.initialTrimBefore,
+            deltaFrames,
+        });
+        const changes = [];
+        if (nextValues.from !== target.initialFrom) {
+            changes.push({
+                fileName: target.fileName,
+                nodePath: target.nodePath,
+                fieldKey: 'from',
+                value: nextValues.from,
+                defaultValue: '0',
+                schema: target.schema,
+            });
+        }
+        if (nextValues.durationInFrames !== target.initialDuration) {
+            changes.push({
+                fileName: target.fileName,
+                nodePath: target.nodePath,
+                fieldKey: 'durationInFrames',
+                value: nextValues.durationInFrames,
+                defaultValue: null,
+                schema: target.schema,
+            });
+        }
+        if (nextValues.trimBefore !== target.initialTrimBefore) {
+            changes.push({
+                fileName: target.fileName,
+                nodePath: target.nodePath,
+                fieldKey: 'trimBefore',
+                value: nextValues.trimBefore,
+                defaultValue: '0',
+                schema: target.schema,
+            });
+        }
+        return changes;
+    });
+};
+exports.getTimelineSequenceLeftEdgeDragChanges = getTimelineSequenceLeftEdgeDragChanges;
 const getTimelineSequenceDurationDragChanges = ({ targets, deltaFrames, }) => {
     return targets.flatMap((target) => {
         const nextValue = (0, exports.getTimelineSequenceDurationDragValue)({
@@ -141,6 +216,60 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
     return [...targets.values()];
 };
 exports.getTimelineSequenceDurationDragTargets = getTimelineSequenceDurationDragTargets;
+const getTimelineSequenceLeftEdgeDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    var _a, _b;
+    const draggedSelectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(draggedNodePathInfo);
+    const selectedSequenceItems = selectedItems.filter((item) => item.type === 'sequence');
+    const draggedItemIsSelected = selectedSequenceItems.some((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo) ===
+        draggedSelectionKey);
+    if (draggedItemIsSelected &&
+        selectedSequenceItems.length !== selectedItems.length) {
+        return null;
+    }
+    const targetNodePathInfos = draggedItemIsSelected && selectedSequenceItems.length > 1
+        ? selectedSequenceItems.map((item) => item.nodePathInfo)
+        : [draggedNodePathInfo];
+    const tracks = (0, calculate_timeline_1.calculateTimeline)({ sequences, overrideIdsToNodePaths });
+    const targets = new Map();
+    for (const nodePathInfo of targetNodePathInfos) {
+        const track = findSequenceTrack({ tracks, nodePathInfo });
+        const originalSequence = track
+            ? sequences.find((sequence) => sequence.id === track.sequence.id)
+            : null;
+        if (!track ||
+            !track.nodePathInfo ||
+            !originalSequence ||
+            !isLeftEdgeDraggableSequence(originalSequence)) {
+            return null;
+        }
+        const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
+        const trimsMedia = originalSequence.type === 'audio' || originalSequence.type === 'video';
+        if (!canUpdateFrom({ propStatuses, nodePath }) ||
+            !canUpdateDurationInFrames({ propStatuses, nodePath }) ||
+            !canUpdateTrimBefore({ propStatuses, nodePath })) {
+            return null;
+        }
+        const { controls } = originalSequence;
+        if (!controls) {
+            return null;
+        }
+        const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
+        if (!targets.has(key)) {
+            targets.set(key, {
+                fileName: nodePath.absolutePath,
+                initialDuration: originalSequence.duration,
+                initialFrom: originalSequence.from,
+                initialTrimBefore: trimsMedia
+                    ? ((_a = originalSequence.trimBefore) !== null && _a !== void 0 ? _a : Math.max(0, originalSequence.startMediaFrom))
+                    : ((_b = originalSequence.trimBefore) !== null && _b !== void 0 ? _b : 0),
+                nodePath,
+                schema: controls.schema,
+            });
+        }
+    }
+    return [...targets.values()];
+};
+exports.getTimelineSequenceLeftEdgeDragTargets = getTimelineSequenceLeftEdgeDragTargets;
 const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     const draggedSelectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(draggedNodePathInfo);
     const selectedSequenceItems = selectedItems.filter((item) => item.type === 'sequence');
@@ -182,6 +311,11 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
     return [...targets.values()];
 };
 exports.getTimelineSequenceFromDragTargets = getTimelineSequenceFromDragTargets;
+const clearLeftEdgeDragOverrides = ({ clearDragOverrides, targets, }) => {
+    for (const target of targets) {
+        clearDragOverrides(target.nodePath);
+    }
+};
 const clearDurationDragOverrides = ({ clearDragOverrides, targets, }) => {
     for (const target of targets) {
         clearDragOverrides(target.nodePath);
@@ -192,6 +326,179 @@ const clearFromDragOverrides = ({ clearDragOverrides, targets, }) => {
         clearDragOverrides(target.nodePath);
     }
 };
+const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const [dragging, setDragging] = (0, react_1.useState)(false);
+    const dragStateRef = (0, react_1.useRef)(null);
+    const latestRef = (0, react_1.useRef)({
+        nodePathInfo,
+        setPropStatuses,
+        setDragOverrides,
+        clearDragOverrides,
+        previewServerState,
+        overrideIdToNodePathMappings,
+    });
+    latestRef.current = {
+        nodePathInfo,
+        setPropStatuses,
+        setDragOverrides,
+        clearDragOverrides,
+        previewServerState,
+        overrideIdToNodePathMappings,
+    };
+    const finishDrag = (0, react_1.useCallback)((commit) => {
+        const dragState = dragStateRef.current;
+        dragStateRef.current = null;
+        document.body.style.userSelect = '';
+        document.body.style.webkitUserSelect = '';
+        (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+        setDragging(false);
+        if (!dragState) {
+            return;
+        }
+        const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
+        const changes = (0, exports.getTimelineSequenceLeftEdgeDragChanges)({
+            targets: dragState.targets,
+            deltaFrames: dragState.latestDeltaFrames,
+        });
+        if (!commit ||
+            latestServerState.type !== 'connected' ||
+            changes.length === 0) {
+            clearLeftEdgeDragOverrides({
+                clearDragOverrides: latestClear,
+                targets: dragState.targets,
+            });
+            return;
+        }
+        const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
+            changes,
+            setPropStatuses: latestSetPropStatuses,
+            clientId: latestServerState.clientId,
+            undoLabel: dragState.targets.length > 1
+                ? 'Resize selected sequences'
+                : 'Resize sequence',
+            redoLabel: dragState.targets.length > 1
+                ? 'Resize selected sequences back'
+                : 'Resize sequence back',
+        });
+        savePromise
+            .catch((err) => {
+            remotion_1.Internals.Log.error({ logLevel: 'error', tag: null }, 'Could not save left edge drag', err);
+        })
+            .finally(() => {
+            clearLeftEdgeDragOverrides({
+                clearDragOverrides: latestClear,
+                targets: dragState.targets,
+            });
+        });
+    }, []);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        const pxPerFrame = timelineDurationInFrames > 0
+            ? (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2) / timelineDurationInFrames
+            : 0;
+        if (pxPerFrame <= 0) {
+            return;
+        }
+        const { nodePathInfo: latestNodePathInfo, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, } = latestRef.current;
+        const { selectedItems: latestSelectedItems } = currentSelection.current;
+        const targets = (0, exports.getTimelineSequenceLeftEdgeDragTargets)({
+            draggedNodePathInfo: latestNodePathInfo,
+            selectedItems: latestSelectedItems,
+            sequences: sequencesRef.current,
+            overrideIdsToNodePaths: latestOverrideIdsToNodePaths,
+            propStatuses: propStatusesRef.current,
+        });
+        if (targets === null || targets.length === 0) {
+            return;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        dragStateRef.current = {
+            initialClientX: e.clientX,
+            latestDeltaFrames: 0,
+            pxPerFrame,
+            pointerId: e.pointerId,
+            targets,
+        };
+        document.body.style.userSelect = 'none';
+        document.body.style.webkitUserSelect = 'none';
+        (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
+        setDragging(true);
+    }, [
+        currentSelection,
+        propStatusesRef,
+        sequencesRef,
+        timelineDurationInFrames,
+        windowWidth,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (!dragging) {
+            return;
+        }
+        const onMove = (e) => {
+            const dragState = dragStateRef.current;
+            if (!dragState || e.pointerId !== dragState.pointerId) {
+                return;
+            }
+            const dx = e.clientX - dragState.initialClientX;
+            const deltaFrames = Math.round(dx / dragState.pxPerFrame);
+            dragState.latestDeltaFrames = deltaFrames;
+            for (const target of dragState.targets) {
+                const nextValues = (0, exports.getTimelineSequenceLeftEdgeDragValues)({
+                    initialDuration: target.initialDuration,
+                    initialFrom: target.initialFrom,
+                    initialTrimBefore: target.initialTrimBefore,
+                    deltaFrames,
+                });
+                latestRef.current.setDragOverrides(target.nodePath, 'from', remotion_1.Internals.makeStaticDragOverride(nextValues.from));
+                latestRef.current.setDragOverrides(target.nodePath, 'durationInFrames', remotion_1.Internals.makeStaticDragOverride(nextValues.durationInFrames));
+                latestRef.current.setDragOverrides(target.nodePath, 'trimBefore', remotion_1.Internals.makeStaticDragOverride(nextValues.trimBefore));
+            }
+        };
+        const onUp = (e) => {
+            const dragState = dragStateRef.current;
+            if (!dragState || e.pointerId !== dragState.pointerId) {
+                return;
+            }
+            finishDrag(true);
+        };
+        const onCancel = (e) => {
+            const dragState = dragStateRef.current;
+            if (!dragState || e.pointerId !== dragState.pointerId) {
+                return;
+            }
+            finishDrag(false);
+        };
+        const onWindowBlur = () => {
+            finishDrag(false);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+        window.addEventListener('pointercancel', onCancel);
+        window.addEventListener('blur', onWindowBlur);
+        return () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            window.removeEventListener('pointercancel', onCancel);
+            window.removeEventListener('blur', onWindowBlur);
+        };
+    }, [dragging, finishDrag]);
+    const style = {
+        ...baseStyle,
+        left: 0,
+        background: 'transparent',
+    };
+    return (jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to trim start", style: style, onPointerDown: onPointerDown }));
+};
+exports.TimelineSequenceLeftEdgeDragHandle = TimelineSequenceLeftEdgeDragHandle;
 const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurationInFrames, }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);

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/TimelineTrack.js

@@ -48,8 +48,7 @@ const TimelineTrackUnmemoized = ({ track }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewServerConnected = previewServerState.type === 'connected';
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
-    const { selected: rowSelected } = (0, TimelineSelection_1.useTimelineRowSelection)(track.nodePathInfo);
-    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(track.nodePathInfo);
+    const rowHighlightBackground = (0, TimelineSelection_1.useTimelineRowHighlightBackground)(track.nodePathInfo);
     const layerStyle = (0, react_1.useMemo)(() => ({
         height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
@@ -58,9 +57,8 @@ const TimelineTrackUnmemoized = ({ track }) => {
     const showExpandedKeyframes = track.nodePathInfo !== null &&
         previewServerConnected &&
         getIsExpanded(track.nodePathInfo);
-    const showRowHighlight = track.nodePathInfo !== null && (rowSelected || containsSelection);
     return (jsx_runtime_1.jsxs("div", { children: [
-            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [showRowHighlight && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
+            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
                 ] }), showExpandedKeyframes && track.nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset })) : null] }));
 };
 exports.TimelineTrack = react_1.default.memo(TimelineTrackUnmemoized);

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;