@remotion/studio 4.0.512 → 4.0.514

package/dist/components/Timeline/TimelineZoomControls.js

@@ -38,12 +38,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
+const get_timeline_max_zoom_1 = require("../../helpers/get-timeline-max-zoom");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
 const canvas_zoom_1 = require("../../icons/canvas-zoom");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const z_index_1 = require("../../state/z-index");
 const ControlButton_1 = require("../ControlButton");
 const layout_1 = require("../layout");
+const TIMELINE_ZOOM_BUTTON_FACTOR = 1.2;
 const container = {
     color: colors_1.BLACK,
     flexDirection: 'row',
@@ -53,7 +55,7 @@ const container = {
 const buttonStyle = {
     fontSize: 24,
 };
-const TimelineZoomSlider = ({ maxWidth }) => {
+const TimelineZoomSlider = ({ maxWidth, maxZoom }) => {
     var _a;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setZoom, zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
@@ -63,33 +65,39 @@ const TimelineZoomSlider = ({ maxWidth }) => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, () => Number(e.target.value), {
+        setZoom(canvasContent.compositionId, () => (0, get_timeline_max_zoom_1.sliderValueToTimelineZoom)({
+            sliderValue: Number(e.target.value),
+            maxZoom,
+        }), {
             anchorFrame: null,
             anchorContentX: null,
         });
-    }, [canvasContent, setZoom]);
+    }, [canvasContent, maxZoom, setZoom]);
     if (isStill ||
         canvasContent === null ||
         canvasContent.type !== 'composition') {
         return null;
     }
-    const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM;
-    return (jsx_runtime_1.jsx("input", { style: maxWidth === undefined ? undefined : { maxWidth }, 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 }));
+    const zoom = (_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : get_timeline_max_zoom_1.TIMELINE_MIN_ZOOM;
+    return (jsx_runtime_1.jsx("input", { style: maxWidth === undefined ? undefined : { maxWidth }, title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: "range", min: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.min, max: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.max, step: get_timeline_max_zoom_1.TIMELINE_ZOOM_SLIDER_PROPS.step, value: (0, get_timeline_max_zoom_1.timelineZoomToSliderValue)({ zoom, maxZoom }), onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }));
 };
 const TimelineZoomControlsInner = ({ sliderMaxWidth }) => {
+    var _a;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const maxZoom = (0, get_timeline_max_zoom_1.getTimelineMaxZoom)((_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 1);
     const onMinusClicked = (0, react_1.useCallback)(() => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, (z) => Math.max(timeline_zoom_1.TIMELINE_MIN_ZOOM, z - 0.2), { anchorFrame: null, anchorContentX: null });
+        setZoom(canvasContent.compositionId, (z) => z / TIMELINE_ZOOM_BUTTON_FACTOR, { anchorFrame: null, anchorContentX: null });
     }, [canvasContent, setZoom]);
     const onPlusClicked = (0, react_1.useCallback)(() => {
         if (canvasContent === null || canvasContent.type !== 'composition') {
             return;
         }
-        setZoom(canvasContent.compositionId, (z) => Math.min(timeline_zoom_1.TIMELINE_MAX_ZOOM, z + 0.2), { anchorFrame: null, anchorContentX: null });
+        setZoom(canvasContent.compositionId, (z) => z * TIMELINE_ZOOM_BUTTON_FACTOR, { anchorFrame: null, anchorContentX: null });
     }, [canvasContent, setZoom]);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     if (isStill ||
@@ -98,7 +106,7 @@ const TimelineZoomControlsInner = ({ sliderMaxWidth }) => {
         return null;
     }
     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", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth }), 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", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color }) })
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomOutIcon, { color: color }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineZoomSlider, { maxWidth: sliderMaxWidth, maxZoom: maxZoom }), 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", children: (color) => jsx_runtime_1.jsx(canvas_zoom_1.CanvasZoomIcon, { color: color }) })
         ] }));
 };
 exports.TimelineZoomControls = react_1.default.memo(TimelineZoomControlsInner);

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

@@ -2,9 +2,37 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.callAddEffectKeyframe = exports.callAddKeyframes = exports.callAddSequenceKeyframe = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const call_api_1 = require("../call-api");
 const apply_effect_response_to_prop_statuses_1 = require("./apply-effect-response-to-prop-statuses");
 const save_prop_queue_1 = require("./save-prop-queue");
+const addSequenceKeyframe = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return (0, call_api_1.callApi)('/api/add-sequence-keyframe', request);
+    }
+    return browserStudioOperations.keyframes
+        ? browserStudioOperations.keyframes.addSequenceKeyframe(request)
+        : Promise.reject(new Error('Keyframe editing is unavailable'));
+};
+const addEffectKeyframe = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return (0, call_api_1.callApi)('/api/add-effect-keyframe', request);
+    }
+    return browserStudioOperations.keyframes
+        ? browserStudioOperations.keyframes.addEffectKeyframe(request)
+        : Promise.reject(new Error('Keyframe editing is unavailable'));
+};
+const addKeyframes = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return (0, call_api_1.callApi)('/api/add-keyframes', request);
+    }
+    return browserStudioOperations.keyframes
+        ? browserStudioOperations.keyframes.addKeyframes(request)
+        : Promise.reject(new Error('Keyframe editing is unavailable'));
+};
 const groupByNodePath = (keyframes) => {
     var _a;
     const groups = new Map();
@@ -27,7 +55,7 @@ const callAddSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, va
             value,
             schema,
         }),
-        apiCall: () => (0, call_api_1.callApi)('/api/add-sequence-keyframe', {
+        apiCall: () => addSequenceKeyframe({
             fileName,
             nodePath,
             key: fieldKey,
@@ -71,7 +99,7 @@ const callAddKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatuses,
             schema: keyframe.schema,
         }), prev));
     }
-    return (0, call_api_1.callApi)('/api/add-keyframes', {
+    return addKeyframes({
         sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
             fileName: keyframe.fileName,
             nodePath: keyframe.nodePath,
@@ -106,7 +134,7 @@ const callAddEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, sour
             schema,
         }),
         applyServerResponse: (prev, response) => (0, apply_effect_response_to_prop_statuses_1.applyEffectResponseToPropStatuses)({ previous: prev, response }),
-        apiCall: () => (0, call_api_1.callApi)('/api/add-effect-keyframe', {
+        apiCall: () => addEffectKeyframe({
             fileName,
             sequenceNodePath: nodePath,
             effectIndex,

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

@@ -2,8 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.callDeleteKeyframes = exports.callDeleteEffectKeyframe = exports.callDeleteSequenceKeyframe = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const call_api_1 = require("../call-api");
 const save_prop_queue_1 = require("./save-prop-queue");
+const deleteKeyframes = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return (0, call_api_1.callApi)('/api/delete-keyframes', request);
+    }
+    return browserStudioOperations.keyframes
+        ? browserStudioOperations.keyframes.deleteKeyframes(request)
+        : Promise.reject(new Error('Keyframe editing is unavailable'));
+};
 const groupByNodePath = (keyframes) => {
     var _a;
     const groups = new Map();
@@ -24,7 +34,7 @@ const callDeleteSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame,
             fieldKey,
             frame: sourceFrame,
         }),
-        apiCall: () => (0, call_api_1.callApi)('/api/delete-keyframes', {
+        apiCall: () => deleteKeyframes({
             sequenceKeyframes: [
                 {
                     fileName,
@@ -51,7 +61,7 @@ const callDeleteEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, s
             fieldKey,
             frame: sourceFrame,
         }),
-        apiCall: () => (0, call_api_1.callApi)('/api/delete-keyframes', {
+        apiCall: () => deleteKeyframes({
             sequenceKeyframes: [],
             effectKeyframes: [
                 {
@@ -102,7 +112,7 @@ const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatus
             })),
         }));
     }
-    return (0, call_api_1.callApi)('/api/delete-keyframes', {
+    return deleteKeyframes({
         sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
             fileName: keyframe.fileName,
             nodePath: keyframe.nodePath,

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

@@ -1,4 +1,4 @@
-import type { SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
+import type { InteractivitySchema, SequencePropsSubscriptionKey } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 export type MoveSequenceKeyframeChange = {
     fileName: string;
@@ -7,6 +7,7 @@ export type MoveSequenceKeyframeChange = {
     fromFrame: number;
     toFrame: number;
     schema: InteractivitySchema;
+    keyframeDisplayOffsetAdjustmentDelta?: number;
 };
 export type MoveEffectKeyframeChange = MoveSequenceKeyframeChange & {
     effectIndex: number;

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

@@ -2,7 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.callMoveKeyframes = exports.applyOptimisticKeyframeMoves = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const call_api_1 = require("../call-api");
+const moveKeyframes = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return (0, call_api_1.callApi)('/api/move-keyframes', request);
+    }
+    return browserStudioOperations.keyframes
+        ? browserStudioOperations.keyframes.moveKeyframes(request)
+        : Promise.reject(new Error('Keyframe editing is unavailable'));
+};
 const groupByNodePath = (keyframes) => {
     var _a;
     const groups = new Map();
@@ -14,6 +24,27 @@ const groupByNodePath = (keyframes) => {
     }
     return [...groups.values()];
 };
+const applyKeyframeDisplayOffsetAdjustmentDeltas = ({ props, keyframes, }) => {
+    const nextProps = { ...props };
+    const deltas = new Map();
+    for (const keyframe of keyframes) {
+        if (keyframe.keyframeDisplayOffsetAdjustmentDelta !== undefined) {
+            deltas.set(keyframe.fieldKey, keyframe.keyframeDisplayOffsetAdjustmentDelta);
+        }
+    }
+    for (const [fieldKey, delta] of deltas) {
+        const status = nextProps[fieldKey];
+        if ((status === null || status === void 0 ? void 0 : status.status) !== 'keyframed' ||
+            status.keyframeDisplayOffsetAdjustment === null) {
+            continue;
+        }
+        nextProps[fieldKey] = {
+            ...status,
+            keyframeDisplayOffsetAdjustment: status.keyframeDisplayOffsetAdjustment + delta,
+        };
+    }
+    return nextProps;
+};
 const applyOptimisticKeyframeMoves = ({ sequenceKeyframes, effectKeyframes, setPropStatuses, }) => {
     if (sequenceKeyframes.length === 0 && effectKeyframes.length === 0) {
         return;
@@ -23,29 +54,61 @@ const applyOptimisticKeyframeMoves = ({ sequenceKeyframes, effectKeyframes, setP
         if (!firstKeyframe) {
             continue;
         }
-        setPropStatuses(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticMoveSequenceKeyframes)({
-            previous: prev,
-            keyframes: keyframes.map((keyframe) => ({
-                fieldKey: keyframe.fieldKey,
-                fromFrame: keyframe.fromFrame,
-                toFrame: keyframe.toFrame,
-            })),
-        }));
+        setPropStatuses(firstKeyframe.nodePath, (prev) => {
+            const moved = (0, studio_shared_1.optimisticMoveSequenceKeyframes)({
+                previous: prev,
+                keyframes: keyframes.map((keyframe) => ({
+                    fieldKey: keyframe.fieldKey,
+                    fromFrame: keyframe.fromFrame,
+                    toFrame: keyframe.toFrame,
+                })),
+            });
+            if (!moved.canUpdate) {
+                return moved;
+            }
+            return {
+                ...moved,
+                props: applyKeyframeDisplayOffsetAdjustmentDeltas({
+                    props: moved.props,
+                    keyframes,
+                }),
+            };
+        });
     }
     for (const keyframes of groupByNodePath(effectKeyframes)) {
         const [firstKeyframe] = keyframes;
         if (!firstKeyframe) {
             continue;
         }
-        setPropStatuses(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticMoveEffectKeyframes)({
-            previous: prev,
-            keyframes: keyframes.map((keyframe) => ({
-                effectIndex: keyframe.effectIndex,
-                fieldKey: keyframe.fieldKey,
-                fromFrame: keyframe.fromFrame,
-                toFrame: keyframe.toFrame,
-            })),
-        }));
+        setPropStatuses(firstKeyframe.nodePath, (prev) => {
+            const moved = (0, studio_shared_1.optimisticMoveEffectKeyframes)({
+                previous: prev,
+                keyframes: keyframes.map((keyframe) => ({
+                    effectIndex: keyframe.effectIndex,
+                    fieldKey: keyframe.fieldKey,
+                    fromFrame: keyframe.fromFrame,
+                    toFrame: keyframe.toFrame,
+                })),
+            });
+            if (!moved.canUpdate) {
+                return moved;
+            }
+            return {
+                ...moved,
+                effects: moved.effects.map((effect) => {
+                    if (!effect.canUpdate) {
+                        return effect;
+                    }
+                    return {
+                        ...effect,
+                        props: applyKeyframeDisplayOffsetAdjustmentDeltas({
+                            props: effect.props,
+                            keyframes: keyframes.filter((keyframe) => keyframe.effectIndex === effect.effectIndex),
+                        }),
+                    };
+                }),
+            };
+        });
     }
 };
 exports.applyOptimisticKeyframeMoves = applyOptimisticKeyframeMoves;
@@ -58,7 +121,7 @@ const callMoveKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatuses
         effectKeyframes,
         setPropStatuses,
     });
-    return (0, call_api_1.callApi)('/api/move-keyframes', {
+    return moveKeyframes({
         sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
             fileName: keyframe.fileName,
             nodePath: keyframe.nodePath,

package/dist/components/Timeline/call-update-keyframe-settings.js

@@ -2,10 +2,38 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.callBatchUpdateKeyframeSettings = exports.callUpdateEffectKeyframeSettings = exports.callUpdateSequenceKeyframeSettings = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const apply_effect_response_to_prop_statuses_1 = require("./apply-effect-response-to-prop-statuses");
 const save_prop_queue_1 = require("./save-prop-queue");
+const updateSequenceKeyframeSettings = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return (0, call_api_1.callApi)('/api/update-sequence-keyframe-settings', request);
+    }
+    return browserStudioOperations.keyframes
+        ? browserStudioOperations.keyframes.updateSequenceKeyframeSettings(request)
+        : Promise.reject(new Error('Keyframe editing is unavailable'));
+};
+const updateEffectKeyframeSettings = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return (0, call_api_1.callApi)('/api/update-effect-keyframe-settings', request);
+    }
+    return browserStudioOperations.keyframes
+        ? browserStudioOperations.keyframes.updateEffectKeyframeSettings(request)
+        : Promise.reject(new Error('Keyframe editing is unavailable'));
+};
+const batchUpdateKeyframeSettings = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (!browserStudioOperations) {
+        return (0, call_api_1.callApi)('/api/batch-update-keyframe-settings', request);
+    }
+    return browserStudioOperations.keyframes
+        ? browserStudioOperations.keyframes.batchUpdateKeyframeSettings(request)
+        : Promise.reject(new Error('Keyframe editing is unavailable'));
+};
 const callUpdateSequenceKeyframeSettings = ({ fileName, nodePath, fieldKey, settings, schema, setPropStatuses, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
@@ -15,7 +43,7 @@ const callUpdateSequenceKeyframeSettings = ({ fileName, nodePath, fieldKey, sett
             fieldKey,
             settings,
         }),
-        apiCall: () => (0, call_api_1.callApi)('/api/update-sequence-keyframe-settings', {
+        apiCall: () => updateSequenceKeyframeSettings({
             fileName,
             nodePath,
             key: fieldKey,
@@ -38,7 +66,7 @@ const callUpdateEffectKeyframeSettings = ({ fileName, nodePath, effectIndex, fie
             settings,
         }),
         applyServerResponse: (prev, response) => (0, apply_effect_response_to_prop_statuses_1.applyEffectResponseToPropStatuses)({ previous: prev, response }),
-        apiCall: () => (0, call_api_1.callApi)('/api/update-effect-keyframe-settings', {
+        apiCall: () => updateEffectKeyframeSettings({
             fileName,
             sequenceNodePath: nodePath,
             effectIndex,
@@ -67,7 +95,7 @@ const callBatchUpdateKeyframeSettings = ({ sequenceKeyframes, effectKeyframes, s
             settings: update.settings,
         }));
     }
-    return (0, call_api_1.callApi)('/api/batch-update-keyframe-settings', {
+    return batchUpdateKeyframeSettings({
         sequenceKeyframes: sequenceKeyframes.map((update) => ({
             fileName: update.fileName,
             nodePath: update.nodePath,

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

@@ -1,14 +1,6 @@
 import type { OverrideIdToNodePaths, PropStatuses, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { SetPropStatuses } from './save-sequence-prop';
-export declare const deleteSelectedKeyframe: ({ nodePathInfo, frame, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, }: {
-    nodePathInfo: SequenceNodePathInfo;
-    frame: number;
-    sequences: TSequence[];
-    overrideIdsToNodePaths: OverrideIdToNodePaths;
-    setPropStatuses: SetPropStatuses;
-    clientId: string;
-}) => Promise<void> | null;
 export declare const deleteSelectedKeyframes: ({ keyframes, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, propStatuses, timelinePosition, }: {
     keyframes: {
         nodePathInfo: SequenceNodePathInfo;

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

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deleteSelectedKeyframes = exports.deleteSelectedKeyframe = void 0;
+exports.deleteSelectedKeyframes = void 0;
 const remotion_1 = require("remotion");
 const call_delete_keyframe_1 = require("./call-delete-keyframe");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
 const getValueWhenLastKeyframeDeleted = ({ propStatus, playheadSourceFrame, }) => {
     var _a;
-    if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'keyframed' || playheadSourceFrame === null) {
+    if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'keyframed') {
         return null;
     }
     return ((_a = remotion_1.Internals.interpolateKeyframedStatus({
@@ -32,10 +33,6 @@ const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideI
     if (!(sequence === null || sequence === void 0 ? void 0 : sequence.controls)) {
         return null;
     }
-    const sourceFrame = frame - ((_c = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _c !== void 0 ? _c : 0);
-    const playheadSourceFrame = timelinePosition === null
-        ? null
-        : timelinePosition - ((_d = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _d !== void 0 ? _d : 0);
     const nodePath = nodePathInfo.sequenceSubscriptionKey;
     const fileName = nodePath.absolutePath;
     if (field.type === 'effect') {
@@ -43,19 +40,23 @@ const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideI
         if (!effect) {
             return null;
         }
-        const effectStatus = propStatuses !== null
-            ? remotion_1.Internals.getEffectPropStatusesCtx({
-                propStatuses,
-                nodePath,
-                effectIndex: field.effectIndex,
-            })
-            : null;
+        const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+            propStatuses,
+            nodePath,
+            effectIndex: field.effectIndex,
+        });
         const effectPropStatus = (effectStatus === null || effectStatus === void 0 ? void 0 : effectStatus.type) === 'can-update-effect'
             ? effectStatus.props[field.fieldKey]
             : null;
+        const effectKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+            propStatus: effectPropStatus,
+            keyframeDisplayOffset: (_c = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _c !== void 0 ? _c : 0,
+        });
+        const effectSourceFrame = frame - effectKeyframeDisplayOffset;
+        const effectPlayheadSourceFrame = timelinePosition - effectKeyframeDisplayOffset;
         const effectValueWhenLastKeyframeDeleted = getValueWhenLastKeyframeDeleted({
             propStatus: effectPropStatus,
-            playheadSourceFrame,
+            playheadSourceFrame: effectPlayheadSourceFrame,
         });
         return {
             type: 'effect',
@@ -63,14 +64,18 @@ const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideI
             nodePath,
             effectIndex: field.effectIndex,
             fieldKey: field.fieldKey,
-            sourceFrame,
+            sourceFrame: effectSourceFrame,
             schema: effect.schema,
             valueWhenLastKeyframeDeleted: effectValueWhenLastKeyframeDeleted,
         };
     }
-    const sequencePropStatus = propStatuses !== null
-        ? (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[field.fieldKey]
-        : null;
+    const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[field.fieldKey];
+    const keyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+        propStatus: sequencePropStatus,
+        keyframeDisplayOffset: (_d = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _d !== void 0 ? _d : 0,
+    });
+    const sourceFrame = frame - keyframeDisplayOffset;
+    const playheadSourceFrame = timelinePosition - keyframeDisplayOffset;
     const sequenceValueWhenLastKeyframeDeleted = getValueWhenLastKeyframeDeleted({
         propStatus: sequencePropStatus,
         playheadSourceFrame,
@@ -85,32 +90,6 @@ const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideI
         valueWhenLastKeyframeDeleted: sequenceValueWhenLastKeyframeDeleted,
     };
 };
-const deleteSelectedKeyframe = ({ nodePathInfo, frame, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, }) => {
-    const deletion = getSelectedKeyframeDeletion({
-        nodePathInfo,
-        frame,
-        sequences,
-        overrideIdsToNodePaths,
-        propStatuses: null,
-        timelinePosition: null,
-    });
-    if (deletion === null) {
-        return null;
-    }
-    if (deletion.type === 'effect') {
-        return (0, call_delete_keyframe_1.callDeleteEffectKeyframe)({
-            ...deletion,
-            setPropStatuses,
-            clientId,
-        });
-    }
-    return (0, call_delete_keyframe_1.callDeleteSequenceKeyframe)({
-        ...deletion,
-        setPropStatuses,
-        clientId,
-    });
-};
-exports.deleteSelectedKeyframe = deleteSelectedKeyframe;
 const deleteSelectedKeyframes = ({ keyframes, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, propStatuses, timelinePosition, }) => {
     const deletions = keyframes
         .map((keyframe) => getSelectedKeyframeDeletion({

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

@@ -4,14 +4,6 @@ import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
 import type { SetPropStatuses } from './save-sequence-prop';
 import { type TimelineSelection } from './TimelineSelection';
 export declare const deleteSequencesFromSource: (nodePathInfos: SequenceNodePathInfo[], confirm: ConfirmationDialogFunction) => Promise<boolean>;
-export declare const deleteSelectedTimelineItem: ({ selection, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }: {
-    selection: TimelineSelection;
-    sequences: TSequence[];
-    overrideIdsToNodePaths: OverrideIdToNodePaths;
-    setPropStatuses: SetPropStatuses;
-    clientId: string;
-    confirm: ConfirmationDialogFunction;
-}) => Promise<boolean> | null;
 export declare const getTimelineSelectionAfterDeletingItems: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, timelinePosition, }: {
     readonly selections: readonly TimelineSelection[];
     readonly sequences?: TSequence[] | undefined;

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

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deleteSelectedTimelineItems = exports.getTimelineSelectionAfterDeletingItems = exports.deleteSelectedTimelineItem = exports.deleteSequencesFromSource = void 0;
+exports.deleteSelectedTimelineItems = exports.getTimelineSelectionAfterDeletingItems = exports.deleteSequencesFromSource = void 0;
 const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
+const delete_jsx_node_api_1 = require("../delete-jsx-node-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 get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 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");
@@ -36,7 +38,7 @@ const deleteSequencesFromSource = async (nodePathInfos, confirm) => {
     if (!(await confirmDeletingDuplicatedSequences(nodePathInfos, confirm))) {
         return false;
     }
-    return (0, call_api_1.callApi)('/api/delete-jsx-node', {
+    return (0, delete_jsx_node_api_1.deleteJsxNode)({
         nodes: nodePathInfos.map((nodePathInfo) => {
             const nodePath = nodePathInfo.sequenceSubscriptionKey;
             return {
@@ -88,45 +90,6 @@ const deleteEffects = (effects) => {
         return false;
     });
 };
-const deleteSelectedTimelineItem = ({ selection, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }) => {
-    var _a;
-    if (selection.type === 'keyframe') {
-        const promise = (0, delete_selected_keyframe_1.deleteSelectedKeyframe)({
-            nodePathInfo: selection.nodePathInfo,
-            frame: selection.frame,
-            sequences,
-            overrideIdsToNodePaths,
-            setPropStatuses,
-            clientId,
-        });
-        return (_a = promise === null || promise === void 0 ? void 0 : promise.then(() => true)) !== null && _a !== void 0 ? _a : null;
-    }
-    switch (selection.type) {
-        case 'guide':
-            return null;
-        case 'sequence':
-            return (0, exports.deleteSequencesFromSource)([selection.nodePathInfo], confirm);
-        case 'sequence-effect':
-            return deleteEffects([
-                {
-                    type: 'single-effect',
-                    nodePathInfo: selection.nodePathInfo,
-                    effectIndex: selection.i,
-                },
-            ]);
-        case 'sequence-prop':
-        case 'sequence-effect-prop':
-        case 'easing':
-            return null;
-        case 'sequence-all-effects':
-            return deleteEffects([
-                { type: 'all-effects', nodePathInfo: selection.nodePathInfo },
-            ]);
-        default:
-            throw new Error(`Unexpected timeline selection type: ${selection}`);
-    }
-};
-exports.deleteSelectedTimelineItem = deleteSelectedTimelineItem;
 const isSequenceRowSelection = (selection) => selection.type === 'sequence';
 const isSequenceEffectSelection = (selection) => selection.type === 'sequence-effect';
 const isSequenceAllEffectsSelection = (selection) => selection.type === 'sequence-all-effects';
@@ -173,7 +136,6 @@ const getEasingSelectionAfterDeletingKeyframes = ({ selections, sequences, overr
         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' ||
@@ -181,7 +143,13 @@ const getEasingSelectionAfterDeletingKeyframes = ({ selections, sequences, overr
             return null;
         }
         return (0, get_easing_selection_after_keyframe_delete_1.getEasingSelectionAfterKeyframeDelete)({
-            deletedSourceFrames: [sourceFrame],
+            deletedSourceFrames: [
+                selection.frame -
+                    (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                        propStatus: sequencePropStatus,
+                        keyframeDisplayOffset: track.keyframeDisplayOffset,
+                    }),
+            ],
             keyframeDisplayOffset: track.keyframeDisplayOffset,
             nodePathInfo: selection.nodePathInfo,
             propStatus: sequencePropStatus,
@@ -201,7 +169,13 @@ const getEasingSelectionAfterDeletingKeyframes = ({ selections, sequences, overr
         return null;
     }
     return (0, get_easing_selection_after_keyframe_delete_1.getEasingSelectionAfterKeyframeDelete)({
-        deletedSourceFrames: [sourceFrame],
+        deletedSourceFrames: [
+            selection.frame -
+                (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                    propStatus: effectPropStatus,
+                    keyframeDisplayOffset: track.keyframeDisplayOffset,
+                }),
+        ],
         keyframeDisplayOffset: track.keyframeDisplayOffset,
         nodePathInfo: selection.nodePathInfo,
         propStatus: effectPropStatus,