@remotion/studio 4.0.526 → 4.0.528

package/dist/components/Timeline/get-node-keyframes.js

@@ -4,11 +4,11 @@ exports.getNodeHasKeyframes = exports.getNodeKeyframes = void 0;
 const remotion_1 = require("remotion");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const hasOverride = (overrides, key) => Object.prototype.hasOwnProperty.call(overrides, key);
-const withDragOverrideKeyframe = ({ propStatus, keyframeDisplayOffset, timelinePosition, dragOverrideValue, hasDragOverride, }) => {
+const withDragOverrideKeyframe = ({ propStatus, keyframeDisplayOffset, keyframePlaybackRate, timelinePosition, dragOverrideValue, hasDragOverride, }) => {
     if ((dragOverrideValue === null || dragOverrideValue === void 0 ? void 0 : dragOverrideValue.type) === 'keyframed') {
-        return (0, get_timeline_keyframes_1.getTimelineKeyframes)(dragOverrideValue.status, keyframeDisplayOffset);
+        return (0, get_timeline_keyframes_1.getTimelineKeyframes)(dragOverrideValue.status, keyframeDisplayOffset, keyframePlaybackRate);
     }
-    const keyframes = (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset);
+    const keyframes = (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset, keyframePlaybackRate);
     if (!hasDragOverride || (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'keyframed') {
         return keyframes;
     }
@@ -22,7 +22,7 @@ const withDragOverrideKeyframe = ({ propStatus, keyframeDisplayOffset, timelineP
     }
     return [...keyframes, dragKeyframe].sort((first, second) => first.frame - second.frame);
 };
-const getNodeKeyframes = ({ node, nodePath, propStatuses, keyframeDisplayOffset, getDragOverrides, getEffectDragOverrides, timelinePosition, }) => {
+const getNodeKeyframes = ({ node, nodePath, propStatuses, keyframeDisplayOffset, keyframePlaybackRate, getDragOverrides, getEffectDragOverrides, timelinePosition, }) => {
     var _a, _b;
     if (node.kind !== 'field' || node.field === null) {
         return [];
@@ -32,6 +32,7 @@ const getNodeKeyframes = ({ node, nodePath, propStatuses, keyframeDisplayOffset,
         return withDragOverrideKeyframe({
             propStatus: (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key],
             keyframeDisplayOffset,
+            keyframePlaybackRate,
             timelinePosition,
             dragOverrideValue: dragOverrides[node.field.key],
             hasDragOverride: hasOverride(dragOverrides, node.field.key),
@@ -48,6 +49,7 @@ const getNodeKeyframes = ({ node, nodePath, propStatuses, keyframeDisplayOffset,
             ? (_b = effectStatus.props) === null || _b === void 0 ? void 0 : _b[node.field.key]
             : null,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
         timelinePosition,
         dragOverrideValue: effectDragOverrides[node.field.key],
         hasDragOverride: hasOverride(effectDragOverrides, node.field.key),

package/dist/components/Timeline/get-playback-rate-keyframe-changes.d.ts

@@ -0,0 +1,21 @@
+import type { CanUpdateSequencePropStatusKeyframed, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { MoveEffectKeyframeChange, MoveSequenceKeyframeChange } from './call-move-keyframe';
+type KeyframePreview = {
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly fieldKey: string;
+    readonly effectIndex: number | null;
+    readonly status: CanUpdateSequencePropStatusKeyframed;
+};
+export declare const getPlaybackRateKeyframeChanges: ({ nodePath, sequences, overrideIdsToNodePaths, propStatuses, previousPlaybackRate, playbackRate, }: {
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly propStatuses: PropStatuses;
+    readonly previousPlaybackRate: number;
+    readonly playbackRate: number;
+}) => {
+    readonly sequenceKeyframes: MoveSequenceKeyframeChange[];
+    readonly effectKeyframes: MoveEffectKeyframeChange[];
+    readonly previews: KeyframePreview[];
+};
+export {};

package/dist/components/Timeline/get-playback-rate-keyframe-changes.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPlaybackRateKeyframeChanges = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const get_keyframed_sequence_drag_targets_1 = require("./get-keyframed-sequence-drag-targets");
+const getPlaybackRateKeyframeChanges = ({ nodePath, sequences, overrideIdsToNodePaths, propStatuses, previousPlaybackRate, playbackRate, }) => {
+    var _a;
+    var _b;
+    const sequenceKeyframes = [];
+    const effectKeyframes = [];
+    const previews = [];
+    if (previousPlaybackRate === playbackRate ||
+        !Number.isFinite(previousPlaybackRate) ||
+        previousPlaybackRate <= 0 ||
+        !Number.isFinite(playbackRate) ||
+        playbackRate <= 0) {
+        return { sequenceKeyframes, effectKeyframes, previews };
+    }
+    const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
+    const root = sequences.find((sequence) => {
+        var _a;
+        const overrideId = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId;
+        const path = overrideId ? overrideIdsToNodePaths[overrideId] : undefined;
+        return path && (0, studio_shared_1.stringifySequenceSubscriptionKey)(path) === key;
+    });
+    if (!root) {
+        return { sequenceKeyframes, effectKeyframes, previews };
+    }
+    const sequencesById = new Map(sequences.map((sequence) => [sequence.id, sequence]));
+    const ratio = previousPlaybackRate / playbackRate;
+    const includedNodePaths = new Set();
+    for (const sequence of sequences) {
+        let ancestorId = sequence.id;
+        let belongsToRoot = false;
+        let descendantOffset = 0;
+        while (ancestorId !== null) {
+            if (ancestorId === root.id) {
+                belongsToRoot = true;
+                break;
+            }
+            const ancestor = sequencesById.get(ancestorId);
+            if (!ancestor) {
+                break;
+            }
+            descendantOffset += ancestor.from - ((_b = ancestor.trimBefore) !== null && _b !== void 0 ? _b : 0);
+            ancestorId = ancestor.parent;
+        }
+        if (!belongsToRoot) {
+            continue;
+        }
+        const overrideId = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId;
+        const descendantNodePath = overrideId
+            ? overrideIdsToNodePaths[overrideId]
+            : undefined;
+        if (!descendantNodePath) {
+            continue;
+        }
+        const descendantKey = (0, studio_shared_1.stringifySequenceSubscriptionKey)(descendantNodePath);
+        if (includedNodePaths.has(descendantKey)) {
+            continue;
+        }
+        includedNodePaths.add(descendantKey);
+        // Local-clock descendant keyframes already follow their parent's rate.
+        // The shared collector includes only outer-clock descendants.
+        const targets = (0, get_keyframed_sequence_drag_targets_1.getKeyframedSequenceDragTargets)({
+            nodePath: descendantNodePath,
+            sequence,
+            sequences,
+            propStatuses,
+            isDescendant: sequence.id !== root.id,
+        });
+        const addMoves = (target, effectIndex) => {
+            var _a;
+            const adjustment = (_a = target.status.keyframeDisplayOffsetAdjustment) !== null && _a !== void 0 ? _a : 0;
+            // The adjustment includes the timing offsets between this element and
+            // the useCurrentFrame() binding. Remove the descendant offsets to find
+            // the edited element's start in that binding's source clock.
+            const anchor = sequence.id === root.id
+                ? root.from - adjustment
+                : -adjustment - descendantOffset;
+            if (!Number.isFinite(anchor)) {
+                return;
+            }
+            const nextKeyframes = target.status.keyframes.map((keyframe) => {
+                const frame = anchor + (keyframe.frame - anchor) * ratio;
+                const nearestInteger = Math.round(frame);
+                return {
+                    ...keyframe,
+                    frame: Math.abs(frame - nearestInteger) <=
+                        Number.EPSILON * Math.max(1, Math.abs(frame)) * 2
+                        ? nearestInteger
+                        : frame,
+                };
+            });
+            if (nextKeyframes.some((keyframe) => !Number.isFinite(keyframe.frame)) ||
+                new Set(nextKeyframes.map((keyframe) => keyframe.frame)).size !==
+                    nextKeyframes.length) {
+                return;
+            }
+            const moves = target.status.keyframes.flatMap((keyframe, index) => {
+                var _a;
+                const toFrame = (_a = nextKeyframes[index]) === null || _a === void 0 ? void 0 : _a.frame;
+                if (toFrame === undefined || toFrame === keyframe.frame) {
+                    return [];
+                }
+                return [
+                    {
+                        fileName: target.fileName,
+                        nodePath: target.nodePath,
+                        fieldKey: target.fieldKey,
+                        fromFrame: keyframe.frame,
+                        toFrame,
+                        schema: target.schema,
+                    },
+                ];
+            });
+            if (moves.length === 0) {
+                return;
+            }
+            previews.push({
+                nodePath: target.nodePath,
+                fieldKey: target.fieldKey,
+                effectIndex,
+                status: { ...target.status, keyframes: nextKeyframes },
+            });
+            if (effectIndex === null) {
+                sequenceKeyframes.push(...moves);
+            }
+            else {
+                effectKeyframes.push(...moves.map((move) => ({ ...move, effectIndex })));
+            }
+        };
+        for (const target of targets.sequenceKeyframes) {
+            addMoves(target, null);
+        }
+        for (const target of targets.effectKeyframes) {
+            addMoves(target, target.effectIndex);
+        }
+    }
+    return { sequenceKeyframes, effectKeyframes, previews };
+};
+exports.getPlaybackRateKeyframeChanges = getPlaybackRateKeyframeChanges;

package/dist/components/Timeline/get-sequence-context-menu-items.d.ts

@@ -3,11 +3,13 @@ import type { ResolvedStackLocation, TSequence } from 'remotion';
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 import type { TimelineAssetLinkInfo } from './timeline-asset-link';
 export declare const findCopyableFrameElement: (element: Element | null) => Element | null;
-export declare const getMultiSequenceContextMenuItems: ({ deleteDisabled, duplicateDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, }: {
+export declare const getMultiSequenceContextMenuItems: ({ deleteDisabled, duplicateDisabled, splitDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, onSplitSelectedSequences, }: {
     readonly deleteDisabled: boolean;
     readonly duplicateDisabled: boolean;
+    readonly splitDisabled: boolean;
     readonly onDeleteSelectedSequences: () => void;
     readonly onDuplicateSelectedSequences: () => void;
+    readonly onSplitSelectedSequences: () => void;
 }) => ComboboxValue[];
 export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEditor, copyImageElement, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions, }: {
     readonly assetLinkInfo: TimelineAssetLinkInfo | null;

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -96,7 +96,7 @@ const copyImageToClipboard = async (element) => {
         }),
     ]);
 };
-const getMultiSequenceContextMenuItems = ({ deleteDisabled, duplicateDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, }) => {
+const getMultiSequenceContextMenuItems = ({ deleteDisabled, duplicateDisabled, splitDisabled, onDeleteSelectedSequences, onDuplicateSelectedSequences, onSplitSelectedSequences, }) => {
     return [
         {
             type: 'item',
@@ -110,6 +110,18 @@ const getMultiSequenceContextMenuItems = ({ deleteDisabled, duplicateDisabled, o
             subMenu: null,
             value: 'duplicate-selected-sequences',
         },
+        {
+            type: 'item',
+            id: 'split-selected-sequences',
+            keyHint: null,
+            label: 'Split selected at playhead',
+            leftItem: null,
+            disabled: splitDisabled,
+            onClick: onSplitSelectedSequences,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'split-selected-sequences',
+        },
         {
             type: 'divider',
             id: 'duplicate-delete-selected-sequences-divider',

package/dist/components/Timeline/get-timeline-keyframes.d.ts

@@ -1,9 +1,22 @@
 import type { CanUpdateSequencePropStatus } from 'remotion';
-export declare const getTimelineKeyframes: (propStatus: CanUpdateSequencePropStatus | null | undefined, keyframeDisplayOffset?: number) => {
+export type KeyframeSourceFrame = number | {
+    readonly displayFrame: number;
+    readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
+};
+export declare const getKeyframeSourceFrame: ({ displayFrame, keyframeDisplayOffset, keyframePlaybackRate, propStatus, }: {
+    displayFrame: number;
+    keyframeDisplayOffset: number;
+    keyframePlaybackRate: number;
+    propStatus: CanUpdateSequencePropStatus | null;
+}) => number;
+export declare const resolveKeyframeSourceFrame: (sourceFrame: KeyframeSourceFrame, propStatus: CanUpdateSequencePropStatus | null) => number;
+export declare const getTimelineKeyframes: (propStatus: CanUpdateSequencePropStatus | null | undefined, keyframeDisplayOffset?: number, keyframePlaybackRate?: number) => {
     frame: number;
     value: unknown;
 }[];
-export declare const getKeyframeDisplayOffset: ({ propStatus, keyframeDisplayOffset, }: {
+export declare const getKeyframeDisplayOffset: ({ propStatus, keyframeDisplayOffset, keyframePlaybackRate, }: {
     propStatus: CanUpdateSequencePropStatus | null | undefined;
     keyframeDisplayOffset: number;
+    keyframePlaybackRate: number;
 }) => number;

package/dist/components/Timeline/get-timeline-keyframes.js

@@ -1,7 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getKeyframeDisplayOffset = exports.getTimelineKeyframes = void 0;
-const getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0) => {
+exports.getKeyframeDisplayOffset = exports.getTimelineKeyframes = exports.resolveKeyframeSourceFrame = exports.getKeyframeSourceFrame = void 0;
+const getKeyframeSourceFrame = ({ displayFrame, keyframeDisplayOffset, keyframePlaybackRate, propStatus, }) => {
+    const sourceFrame = (displayFrame - keyframeDisplayOffset) * keyframePlaybackRate;
+    if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'keyframed') {
+        return sourceFrame;
+    }
+    // Converting a displayed keyframe back to source frames may introduce rounding
+    // error. Resolve its original frame so edits keep the existing keyframe identity,
+    // including when source keyframes themselves have fractional frames.
+    const tolerance = Number.EPSILON *
+        Math.max(1, Math.abs(displayFrame), Math.abs(keyframeDisplayOffset)) *
+        keyframePlaybackRate *
+        8;
+    let closestFrame = sourceFrame;
+    let closestDistance = Infinity;
+    for (const keyframe of propStatus.keyframes) {
+        const distance = Math.abs(keyframe.frame - sourceFrame);
+        if (distance <= tolerance && distance < closestDistance) {
+            closestFrame = keyframe.frame;
+            closestDistance = distance;
+        }
+    }
+    return closestFrame;
+};
+exports.getKeyframeSourceFrame = getKeyframeSourceFrame;
+const resolveKeyframeSourceFrame = (sourceFrame, propStatus) => {
+    return (0, exports.getKeyframeSourceFrame)({
+        ...(typeof sourceFrame === 'number'
+            ? {
+                displayFrame: sourceFrame,
+                keyframeDisplayOffset: 0,
+                keyframePlaybackRate: 1,
+            }
+            : sourceFrame),
+        propStatus,
+    });
+};
+exports.resolveKeyframeSourceFrame = resolveKeyframeSourceFrame;
+const getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0, keyframePlaybackRate = 1) => {
     if (!propStatus) {
         return [];
     }
@@ -12,22 +49,23 @@ const getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0) => {
     const resolvedKeyframeDisplayOffset = (0, exports.getKeyframeDisplayOffset)({
         propStatus,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
     });
-    if (resolvedKeyframeDisplayOffset === 0) {
+    if (resolvedKeyframeDisplayOffset === 0 && keyframePlaybackRate === 1) {
         return keyframes;
     }
     return keyframes.map((keyframe) => ({
         ...keyframe,
-        frame: keyframe.frame + resolvedKeyframeDisplayOffset,
+        frame: keyframe.frame / keyframePlaybackRate + resolvedKeyframeDisplayOffset,
     }));
 };
 exports.getTimelineKeyframes = getTimelineKeyframes;
-const getKeyframeDisplayOffset = ({ propStatus, keyframeDisplayOffset, }) => {
+const getKeyframeDisplayOffset = ({ propStatus, keyframeDisplayOffset, keyframePlaybackRate, }) => {
     return (keyframeDisplayOffset +
         ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed' || (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static'
             ? propStatus.keyframeDisplayOffsetAdjustment === null
                 ? 0
-                : propStatus.keyframeDisplayOffsetAdjustment
+                : propStatus.keyframeDisplayOffsetAdjustment / keyframePlaybackRate
             : 0));
 };
 exports.getKeyframeDisplayOffset = getKeyframeDisplayOffset;

package/dist/components/Timeline/keyframe-clipboard.js

@@ -69,9 +69,11 @@ const resolveKeyframeField = ({ selection, sequences, overrideIdsToNodePaths, pr
                 fieldKey: identity.fieldKey,
             }),
             propStatus: sequencePropStatus,
+            keyframePlaybackRate: track.keyframePlaybackRate,
             keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                 propStatus: sequencePropStatus,
                 keyframeDisplayOffset: track.keyframeDisplayOffset,
+                keyframePlaybackRate: track.keyframePlaybackRate,
             }),
         };
     }
@@ -97,9 +99,11 @@ const resolveKeyframeField = ({ selection, sequences, overrideIdsToNodePaths, pr
             fieldKey: identity.fieldKey,
         }),
         propStatus: effectPropStatus,
+        keyframePlaybackRate: track.keyframePlaybackRate,
         keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
             propStatus: effectPropStatus,
             keyframeDisplayOffset: track.keyframeDisplayOffset,
+            keyframePlaybackRate: track.keyframePlaybackRate,
         }),
     };
 };
@@ -147,7 +151,12 @@ const getKeyframeClipboardDataFromSelections = ({ selections, sequences, overrid
     }
     const keyframes = [];
     for (const { selection } of resolvedFields) {
-        const sourceFrame = selection.frame - firstResolved.keyframeDisplayOffset;
+        const sourceFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: selection.frame,
+            keyframeDisplayOffset: firstResolved.keyframeDisplayOffset,
+            keyframePlaybackRate: firstResolved.keyframePlaybackRate,
+            propStatus: keyframedPropStatus,
+        });
         const keyframe = keyframedPropStatus.keyframes.find((item) => item.frame === sourceFrame);
         if (keyframe === undefined ||
             JSON.stringify(keyframe.value) === undefined) {
@@ -195,7 +204,7 @@ const getKeyframeClipboardDataFromSelections = ({ selections, sequences, overrid
         },
         keyframes: keyframes.map((keyframe) => {
             return {
-                frameOffset: keyframe.frame - firstFrame,
+                frameOffset: (keyframe.frame - firstFrame) / firstResolved.keyframePlaybackRate,
                 value: keyframe.value,
             };
         }),
@@ -260,7 +269,12 @@ const getPasteKeyframeTarget = ({ selectedItems, payload, timelinePosition, sequ
         return { type: 'multiple' };
     }
     const keyframes = payload.keyframes.map((keyframe) => ({
-        sourceFrame: timelinePosition - resolved.keyframeDisplayOffset + keyframe.frameOffset,
+        sourceFrame: (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: timelinePosition + keyframe.frameOffset,
+            keyframeDisplayOffset: resolved.keyframeDisplayOffset,
+            keyframePlaybackRate: resolved.keyframePlaybackRate,
+            propStatus: resolved.propStatus,
+        }),
         value: keyframe.value,
     }));
     const firstFrame = (_b = keyframes[0]) === null || _b === void 0 ? void 0 : _b.sourceFrame;

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

@@ -17,20 +17,23 @@ export declare const splitTimelineSequenceFromSource: ({ nodePathInfo, splitFram
     nodePathInfo: SequenceNodePathInfo;
     splitFrame: number;
 }) => Promise<boolean>;
-export declare const shouldHandleTimelineDuplicateShortcut: ({ shiftKey, }: {
-    readonly shiftKey: boolean;
-}) => boolean;
-export declare const shouldHandleTimelineSplitShortcut: ({ shiftKey, }: {
-    readonly shiftKey: boolean;
-}) => boolean;
-export declare const splitSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, splitFrame, splitSequence, }: {
+export declare const splitTimelineSequencesFromSource: ({ sequences, }: {
+    sequences: {
+        nodePathInfo: SequenceNodePathInfo;
+        splitFrame: number;
+    }[];
+}) => Promise<boolean>;
+export declare const splitSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, splitFrame, splitSequences, notify, }: {
     selections: readonly import("@remotion/canvas").CanvasSelectionItem[];
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     propStatuses: PropStatuses | undefined;
     splitFrame: number;
-    splitSequence?: ((options: {
-        nodePathInfo: SequenceNodePathInfo;
-        splitFrame: number;
+    splitSequences?: ((options: {
+        sequences: {
+            nodePathInfo: SequenceNodePathInfo;
+            splitFrame: number;
+        }[];
     }) => Promise<boolean>) | undefined;
+    notify?: ((message: string, durationInMs: number) => void) | undefined;
 }) => Promise<boolean> | null;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.splitSelectedTimelineItems = exports.shouldHandleTimelineSplitShortcut = exports.shouldHandleTimelineDuplicateShortcut = exports.splitTimelineSequenceFromSource = exports.getTimelineSequenceSplitEligibility = void 0;
+exports.splitSelectedTimelineItems = exports.splitTimelineSequencesFromSource = exports.splitTimelineSequenceFromSource = exports.getTimelineSequenceSplitEligibility = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
@@ -88,12 +88,22 @@ const getTimelineSequenceSplitEligibility = ({ selection, sequence, splitFrame,
 };
 exports.getTimelineSequenceSplitEligibility = getTimelineSequenceSplitEligibility;
 const splitTimelineSequenceFromSource = ({ nodePathInfo, splitFrame, }) => {
-    const nodePath = nodePathInfo.sequenceSubscriptionKey;
+    return (0, exports.splitTimelineSequencesFromSource)({
+        sequences: [{ nodePathInfo, splitFrame }],
+    });
+};
+exports.splitTimelineSequenceFromSource = splitTimelineSequenceFromSource;
+const splitTimelineSequencesFromSource = ({ sequences, }) => {
     return (0, split_jsx_sequence_api_1.splitJsxSequence)({
-        fileName: nodePath.absolutePath,
-        nodePath: nodePath.nodePath,
-        sequenceKeys: nodePath.sequenceKeys,
-        splitFrame,
+        sequences: sequences.map(({ nodePathInfo, splitFrame }) => {
+            const nodePath = nodePathInfo.sequenceSubscriptionKey;
+            return {
+                fileName: nodePath.absolutePath,
+                nodePath: nodePath.nodePath,
+                sequenceKeys: nodePath.sequenceKeys,
+                splitFrame,
+            };
+        }),
     })
         .then((result) => {
         if (result.success) {
@@ -107,41 +117,57 @@ const splitTimelineSequenceFromSource = ({ nodePathInfo, splitFrame, }) => {
         return false;
     });
 };
-exports.splitTimelineSequenceFromSource = splitTimelineSequenceFromSource;
-const shouldHandleTimelineDuplicateShortcut = ({ shiftKey, }) => !shiftKey;
-exports.shouldHandleTimelineDuplicateShortcut = shouldHandleTimelineDuplicateShortcut;
-const shouldHandleTimelineSplitShortcut = ({ shiftKey, }) => shiftKey;
-exports.shouldHandleTimelineSplitShortcut = shouldHandleTimelineSplitShortcut;
-const splitSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, splitFrame, splitSequence = exports.splitTimelineSequenceFromSource, }) => {
+exports.splitTimelineSequencesFromSource = splitTimelineSequencesFromSource;
+const splitSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, splitFrame, splitSequences = exports.splitTimelineSequencesFromSource, notify = NotificationCenter_1.showNotification, }) => {
     var _a;
-    if (selections.length !== 1) {
+    if (selections.length === 0 ||
+        selections.some((selection) => selection.type !== 'sequence')) {
         return null;
     }
-    const [selection] = selections;
-    if (selection.type !== 'sequence') {
-        return null;
+    const eligible = [];
+    const skippedReasons = [];
+    for (const selection of selections) {
+        if (selection.type !== 'sequence') {
+            continue;
+        }
+        const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+            sequences,
+            overrideIdsToNodePaths,
+            nodePathInfo: selection.nodePathInfo,
+        });
+        const sequencePropStatuses = propStatuses
+            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey)
+            : undefined;
+        const eligibility = (0, exports.getTimelineSequenceSplitEligibility)({
+            selection,
+            sequence: (_a = track === null || track === void 0 ? void 0 : track.sequence) !== null && _a !== void 0 ? _a : null,
+            splitFrame,
+            propStatuses: sequencePropStatuses,
+        });
+        if (eligibility.canSplit) {
+            eligible.push({
+                nodePathInfo: eligibility.nodePathInfo,
+                splitFrame: track
+                    ? (splitFrame - track.keyframeDisplayOffset) *
+                        track.keyframePlaybackRate
+                    : splitFrame,
+            });
+        }
+        else {
+            skippedReasons.push(eligibility.reason);
+        }
     }
-    const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
-        sequences,
-        overrideIdsToNodePaths,
-        nodePathInfo: selection.nodePathInfo,
-    });
-    const sequencePropStatuses = propStatuses
-        ? remotion_1.Internals.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey)
-        : undefined;
-    const eligibility = (0, exports.getTimelineSequenceSplitEligibility)({
-        selection,
-        sequence: (_a = track === null || track === void 0 ? void 0 : track.sequence) !== null && _a !== void 0 ? _a : null,
-        splitFrame,
-        propStatuses: sequencePropStatuses,
-    });
-    if (!eligibility.canSplit) {
-        (0, NotificationCenter_1.showNotification)(eligibility.reason, 4000);
+    if (eligible.length === 0) {
+        notify(selections.length === 1
+            ? skippedReasons[0]
+            : `None of the ${selections.length} selected clips can be split at the playhead`, 4000);
         return Promise.resolve(false);
     }
-    return splitSequence({
-        nodePathInfo: eligibility.nodePathInfo,
-        splitFrame,
+    return splitSequences({ sequences: eligible }).then((success) => {
+        if (success && skippedReasons.length > 0) {
+            notify(`Split ${eligible.length} ${eligible.length === 1 ? 'clip' : 'clips'}. Skipped ${skippedReasons.length} ${skippedReasons.length === 1 ? 'clip' : 'clips'} that could not be split.`, 4000);
+        }
+        return success;
     });
 };
 exports.splitSelectedTimelineItems = splitSelectedTimelineItems;

package/dist/components/Timeline/timeline-field-display-utils.js

@@ -240,6 +240,7 @@ const formatTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
         case 'uv-coordinate':
             return ((_e = formatUvCoordinateTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _e !== void 0 ? _e : formatUnknownTimelineValueForDisplay(value));
         case 'text-content':
+        case 'svg-path':
             return String(value);
         case 'asset':
         case 'array':

package/dist/components/Timeline/timeline-field-row-layout.js

@@ -6,6 +6,7 @@ const timeline_row_layout_1 = require("./timeline-row-layout");
 exports.TIMELINE_STACKED_FIELD_HEADER_HEIGHT = 14;
 const isTimelineFieldStacked = ({ field, transform3DMode, }) => {
     return (field.typeName === 'text-content' ||
+        field.typeName === 'svg-path' ||
         (transform3DMode &&
             (field.typeName === 'translate' ||
                 field.typeName === 'rotation-css' ||

package/dist/components/Timeline/use-delete-timeline-items.js

@@ -55,17 +55,9 @@ const useDeleteTimelineItems = () => {
             timelinePosition,
         });
         if (deletePromise !== null) {
-            deletePromise
-                .then((deleted) => {
-                if (!deleted) {
-                    return;
-                }
+            const updateSelectionAfterDeletion = () => {
                 const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)({
                     selections: selectedItems,
-                    sequences,
-                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                    propStatuses,
-                    timelinePosition,
                 });
                 if (nextSelection.length === 0) {
                     clearSelection();
@@ -73,8 +65,22 @@ const useDeleteTimelineItems = () => {
                 else {
                     selectItems(nextSelection);
                 }
-            })
-                .catch(() => undefined);
+            };
+            if (selectedItems.some((item) => item.type === 'keyframe')) {
+                // Keyframes are removed optimistically. Update selection in the same
+                // event so easing segments cannot inherit the deleted segments' indices.
+                updateSelectionAfterDeletion();
+                deletePromise.catch(() => undefined);
+            }
+            else {
+                deletePromise
+                    .then((deleted) => {
+                    if (deleted) {
+                        updateSelectionAfterDeletion();
+                    }
+                })
+                    .catch(() => undefined);
+            }
             return;
         }
         const easingSelections = (0, update_selected_easing_1.getEasingSelections)(selectedItems);

package/dist/components/Timeline/use-expanded-track-keyframe-rows.d.ts

@@ -8,10 +8,11 @@ export type ExpandedTrackKeyframeRow = {
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly rowKey: string;
 };
-export declare const useExpandedTrackKeyframeRows: ({ sequence, nodePathInfo, keyframeDisplayOffset, }: {
+export declare const useExpandedTrackKeyframeRows: ({ sequence, nodePathInfo, keyframeDisplayOffset, keyframePlaybackRate, }: {
     sequence: TSequence;
     nodePathInfo: SequenceNodePathInfo;
     keyframeDisplayOffset: number;
+    keyframePlaybackRate: number;
 }) => {
     readonly rows: ExpandedTrackKeyframeRow[];
     readonly expandedHeight: number;