@remotion/studio 4.0.470 → 4.0.472

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;
 }>;

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineKeyframeControls = exports.shouldShowTimelineKeyframeControls = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+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");
@@ -15,7 +16,7 @@ const controlsContainerStyle = {
     alignItems: 'center',
     display: 'flex',
     flexShrink: 0,
-    gap: 2,
+    gap: 1,
     marginRight: 4,
 };
 const navButtonStyle = {
@@ -26,48 +27,62 @@ const navButtonStyle = {
     cursor: 'pointer',
     display: 'flex',
     flexShrink: 0,
-    fontSize: 8,
-    height: 12,
+    height: 14,
     justifyContent: 'center',
     lineHeight: 1,
     outline: 'none',
     padding: 0,
     userSelect: 'none',
-    width: 10,
+    width: 14,
+};
+const isKeyframedStatus = (status) => {
+    return status.status === 'keyframed';
 };
 const diamondButtonStyle = {
     ...navButtonStyle,
-    height: 10,
-    width: 10,
+    background: 'none',
+    translate: '0 -0.5px',
+};
+const diamondIconStyle = {
+    borderRadius: 1,
+    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
+    height: 7,
+    transform: 'rotate(45deg)',
+    width: 7,
 };
 const svgStyle = { display: 'block' };
 const getCurrentKeyframeValue = ({ propStatus, jsxFrame, defaultValue, dragOverrideValue, }) => {
-    if (propStatus.canUpdate) {
+    if (isKeyframedStatus(propStatus)) {
         return remotion_1.Internals.getEffectiveVisualModeValue({
             codeValue: propStatus,
             dragOverrideValue,
+            frame: jsxFrame,
             defaultValue,
             shouldResortToDefaultValueIfUndefined: true,
         });
     }
-    if (propStatus.reason === 'keyframed') {
-        return remotion_1.Internals.interpolateKeyframedStatus({
+    if (propStatus.status === 'static') {
+        return remotion_1.Internals.getEffectiveVisualModeValue({
+            codeValue: propStatus,
+            dragOverrideValue,
             frame: jsxFrame,
-            status: propStatus,
+            defaultValue,
+            shouldResortToDefaultValueIfUndefined: true,
         });
     }
     return null;
 };
-const shouldShowTimelineKeyframeControls = ({ propStatus, selected, }) => {
+const shouldShowTimelineKeyframeControls = ({ propStatus, selected, keyframable, }) => {
     if (propStatus === null) {
         return false;
     }
+    if (!keyframable && !isKeyframedStatus(propStatus)) {
+        return false;
+    }
     if (selected) {
         return true;
     }
-    return (TimelineSelection_1.SELECTION_ENABLED &&
-        !propStatus.canUpdate &&
-        propStatus.reason === 'keyframed');
+    return TimelineSelection_1.SELECTION_ENABLED && isKeyframedStatus(propStatus);
 };
 exports.shouldShowTimelineKeyframeControls = shouldShowTimelineKeyframeControls;
 const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, }) => {
@@ -82,14 +97,26 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const jsxFrame = timelinePosition - keyframeDisplayOffset;
     const keyframes = (0, react_1.useMemo)(() => (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset), [propStatus, keyframeDisplayOffset]);
     const hasKeyframeAtCurrentFrame = (0, react_1.useMemo)(() => {
-        if (propStatus.canUpdate || propStatus.reason === 'computed') {
+        if (!isKeyframedStatus(propStatus)) {
             return false;
         }
         return (0, get_keyframe_navigation_1.hasKeyframeAtSourceFrame)(propStatus.keyframes, jsxFrame);
     }, [jsxFrame, propStatus]);
+    const currentKeyframeValue = (0, react_1.useMemo)(() => getCurrentKeyframeValue({
+        propStatus,
+        jsxFrame,
+        defaultValue,
+        dragOverrideValue,
+    }), [defaultValue, dragOverrideValue, jsxFrame, propStatus]);
     const previousDisplayFrame = (0, react_1.useMemo)(() => (0, get_keyframe_navigation_1.getPreviousKeyframeDisplayFrame)(keyframes, timelinePosition), [keyframes, timelinePosition]);
     const nextDisplayFrame = (0, react_1.useMemo)(() => (0, get_keyframe_navigation_1.getNextKeyframeDisplayFrame)(keyframes, timelinePosition), [keyframes, timelinePosition]);
-    const canToggleKeyframe = propStatus.canUpdate || propStatus.reason === 'keyframed';
+    const keyframable = (0, studio_shared_1.isSchemaFieldKeyframable)({
+        schema,
+        key: fieldKey,
+    });
+    const canAddKeyframe = keyframable;
+    const canToggleKeyframe = propStatus.status !== 'computed' &&
+        (hasKeyframeAtCurrentFrame || canAddKeyframe);
     const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
         setFrame((current) => {
             const next = { ...current, [videoConfig.id]: frame };
@@ -114,9 +141,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         if (!clientId || !canToggleKeyframe) {
             return;
         }
-        if (hasKeyframeAtCurrentFrame &&
-            !propStatus.canUpdate &&
-            propStatus.reason === 'keyframed') {
+        if (hasKeyframeAtCurrentFrame && isKeyframedStatus(propStatus)) {
             if (effectIndex === null) {
                 await (0, call_delete_keyframe_1.callDeleteSequenceKeyframe)({
                     fileName,
@@ -141,12 +166,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
             });
             return;
         }
-        const value = getCurrentKeyframeValue({
-            propStatus,
-            jsxFrame,
-            defaultValue,
-            dragOverrideValue,
-        });
+        const value = currentKeyframeValue;
         if (value === null) {
             return;
         }
@@ -177,12 +197,11 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     }, [
         canToggleKeyframe,
         clientId,
-        defaultValue,
-        dragOverrideValue,
         effectIndex,
         fieldKey,
         fileName,
         hasKeyframeAtCurrentFrame,
+        currentKeyframeValue,
         jsxFrame,
         nodePath,
         propStatus,
@@ -203,15 +222,15 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     }), [nextDisabled]);
     const diamondStyle = (0, react_1.useMemo)(() => ({
         ...diamondButtonStyle,
-        backgroundColor: hasKeyframeAtCurrentFrame ? colors_1.BLUE : colors_1.LIGHT_TEXT,
-        borderRadius: 1,
-        boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
         cursor: canToggleKeyframe && clientId ? 'pointer' : 'default',
         opacity: canToggleKeyframe && clientId ? 1 : 0.35,
-        transform: 'rotate(45deg)',
-    }), [canToggleKeyframe, clientId, hasKeyframeAtCurrentFrame]);
+    }), [canToggleKeyframe, clientId]);
+    const diamondIcon = (0, react_1.useMemo)(() => ({
+        ...diamondIconStyle,
+        backgroundColor: hasKeyframeAtCurrentFrame ? colors_1.BLUE : colors_1.LIGHT_TEXT,
+    }), [hasKeyframeAtCurrentFrame]);
     return (jsx_runtime_1.jsxs("div", { style: controlsContainerStyle, children: [
-            jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", title: "Previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M5 1L2 4L5 7Z", fill: "#ccc" }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', title: hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe' }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", title: "Next keyframe", children: jsx_runtime_1.jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1L6 4L3 7Z", fill: "#ccc" }) }) })
+            jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", title: "Previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M7 1.5L3 5L7 8.5Z", fill: "#ccc" }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', title: hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', children: jsx_runtime_1.jsx("span", { style: diamondIcon }) }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", title: "Next keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1.5L7 5L3 8.5Z", fill: "#ccc" }) }) })
         ] }));
 };
 exports.TimelineKeyframeControls = TimelineKeyframeControls;

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

@@ -1,8 +1,13 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatusKeyframed } from 'remotion';
-import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import type { CanUpdateSequencePropStatusKeyframed, DragOverrideValue, SequencePropsSubscriptionKey } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange } from '../../helpers/timeline-layout';
 export declare const TimelineKeyframedValue: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly propStatus: CanUpdateSequencePropStatusKeyframed;
     readonly keyframeDisplayOffset: number;
+    readonly dragOverrideValue: DragOverrideValue | undefined;
+    readonly onSave: (value: unknown, sourceFrame: number) => Promise<void>;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+    readonly scaleLockNodePath: SequencePropsSubscriptionKey;
 }>;

package/dist/components/Timeline/TimelineKeyframedValue.js

@@ -5,13 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
-const wrapperStyle = {
-    opacity: 0.5,
-    pointerEvents: 'none',
+const valuesEqual = (left, right) => {
+    return JSON.stringify(left) === JSON.stringify(right);
 };
-const noop = () => undefined;
-const noopAsync = () => Promise.resolve();
-const TimelineKeyframedValue = ({ field, propStatus, keyframeDisplayOffset }) => {
+const TimelineKeyframedValue = ({ field, propStatus, keyframeDisplayOffset, dragOverrideValue, onSave, onDragValueChange, onDragEnd, scaleLockNodePath, }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const jsxFrame = timelinePosition - keyframeDisplayOffset;
     const computedValue = (0, react_1.useMemo)(() => {
@@ -25,12 +22,29 @@ const TimelineKeyframedValue = ({ field, propStatus, keyframeDisplayOffset }) =>
         return raw;
     }, [jsxFrame, propStatus]);
     const fakeStatus = (0, react_1.useMemo)(() => ({
-        canUpdate: true,
+        status: 'static',
         codeValue: computedValue,
     }), [computedValue]);
+    const effectiveValue = (0, react_1.useMemo)(() => {
+        return remotion_1.Internals.getEffectiveVisualModeValue({
+            codeValue: fakeStatus,
+            dragOverrideValue,
+            frame: jsxFrame,
+            defaultValue: field.fieldSchema.default,
+            shouldResortToDefaultValueIfUndefined: true,
+        });
+    }, [dragOverrideValue, fakeStatus, field.fieldSchema.default, jsxFrame]);
+    const onSaveIfChanged = (0, react_1.useCallback)((value) => {
+        const existingKeyframe = propStatus.keyframes.find((keyframe) => keyframe.frame === jsxFrame);
+        if (valuesEqual(value, computedValue) ||
+            (existingKeyframe && valuesEqual(value, existingKeyframe.value))) {
+            return Promise.resolve();
+        }
+        return onSave(value, jsxFrame);
+    }, [computedValue, jsxFrame, onSave, propStatus.keyframes]);
     if (computedValue === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: fakeStatus, effectiveValue: computedValue, onSave: noopAsync, onDragValueChange: noop, onDragEnd: noop }) }));
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: fakeStatus, effectiveValue: effectiveValue, onSave: onSaveIfChanged, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, scaleLockNodePath: scaleLockNodePath }));
 };
 exports.TimelineKeyframedValue = TimelineKeyframedValue;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const timelineLayerIconContainer: React.CSSProperties;
 export declare const TimelineLayerEye: React.FC<{
     readonly onInvoked: (type: 'enable' | 'disable') => void;
     readonly hidden: boolean;

package/dist/components/Timeline/TimelineLayerEye.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineLayerEyeSpacer = exports.TimelineLayerEye = void 0;
+exports.TimelineLayerEyeSpacer = exports.TimelineLayerEye = exports.timelineLayerIconContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
@@ -18,7 +18,7 @@ const speakerIcon = {
     height: 10,
     marginLeft: -1,
 };
-const container = {
+exports.timelineLayerIconContainer = {
     height: 16,
     width: 16,
     borderRadius: 2,
@@ -47,6 +47,7 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
         if (e.button !== 0) {
             return;
         }
+        e.preventDefault();
         e.stopPropagation();
         layerPointedDown = hidden ? 'enable' : 'disable';
         onInvoked(layerPointedDown);
@@ -54,12 +55,16 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
             layerPointedDown = null;
         }, { once: true });
     }, [hidden, onInvoked]);
+    const onDragStart = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         if (layerPointedDown) {
             onInvoked(layerPointedDown);
         }
     }, [onInvoked]);
-    return (jsx_runtime_1.jsx("div", { style: container, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
+    return (jsx_runtime_1.jsx("div", { style: exports.timelineLayerIconContainer, draggable: false, onDragStart: onDragStart, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
 };
 exports.TimelineLayerEye = TimelineLayerEye;
 const spacerStyle = {

package/dist/components/Timeline/TimelineNumberField.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 TimelineNumberField: 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/TimelineNumberField.js

@@ -13,7 +13,7 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
         onDragValueChange(newVal);
     }, [onDragValueChange]);
     const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
-        if (propStatus.canUpdate && newVal !== propStatus.codeValue) {
+        if (newVal !== propStatus.codeValue) {
             onSave(newVal).finally(() => {
                 setDragValue(null);
                 onDragEnd();
@@ -25,16 +25,12 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
         }
     }, [onSave, propStatus, onDragEnd]);
     const onTextChange = (0, react_1.useCallback)((newVal) => {
-        if (propStatus.canUpdate) {
-            const parsed = Number(newVal);
-            if (!Number.isNaN(parsed) &&
-                propStatus.canUpdate &&
-                parsed !== propStatus.codeValue) {
-                setDragValue(parsed);
-                onSave(parsed).finally(() => {
-                    setDragValue(null);
-                });
-            }
+        const parsed = Number(newVal);
+        if (!Number.isNaN(parsed) && parsed !== propStatus.codeValue) {
+            setDragValue(parsed);
+            onSave(parsed).finally(() => {
+                setDragValue(null);
+            });
         }
     }, [onSave, propStatus]);
     const step = field.fieldSchema.type === 'number' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ArrayFieldSchema, CanUpdateSequencePropStatusStatic, SequencePropsSubscriptionKey, VisibleFieldSchema } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export type TimelinePrimitiveFieldInfo = Omit<SchemaFieldInfo, 'fieldSchema' | 'typeName'> & {
+    readonly fieldSchema: Exclude<VisibleFieldSchema, ArrayFieldSchema>;
+    readonly typeName: Exclude<VisibleFieldSchema['type'], 'array'>;
+};
+export declare const isTimelinePrimitiveFieldInfo: (field: SchemaFieldInfo) => field is TimelinePrimitiveFieldInfo;
+export declare const TimelinePrimitiveFieldValue: React.FC<{
+    readonly field: TimelinePrimitiveFieldInfo;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
+    readonly effectiveValue: unknown;
+    readonly scaleLockNodePath: SequencePropsSubscriptionKey | null;
+}>;