@remotion/studio 4.0.485 → 4.0.486

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = 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");
@@ -8,6 +8,7 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const save_sequence_prop_1 = require("./save-sequence-prop");
@@ -22,6 +23,49 @@ const baseStyle = {
     zIndex: 1,
     touchAction: 'none',
 };
+const getKeyframedSequenceDragTargets = ({ nodePath, sequence, propStatuses, }) => {
+    var _a;
+    const status = propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath)];
+    if (status === null || status === undefined || !status.canUpdate) {
+        return { effectKeyframes: [], sequenceKeyframes: [] };
+    }
+    const sequenceSchema = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.schema;
+    const sequenceKeyframes = sequenceSchema === undefined
+        ? []
+        : Object.entries(status.props).flatMap(([fieldKey, propStatus]) => propStatus.status === 'keyframed'
+            ? [{ fieldKey, schema: sequenceSchema, status: propStatus }]
+            : []);
+    const effectKeyframes = status.effects.flatMap((effectStatus) => {
+        var _a;
+        if (!effectStatus.canUpdate) {
+            return [];
+        }
+        const effectSchema = (_a = sequence.effects[effectStatus.effectIndex]) === null || _a === void 0 ? void 0 : _a.schema;
+        if (effectSchema === undefined) {
+            return [];
+        }
+        return Object.entries(effectStatus.props).flatMap(([fieldKey, propStatus]) => propStatus.status === 'keyframed'
+            ? [
+                {
+                    effectIndex: effectStatus.effectIndex,
+                    fieldKey,
+                    schema: effectSchema,
+                    status: propStatus,
+                },
+            ]
+            : []);
+    });
+    return { effectKeyframes, sequenceKeyframes };
+};
+const shiftKeyframedStatus = ({ status, deltaFrames, }) => {
+    return {
+        ...status,
+        keyframes: status.keyframes.map((keyframe) => ({
+            ...keyframe,
+            frame: keyframe.frame + deltaFrames,
+        })),
+    };
+};
 const canUpdateDurationInFrames = ({ propStatuses, nodePath, }) => {
     var _a, _b;
     const status = (_b = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.durationInFrames) === null || _b === void 0 ? void 0 : _b.status;
@@ -166,6 +210,31 @@ const getTimelineSequenceFromDragChanges = ({ targets, deltaFrames, }) => {
     });
 };
 exports.getTimelineSequenceFromDragChanges = getTimelineSequenceFromDragChanges;
+const getTimelineSequenceFromDragKeyframeMoves = ({ targets, deltaFrames, }) => {
+    if (deltaFrames === 0) {
+        return { effectKeyframes: [], sequenceKeyframes: [] };
+    }
+    return {
+        sequenceKeyframes: targets.flatMap((target) => target.sequenceKeyframes.flatMap((keyframeTarget) => keyframeTarget.status.keyframes.map((keyframe) => ({
+            fileName: target.fileName,
+            nodePath: target.nodePath,
+            fieldKey: keyframeTarget.fieldKey,
+            fromFrame: keyframe.frame,
+            toFrame: keyframe.frame + deltaFrames,
+            schema: keyframeTarget.schema,
+        })))),
+        effectKeyframes: targets.flatMap((target) => target.effectKeyframes.flatMap((keyframeTarget) => keyframeTarget.status.keyframes.map((keyframe) => ({
+            fileName: target.fileName,
+            nodePath: target.nodePath,
+            effectIndex: keyframeTarget.effectIndex,
+            fieldKey: keyframeTarget.fieldKey,
+            fromFrame: keyframe.frame,
+            toFrame: keyframe.frame + deltaFrames,
+            schema: keyframeTarget.schema,
+        })))),
+    };
+};
+exports.getTimelineSequenceFromDragKeyframeMoves = getTimelineSequenceFromDragKeyframeMoves;
 const findSequenceTrack = ({ tracks, nodePathInfo, }) => {
     const key = (0, studio_shared_1.stringifySequenceExpandedRowKey)(nodePathInfo.sequenceSubscriptionKey);
     return tracks.find((candidate) => {
@@ -301,10 +370,17 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
         }
         const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
         if (!targets.has(key)) {
+            const { effectKeyframes, sequenceKeyframes } = getKeyframedSequenceDragTargets({
+                nodePath,
+                sequence: originalSequence,
+                propStatuses,
+            });
             targets.set(key, {
+                effectKeyframes,
                 fileName: nodePath.absolutePath,
                 initialFrom: originalSequence.from,
                 nodePath,
+                sequenceKeyframes,
             });
         }
     }
@@ -321,9 +397,13 @@ const clearDurationDragOverrides = ({ clearDragOverrides, targets, }) => {
         clearDragOverrides(target.nodePath);
     }
 };
-const clearFromDragOverrides = ({ clearDragOverrides, targets, }) => {
+const clearFromDragOverrides = ({ clearDragOverrides, clearEffectDragOverrides, targets, }) => {
     for (const target of targets) {
         clearDragOverrides(target.nodePath);
+        const effectIndexes = new Set(target.effectKeyframes.map((keyframe) => keyframe.effectIndex));
+        for (const effectIndex of effectIndexes) {
+            clearEffectDragOverrides(target.nodePath, effectIndex);
+        }
     }
 };
 const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
@@ -494,13 +574,13 @@ const TimelineSequenceLeftEdgeDragHandle = ({ nodePathInfo, windowWidth, timelin
     const style = {
         ...baseStyle,
         left: 0,
-        background: 'transparent',
+        background: colors_1.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 { setPropStatuses, setDragOverrides, clearDragOverrides, setEffectDragOverrides, clearEffectDragOverrides, } = (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);
@@ -513,6 +593,8 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
+        setEffectDragOverrides,
+        clearEffectDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
     });
@@ -521,6 +603,8 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
+        setEffectDragOverrides,
+        clearEffectDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
     };
@@ -533,26 +617,39 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         if (!dragState) {
             return;
         }
-        const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
+        const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, clearEffectDragOverrides: latestClearEffect, previewServerState: latestServerState, } = latestRef.current;
         const changes = (0, exports.getTimelineSequenceFromDragChanges)({
             targets: dragState.targets,
             deltaFrames: dragState.latestDeltaFrames,
         });
+        const keyframeMoves = (0, exports.getTimelineSequenceFromDragKeyframeMoves)({
+            targets: dragState.targets,
+            deltaFrames: dragState.latestDeltaFrames,
+        });
         if (!commit ||
             latestServerState.type !== 'connected' ||
-            changes.length === 0) {
+            (changes.length === 0 &&
+                keyframeMoves.sequenceKeyframes.length === 0 &&
+                keyframeMoves.effectKeyframes.length === 0)) {
             clearFromDragOverrides({
                 clearDragOverrides: latestClear,
+                clearEffectDragOverrides: latestClearEffect,
                 targets: dragState.targets,
             });
             return;
         }
         const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
             changes,
+            movedKeyframes: {
+                sequenceKeyframes: keyframeMoves.sequenceKeyframes,
+                effectKeyframes: keyframeMoves.effectKeyframes,
+            },
             setPropStatuses: latestSetPropStatuses,
             clientId: latestServerState.clientId,
-            undoLabel: changes.length > 1 ? 'Move selected sequences' : 'Move sequence',
-            redoLabel: changes.length > 1
+            undoLabel: dragState.targets.length > 1
+                ? 'Move selected sequences'
+                : 'Move sequence',
+            redoLabel: dragState.targets.length > 1
                 ? 'Move selected sequences back'
                 : 'Move sequence back',
         });
@@ -563,6 +660,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
             .finally(() => {
             clearFromDragOverrides({
                 clearDragOverrides: latestClear,
+                clearEffectDragOverrides: latestClearEffect,
                 targets: dragState.targets,
             });
         });
@@ -623,10 +721,29 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
             const deltaFrames = Math.round(dx / dragState.pxPerFrame);
             dragState.latestDeltaFrames = deltaFrames;
             for (const target of dragState.targets) {
-                latestRef.current.setDragOverrides(target.nodePath, 'from', remotion_1.Internals.makeStaticDragOverride((0, exports.getTimelineSequenceFromDragValue)({
+                const nextFrom = (0, exports.getTimelineSequenceFromDragValue)({
                     initialFrom: target.initialFrom,
                     deltaFrames,
-                })));
+                });
+                latestRef.current.setDragOverrides(target.nodePath, 'from', remotion_1.Internals.makeStaticDragOverride(nextFrom));
+                for (const keyframeTarget of target.sequenceKeyframes) {
+                    latestRef.current.setDragOverrides(target.nodePath, keyframeTarget.fieldKey, {
+                        type: 'keyframed',
+                        status: shiftKeyframedStatus({
+                            status: keyframeTarget.status,
+                            deltaFrames,
+                        }),
+                    });
+                }
+                for (const keyframeTarget of target.effectKeyframes) {
+                    latestRef.current.setEffectDragOverrides(target.nodePath, keyframeTarget.effectIndex, keyframeTarget.fieldKey, {
+                        type: 'keyframed',
+                        status: shiftKeyframedStatus({
+                            status: keyframeTarget.status,
+                            deltaFrames,
+                        }),
+                    });
+                }
             }
         };
         const onUp = (e) => {
@@ -829,7 +946,7 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
     const style = {
         ...baseStyle,
         right: 0,
-        background: 'transparent',
+        background: colors_1.TRANSPARENT,
     };
     return (jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to change duration", style: style, onPointerDown: onPointerDown }));
 };

package/dist/components/Timeline/TimelineSlider.js

@@ -4,6 +4,7 @@ exports.TimelineSlider = exports.redrawTimelineSliderFast = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const imperative_state_1 = require("./imperative-state");
@@ -21,7 +22,7 @@ const line = {
     height: '100vh',
     width: PLAYHEAD_LINE_WIDTH,
     position: 'fixed',
-    backgroundColor: '#f02c00',
+    backgroundColor: colors_1.TIMELINE_PLAYHEAD_COLOR,
 };
 const PLAYHEAD_CENTER_OFFSET = PLAYHEAD_LINE_WIDTH / 2;
 const getTimelineSliderTransform = ({ durationInFrames, frame, width, }) => {

package/dist/components/Timeline/TimelineSliderHandle.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSliderHandle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
 const container = {
     width: 20,
     height: 20,
@@ -9,6 +10,6 @@ const container = {
     marginLeft: -8,
 };
 const TimelineSliderHandle = () => {
-    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("svg", { width: 17, viewBox: "0 0 159 212", children: jsx_runtime_1.jsx("path", { d: "M17.0234375,1.07763419 L143.355469,1.07763419 C151.63974,1.07763419 158.355469,7.79336295 158.355469,16.0776342 L158.355469,69.390507 C158.355469,73.7938677 156.420655,77.9748242 153.064021,80.8248415 L89.3980057,134.881757 C83.7986799,139.635978 75.5802263,139.635978 69.9809005,134.881757 L6.66764807,81.1243622 C3.0872392,78.0843437 1.0234375,73.6246568 1.0234375,68.9277387 L1.0234375,17.0776342 C1.0234375,8.2410782 8.1868815,1.07763419 17.0234375,1.07763419 Z", fill: "#f02c00" }) }) }));
+    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("svg", { width: 17, viewBox: "0 0 159 212", children: jsx_runtime_1.jsx("path", { d: "M17.0234375,1.07763419 L143.355469,1.07763419 C151.63974,1.07763419 158.355469,7.79336295 158.355469,16.0776342 L158.355469,69.390507 C158.355469,73.7938677 156.420655,77.9748242 153.064021,80.8248415 L89.3980057,134.881757 C83.7986799,139.635978 75.5802263,139.635978 69.9809005,134.881757 L6.66764807,81.1243622 C3.0872392,78.0843437 1.0234375,73.6246568 1.0234375,68.9277387 L1.0234375,17.0776342 C1.0234375,8.2410782 8.1868815,1.07763419 17.0234375,1.07763419 Z", fill: colors_1.TIMELINE_PLAYHEAD_COLOR }) }) }));
 };
 exports.TimelineSliderHandle = TimelineSliderHandle;

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -22,7 +22,7 @@ const container = {
 };
 const tick = {
     width: 1,
-    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    backgroundColor: colors_1.WHITE_ALPHA_15,
     height: 20,
     position: 'absolute',
 };

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const timeline_utils_1 = require("@remotion/timeline-utils");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
 const get_timeline_video_info_widths_1 = require("./get-timeline-video-info-widths");
@@ -17,7 +18,7 @@ const outerStyle = {
 };
 const filmstripContainerStyle = {
     height: timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT,
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    backgroundColor: colors_1.BLACK_ALPHA_30,
     display: 'flex',
     borderTopLeftRadius: 2,
     fontSize: 10,

package/dist/components/Timeline/TimelineZoomControls.js

@@ -4,6 +4,7 @@ exports.TimelineZoomControls = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
 const minus_1 = require("../../icons/minus");
 const plus_1 = require("../../icons/plus");
@@ -12,7 +13,7 @@ const z_index_1 = require("../../state/z-index");
 const ControlButton_1 = require("../ControlButton");
 const layout_1 = require("../layout");
 const container = {
-    color: 'black',
+    color: colors_1.BLACK,
     flexDirection: 'row',
     display: 'flex',
     alignItems: 'center',
@@ -21,7 +22,7 @@ const buttonStyle = {
     fontSize: 24,
 };
 const iconStyle = {
-    color: 'white',
+    color: colors_1.WHITE,
     width: 14,
 };
 const TimelineZoomControls = () => {
@@ -58,7 +59,7 @@ const TimelineZoomControls = () => {
     }
     const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: jsx_runtime_1.jsx(minus_1.Minus, { style: iconStyle }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: jsx_runtime_1.jsx(plus_1.Plus, { color: "currentcolor", style: iconStyle }) })
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: jsx_runtime_1.jsx(minus_1.Minus, { style: iconStyle }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: jsx_runtime_1.jsx(plus_1.Plus, { color: colors_1.CURRENT_COLOR_LOWERCASE, style: iconStyle }) })
         ] }));
 };
 exports.TimelineZoomControls = TimelineZoomControls;

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

@@ -11,6 +11,11 @@ export type MoveSequenceKeyframeChange = {
 export type MoveEffectKeyframeChange = MoveSequenceKeyframeChange & {
     effectIndex: number;
 };
+export declare const applyOptimisticKeyframeMoves: ({ sequenceKeyframes, effectKeyframes, setPropStatuses, }: {
+    sequenceKeyframes: MoveSequenceKeyframeChange[];
+    effectKeyframes: MoveEffectKeyframeChange[];
+    setPropStatuses: SetPropStatuses;
+}) => void;
 export declare const callMoveKeyframes: ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }: {
     sequenceKeyframes: MoveSequenceKeyframeChange[];
     effectKeyframes: MoveEffectKeyframeChange[];

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.callMoveKeyframes = void 0;
+exports.callMoveKeyframes = exports.applyOptimisticKeyframeMoves = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
 const groupByNodePath = (keyframes) => {
@@ -14,9 +14,9 @@ const groupByNodePath = (keyframes) => {
     }
     return [...groups.values()];
 };
-const callMoveKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }) => {
+const applyOptimisticKeyframeMoves = ({ sequenceKeyframes, effectKeyframes, setPropStatuses, }) => {
     if (sequenceKeyframes.length === 0 && effectKeyframes.length === 0) {
-        return Promise.resolve();
+        return;
     }
     for (const keyframes of groupByNodePath(sequenceKeyframes)) {
         const [firstKeyframe] = keyframes;
@@ -47,6 +47,17 @@ const callMoveKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatuses
             })),
         }));
     }
+};
+exports.applyOptimisticKeyframeMoves = applyOptimisticKeyframeMoves;
+const callMoveKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }) => {
+    if (sequenceKeyframes.length === 0 && effectKeyframes.length === 0) {
+        return Promise.resolve();
+    }
+    (0, exports.applyOptimisticKeyframeMoves)({
+        sequenceKeyframes,
+        effectKeyframes,
+        setPropStatuses,
+    });
     return (0, call_api_1.callApi)('/api/move-keyframes', {
         sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
             fileName: keyframe.fileName,

package/dist/components/Timeline/google-fonts-list.d.ts

@@ -0,0 +1,6 @@
+export declare const GOOGLE_FONTS_LIST: {
+    importName: string;
+    fontFamily: string;
+    previewUrl: string;
+    weights: string[];
+}[];