@remotion/studio 4.0.470 → 4.0.471

package/dist/components/Timeline/TimelineEffectItem.js

@@ -14,11 +14,55 @@ const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSelection_1 = require("./TimelineSelection");
+const EFFECT_REORDER_MIME_TYPE = 'application/remotion-effect-reorder';
+let currentEffectDrag = null;
 const rowLabel = {
     fontSize: 12,
     color: 'rgba(255, 255, 255, 0.8)',
     userSelect: 'none',
 };
+const rowStyle = {
+    height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
+    cursor: 'default',
+};
+const reorderWrapper = {
+    position: 'relative',
+};
+const reorderLineBase = {
+    backgroundColor: '#0b84ff',
+    height: 2,
+    left: 0,
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: 0,
+    zIndex: 1,
+};
+const hasEffectReorderDragType = (dataTransfer) => {
+    return Array.from(dataTransfer.types).includes(EFFECT_REORDER_MIME_TYPE);
+};
+const getEffectReorderDragData = (dataTransfer) => {
+    if (currentEffectDrag) {
+        return currentEffectDrag;
+    }
+    const value = dataTransfer.getData(EFFECT_REORDER_MIME_TYPE);
+    if (!value) {
+        return null;
+    }
+    try {
+        const parsed = JSON.parse(value);
+        if (typeof parsed.nodePathKey === 'string' &&
+            typeof parsed.effectIndex === 'number') {
+            return parsed;
+        }
+    }
+    catch (_a) {
+        return null;
+    }
+    return null;
+};
+const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
+    return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
+};
 const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, documentationLink, nodePath, validatedLocation, rowDepth, getIsExpanded, toggleTrack, }) => {
     var _a;
     var _b;
@@ -27,6 +71,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
     const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const [dropIndicator, setDropIndicator] = (0, react_1.useState)(null);
     const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectCodeValuesCtx({
         codeValues,
         nodePath,
@@ -45,6 +90,11 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
     const deleteDisabled = !previewConnected ||
         effectStatus.type !== 'can-update-effect' ||
         !validatedLocation.source;
+    const canReorder = TimelineSelection_1.SELECTION_ENABLED &&
+        previewConnected &&
+        effectStatus.type === 'can-update-effect' &&
+        Boolean(validatedLocation.source);
+    const nodePathKey = (0, react_1.useMemo)(() => remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath), [nodePath]);
     const onDeleteEffectFromSource = (0, react_1.useCallback)(async () => {
         if (deleteDisabled) {
             return;
@@ -148,9 +198,6 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
         validatedLocation.source,
     ]);
     const isExpanded = getIsExpanded(nodePathInfo);
-    const rowStyle = (0, react_1.useMemo)(() => ({
-        height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
-    }), []);
     const labelStyle = (0, react_1.useMemo)(() => {
         return {
             ...rowLabel,
@@ -164,7 +211,113 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
         };
     }, [selection.selected]);
+    const getDropTarget = (0, react_1.useCallback)((e) => {
+        const dragData = getEffectReorderDragData(e.dataTransfer);
+        if (!dragData || dragData.nodePathKey !== nodePathKey) {
+            return null;
+        }
+        const rect = e.currentTarget.getBoundingClientRect();
+        const before = e.clientY < rect.top + rect.height / 2;
+        const insertionIndex = before ? effectIndex : effectIndex + 1;
+        const toIndex = getDestinationIndex({
+            fromIndex: dragData.effectIndex,
+            insertionIndex,
+        });
+        if (toIndex === dragData.effectIndex) {
+            return null;
+        }
+        return {
+            dragData,
+            toIndex,
+            indicator: before ? 'before' : 'after',
+        };
+    }, [effectIndex, nodePathKey]);
+    const onDragStart = (0, react_1.useCallback)((e) => {
+        if (!canReorder) {
+            e.preventDefault();
+            return;
+        }
+        const dragData = { nodePathKey, effectIndex };
+        currentEffectDrag = dragData;
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData(EFFECT_REORDER_MIME_TYPE, JSON.stringify(dragData));
+        e.stopPropagation();
+    }, [canReorder, effectIndex, nodePathKey]);
+    const onDragEnd = (0, react_1.useCallback)(() => {
+        currentEffectDrag = null;
+        setDropIndicator(null);
+    }, []);
+    const onDragOver = (0, react_1.useCallback)((e) => {
+        if (!canReorder || !hasEffectReorderDragType(e.dataTransfer)) {
+            return;
+        }
+        const dropTarget = getDropTarget(e);
+        if (!dropTarget) {
+            setDropIndicator(null);
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = 'move';
+        setDropIndicator(dropTarget.indicator);
+    }, [canReorder, getDropTarget]);
+    const onDragLeave = (0, react_1.useCallback)((e) => {
+        if (e.currentTarget.contains(e.relatedTarget)) {
+            return;
+        }
+        setDropIndicator(null);
+    }, []);
+    const onDrop = (0, react_1.useCallback)(async (e) => {
+        if (!canReorder ||
+            previewServerState.type !== 'connected' ||
+            !validatedLocation.source) {
+            return;
+        }
+        const dropTarget = getDropTarget(e);
+        if (!dropTarget) {
+            setDropIndicator(null);
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        setDropIndicator(null);
+        currentEffectDrag = null;
+        try {
+            const result = await (0, call_api_1.callApi)('/api/reorder-effect', {
+                fileName: validatedLocation.source,
+                sequenceNodePath: nodePath,
+                fromIndex: dropTarget.dragData.effectIndex,
+                toIndex: dropTarget.toIndex,
+                clientId: previewServerState.clientId,
+            });
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)('Reordered effect', 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+    }, [
+        canReorder,
+        getDropTarget,
+        nodePath,
+        previewServerState,
+        validatedLocation.source,
+    ]);
+    const reorderLineStyle = (0, react_1.useMemo)(() => {
+        if (!dropIndicator) {
+            return null;
+        }
+        return {
+            ...reorderLineBase,
+            ...(dropIndicator === 'before' ? { top: -1 } : { bottom: -1 }),
+        };
+    }, [dropIndicator]);
     const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
-    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row })) : (row);
+    const draggableRow = canReorder ? (jsx_runtime_1.jsxs("div", { draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, style: reorderWrapper, children: [reorderLineStyle ? jsx_runtime_1.jsx("div", { style: reorderLineStyle }) : null, row] })) : (row);
+    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: draggableRow })) : (draggableRow);
 };
 exports.TimelineEffectItem = TimelineEffectItem;

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -15,7 +15,7 @@ const controlsContainerStyle = {
     alignItems: 'center',
     display: 'flex',
     flexShrink: 0,
-    gap: 2,
+    gap: 1,
     marginRight: 4,
 };
 const navButtonStyle = {
@@ -26,19 +26,24 @@ const navButtonStyle = {
     cursor: 'pointer',
     display: 'flex',
     flexShrink: 0,
-    fontSize: 8,
     height: 12,
     justifyContent: 'center',
     lineHeight: 1,
     outline: 'none',
     padding: 0,
     userSelect: 'none',
-    width: 10,
+    width: 12,
 };
 const diamondButtonStyle = {
     ...navButtonStyle,
-    height: 10,
-    width: 10,
+    background: 'none',
+};
+const diamondIconStyle = {
+    borderRadius: 1,
+    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
+    height: 7,
+    transform: 'rotate(45deg)',
+    width: 7,
 };
 const svgStyle = { display: 'block' };
 const getCurrentKeyframeValue = ({ propStatus, jsxFrame, defaultValue, dragOverrideValue, }) => {
@@ -203,15 +208,15 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     }), [nextDisabled]);
     const diamondStyle = (0, react_1.useMemo)(() => ({
         ...diamondButtonStyle,
-        backgroundColor: hasKeyframeAtCurrentFrame ? colors_1.BLUE : colors_1.LIGHT_TEXT,
-        borderRadius: 1,
-        boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
         cursor: canToggleKeyframe && clientId ? 'pointer' : 'default',
         opacity: canToggleKeyframe && clientId ? 1 : 0.35,
-        transform: 'rotate(45deg)',
-    }), [canToggleKeyframe, clientId, hasKeyframeAtCurrentFrame]);
+    }), [canToggleKeyframe, clientId]);
+    const diamondIcon = (0, react_1.useMemo)(() => ({
+        ...diamondIconStyle,
+        backgroundColor: hasKeyframeAtCurrentFrame ? colors_1.BLUE : colors_1.LIGHT_TEXT,
+    }), [hasKeyframeAtCurrentFrame]);
     return (jsx_runtime_1.jsxs("div", { style: controlsContainerStyle, children: [
-            jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", title: "Previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M5 1L2 4L5 7Z", fill: "#ccc" }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', title: hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe' }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", title: "Next keyframe", children: jsx_runtime_1.jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1L6 4L3 7Z", fill: "#ccc" }) }) })
+            jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", title: "Previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M7 1.5L3 5L7 8.5Z", fill: "#ccc" }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', title: hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', children: jsx_runtime_1.jsx("span", { style: diamondIcon }) }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", title: "Next keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1.5L7 5L3 8.5Z", fill: "#ccc" }) }) })
         ] }));
 };
 exports.TimelineKeyframeControls = TimelineKeyframeControls;

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

@@ -13,5 +13,8 @@ export declare const TimelineRowChrome: React.FC<{
     readonly showSelectedBackground: boolean;
     readonly containsSelection: boolean;
     readonly outerHeight: number | null;
+    readonly onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
+    readonly onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
+    readonly onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
     readonly onDoubleClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }>;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -25,7 +25,7 @@ const keyframeControlsColumnStyle = {
     marginRight: -(timeline_row_layout_1.TIMELINE_KEYFRAME_CONTROLS_WIDTH - timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING),
     width: timeline_row_layout_1.TIMELINE_KEYFRAME_CONTROLS_WIDTH,
 };
-const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, outerHeight, onDoubleClick, }) => {
+const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, }) => {
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
     const chromeColumnStyle = (0, react_1.useMemo)(() => ({
         alignItems: 'center',
@@ -72,8 +72,8 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
             jsx_runtime_1.jsxs("div", { style: leftChromeStyle, children: [keyframeControls ? (jsx_runtime_1.jsx("div", { style: keyframeControlsColumnStyle, children: keyframeControls })) : null, jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] })
                 ] }), children] }));
     if (outerStyle) {
-        return (jsx_runtime_1.jsx("div", { style: outerStyle, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
+        return (jsx_runtime_1.jsx("div", { style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
     }
-    return (jsx_runtime_1.jsx("div", { onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, style: innerRowStyle, children: chrome }));
+    return (jsx_runtime_1.jsx("div", { onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, style: innerRowStyle, children: chrome }));
 };
 exports.TimelineRowChrome = TimelineRowChrome;

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequenceItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
@@ -31,6 +32,33 @@ const labelContainerStyle = {
     minWidth: 0,
     gap: 4,
 };
+const effectDropHighlight = {
+    backgroundColor: 'rgba(0, 155, 255, 0.16)',
+    outline: '1px solid rgba(0, 155, 255, 0.75)',
+    outlineOffset: -1,
+};
+const hasEffectDragType = (dataTransfer) => {
+    return Array.from(dataTransfer.types).some((type) => type === studio_shared_1.EFFECT_DRAG_MIME_TYPE ||
+        type === 'application/json' ||
+        type === 'text/plain');
+};
+const getEffectDragData = (dataTransfer) => {
+    for (const type of [
+        studio_shared_1.EFFECT_DRAG_MIME_TYPE,
+        'application/json',
+        'text/plain',
+    ]) {
+        const value = dataTransfer.getData(type);
+        if (!value) {
+            continue;
+        }
+        const parsed = (0, studio_shared_1.parseEffectDragData)(value);
+        if (parsed) {
+            return parsed;
+        }
+    }
+    return null;
+};
 const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset }) => {
     var _a;
     var _b;
@@ -44,6 +72,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
+    const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
     const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
     const fileLocation = (0, react_1.useMemo)(() => (0, format_file_location_1.formatFileLocation)({
         location: originalLocation,
@@ -322,6 +351,14 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             flexShrink: 0,
         };
     }, []);
+    const rowStyle = (0, react_1.useMemo)(() => {
+        return effectDropHovered
+            ? {
+                ...inner,
+                ...effectDropHighlight,
+            }
+            : inner;
+    }, [effectDropHovered, inner]);
     const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
     const canToggleVisibility = previewConnected &&
         Boolean(sequence.controls) &&
@@ -330,7 +367,60 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         codeHiddenStatus !== undefined &&
         codeHiddenStatus !== null &&
         codeHiddenStatus.canUpdate;
-    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 ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: !previewConnected || nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: inner, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDoubleClick: TimelineSelection_1.SELECTION_ENABLED && canOpenInEditor
+    const canDropEffect = previewServerState.type === 'connected' &&
+        nodePath !== null &&
+        validatedLocation !== null &&
+        sequence.type !== 'audio';
+    const onEffectDragOver = (0, react_1.useCallback)((e) => {
+        if (!canDropEffect || !hasEffectDragType(e.dataTransfer)) {
+            return;
+        }
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+        setEffectDropHovered(true);
+    }, [canDropEffect]);
+    const onEffectDragLeave = (0, react_1.useCallback)((e) => {
+        if (e.currentTarget.contains(e.relatedTarget)) {
+            return;
+        }
+        setEffectDropHovered(false);
+    }, []);
+    const onEffectDrop = (0, react_1.useCallback)(async (e) => {
+        if (!canDropEffect ||
+            previewServerState.type !== 'connected' ||
+            nodePath === null ||
+            validatedLocation === null) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        setEffectDropHovered(false);
+        const dragData = getEffectDragData(e.dataTransfer);
+        if (!dragData) {
+            (0, NotificationCenter_1.showNotification)('Could not read effect drag data', 3000);
+            return;
+        }
+        try {
+            const result = await (0, call_api_1.callApi)('/api/add-effect', {
+                fileName: validatedLocation.source,
+                sequenceNodePath: nodePath,
+                effectName: dragData.effect.name,
+                effectImportPath: dragData.effect.importPath,
+                effectConfig: dragData.effect.config,
+                clientId: previewServerState.clientId,
+            });
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)(`Added ${dragData.effect.name}()`, 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+    }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
+    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 ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: !previewConnected || nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: TimelineSelection_1.SELECTION_ENABLED && canOpenInEditor
             ? onShowInEditorDoubleClick
             : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
                 jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { sequence: sequence, selected: selected, containsSelection: containsSelection }), mediaSrc ? jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc }) : null, jsx_runtime_1.jsx(TimelineItemStack_1.TimelineItemStack, { originalLocation: originalLocation })

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

@@ -1,5 +1,15 @@
 import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
 import type { SetCodeValues } from './save-sequence-prop';
+export type DeleteSequenceKeyframeChange = {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    sourceFrame: number;
+    schema: SequenceSchema;
+};
+export type DeleteEffectKeyframeChange = DeleteSequenceKeyframeChange & {
+    effectIndex: number;
+};
 export declare const callDeleteSequenceKeyframe: ({ fileName, nodePath, fieldKey, sourceFrame, schema, setCodeValues, clientId, }: {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
@@ -19,3 +29,9 @@ export declare const callDeleteEffectKeyframe: ({ fileName, nodePath, effectInde
     setCodeValues: SetCodeValues;
     clientId: string;
 }) => Promise<void>;
+export declare const callDeleteKeyframes: ({ sequenceKeyframes, effectKeyframes, setCodeValues, clientId, }: {
+    sequenceKeyframes: DeleteSequenceKeyframeChange[];
+    effectKeyframes: DeleteEffectKeyframeChange[];
+    setCodeValues: SetCodeValues;
+    clientId: string;
+}) => Promise<void>;

package/dist/components/Timeline/call-delete-keyframe.js

@@ -1,9 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.callDeleteEffectKeyframe = exports.callDeleteSequenceKeyframe = void 0;
+exports.callDeleteKeyframes = exports.callDeleteEffectKeyframe = exports.callDeleteSequenceKeyframe = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
 const save_prop_queue_1 = require("./save-prop-queue");
+const groupByNodePath = (keyframes) => {
+    var _a;
+    const groups = new Map();
+    for (const keyframe of keyframes) {
+        const key = JSON.stringify(keyframe.nodePath);
+        const group = (_a = groups.get(key)) !== null && _a !== void 0 ? _a : [];
+        group.push(keyframe);
+        groups.set(key, group);
+    }
+    return [...groups.values()];
+};
 const callDeleteSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, schema, setCodeValues, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
@@ -13,12 +24,17 @@ const callDeleteSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame,
             fieldKey,
             frame: sourceFrame,
         }),
-        apiCall: () => (0, call_api_1.callApi)('/api/delete-sequence-keyframe', {
-            fileName,
-            nodePath,
-            key: fieldKey,
-            frame: sourceFrame,
-            schema,
+        apiCall: () => (0, call_api_1.callApi)('/api/delete-keyframes', {
+            sequenceKeyframes: [
+                {
+                    fileName,
+                    nodePath,
+                    key: fieldKey,
+                    frame: sourceFrame,
+                    schema,
+                },
+            ],
+            effectKeyframes: [],
             clientId,
         }),
         errorLabel: 'Could not delete keyframe',
@@ -35,16 +51,72 @@ const callDeleteEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, s
             fieldKey,
             frame: sourceFrame,
         }),
-        apiCall: () => (0, call_api_1.callApi)('/api/delete-effect-keyframe', {
-            fileName,
-            sequenceNodePath: nodePath,
-            effectIndex,
-            key: fieldKey,
-            frame: sourceFrame,
-            schema,
+        apiCall: () => (0, call_api_1.callApi)('/api/delete-keyframes', {
+            sequenceKeyframes: [],
+            effectKeyframes: [
+                {
+                    fileName,
+                    sequenceNodePath: nodePath,
+                    effectIndex,
+                    key: fieldKey,
+                    frame: sourceFrame,
+                    schema,
+                },
+            ],
             clientId,
         }),
         errorLabel: 'Could not delete keyframe',
     });
 };
 exports.callDeleteEffectKeyframe = callDeleteEffectKeyframe;
+const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setCodeValues, clientId, }) => {
+    if (sequenceKeyframes.length === 0 && effectKeyframes.length === 0) {
+        return Promise.resolve();
+    }
+    for (const keyframes of groupByNodePath(sequenceKeyframes)) {
+        const [firstKeyframe] = keyframes;
+        if (!firstKeyframe) {
+            continue;
+        }
+        setCodeValues(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticDeleteSequenceKeyframes)({
+            previous: prev,
+            keyframes: keyframes.map((keyframe) => ({
+                fieldKey: keyframe.fieldKey,
+                frame: keyframe.sourceFrame,
+            })),
+        }));
+    }
+    for (const keyframes of groupByNodePath(effectKeyframes)) {
+        const [firstKeyframe] = keyframes;
+        if (!firstKeyframe) {
+            continue;
+        }
+        setCodeValues(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticDeleteEffectKeyframes)({
+            previous: prev,
+            keyframes: keyframes.map((keyframe) => ({
+                effectIndex: keyframe.effectIndex,
+                fieldKey: keyframe.fieldKey,
+                frame: keyframe.sourceFrame,
+            })),
+        }));
+    }
+    return (0, call_api_1.callApi)('/api/delete-keyframes', {
+        sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
+            fileName: keyframe.fileName,
+            nodePath: keyframe.nodePath,
+            key: keyframe.fieldKey,
+            frame: keyframe.sourceFrame,
+            schema: keyframe.schema,
+        })),
+        effectKeyframes: effectKeyframes.map((keyframe) => ({
+            fileName: keyframe.fileName,
+            sequenceNodePath: keyframe.nodePath,
+            effectIndex: keyframe.effectIndex,
+            key: keyframe.fieldKey,
+            frame: keyframe.sourceFrame,
+            schema: keyframe.schema,
+        })),
+        clientId,
+    }).then(() => undefined);
+};
+exports.callDeleteKeyframes = callDeleteKeyframes;

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

@@ -9,3 +9,13 @@ export declare const deleteSelectedKeyframe: ({ nodePathInfo, frame, sequences,
     setCodeValues: SetCodeValues;
     clientId: string;
 }) => Promise<void> | null;
+export declare const deleteSelectedKeyframes: ({ keyframes, sequences, overrideIdsToNodePaths, setCodeValues, clientId, }: {
+    keyframes: {
+        nodePathInfo: SequenceNodePathInfo;
+        frame: number;
+    }[];
+    sequences: TSequence[];
+    overrideIdsToNodePaths: OverrideIdToNodePaths;
+    setCodeValues: SetCodeValues;
+    clientId: string;
+}) => Promise<void> | null;