@remotion/studio 4.0.472 → 4.0.474

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

@@ -4,27 +4,31 @@ exports.deleteSelectedTimelineItems = exports.deleteSelectedTimelineItem = void
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const delete_selected_keyframe_1 = require("./delete-selected-keyframe");
-const confirmDeletingDuplicatedSequences = (nodePathInfos) => {
+const confirmDeletingDuplicatedSequences = (nodePathInfos, confirm) => {
     const duplicatedNodePathInfos = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath > 1);
     if (duplicatedNodePathInfos.length === 0) {
-        return true;
+        return Promise.resolve(true);
     }
     if (duplicatedNodePathInfos.length === 1) {
         const [nodePathInfo] = duplicatedNodePathInfos;
-        const singleDuplicatedSequenceMessage = 'This sequence is programmatically duplicated ' +
-            nodePathInfo.numberOfSequencesWithThisNodePath +
-            ' times in the code. Deleting removes all instances. Continue?';
-        // eslint-disable-next-line no-alert -- native confirm before deleting all instances of a duplicated sequence
-        return window.confirm(singleDuplicatedSequenceMessage);
+        return confirm({
+            title: 'Delete sequence?',
+            message: 'This sequence is programmatically duplicated ' +
+                nodePathInfo.numberOfSequencesWithThisNodePath +
+                ' times in the code. Deleting removes all instances. Continue?',
+            confirmLabel: 'Delete',
+        });
     }
-    const multipleDuplicatedSequencesMessage = duplicatedNodePathInfos.length +
-        ' selected sequences are programmatically duplicated in the code. Deleting removes all instances. Continue?';
-    // eslint-disable-next-line no-alert -- native confirm before deleting all instances of duplicated sequences
-    return window.confirm(multipleDuplicatedSequencesMessage);
+    return confirm({
+        title: 'Delete sequences?',
+        message: duplicatedNodePathInfos.length +
+            ' selected sequences are programmatically duplicated in the code. Deleting removes all instances. Continue?',
+        confirmLabel: 'Delete',
+    });
 };
-const deleteSequences = (nodePathInfos) => {
-    if (!confirmDeletingDuplicatedSequences(nodePathInfos)) {
-        return Promise.resolve();
+const deleteSequences = async (nodePathInfos, confirm) => {
+    if (!(await confirmDeletingDuplicatedSequences(nodePathInfos, confirm))) {
+        return false;
     }
     return (0, call_api_1.callApi)('/api/delete-jsx-node', {
         nodes: nodePathInfos.map((nodePathInfo) => {
@@ -44,14 +48,16 @@ const deleteSequences = (nodePathInfos) => {
         else {
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         }
+        return true;
     })
         .catch((err) => {
         (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        return true;
     });
 };
 const deleteEffects = (effects) => {
     if (effects.length === 0) {
-        return Promise.resolve();
+        return Promise.resolve(false);
     }
     return (0, call_api_1.callApi)('/api/delete-effect', effects.map((effect) => {
         const nodePath = effect.nodePathInfo.sequenceSubscriptionKey;
@@ -80,25 +86,29 @@ const deleteEffects = (effects) => {
         else {
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);
         }
+        return true;
     })
         .catch((err) => {
         (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        return true;
     });
 };
-const deleteSelectedTimelineItem = ({ selection, sequences, overrideIdsToNodePaths, setCodeValues, clientId, }) => {
+const deleteSelectedTimelineItem = ({ selection, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }) => {
+    var _a;
     if (selection.type === 'keyframe') {
-        return (0, delete_selected_keyframe_1.deleteSelectedKeyframe)({
+        const promise = (0, delete_selected_keyframe_1.deleteSelectedKeyframe)({
             nodePathInfo: selection.nodePathInfo,
             frame: selection.frame,
             sequences,
             overrideIdsToNodePaths,
-            setCodeValues,
+            setPropStatuses,
             clientId,
         });
+        return (_a = promise === null || promise === void 0 ? void 0 : promise.then(() => true)) !== null && _a !== void 0 ? _a : null;
     }
     switch (selection.type) {
         case 'sequence':
-            return deleteSequences([selection.nodePathInfo]);
+            return deleteSequences([selection.nodePathInfo], confirm);
         case 'sequence-effect':
             return deleteEffects([
                 {
@@ -109,6 +119,7 @@ const deleteSelectedTimelineItem = ({ selection, sequences, overrideIdsToNodePat
             ]);
         case 'sequence-prop':
         case 'sequence-effect-prop':
+        case 'easing':
             return null;
         case 'sequence-all-effects':
             return deleteEffects([
@@ -134,7 +145,8 @@ const assertTimelineSelectionsHaveSameType = (selections) => {
         }
     }
 };
-const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodePaths, setCodeValues, clientId, }) => {
+const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }) => {
+    var _a;
     const firstSelection = selections[0];
     if (!firstSelection) {
         return null;
@@ -144,7 +156,7 @@ const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodeP
         case 'sequence':
             return deleteSequences(selections
                 .filter(isSequenceRowSelection)
-                .map((selection) => selection.nodePathInfo));
+                .map((selection) => selection.nodePathInfo), confirm);
         case 'sequence-effect':
             return deleteEffects(selections.filter(isSequenceEffectSelection).map((selection) => ({
                 type: 'single-effect',
@@ -152,19 +164,21 @@ const deleteSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodeP
                 effectIndex: selection.i,
             })));
         case 'keyframe': {
-            return (0, delete_selected_keyframe_1.deleteSelectedKeyframes)({
+            const promise = (0, delete_selected_keyframe_1.deleteSelectedKeyframes)({
                 keyframes: selections.filter(isKeyframeSelection).map((selection) => ({
                     nodePathInfo: selection.nodePathInfo,
                     frame: selection.frame,
                 })),
                 sequences,
                 overrideIdsToNodePaths,
-                setCodeValues,
+                setPropStatuses,
                 clientId,
             });
+            return (_a = promise === null || promise === void 0 ? void 0 : promise.then(() => true)) !== null && _a !== void 0 ? _a : null;
         }
         case 'sequence-prop':
         case 'sequence-effect-prop':
+        case 'easing':
             return null;
         case 'sequence-all-effects':
             return deleteEffects(selections.filter(isSequenceAllEffectsSelection).map((selection) => ({

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

@@ -1,6 +1,7 @@
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { ConfirmationDialogFunction } from '../ConfirmationDialog-types';
 import type { TimelineSelection } from './TimelineSelection';
-export declare const duplicateSequencesFromSource: (nodePathInfos: readonly SequenceNodePathInfo[]) => Promise<void>;
+export declare const duplicateSequencesFromSource: (nodePathInfos: readonly SequenceNodePathInfo[], confirm: ConfirmationDialogFunction) => Promise<void>;
 export declare const isDuplicatableSequenceRowSelection: (selection: TimelineSelection) => selection is {
     readonly nodePathInfo: SequenceNodePathInfo;
 } & {
@@ -8,6 +9,7 @@ export declare const isDuplicatableSequenceRowSelection: (selection: TimelineSel
 } & {
     type: "sequence";
 };
-export declare const duplicateSelectedTimelineItems: ({ selections, }: {
+export declare const duplicateSelectedTimelineItems: ({ selections, confirm, }: {
     selections: readonly TimelineSelection[];
+    confirm: ConfirmationDialogFunction;
 }) => Promise<void> | null;

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

@@ -3,22 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.duplicateSelectedTimelineItems = exports.isDuplicatableSequenceRowSelection = exports.duplicateSequencesFromSource = void 0;
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const confirmDuplicatingProgrammaticallyDuplicatedSequences = (nodePathInfos) => {
+const confirmDuplicatingProgrammaticallyDuplicatedSequences = (nodePathInfos, confirm) => {
     if (nodePathInfos.length === 0) {
-        return true;
+        return Promise.resolve(true);
     }
     if (nodePathInfos.length === 1) {
         const [nodePathInfo] = nodePathInfos;
-        const singleDuplicatedSequenceMessage = 'This sequence is programmatically duplicated ' +
-            nodePathInfo.numberOfSequencesWithThisNodePath +
-            ' times in the code. Duplicating inserts another copy. Continue?';
-        // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
-        return window.confirm(singleDuplicatedSequenceMessage);
+        return confirm({
+            title: 'Duplicate sequence?',
+            message: 'This sequence is programmatically duplicated ' +
+                nodePathInfo.numberOfSequencesWithThisNodePath +
+                ' times in the code. Duplicating inserts another copy. Continue?',
+            confirmLabel: 'Duplicate',
+        });
     }
-    const multipleDuplicatedSequencesMessage = nodePathInfos.length +
-        ' selected sequences are programmatically duplicated in the code. Duplicating inserts another copy of each. Continue?';
-    // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
-    return window.confirm(multipleDuplicatedSequencesMessage);
+    return confirm({
+        title: 'Duplicate sequences?',
+        message: nodePathInfos.length +
+            ' selected sequences are programmatically duplicated in the code. Duplicating inserts another copy of each. Continue?',
+        confirmLabel: 'Duplicate',
+    });
 };
 const duplicateSequence = (nodePathInfo) => {
     const nodePath = nodePathInfo.sequenceSubscriptionKey;
@@ -27,40 +31,41 @@ const duplicateSequence = (nodePathInfo) => {
         nodePath: nodePath.nodePath,
     });
 };
-const duplicateSequencesFromSource = (nodePathInfos) => {
+const duplicateSequencesFromSource = (nodePathInfos, confirm) => {
     const programmaticallyDuplicated = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath > 1);
     const regular = nodePathInfos.filter((nodePathInfo) => nodePathInfo.numberOfSequencesWithThisNodePath <= 1);
-    const toDuplicate = [...regular];
-    if (programmaticallyDuplicated.length === 0 ||
-        confirmDuplicatingProgrammaticallyDuplicatedSequences(programmaticallyDuplicated)) {
-        toDuplicate.push(...programmaticallyDuplicated);
-    }
-    if (toDuplicate.length === 0) {
-        return Promise.resolve();
-    }
-    return Promise.all(toDuplicate.map(duplicateSequence))
-        .then((results) => {
-        const failedResult = results.find((result) => !result.success);
-        if (failedResult && !failedResult.success) {
-            (0, NotificationCenter_1.showNotification)(failedResult.reason, 4000);
-            return;
+    return confirmDuplicatingProgrammaticallyDuplicatedSequences(programmaticallyDuplicated, confirm).then((shouldDuplicateProgrammaticSequences) => {
+        const toDuplicate = [...regular];
+        if (shouldDuplicateProgrammaticSequences) {
+            toDuplicate.push(...programmaticallyDuplicated);
+        }
+        if (toDuplicate.length === 0) {
+            return Promise.resolve();
         }
-        (0, NotificationCenter_1.showNotification)(toDuplicate.length === 1
-            ? 'Duplicated sequence in source file'
-            : 'Duplicated sequences in source files', 2000);
-    })
-        .catch((err) => {
-        (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        return Promise.all(toDuplicate.map(duplicateSequence))
+            .then((results) => {
+            const failedResult = results.find((result) => !result.success);
+            if (failedResult && !failedResult.success) {
+                (0, NotificationCenter_1.showNotification)(failedResult.reason, 4000);
+                return;
+            }
+            (0, NotificationCenter_1.showNotification)(toDuplicate.length === 1
+                ? 'Duplicated sequence in source file'
+                : 'Duplicated sequences in source files', 2000);
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        });
     });
 };
 exports.duplicateSequencesFromSource = duplicateSequencesFromSource;
 const isDuplicatableSequenceRowSelection = (selection) => selection.type === 'sequence';
 exports.isDuplicatableSequenceRowSelection = isDuplicatableSequenceRowSelection;
-const duplicateSelectedTimelineItems = ({ selections, }) => {
+const duplicateSelectedTimelineItems = ({ selections, confirm, }) => {
     const sequenceSelections = selections.filter(exports.isDuplicatableSequenceRowSelection);
     if (sequenceSelections.length === 0) {
         return null;
     }
-    return (0, exports.duplicateSequencesFromSource)(sequenceSelections.map((selection) => selection.nodePathInfo));
+    return (0, exports.duplicateSequencesFromSource)(sequenceSelections.map((selection) => selection.nodePathInfo), confirm);
 };
 exports.duplicateSelectedTimelineItems = duplicateSelectedTimelineItems;

package/dist/components/Timeline/get-bounded-keyframe-drag-delta.d.ts

@@ -0,0 +1,8 @@
+export type TimelineKeyframeDragBoundsTarget = {
+    readonly displayFrame: number;
+};
+export declare const getBoundedKeyframeDragDelta: ({ delta, durationInFrames, targets, }: {
+    readonly delta: number;
+    readonly durationInFrames: number;
+    readonly targets: readonly TimelineKeyframeDragBoundsTarget[];
+}) => number;

package/dist/components/Timeline/get-bounded-keyframe-drag-delta.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBoundedKeyframeDragDelta = void 0;
+const getBoundedKeyframeDragDelta = ({ delta, durationInFrames, targets, }) => {
+    if (targets.length === 0 || durationInFrames <= 0) {
+        return 0;
+    }
+    const minDelta = Math.max(...targets.map((target) => -target.displayFrame));
+    const maxDelta = Math.min(...targets.map((target) => durationInFrames - 1 - target.displayFrame));
+    return Math.min(Math.max(delta, minDelta), maxDelta);
+};
+exports.getBoundedKeyframeDragDelta = getBoundedKeyframeDragDelta;

package/dist/components/Timeline/get-keyframe-navigation.d.ts

@@ -1,9 +1,9 @@
 export declare const getPreviousKeyframeDisplayFrame: (keyframes: readonly {
     frame: number;
-}[], currentDisplayFrame: number) => number | null;
+}[], currentDisplayFrame: number, durationInFrames: number) => number | null;
 export declare const getNextKeyframeDisplayFrame: (keyframes: readonly {
     frame: number;
-}[], currentDisplayFrame: number) => number | null;
+}[], currentDisplayFrame: number, durationInFrames: number) => number | null;
 export declare const hasKeyframeAtSourceFrame: (keyframes: readonly {
     frame: number;
 }[], sourceFrame: number) => boolean;

package/dist/components/Timeline/get-keyframe-navigation.js

@@ -1,23 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hasKeyframeAtSourceFrame = exports.getNextKeyframeDisplayFrame = exports.getPreviousKeyframeDisplayFrame = void 0;
-const getPreviousKeyframeDisplayFrame = (keyframes, currentDisplayFrame) => {
+const isKeyframeInTimelineRange = (frame, durationInFrames) => {
+    return frame >= 0 && frame < durationInFrames;
+};
+const getPreviousKeyframeDisplayFrame = (keyframes, currentDisplayFrame, durationInFrames) => {
     let previous = null;
     for (const keyframe of keyframes) {
-        if (keyframe.frame < currentDisplayFrame) {
+        if (isKeyframeInTimelineRange(keyframe.frame, durationInFrames) &&
+            keyframe.frame < currentDisplayFrame &&
+            (previous === null || keyframe.frame > previous)) {
             previous = keyframe.frame;
         }
     }
     return previous;
 };
 exports.getPreviousKeyframeDisplayFrame = getPreviousKeyframeDisplayFrame;
-const getNextKeyframeDisplayFrame = (keyframes, currentDisplayFrame) => {
+const getNextKeyframeDisplayFrame = (keyframes, currentDisplayFrame, durationInFrames) => {
+    let next = null;
     for (const keyframe of keyframes) {
-        if (keyframe.frame > currentDisplayFrame) {
-            return keyframe.frame;
+        if (isKeyframeInTimelineRange(keyframe.frame, durationInFrames) &&
+            keyframe.frame > currentDisplayFrame &&
+            (next === null || keyframe.frame < next)) {
+            next = keyframe.frame;
         }
     }
-    return null;
+    return next;
 };
 exports.getNextKeyframeDisplayFrame = getNextKeyframeDisplayFrame;
 const hasKeyframeAtSourceFrame = (keyframes, sourceFrame) => {

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

@@ -1,9 +1,9 @@
-import { type CodeValues, type GetDragOverrides, type GetEffectDragOverrides, type SequencePropsSubscriptionKey } from 'remotion';
+import { type GetDragOverrides, type GetEffectDragOverrides, type PropStatuses, type SequencePropsSubscriptionKey } from 'remotion';
 import type { TimelineTreeNode } from '../../helpers/timeline-layout';
-export declare const getNodeKeyframes: ({ node, nodePath, codeValues, keyframeDisplayOffset, getDragOverrides, getEffectDragOverrides, timelinePosition, }: {
+export declare const getNodeKeyframes: ({ node, nodePath, propStatuses, keyframeDisplayOffset, getDragOverrides, getEffectDragOverrides, timelinePosition, }: {
     node: TimelineTreeNode;
     nodePath: SequencePropsSubscriptionKey;
-    codeValues: CodeValues;
+    propStatuses: PropStatuses;
     keyframeDisplayOffset: number;
     getDragOverrides: GetDragOverrides;
     getEffectDragOverrides: GetEffectDragOverrides;

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

@@ -22,7 +22,7 @@ const withDragOverrideKeyframe = ({ propStatus, keyframeDisplayOffset, timelineP
     }
     return [...keyframes, dragKeyframe].sort((first, second) => first.frame - second.frame);
 };
-const getNodeKeyframes = ({ node, nodePath, codeValues, keyframeDisplayOffset, getDragOverrides, getEffectDragOverrides, timelinePosition, }) => {
+const getNodeKeyframes = ({ node, nodePath, propStatuses, keyframeDisplayOffset, getDragOverrides, getEffectDragOverrides, timelinePosition, }) => {
     var _a, _b;
     if (node.kind !== 'field' || node.field === null) {
         return [];
@@ -30,15 +30,15 @@ const getNodeKeyframes = ({ node, nodePath, codeValues, keyframeDisplayOffset, g
     if (node.field.kind === 'sequence-field') {
         const dragOverrides = getDragOverrides(nodePath);
         return withDragOverrideKeyframe({
-            propStatus: (_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key],
+            propStatus: (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key],
             keyframeDisplayOffset,
             timelinePosition,
             dragOverrideValue: dragOverrides[node.field.key],
             hasDragOverride: hasOverride(dragOverrides, node.field.key),
         });
     }
-    const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
-        codeValues,
+    const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
         nodePath,
         effectIndex: node.field.effectIndex,
     });

package/dist/components/Timeline/get-timeline-easing-segments.d.ts

@@ -0,0 +1,9 @@
+export type TimelineEasingSegment = {
+    readonly fromFrame: number;
+    readonly toFrame: number;
+    readonly segmentIndex: number;
+};
+export declare const getTimelineEasingSegments: (keyframes: {
+    frame: number;
+    value: unknown;
+}[]) => TimelineEasingSegment[];

package/dist/components/Timeline/get-timeline-easing-segments.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineEasingSegments = void 0;
+const getTimelineEasingSegments = (keyframes) => {
+    return keyframes.flatMap((keyframe, index) => {
+        const nextKeyframe = keyframes[index + 1];
+        if (!nextKeyframe) {
+            return [];
+        }
+        return [
+            {
+                fromFrame: keyframe.frame,
+                toFrame: nextKeyframe.frame,
+                segmentIndex: index,
+            },
+        ];
+    });
+};
+exports.getTimelineEasingSegments = getTimelineEasingSegments;

package/dist/components/Timeline/reset-selected-timeline-props.d.ts

@@ -1,5 +1,5 @@
-import type { CodeValues, OverrideIdToNodePaths, SequencePropsSubscriptionKey, SequenceSchema, TSequence } from 'remotion';
-import type { SetCodeValues } from './save-sequence-prop';
+import type { OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, SequenceSchema, TSequence } from 'remotion';
+import type { SetPropStatuses } from './save-sequence-prop';
 import type { TimelineSelection } from './TimelineSelection';
 type SequencePropResetTarget = {
     readonly type: 'sequence-prop';
@@ -21,18 +21,18 @@ type EffectPropResetTarget = {
     readonly schema: SequenceSchema;
 };
 type TimelinePropResetTarget = SequencePropResetTarget | EffectPropResetTarget;
-export declare const getTimelinePropResetTargets: ({ selections, sequences, overrideIdsToNodePaths, codeValues, }: {
+export declare const getTimelinePropResetTargets: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly selections: readonly TimelineSelection[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
-    readonly codeValues: CodeValues;
+    readonly propStatuses: PropStatuses;
 }) => TimelinePropResetTarget[] | null;
-export declare const resetSelectedTimelineProps: ({ selections, sequences, overrideIdsToNodePaths, codeValues, setCodeValues, clientId, }: {
+export declare const resetSelectedTimelineProps: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, setPropStatuses, clientId, }: {
     readonly selections: readonly TimelineSelection[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
-    readonly codeValues: CodeValues;
-    readonly setCodeValues: SetCodeValues;
+    readonly propStatuses: PropStatuses;
+    readonly setPropStatuses: SetPropStatuses;
     readonly clientId: string;
 }) => Promise<void> | null;
 export {};

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -8,7 +8,7 @@ const save_sequence_prop_1 = require("./save-sequence-prop");
 const isPropResetSelection = (selection) => selection.type === 'sequence-prop' ||
     selection.type === 'sequence-effect-prop';
 const isVisibleFieldSchema = (fieldSchema) => fieldSchema !== undefined && fieldSchema.type !== 'hidden';
-const isNonDefaultCodeValue = ({ codeValue, defaultValue, }) => JSON.stringify(codeValue !== null && codeValue !== void 0 ? codeValue : defaultValue) !== JSON.stringify(defaultValue);
+const isNonDefaultCodeValue = ({ propStatus, defaultValue, }) => JSON.stringify(propStatus !== null && propStatus !== void 0 ? propStatus : defaultValue) !== JSON.stringify(defaultValue);
 const isResettablePropStatus = ({ propStatus, defaultValue, }) => {
     if (!propStatus || propStatus.status === 'computed') {
         return false;
@@ -20,14 +20,14 @@ const isResettablePropStatus = ({ propStatus, defaultValue, }) => {
         return true;
     }
     return isNonDefaultCodeValue({
-        codeValue: propStatus.codeValue,
+        propStatus: propStatus.codeValue,
         defaultValue,
     });
 };
 const getDefaultValue = (fieldSchema) => fieldSchema.default !== undefined
     ? JSON.stringify(fieldSchema.default)
     : null;
-const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodePaths, codeValues, }) => {
+const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     var _a;
     var _b;
     const firstSelection = selections[0];
@@ -54,7 +54,7 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
                 continue;
             }
             const sequenceFieldSchema = sequence.controls.schema[selection.key];
-            const sequencePropStatus = (_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[selection.key];
+            const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[selection.key];
             if (!isVisibleFieldSchema(sequenceFieldSchema) ||
                 !isResettablePropStatus({
                     propStatus: sequencePropStatus,
@@ -75,8 +75,8 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
         }
         const effect = sequence.effects[selection.i];
         const fieldSchema = effect === null || effect === void 0 ? void 0 : effect.schema[selection.key];
-        const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
-            codeValues,
+        const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+            propStatuses,
             nodePath,
             effectIndex: selection.i,
         });
@@ -105,12 +105,12 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
     return resetTargets;
 };
 exports.getTimelinePropResetTargets = getTimelinePropResetTargets;
-const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePaths, codeValues, setCodeValues, clientId, }) => {
+const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, setPropStatuses, clientId, }) => {
     const resetTargets = (0, exports.getTimelinePropResetTargets)({
         selections,
         sequences,
         overrideIdsToNodePaths,
-        codeValues,
+        propStatuses,
     });
     if (resetTargets === null || resetTargets.length === 0) {
         return null;
@@ -128,18 +128,19 @@ const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePa
                 defaultValue: target.defaultValue,
                 schema: target.schema,
             })),
-            setCodeValues,
+            setPropStatuses,
             clientId,
             undoLabel: sequencePropTargets.length > 1
                 ? 'Reset selected sequence props'
-                : null,
+                : 'Reset sequence prop',
             redoLabel: sequencePropTargets.length > 1
                 ? 'Reapply selected sequence props'
-                : null,
+                : 'Reapply sequence prop',
         }));
     }
     for (const target of effectPropTargets) {
         resetPromises.push((0, save_effect_prop_1.saveEffectProp)({
+            type: 'value',
             fileName: target.fileName,
             nodePath: target.nodePath,
             effectIndex: target.effectIndex,
@@ -147,7 +148,7 @@ const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePa
             value: target.value,
             defaultValue: target.defaultValue,
             schema: target.schema,
-            setCodeValues,
+            setPropStatuses,
             clientId,
         }));
     }

package/dist/components/Timeline/save-effect-prop.d.ts

@@ -1,13 +1,24 @@
+import { type EffectClipboardParam } from '@remotion/studio-shared';
 import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
-import type { SetCodeValues } from './save-sequence-prop';
-export declare const saveEffectProp: ({ fileName, nodePath, effectIndex, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }: {
+import type { SetPropStatuses } from './save-sequence-prop';
+type SaveEffectPropBase = {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     effectIndex: number;
     fieldKey: string;
-    value: unknown;
     defaultValue: string | null;
     schema: SequenceSchema;
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     clientId: string;
-}) => Promise<void>;
+};
+type SaveEffectPropValue = SaveEffectPropBase & {
+    type: 'value';
+    value: unknown;
+};
+type SaveEffectPropEffectParam = SaveEffectPropBase & {
+    type: 'effect-param';
+    effectParam: EffectClipboardParam;
+};
+type SaveEffectPropInput = SaveEffectPropValue | SaveEffectPropEffectParam;
+export declare const saveEffectProp: (input: SaveEffectPropInput) => Promise<void>;
+export {};

package/dist/components/Timeline/save-effect-prop.js

@@ -3,28 +3,46 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveEffectProp = 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 saveEffectProp = ({ fileName, nodePath, effectIndex, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }) => {
+const saveEffectProp = (input) => {
+    const { fileName, nodePath, effectIndex, fieldKey, defaultValue, schema, setPropStatuses, clientId, } = input;
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
-        setCodeValues,
-        applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
-            previous: prev,
-            effectIndex,
-            fieldKey,
-            value,
-            schema,
-        }),
-        apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', {
-            fileName,
-            sequenceNodePath: nodePath,
-            effectIndex,
-            key: fieldKey,
-            value: JSON.stringify(value),
-            defaultValue,
-            schema,
-            clientId,
-        }),
+        setPropStatuses,
+        applyOptimistic: (prev) => input.type === 'effect-param'
+            ? prev
+            : (0, studio_shared_1.optimisticUpdateForEffectPropStatuses)({
+                previous: prev,
+                effectIndex,
+                fieldKey,
+                value: input.value,
+                schema,
+            }),
+        applyServerResponse: (prev, response) => (0, apply_effect_response_to_prop_statuses_1.applyEffectResponseToPropStatuses)({ previous: prev, response }),
+        apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', input.type === 'effect-param'
+            ? {
+                type: 'effect-param',
+                fileName,
+                sequenceNodePath: nodePath,
+                effectIndex,
+                key: fieldKey,
+                effectParam: input.effectParam,
+                defaultValue,
+                schema,
+                clientId,
+            }
+            : {
+                type: 'value',
+                fileName,
+                sequenceNodePath: nodePath,
+                effectIndex,
+                key: fieldKey,
+                value: JSON.stringify(input.value),
+                defaultValue,
+                schema,
+                clientId,
+            }),
         errorLabel: 'Could not save effect prop',
     });
 };