@remotion/studio 4.0.472 → 4.0.474

package/dist/components/Timeline/TimelineTranslateField.js

@@ -17,27 +17,32 @@ const containerStyle = {
     gap: 4,
 };
 const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
-    var _a;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
     const [codeX, codeY] = (0, react_1.useMemo)(() => (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
-    const step = field.fieldSchema.type === 'translate' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
-    const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
+    const configuredStep = field.fieldSchema.type === 'translate' ? field.fieldSchema.step : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
+    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 1,
+        step: configuredStep,
+    }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const num = (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(v));
-        const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
-        const formatted = digits === 0 ? String(num) : num.toFixed(digits);
+        const formatted = (0, timeline_field_utils_1.formatTimelineNumber)({
+            decimalPlaces,
+            fixed: false,
+            value: v,
+        });
         return `${formatted}px`;
-    }, [stepDecimals]);
+    }, [decimalPlaces]);
     // --- X callbacks ---
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY));
-    }, [onDragValueChange, dragY, codeY]);
+        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY, decimalPlaces));
+    }, [onDragValueChange, dragY, codeY, decimalPlaces]);
     const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY);
+        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY, decimalPlaces);
         if (newStr !== propStatus.codeValue) {
             onSave(newStr).finally(() => {
                 setDragX(null);
@@ -48,12 +53,12 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             setDragX(null);
             onDragEnd();
         }
-    }, [dragY, codeY, propStatus, onSave, onDragEnd]);
+    }, [dragY, codeY, decimalPlaces, propStatus, onSave, onDragEnd]);
     const onXTextChange = (0, react_1.useCallback)((newVal) => {
         const parsed = Number(newVal);
         if (!Number.isNaN(parsed)) {
             const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-            const newStr = (0, timeline_translate_utils_1.serializeTranslate)(parsed, currentY);
+            const newStr = (0, timeline_translate_utils_1.serializeTranslate)(parsed, currentY, decimalPlaces);
             if (newStr !== propStatus.codeValue) {
                 setDragX(parsed);
                 onSave(newStr).finally(() => {
@@ -61,16 +66,16 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 });
             }
         }
-    }, [propStatus, dragY, codeY, onSave]);
+    }, [propStatus, dragY, codeY, decimalPlaces, onSave]);
     // --- Y callbacks ---
     const onYChange = (0, react_1.useCallback)((newVal) => {
         setDragY(newVal);
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal));
-    }, [onDragValueChange, dragX, codeX]);
+        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal, decimalPlaces));
+    }, [onDragValueChange, dragX, codeX, decimalPlaces]);
     const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal);
+        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal, decimalPlaces);
         if (newStr !== propStatus.codeValue) {
             onSave(newStr).finally(() => {
                 setDragY(null);
@@ -81,12 +86,12 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             setDragY(null);
             onDragEnd();
         }
-    }, [dragX, codeX, propStatus, onSave, onDragEnd]);
+    }, [dragX, codeX, decimalPlaces, propStatus, onSave, onDragEnd]);
     const onYTextChange = (0, react_1.useCallback)((newVal) => {
         const parsed = Number(newVal);
         if (!Number.isNaN(parsed)) {
             const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-            const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, parsed);
+            const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, parsed, decimalPlaces);
             if (newStr !== propStatus.codeValue) {
                 setDragY(parsed);
                 onSave(newStr).finally(() => {
@@ -94,7 +99,7 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 });
             }
         }
-    }, [propStatus, onSave, dragX, codeX]);
+    }, [propStatus, onSave, dragX, codeX, decimalPlaces]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
             jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false })
         ] }));

package/dist/components/Timeline/TimelineUvCoordinateField.js

@@ -30,25 +30,31 @@ const tuplesEqual = (left, right) => {
     return left[0] === right[0] && left[1] === right[1];
 };
 const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
-    var _a, _b, _c;
+    var _a, _b;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
     const [codeX, codeY] = (0, react_1.useMemo)(() => parseUvCoordinate(effectiveValue), [effectiveValue]);
-    const step = field.fieldSchema.type === 'uv-coordinate'
-        ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 0.01)
-        : 0.01;
+    const configuredStep = field.fieldSchema.type === 'uv-coordinate'
+        ? field.fieldSchema.step
+        : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 0.01;
     const min = field.fieldSchema.type === 'uv-coordinate'
-        ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+        ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
         : -Infinity;
     const max = field.fieldSchema.type === 'uv-coordinate'
-        ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+        ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
         : Infinity;
-    const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
+    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 2,
+        step: configuredStep,
+    }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const num = Number(v);
-        const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
-        return digits === 0 ? String(num) : num.toFixed(digits);
-    }, [stepDecimals]);
+        return (0, timeline_field_utils_1.formatTimelineNumber)({
+            decimalPlaces,
+            fixed: true,
+            value: v,
+        });
+    }, [decimalPlaces]);
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
@@ -114,7 +120,7 @@ const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave,
         }
     }, [propStatus, onSave, dragX, codeX]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false })
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, snapToStep: false }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, snapToStep: false })
         ] }));
 };
 exports.TimelineUvCoordinateField = TimelineUvCoordinateField;

package/dist/components/Timeline/apply-effect-response-to-prop-statuses.d.ts

@@ -0,0 +1,5 @@
+import type { CanUpdateEffectPropsResponse, CanUpdateSequencePropsResponse } from 'remotion';
+export declare const applyEffectResponseToPropStatuses: ({ previous, response, }: {
+    previous: CanUpdateSequencePropsResponse;
+    response: CanUpdateEffectPropsResponse;
+}) => CanUpdateSequencePropsResponse;

package/dist/components/Timeline/apply-effect-response-to-prop-statuses.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyEffectResponseToPropStatuses = void 0;
+const applyEffectResponseToPropStatuses = ({ previous, response, }) => {
+    if (!previous.canUpdate) {
+        return previous;
+    }
+    const targetIndex = previous.effects.findIndex((effect) => effect.effectIndex === response.effectIndex);
+    if (targetIndex === -1) {
+        return previous;
+    }
+    const effects = [...previous.effects];
+    effects[targetIndex] = response;
+    return {
+        ...previous,
+        effects,
+    };
+};
+exports.applyEffectResponseToPropStatuses = applyEffectResponseToPropStatuses;

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

@@ -1,16 +1,16 @@
 import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
-import type { SetCodeValues } from './save-sequence-prop';
-export declare const callAddSequenceKeyframe: ({ fileName, nodePath, fieldKey, sourceFrame, value, schema, setCodeValues, clientId, }: {
+import type { SetPropStatuses } from './save-sequence-prop';
+export declare const callAddSequenceKeyframe: ({ fileName, nodePath, fieldKey, sourceFrame, value, schema, setPropStatuses, clientId, }: {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     fieldKey: string;
     sourceFrame: number;
     value: unknown;
     schema: SequenceSchema;
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;
-export declare const callAddEffectKeyframe: ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, value, schema, setCodeValues, clientId, }: {
+export declare const callAddEffectKeyframe: ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, value, schema, setPropStatuses, clientId, }: {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     effectIndex: number;
@@ -18,6 +18,6 @@ export declare const callAddEffectKeyframe: ({ fileName, nodePath, effectIndex,
     sourceFrame: number;
     value: unknown;
     schema: SequenceSchema;
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;

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

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.callAddEffectKeyframe = exports.callAddSequenceKeyframe = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 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 callAddSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, value, schema, setCodeValues, clientId, }) => {
+const callAddSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, value, schema, setPropStatuses, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
-        setCodeValues,
+        setPropStatuses,
         applyOptimistic: (prev) => (0, studio_shared_1.optimisticAddSequenceKeyframe)({
             previous: prev,
             fieldKey,
@@ -28,10 +29,10 @@ const callAddSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, va
     });
 };
 exports.callAddSequenceKeyframe = callAddSequenceKeyframe;
-const callAddEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, value, schema, setCodeValues, clientId, }) => {
+const callAddEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, value, schema, setPropStatuses, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
-        setCodeValues,
+        setPropStatuses,
         applyOptimistic: (prev) => (0, studio_shared_1.optimisticAddEffectKeyframe)({
             previous: prev,
             effectIndex,
@@ -40,6 +41,7 @@ const callAddEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, sour
             value,
             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', {
             fileName,
             sequenceNodePath: nodePath,

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

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

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

@@ -15,10 +15,10 @@ const groupByNodePath = (keyframes) => {
     }
     return [...groups.values()];
 };
-const callDeleteSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, schema, setCodeValues, clientId, }) => {
+const callDeleteSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, schema, setPropStatuses, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
-        setCodeValues,
+        setPropStatuses,
         applyOptimistic: (prev) => (0, studio_shared_1.optimisticDeleteSequenceKeyframe)({
             previous: prev,
             fieldKey,
@@ -41,10 +41,10 @@ const callDeleteSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame,
     });
 };
 exports.callDeleteSequenceKeyframe = callDeleteSequenceKeyframe;
-const callDeleteEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, schema, setCodeValues, clientId, }) => {
+const callDeleteEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, schema, setPropStatuses, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
-        setCodeValues,
+        setPropStatuses,
         applyOptimistic: (prev) => (0, studio_shared_1.optimisticDeleteEffectKeyframe)({
             previous: prev,
             effectIndex,
@@ -69,7 +69,7 @@ const callDeleteEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, s
     });
 };
 exports.callDeleteEffectKeyframe = callDeleteEffectKeyframe;
-const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setCodeValues, clientId, }) => {
+const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }) => {
     if (sequenceKeyframes.length === 0 && effectKeyframes.length === 0) {
         return Promise.resolve();
     }
@@ -78,7 +78,7 @@ const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setCodeValues
         if (!firstKeyframe) {
             continue;
         }
-        setCodeValues(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticDeleteSequenceKeyframes)({
+        setPropStatuses(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticDeleteSequenceKeyframes)({
             previous: prev,
             keyframes: keyframes.map((keyframe) => ({
                 fieldKey: keyframe.fieldKey,
@@ -91,7 +91,7 @@ const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setCodeValues
         if (!firstKeyframe) {
             continue;
         }
-        setCodeValues(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticDeleteEffectKeyframes)({
+        setPropStatuses(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticDeleteEffectKeyframes)({
             previous: prev,
             keyframes: keyframes.map((keyframe) => ({
                 effectIndex: keyframe.effectIndex,

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

@@ -0,0 +1,19 @@
+import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SetPropStatuses } from './save-sequence-prop';
+export type MoveSequenceKeyframeChange = {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    fromFrame: number;
+    toFrame: number;
+    schema: SequenceSchema;
+};
+export type MoveEffectKeyframeChange = MoveSequenceKeyframeChange & {
+    effectIndex: number;
+};
+export declare const callMoveKeyframes: ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }: {
+    sequenceKeyframes: MoveSequenceKeyframeChange[];
+    effectKeyframes: MoveEffectKeyframeChange[];
+    setPropStatuses: SetPropStatuses;
+    clientId: string;
+}) => Promise<void>;

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.callMoveKeyframes = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const call_api_1 = require("../call-api");
+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 callMoveKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }) => {
+    if (sequenceKeyframes.length === 0 && effectKeyframes.length === 0) {
+        return Promise.resolve();
+    }
+    for (const keyframes of groupByNodePath(sequenceKeyframes)) {
+        const [firstKeyframe] = keyframes;
+        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,
+            })),
+        }));
+    }
+    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,
+            })),
+        }));
+    }
+    return (0, call_api_1.callApi)('/api/move-keyframes', {
+        sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
+            fileName: keyframe.fileName,
+            nodePath: keyframe.nodePath,
+            key: keyframe.fieldKey,
+            fromFrame: keyframe.fromFrame,
+            toFrame: keyframe.toFrame,
+            schema: keyframe.schema,
+        })),
+        effectKeyframes: effectKeyframes.map((keyframe) => ({
+            fileName: keyframe.fileName,
+            sequenceNodePath: keyframe.nodePath,
+            effectIndex: keyframe.effectIndex,
+            key: keyframe.fieldKey,
+            fromFrame: keyframe.fromFrame,
+            toFrame: keyframe.toFrame,
+            schema: keyframe.schema,
+        })),
+        clientId,
+    }).then(() => undefined);
+};
+exports.callMoveKeyframes = callMoveKeyframes;

package/dist/components/Timeline/call-update-keyframe-settings.d.ts

@@ -0,0 +1,22 @@
+import { type KeyframeSettings } from '@remotion/studio-shared';
+import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { SetPropStatuses } from './save-sequence-prop';
+export declare const callUpdateSequenceKeyframeSettings: ({ fileName, nodePath, fieldKey, settings, schema, setPropStatuses, clientId, }: {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    settings: KeyframeSettings;
+    schema: SequenceSchema;
+    setPropStatuses: SetPropStatuses;
+    clientId: string;
+}) => Promise<void>;
+export declare const callUpdateEffectKeyframeSettings: ({ fileName, nodePath, effectIndex, fieldKey, settings, schema, setPropStatuses, clientId, }: {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    effectIndex: number;
+    fieldKey: string;
+    settings: KeyframeSettings;
+    schema: SequenceSchema;
+    setPropStatuses: SetPropStatuses;
+    clientId: string;
+}) => Promise<void>;

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.callUpdateEffectKeyframeSettings = exports.callUpdateSequenceKeyframeSettings = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+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 callUpdateSequenceKeyframeSettings = ({ fileName, nodePath, fieldKey, settings, schema, setPropStatuses, clientId, }) => {
+    return (0, save_prop_queue_1.enqueueSavePropChange)({
+        nodePath,
+        setPropStatuses,
+        applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateSequenceKeyframeSettings)({
+            previous: prev,
+            fieldKey,
+            settings,
+        }),
+        apiCall: () => (0, call_api_1.callApi)('/api/update-sequence-keyframe-settings', {
+            fileName,
+            nodePath,
+            key: fieldKey,
+            settings,
+            schema,
+            clientId,
+        }),
+        errorLabel: 'Could not update keyframe settings',
+    });
+};
+exports.callUpdateSequenceKeyframeSettings = callUpdateSequenceKeyframeSettings;
+const callUpdateEffectKeyframeSettings = ({ fileName, nodePath, effectIndex, fieldKey, settings, schema, setPropStatuses, clientId, }) => {
+    return (0, save_prop_queue_1.enqueueSavePropChange)({
+        nodePath,
+        setPropStatuses,
+        applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateEffectKeyframeSettings)({
+            previous: prev,
+            effectIndex,
+            fieldKey,
+            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', {
+            fileName,
+            sequenceNodePath: nodePath,
+            effectIndex,
+            key: fieldKey,
+            settings,
+            schema,
+            clientId,
+        }),
+        errorLabel: 'Could not update keyframe settings',
+    });
+};
+exports.callUpdateEffectKeyframeSettings = callUpdateEffectKeyframeSettings;

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

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

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

@@ -46,7 +46,7 @@ const getSelectedKeyframeDeletion = ({ nodePathInfo, frame, sequences, overrideI
         schema: sequence.controls.schema,
     };
 };
-const deleteSelectedKeyframe = ({ nodePathInfo, frame, sequences, overrideIdsToNodePaths, setCodeValues, clientId, }) => {
+const deleteSelectedKeyframe = ({ nodePathInfo, frame, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, }) => {
     const deletion = getSelectedKeyframeDeletion({
         nodePathInfo,
         frame,
@@ -59,18 +59,18 @@ const deleteSelectedKeyframe = ({ nodePathInfo, frame, sequences, overrideIdsToN
     if (deletion.type === 'effect') {
         return (0, call_delete_keyframe_1.callDeleteEffectKeyframe)({
             ...deletion,
-            setCodeValues,
+            setPropStatuses,
             clientId,
         });
     }
     return (0, call_delete_keyframe_1.callDeleteSequenceKeyframe)({
         ...deletion,
-        setCodeValues,
+        setPropStatuses,
         clientId,
     });
 };
 exports.deleteSelectedKeyframe = deleteSelectedKeyframe;
-const deleteSelectedKeyframes = ({ keyframes, sequences, overrideIdsToNodePaths, setCodeValues, clientId, }) => {
+const deleteSelectedKeyframes = ({ keyframes, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, }) => {
     const deletions = keyframes
         .map((keyframe) => getSelectedKeyframeDeletion({
         nodePathInfo: keyframe.nodePathInfo,
@@ -85,7 +85,7 @@ const deleteSelectedKeyframes = ({ keyframes, sequences, overrideIdsToNodePaths,
     return (0, call_delete_keyframe_1.callDeleteKeyframes)({
         sequenceKeyframes: deletions.filter((deletion) => deletion.type === 'sequence'),
         effectKeyframes: deletions.filter((deletion) => deletion.type === 'effect'),
-        setCodeValues,
+        setPropStatuses,
         clientId,
     });
 };

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

@@ -1,17 +1,20 @@
 import type { OverrideIdToNodePaths, TSequence } from 'remotion';
-import type { SetCodeValues } from './save-sequence-prop';
+import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
+import type { SetPropStatuses } from './save-sequence-prop';
 import type { TimelineSelection } from './TimelineSelection';
-export declare const deleteSelectedTimelineItem: ({ selection, sequences, overrideIdsToNodePaths, setCodeValues, clientId, }: {
+export declare const deleteSelectedTimelineItem: ({ selection, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }: {
     selection: TimelineSelection;
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     clientId: string;
-}) => Promise<void> | null;
-export declare const deleteSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, setCodeValues, clientId, }: {
+    confirm: ConfirmationDialogFunction;
+}) => Promise<boolean> | null;
+export declare const deleteSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }: {
     selections: readonly TimelineSelection[];
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     clientId: string;
-}) => Promise<void> | null;
+    confirm: ConfirmationDialogFunction;
+}) => Promise<boolean> | null;