@remotion/studio 4.0.471 → 4.0.473

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -0,0 +1,479 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineClipboardKeybindings = exports.getPasteEffectPropTarget = exports.getEffectPropClipboardDataFromSelection = exports.getSnapshotsFromSelection = exports.getPasteEffectsTarget = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
+const call_api_1 = require("../call-api");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const save_effect_prop_1 = require("./save-effect-prop");
+const TimelineSelection_1 = require("./TimelineSelection");
+const makeClipboardText = (payload) => JSON.stringify(payload);
+const makeTargetKey = (nodePath) => {
+    return JSON.stringify({
+        absolutePath: nodePath.absolutePath,
+        nodePath: nodePath.nodePath,
+        sequenceKeys: nodePath.sequenceKeys,
+    });
+};
+const isVisibleFieldSchema = (fieldSchema) => fieldSchema !== undefined && fieldSchema.type !== 'hidden';
+const getDefaultValue = (fieldSchema) => fieldSchema.default !== undefined
+    ? JSON.stringify(fieldSchema.default)
+    : null;
+const getTargetSequenceNodePathInfo = (selection) => {
+    if (selection.type === 'sequence' ||
+        selection.type === 'sequence-effect' ||
+        selection.type === 'sequence-all-effects') {
+        return selection.nodePathInfo;
+    }
+    return null;
+};
+const getCopyType = (selection) => {
+    if (selection.type === 'sequence-effect') {
+        return 'effects-additive';
+    }
+    if (selection.type === 'sequence-all-effects') {
+        return 'effects-replacing';
+    }
+    return null;
+};
+const getPasteEffectsTarget = (selectedItems) => {
+    const targetNodePathInfos = selectedItems
+        .map(getTargetSequenceNodePathInfo)
+        .filter((targetNodePathInfo) => targetNodePathInfo !== null);
+    const uniqueTargetKeys = new Set(targetNodePathInfos.map((targetNodePathInfo) => makeTargetKey(targetNodePathInfo.sequenceSubscriptionKey)));
+    if (uniqueTargetKeys.size === 0) {
+        return { type: 'none' };
+    }
+    if (uniqueTargetKeys.size !== 1) {
+        return { type: 'multiple' };
+    }
+    const [nodePathInfo] = targetNodePathInfos;
+    if (!nodePathInfo) {
+        return { type: 'none' };
+    }
+    if (!nodePathInfo.supportsEffects) {
+        return { type: 'unsupported' };
+    }
+    return {
+        type: 'valid',
+        nodePathInfo,
+    };
+};
+exports.getPasteEffectsTarget = getPasteEffectsTarget;
+const isClipboardInterpolationFunction = (value) => {
+    return (0, studio_shared_1.isKeyframeInterpolationFunction)(value);
+};
+const effectPropStatusToClipboardParam = (prop) => {
+    if (prop.status === 'computed') {
+        return null;
+    }
+    if (prop.status === 'static') {
+        if (prop.codeValue === undefined) {
+            return null;
+        }
+        return {
+            type: 'static',
+            value: prop.codeValue,
+        };
+    }
+    if (!isClipboardInterpolationFunction(prop.interpolationFunction)) {
+        return null;
+    }
+    return {
+        type: 'keyframed',
+        interpolationFunction: prop.interpolationFunction,
+        keyframes: prop.keyframes,
+        easing: prop.easing,
+        clamping: prop.clamping,
+        ...(prop.posterize === undefined ? {} : { posterize: prop.posterize }),
+    };
+};
+const effectStatusToSnapshot = (effect) => {
+    if (effect.importPath === null) {
+        return null;
+    }
+    const params = {};
+    for (const [key, prop] of Object.entries(effect.props)) {
+        if (prop.status === 'static' && prop.codeValue === undefined) {
+            continue;
+        }
+        const param = effectPropStatusToClipboardParam(prop);
+        if (param === null) {
+            return null;
+        }
+        params[key] = param;
+    }
+    return {
+        callee: effect.callee,
+        importPath: effect.importPath,
+        params,
+    };
+};
+const getSnapshotsFromSelection = ({ selection, codeValues, }) => {
+    if (selection.type !== 'sequence-effect' &&
+        selection.type !== 'sequence-all-effects') {
+        return null;
+    }
+    const { sequenceSubscriptionKey } = selection.nodePathInfo;
+    const sequenceStatus = codeValues[remotion_1.Internals.makeSequencePropsSubscriptionKey(sequenceSubscriptionKey)];
+    if (!sequenceStatus || !sequenceStatus.canUpdate) {
+        return null;
+    }
+    const effects = selection.type === 'sequence-effect'
+        ? sequenceStatus.effects.filter((effect) => effect.effectIndex === selection.i)
+        : sequenceStatus.effects;
+    if (selection.type === 'sequence-effect' && effects.length !== 1) {
+        return null;
+    }
+    const snapshots = [];
+    for (const effect of effects) {
+        if (!effect.canUpdate) {
+            return null;
+        }
+        const snapshot = effectStatusToSnapshot(effect);
+        if (snapshot === null) {
+            return null;
+        }
+        snapshots.push(snapshot);
+    }
+    return snapshots;
+};
+exports.getSnapshotsFromSelection = getSnapshotsFromSelection;
+const getEffectPropClipboardDataFromSelection = ({ selection, codeValues, }) => {
+    if (selection.type !== 'sequence-effect-prop') {
+        return null;
+    }
+    const sequenceStatus = codeValues[remotion_1.Internals.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
+    if (!sequenceStatus || !sequenceStatus.canUpdate) {
+        return null;
+    }
+    const effect = sequenceStatus.effects.find((item) => item.effectIndex === selection.i);
+    if (!(effect === null || effect === void 0 ? void 0 : effect.canUpdate) || effect.importPath === null) {
+        return null;
+    }
+    const prop = effect.props[selection.key];
+    if (!prop) {
+        return null;
+    }
+    const param = effectPropStatusToClipboardParam(prop);
+    if (param === null) {
+        return null;
+    }
+    return {
+        type: 'effect-prop',
+        version: 1,
+        remotionClipboard: 'effect-prop',
+        effect: {
+            callee: effect.callee,
+            importPath: effect.importPath,
+        },
+        key: selection.key,
+        param,
+    };
+};
+exports.getEffectPropClipboardDataFromSelection = getEffectPropClipboardDataFromSelection;
+const getPasteEffectPropTarget = ({ selectedItems, payload, codeValues, sequences, overrideIdsToNodePaths, }) => {
+    var _a;
+    if (selectedItems.length === 0) {
+        return { type: 'none' };
+    }
+    if (selectedItems.length !== 1) {
+        return { type: 'multiple' };
+    }
+    const [selection] = selectedItems;
+    if (!selection) {
+        return { type: 'none' };
+    }
+    if (!selection.nodePathInfo.supportsEffects) {
+        return { type: 'unsupported' };
+    }
+    const target = selection.type === 'sequence-effect-prop'
+        ? {
+            effectIndex: selection.i,
+            fieldKey: selection.key,
+        }
+        : selection.type === 'sequence-effect'
+            ? {
+                effectIndex: selection.i,
+                fieldKey: payload.key,
+            }
+            : null;
+    if (target === null) {
+        return { type: 'none' };
+    }
+    if (selection.type === 'sequence-effect-prop' &&
+        selection.key !== payload.key) {
+        return { type: 'prop-mismatch' };
+    }
+    const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+        sequences,
+        overrideIdsToNodePaths,
+        nodePathInfo: selection.nodePathInfo,
+    });
+    const sequence = (_a = track === null || track === void 0 ? void 0 : track.sequence) !== null && _a !== void 0 ? _a : null;
+    if (!sequence) {
+        return { type: 'none' };
+    }
+    const effect = sequence.effects[target.effectIndex];
+    const fieldSchema = effect === null || effect === void 0 ? void 0 : effect.schema[target.fieldKey];
+    if (!effect || !isVisibleFieldSchema(fieldSchema)) {
+        return { type: 'prop-mismatch' };
+    }
+    const sequenceStatus = codeValues[remotion_1.Internals.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
+    if (!(sequenceStatus === null || sequenceStatus === void 0 ? void 0 : sequenceStatus.canUpdate)) {
+        return { type: 'uncopyable' };
+    }
+    const effectStatus = sequenceStatus.effects.find((item) => item.effectIndex === target.effectIndex);
+    if (!(effectStatus === null || effectStatus === void 0 ? void 0 : effectStatus.canUpdate)) {
+        return { type: 'uncopyable' };
+    }
+    if (effectStatus.importPath !== payload.effect.importPath) {
+        return { type: 'effect-type-mismatch' };
+    }
+    const propStatus = effectStatus.props[target.fieldKey];
+    if (!propStatus || propStatus.status === 'computed') {
+        return { type: 'uncopyable' };
+    }
+    return {
+        type: 'valid',
+        fileName: selection.nodePathInfo.sequenceSubscriptionKey.absolutePath,
+        nodePath: selection.nodePathInfo.sequenceSubscriptionKey,
+        effectIndex: target.effectIndex,
+        fieldKey: target.fieldKey,
+        defaultValue: getDefaultValue(fieldSchema),
+        schema: effect.schema,
+    };
+};
+exports.getPasteEffectPropTarget = getPasteEffectPropTarget;
+const TimelineClipboardKeybindings = () => {
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    (0, react_1.useEffect)(() => {
+        if (!canSelect || previewServerState.type !== 'connected') {
+            return;
+        }
+        const { clientId } = previewServerState;
+        const copy = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'c',
+            callback: (e) => {
+                var _a;
+                const { selectedItems } = currentSelection.current;
+                if (selectedItems.length === 0) {
+                    return;
+                }
+                if (selectedItems.some((selection) => selection.type === 'sequence-effect-prop')) {
+                    e.preventDefault();
+                    if (selectedItems.length !== 1 ||
+                        ((_a = selectedItems[0]) === null || _a === void 0 ? void 0 : _a.type) !== 'sequence-effect-prop') {
+                        (0, NotificationCenter_1.showNotification)('Select one effect prop to copy its value', 3000);
+                        return;
+                    }
+                    const payload = (0, exports.getEffectPropClipboardDataFromSelection)({
+                        selection: selectedItems[0],
+                        codeValues,
+                    });
+                    if (payload === null) {
+                        (0, NotificationCenter_1.showNotification)('Cannot copy effect prop because its value cannot be copied', 3000);
+                        return;
+                    }
+                    navigator.clipboard
+                        .writeText(makeClipboardText(payload))
+                        .then(() => {
+                        (0, NotificationCenter_1.showNotification)('Copied effect prop to clipboard', 1000);
+                    })
+                        .catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not copy effect prop: ${err.message}`, 2000);
+                    });
+                    return;
+                }
+                const firstSelection = selectedItems[0];
+                const type = firstSelection ? getCopyType(firstSelection) : null;
+                if (type === null) {
+                    return;
+                }
+                if (selectedItems.some((selection) => getCopyType(selection) !== type)) {
+                    e.preventDefault();
+                    (0, NotificationCenter_1.showNotification)('Cannot copy individual effects together with all effects', 3000);
+                    return;
+                }
+                const snapshots = selectedItems.flatMap((selection) => {
+                    const itemSnapshots = (0, exports.getSnapshotsFromSelection)({
+                        selection,
+                        codeValues,
+                    });
+                    return itemSnapshots !== null && itemSnapshots !== void 0 ? itemSnapshots : [null];
+                });
+                if (snapshots.some((snapshot) => snapshot === null)) {
+                    e.preventDefault();
+                    (0, NotificationCenter_1.showNotification)('Cannot copy effects because one of them contains values that cannot be copied', 3000);
+                    return;
+                }
+                e.preventDefault();
+                navigator.clipboard
+                    .writeText(makeClipboardText({
+                    type,
+                    version: 3,
+                    remotionClipboard: 'effects',
+                    effects: snapshots,
+                }))
+                    .then(() => {
+                    (0, NotificationCenter_1.showNotification)(snapshots.length === 1
+                        ? 'Copied effect to clipboard'
+                        : 'Copied effects to clipboard', 1000);
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not copy effects: ${err.message}`, 2000);
+                });
+            },
+            commandCtrlKey: true,
+            preventDefault: false,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const paste = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'v',
+            callback: (e) => {
+                const { selectedItems } = currentSelection.current;
+                if (selectedItems.length === 0) {
+                    return;
+                }
+                navigator.clipboard
+                    .readText()
+                    .then((text) => {
+                    const effectPropResult = (0, studio_shared_1.parseEffectPropClipboardDataResult)(text);
+                    if (effectPropResult.status !== 'invalid') {
+                        e.preventDefault();
+                        if (effectPropResult.status === 'unsupported-version') {
+                            (0, NotificationCenter_1.showNotification)('Cannot paste effect prop copied from a different Remotion Studio version', 4000);
+                            return;
+                        }
+                        const effectPropTarget = (0, exports.getPasteEffectPropTarget)({
+                            selectedItems,
+                            payload: effectPropResult.data,
+                            codeValues,
+                            sequences,
+                            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                        });
+                        if (effectPropTarget.type !== 'valid') {
+                            switch (effectPropTarget.type) {
+                                case 'multiple':
+                                    (0, NotificationCenter_1.showNotification)('Select one target effect prop or effect to paste onto', 3000);
+                                    return;
+                                case 'none':
+                                    (0, NotificationCenter_1.showNotification)('Select a matching effect prop or effect to paste onto', 3000);
+                                    return;
+                                case 'unsupported':
+                                    (0, NotificationCenter_1.showNotification)('This sequence does not support effects', 3000);
+                                    return;
+                                case 'effect-type-mismatch':
+                                    (0, NotificationCenter_1.showNotification)('Select an effect of the same type to paste this prop', 3000);
+                                    return;
+                                case 'prop-mismatch':
+                                    (0, NotificationCenter_1.showNotification)('Select the same effect prop, or an effect with that prop', 3000);
+                                    return;
+                                case 'uncopyable':
+                                    (0, NotificationCenter_1.showNotification)('Cannot paste onto an effect prop that cannot be updated', 3000);
+                                    return;
+                                default:
+                                    throw new Error(`Unexpected paste target: ${effectPropTarget}`);
+                            }
+                        }
+                        return (0, save_effect_prop_1.saveEffectProp)({
+                            fileName: effectPropTarget.fileName,
+                            nodePath: effectPropTarget.nodePath,
+                            effectIndex: effectPropTarget.effectIndex,
+                            fieldKey: effectPropTarget.fieldKey,
+                            ...(effectPropResult.data.param.type === 'static'
+                                ? {
+                                    type: 'value',
+                                    value: effectPropResult.data.param.value,
+                                }
+                                : {
+                                    type: 'effect-param',
+                                    effectParam: effectPropResult.data.param,
+                                }),
+                            defaultValue: effectPropTarget.defaultValue,
+                            schema: effectPropTarget.schema,
+                            setCodeValues,
+                            clientId,
+                        }).then(() => {
+                            (0, NotificationCenter_1.showNotification)('Pasted effect prop', 2000);
+                        });
+                    }
+                    const result = (0, studio_shared_1.parseEffectClipboardDataResult)(text);
+                    if (result.status === 'invalid') {
+                        return;
+                    }
+                    e.preventDefault();
+                    if (result.status === 'unsupported-version') {
+                        (0, NotificationCenter_1.showNotification)('Cannot paste effects copied from a different Remotion Studio version', 4000);
+                        return;
+                    }
+                    const { data: payload } = result;
+                    const target = (0, exports.getPasteEffectsTarget)(selectedItems);
+                    if (target.type === 'multiple') {
+                        (0, NotificationCenter_1.showNotification)('Select one target sequence to paste effects', 3000);
+                        return;
+                    }
+                    if (target.type === 'none') {
+                        (0, NotificationCenter_1.showNotification)('Select a sequence to paste effects onto', 3000);
+                        return;
+                    }
+                    if (target.type === 'unsupported') {
+                        (0, NotificationCenter_1.showNotification)('This sequence does not support effects', 3000);
+                        return;
+                    }
+                    const { sequenceSubscriptionKey: targetSequenceNodePath } = target.nodePathInfo;
+                    return (0, call_api_1.callApi)('/api/paste-effects', {
+                        targetFileName: targetSequenceNodePath.absolutePath,
+                        targetSequenceNodePath,
+                        type: payload.type,
+                        effects: payload.effects,
+                        clientId,
+                    }).then((pasteResult) => {
+                        if (pasteResult.success) {
+                            (0, NotificationCenter_1.showNotification)('Pasted effects', 2000);
+                        }
+                        else {
+                            (0, NotificationCenter_1.showNotification)(pasteResult.reason, 4000);
+                        }
+                    });
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not paste effects: ${err.message}`, 3000);
+                });
+            },
+            commandCtrlKey: true,
+            preventDefault: false,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => {
+            copy.unregister();
+            paste.unregister();
+        };
+    }, [
+        canSelect,
+        codeValues,
+        currentSelection,
+        keybindings,
+        overrideIdToNodePathMappings,
+        previewServerState,
+        sequences,
+        setCodeValues,
+    ]);
+    return null;
+};
+exports.TimelineClipboardKeybindings = TimelineClipboardKeybindings;

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { CanUpdateSequencePropStatusStatic } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineColorField: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly effectiveValue: unknown;
-    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
     readonly onSave: TimelineFieldOnSave;
     readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;

package/dist/components/Timeline/TimelineColorField.js

@@ -19,15 +19,9 @@ const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragV
             ? ((_a = field.fieldSchema.default) !== null && _a !== void 0 ? _a : '#000')
             : '';
     const onChange = (0, react_1.useCallback)((next) => {
-        if (!propStatus.canUpdate) {
-            return;
-        }
         onDragValueChange(next);
-    }, [onDragValueChange, propStatus.canUpdate]);
+    }, [onDragValueChange]);
     const onChangeComplete = (0, react_1.useCallback)((next) => {
-        if (!propStatus.canUpdate) {
-            return;
-        }
         if (next !== propStatus.codeValue) {
             onSave(next);
         }
@@ -38,6 +32,6 @@ const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragV
             marginLeft: 5,
         };
     }, []);
-    return (jsx_runtime_1.jsx("span", { style: containerStyle, children: jsx_runtime_1.jsx(ColorPicker_1.ColorPicker, { value: currentValue, status: "ok", onChange: onChange, onChangeComplete: onChangeComplete, width: SWATCH_WIDTH, height: SWATCH_HEIGHT, disabled: !propStatus.canUpdate, name: field.key, title: currentValue, style: swatchStyle }) }));
+    return (jsx_runtime_1.jsx("span", { style: containerStyle, children: jsx_runtime_1.jsx(ColorPicker_1.ColorPicker, { value: currentValue, status: "ok", onChange: onChange, onChangeComplete: onChangeComplete, width: SWATCH_WIDTH, height: SWATCH_HEIGHT, disabled: false, name: field.key, title: currentValue, style: swatchStyle }) }));
 };
 exports.TimelineColorField = TimelineColorField;

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const reset_selected_timeline_props_1 = require("./reset-selected-timeline-props");
@@ -18,6 +19,7 @@ const TimelineDeleteKeybindings = () => {
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     (0, react_1.useEffect)(() => {
         if (!canSelect || previewServerState.type !== 'connected') {
             return;
@@ -49,12 +51,18 @@ const TimelineDeleteKeybindings = () => {
                     overrideIdsToNodePaths: overrideIdToNodePathMappings,
                     setCodeValues,
                     clientId,
+                    confirm,
                 });
                 if (deletePromise === null) {
                     return;
                 }
-                clearSelection();
-                deletePromise.catch(() => undefined);
+                deletePromise
+                    .then((deleted) => {
+                    if (deleted) {
+                        clearSelection();
+                    }
+                })
+                    .catch(() => undefined);
             },
             commandCtrlKey: false,
             preventDefault: true,
@@ -71,6 +79,7 @@ const TimelineDeleteKeybindings = () => {
                 }
                 const duplicatePromise = (0, duplicate_selected_timeline_item_1.duplicateSelectedTimelineItems)({
                     selections: selectedItems,
+                    confirm,
                 });
                 if (duplicatePromise === null) {
                     return;
@@ -89,6 +98,7 @@ const TimelineDeleteKeybindings = () => {
     }, [
         canSelect,
         codeValues,
+        confirm,
         currentSelection,
         keybindings,
         overrideIdToNodePathMappings,

package/dist/components/Timeline/TimelineEffectItem.js

@@ -81,12 +81,12 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
         ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : null)
         : null;
     const isDisabled = (0, react_1.useMemo)(() => {
-        if (disabledStatus && disabledStatus.canUpdate) {
+        if ((disabledStatus === null || disabledStatus === void 0 ? void 0 : disabledStatus.status) === 'static') {
             return Boolean(disabledStatus.codeValue);
         }
         return false;
     }, [disabledStatus]);
-    const canToggle = previewConnected && disabledStatus !== null && disabledStatus.canUpdate;
+    const canToggle = previewConnected && (disabledStatus === null || disabledStatus === void 0 ? void 0 : disabledStatus.status) === 'static';
     const deleteDisabled = !previewConnected ||
         effectStatus.type !== 'can-update-effect' ||
         !validatedLocation.source;
@@ -178,6 +178,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             ? JSON.stringify(fieldSchema.default)
             : null;
         (0, save_effect_prop_1.saveEffectProp)({
+            type: 'value',
             fileName: validatedLocation.source,
             nodePath,
             effectIndex,