@remotion/studio 4.0.471 → 4.0.472

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -0,0 +1,265 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineClipboardKeybindings = 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 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 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 effectStatusToSnapshot = (effect) => {
+    if (effect.importPath === null) {
+        return null;
+    }
+    const params = {};
+    for (const [key, prop] of Object.entries(effect.props)) {
+        if (prop.status === 'computed') {
+            return null;
+        }
+        if (prop.status === 'static') {
+            if (prop.codeValue !== undefined) {
+                params[key] = {
+                    type: 'static',
+                    value: prop.codeValue,
+                };
+            }
+            continue;
+        }
+        if (!isClipboardInterpolationFunction(prop.interpolationFunction)) {
+            return null;
+        }
+        params[key] = {
+            type: 'keyframed',
+            interpolationFunction: prop.interpolationFunction,
+            keyframes: prop.keyframes,
+            easing: prop.easing,
+            clamping: prop.clamping,
+            ...(prop.posterize === undefined ? {} : { posterize: prop.posterize }),
+        };
+    }
+    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 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);
+    (0, react_1.useEffect)(() => {
+        if (!canSelect || previewServerState.type !== 'connected') {
+            return;
+        }
+        const { clientId } = previewServerState;
+        const copy = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'c',
+            callback: (e) => {
+                const { selectedItems } = currentSelection.current;
+                if (selectedItems.length === 0) {
+                    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 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,
+        previewServerState,
+    ]);
+    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/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;

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -8,6 +8,7 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
+const call_add_keyframe_1 = require("./call-add-keyframe");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const save_effect_prop_1 = require("./save-effect-prop");
 const save_prop_queue_1 = require("./save-prop-queue");
@@ -21,6 +22,23 @@ const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
 const fieldRowBase = {};
+const isKeyframedStatus = (status) => {
+    return status.status === 'keyframed';
+};
+const isResettableStatus = ({ status, defaultValue, }) => {
+    var _a;
+    if (defaultValue === undefined) {
+        return false;
+    }
+    if (status.status === 'keyframed') {
+        return true;
+    }
+    if (status.status === 'computed') {
+        return false;
+    }
+    const effectiveCodeValue = (_a = status.codeValue) !== null && _a !== void 0 ? _a : defaultValue;
+    return JSON.stringify(effectiveCodeValue) !== JSON.stringify(defaultValue);
+};
 const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) => {
     var _a;
     var _b;
@@ -39,9 +57,25 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
     const propStatus = effectStatus.type === 'can-update-effect'
         ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a[field.key]) !== null && _b !== void 0 ? _b : null)
         : null;
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const jsxFrame = timelinePosition - keyframeDisplayOffset;
     const onDragValueChange = (0, react_1.useCallback)((value) => {
-        setEffectDragOverrides(nodePath, field.effectIndex, field.key, value);
-    }, [setEffectDragOverrides, nodePath, field.effectIndex, field.key]);
+        const nextDragOverrideValue = propStatus !== null && isKeyframedStatus(propStatus)
+            ? remotion_1.Internals.makeKeyframedDragOverride({
+                status: propStatus,
+                frame: jsxFrame,
+                value,
+            })
+            : remotion_1.Internals.makeStaticDragOverride(value);
+        setEffectDragOverrides(nodePath, field.effectIndex, field.key, nextDragOverrideValue);
+    }, [
+        field.effectIndex,
+        field.key,
+        jsxFrame,
+        nodePath,
+        propStatus,
+        setEffectDragOverrides,
+    ]);
     const onDragEnd = (0, react_1.useCallback)(() => {
         clearEffectDragOverrides(nodePath, field.effectIndex);
     }, [clearEffectDragOverrides, nodePath, field.effectIndex]);
@@ -56,7 +90,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         if (!propStatus) {
             return Promise.reject(new Error('Cannot save'));
         }
-        if (!propStatus.canUpdate) {
+        if (propStatus.status !== 'static') {
             return Promise.reject(new Error('Cannot save'));
         }
         if (!clientId) {
@@ -106,6 +140,36 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         setCodeValues,
         validatedLocation,
     ]);
+    const onSaveKeyframed = (0, react_1.useCallback)((value, sourceFrame) => {
+        if (!validatedLocation) {
+            return Promise.reject(new Error('Cannot save'));
+        }
+        if (!clientId) {
+            return Promise.reject(new Error('Not connected to studio server'));
+        }
+        return (0, call_add_keyframe_1.callAddEffectKeyframe)({
+            fileName: validatedLocation.source,
+            nodePath,
+            effectIndex: field.effectIndex,
+            fieldKey: field.key,
+            sourceFrame,
+            value,
+            schema: field.effectSchema,
+            setCodeValues,
+            clientId,
+        });
+    }, [
+        clientId,
+        field.effectIndex,
+        field.effectSchema,
+        field.key,
+        nodePath,
+        setCodeValues,
+        validatedLocation,
+    ]);
+    if (field.fieldSchema.type === 'scale') {
+        throw new Error(`Effects do not support scale fields: ${field.key}`);
+    }
     if (effectStatus.type === 'cannot-update-effect') {
         if (effectStatus.reason === 'computed') {
             return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "computed" });
@@ -127,22 +191,23 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         }
         throw new Error(`Unsupported effect status: ${effectStatus.reason}`);
     }
-    if (propStatus === null || !propStatus.canUpdate) {
-        if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.reason) === 'keyframed') {
-            return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, keyframeDisplayOffset: keyframeDisplayOffset }));
-        }
-        if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.reason) === 'computed') {
-            return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) });
-        }
+    if (propStatus === null) {
         return null;
     }
+    if (isKeyframedStatus(propStatus)) {
+        return (jsx_runtime_1.jsx(TimelineKeyframedValue_1.TimelineKeyframedValue, { field: field, propStatus: propStatus, keyframeDisplayOffset: keyframeDisplayOffset, dragOverrideValue: dragOverrideValue, onSave: onSaveKeyframed, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, scaleLockNodePath: nodePath }));
+    }
+    if (propStatus.status === 'computed') {
+        return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) });
+    }
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
         codeValue: propStatus,
         dragOverrideValue,
         defaultValue: field.fieldSchema.default,
+        frame: jsxFrame,
         shouldResortToDefaultValueIfUndefined: true,
     });
-    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }));
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: null }));
 };
 const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, }) => {
     var _a;
@@ -174,23 +239,28 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         (0, TimelineKeyframeControls_1.shouldShowTimelineKeyframeControls)({
             propStatus,
             selected: selection.selected,
+            keyframable: (0, studio_shared_1.isSchemaFieldKeyframable)({
+                schema: field.effectSchema,
+                key: field.key,
+            }),
         }) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: field.effectSchema, effectIndex: field.effectIndex })) : null;
-    const isNonDefault = (0, react_1.useMemo)(() => {
-        var _a;
-        if (!propStatus || !propStatus.canUpdate) {
+    const canResetToDefault = (0, react_1.useMemo)(() => {
+        if (!propStatus || propStatus.status === 'computed') {
             return false;
         }
-        const effectiveCodeValue = (_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : field.fieldSchema.default;
-        return (JSON.stringify(effectiveCodeValue) !==
-            JSON.stringify(field.fieldSchema.default));
+        return isResettableStatus({
+            status: propStatus,
+            defaultValue: field.fieldSchema.default,
+        });
     }, [field.fieldSchema.default, propStatus]);
     const canPerformReset = previewServerState.type === 'connected' &&
         propStatus !== null &&
-        propStatus.canUpdate;
+        propStatus.status !== 'computed';
+    const canShowReset = canPerformReset && field.fieldSchema.default !== undefined;
     const onReset = (0, react_1.useCallback)(() => {
-        if (!canPerformReset ||
-            previewServerState.type !== 'connected' ||
-            !isNonDefault) {
+        if (!canShowReset ||
+            !canResetToDefault ||
+            previewServerState.type !== 'connected') {
             return;
         }
         const defaultValue = field.fieldSchema.default !== undefined
@@ -208,12 +278,12 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             clientId: previewServerState.clientId,
         });
     }, [
-        canPerformReset,
+        canResetToDefault,
+        canShowReset,
         field.effectIndex,
         field.effectSchema,
         field.fieldSchema.default,
         field.key,
-        isNonDefault,
         nodePath,
         previewServerState,
         setCodeValues,
@@ -227,14 +297,14 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
                 keyHint: null,
                 label: 'Reset',
                 leftItem: null,
-                disabled: !canPerformReset,
+                disabled: !canShowReset,
                 onClick: onReset,
                 quickSwitcherLabel: null,
                 subMenu: null,
                 value: 'reset-effect-field',
             },
         ];
-    }, [canPerformReset, onReset]);
+    }, [canShowReset, onReset]);
     const row = (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
             jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }), jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: keyframeDisplayOffset }) })
         ] }));

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

@@ -1,9 +1,9 @@
 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 TimelineEnumField: React.FC<{
     readonly field: SchemaFieldInfo;
-    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
     readonly effectiveValue: unknown;
     readonly onSave: TimelineFieldOnSave;
     readonly onDragValueChange: TimelineFieldOnDragValueChange;

package/dist/components/Timeline/TimelineEnumField.js

@@ -15,7 +15,7 @@ const TimelineEnumField = ({ field, propStatus, effectiveValue, onSave, onDragVa
     const variantKeys = Object.keys(fieldSchema.variants);
     const current = String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : fieldSchema.default);
     const onSelect = (0, react_1.useCallback)((newValue) => {
-        if (!propStatus.canUpdate || newValue === propStatus.codeValue) {
+        if (newValue === propStatus.codeValue) {
             return;
         }
         onDragValueChange(newValue);
@@ -34,9 +34,9 @@ const TimelineEnumField = ({ field, propStatus, effectiveValue, onSave, onDragVa
             leftItem: null,
             subMenu: null,
             quickSwitcherLabel: null,
-            disabled: !propStatus.canUpdate,
+            disabled: false,
         }));
-    }, [variantKeys, onSelect, propStatus]);
+    }, [variantKeys, onSelect]);
     return (jsx_runtime_1.jsx(ComboBox_1.Combobox, { small: true, title: field.key, selectedId: current, values: items, style: comboboxStyle }));
 };
 exports.TimelineEnumField = TimelineEnumField;

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatus, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
-export declare const shouldShowTimelineKeyframeControls: ({ propStatus, selected, }: {
+import type { CanUpdateSequencePropStatus, DragOverrideValue, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+export declare const shouldShowTimelineKeyframeControls: ({ propStatus, selected, keyframable, }: {
     propStatus: CanUpdateSequencePropStatus | null;
     selected: boolean;
+    keyframable: boolean;
 }) => boolean;
 export declare const TimelineKeyframeControls: React.FC<{
     readonly fieldKey: string;
@@ -11,7 +12,7 @@ export declare const TimelineKeyframeControls: React.FC<{
     readonly fileName: string;
     readonly keyframeDisplayOffset: number;
     readonly defaultValue: unknown;
-    readonly dragOverrideValue: unknown | undefined;
+    readonly dragOverrideValue: DragOverrideValue | undefined;
     readonly schema: SequenceSchema;
     readonly effectIndex: number | null;
 }>;