@remotion/studio 4.0.472 → 4.0.473

package/dist/components/Timeline/Timeline.js

@@ -78,9 +78,8 @@ const container = {
     backgroundColor: colors_1.BACKGROUND,
 };
 const noop = () => undefined;
-const TimelineClearSelectionArea = ({ children }) => {
+const TimelineContextMenuArea = ({ children }) => {
     var _a, _b;
-    const { clearSelection } = (0, TimelineSelection_1.useTimelineSelection)();
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
@@ -101,15 +100,6 @@ const TimelineClearSelectionArea = ({ children }) => {
         compositionFile,
         compositionId: currentCompositionId,
     });
-    // Selection-triggering click handlers in children call e.stopPropagation(),
-    // so any pointerdown that bubbles up here is by definition on empty space
-    // and should clear the current selection.
-    const onPointerDown = (0, react_1.useCallback)((e) => {
-        if (e.button !== 0) {
-            return;
-        }
-        clearSelection();
-    }, [clearSelection]);
     const canInsertSolid = previewConnected &&
         (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
         currentCompositionId !== null &&
@@ -203,7 +193,7 @@ const TimelineClearSelectionArea = ({ children }) => {
             },
         ];
     }, [insertSolid, canInsertSolid, insertAsset, canInsertAsset]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { ref: timeline_refs_1.timelineVerticalScroll, values: contextMenuItems, onOpen: null, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: onPointerDown, children: children }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { ref: timeline_refs_1.timelineVerticalScroll, values: contextMenuItems, onOpen: null, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: children }));
 };
 const TimelineInner = () => {
     var _a;
@@ -233,7 +223,7 @@ const TimelineInner = () => {
             : filtered;
     }, [filtered]);
     const hasBeenCut = filtered.length > shown.length;
-    return (jsx_runtime_1.jsxs(TimelineClearSelectionArea, { children: [sequences.map((sequence) => {
+    return (jsx_runtime_1.jsxs(TimelineContextMenuArea, { children: [sequences.map((sequence) => {
                 if (!sequence.controls || !previewConnected || !sequence.getStack()) {
                     return null;
                 }

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

@@ -1,5 +1,6 @@
-import { type EffectClipboardSnapshot } from '@remotion/studio-shared';
+import { type EffectClipboardSnapshot, type EffectPropClipboardData } from '@remotion/studio-shared';
 import type React from 'react';
+import { type CodeValues, type OverrideIdToNodePaths, type SequencePropsSubscriptionKey, type SequenceSchema, type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type TimelineSelection } from './TimelineSelection';
 export type PasteEffectsTarget = {
@@ -12,9 +13,31 @@ export type PasteEffectsTarget = {
 } | {
     readonly type: 'unsupported';
 };
+export type PasteEffectPropTarget = {
+    readonly type: 'valid';
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly effectIndex: number;
+    readonly fieldKey: string;
+    readonly defaultValue: string | null;
+    readonly schema: SequenceSchema;
+} | {
+    readonly type: 'none' | 'multiple' | 'unsupported' | 'effect-type-mismatch' | 'prop-mismatch' | 'uncopyable';
+};
 export declare const getPasteEffectsTarget: (selectedItems: readonly TimelineSelection[]) => PasteEffectsTarget;
 export declare const getSnapshotsFromSelection: ({ selection, codeValues, }: {
     selection: TimelineSelection;
-    codeValues: import("remotion").CodeValues;
+    codeValues: CodeValues;
 }) => EffectClipboardSnapshot[] | null;
+export declare const getEffectPropClipboardDataFromSelection: ({ selection, codeValues, }: {
+    selection: TimelineSelection;
+    codeValues: CodeValues;
+}) => EffectPropClipboardData | null;
+export declare const getPasteEffectPropTarget: ({ selectedItems, payload, codeValues, sequences, overrideIdsToNodePaths, }: {
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly payload: EffectPropClipboardData;
+    readonly codeValues: CodeValues;
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+}) => PasteEffectPropTarget;
 export declare const TimelineClipboardKeybindings: React.FC;

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineClipboardKeybindings = exports.getSnapshotsFromSelection = exports.getPasteEffectsTarget = void 0;
+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");
@@ -8,6 +8,8 @@ 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) => {
@@ -17,6 +19,10 @@ const makeTargetKey = (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' ||
@@ -61,35 +67,45 @@ 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 === 'computed') {
-            return null;
-        }
-        if (prop.status === 'static') {
-            if (prop.codeValue !== undefined) {
-                params[key] = {
-                    type: 'static',
-                    value: prop.codeValue,
-                };
-            }
+        if (prop.status === 'static' && prop.codeValue === undefined) {
             continue;
         }
-        if (!isClipboardInterpolationFunction(prop.interpolationFunction)) {
+        const param = effectPropStatusToClipboardParam(prop);
+        if (param === null) {
             return null;
         }
-        params[key] = {
-            type: 'keyframed',
-            interpolationFunction: prop.interpolationFunction,
-            keyframes: prop.keyframes,
-            easing: prop.easing,
-            clamping: prop.clamping,
-            ...(prop.posterize === undefined ? {} : { posterize: prop.posterize }),
-        };
+        params[key] = param;
     }
     return {
         callee: effect.callee,
@@ -127,12 +143,121 @@ const getSnapshotsFromSelection = ({ selection, codeValues, }) => {
     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;
@@ -142,10 +267,36 @@ const TimelineClipboardKeybindings = () => {
             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) {
@@ -201,6 +352,66 @@ const TimelineClipboardKeybindings = () => {
                 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;
@@ -258,7 +469,10 @@ const TimelineClipboardKeybindings = () => {
         codeValues,
         currentSelection,
         keybindings,
+        overrideIdToNodePathMappings,
         previewServerState,
+        sequences,
+        setCodeValues,
     ]);
     return null;
 };

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

@@ -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,

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -6,6 +6,7 @@ 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 modals_1 = require("../../state/modals");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const call_add_keyframe_1 = require("./call-add-keyframe");
@@ -118,6 +119,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
                 schema: field.effectSchema,
             }),
             apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', {
+                type: 'value',
                 fileName: validatedLocation.source,
                 sequenceNodePath: nodePath,
                 effectIndex: field.effectIndex,
@@ -213,6 +215,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     var _a;
     var _b, _c;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -267,6 +270,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             ? JSON.stringify(field.fieldSchema.default)
             : null;
         (0, save_effect_prop_1.saveEffectProp)({
+            type: 'value',
             fileName: validatedLocation.source,
             nodePath,
             effectIndex: field.effectIndex,
@@ -289,8 +293,33 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         setCodeValues,
         validatedLocation.source,
     ]);
+    const onOpenKeyframeSettings = (0, react_1.useCallback)(() => {
+        var _a;
+        if (propStatus === null || !isKeyframedStatus(propStatus)) {
+            return;
+        }
+        setSelectedModal({
+            type: 'keyframe-settings',
+            fileName: validatedLocation.source,
+            nodePath,
+            fieldKey: field.key,
+            fieldLabel: (_a = field.description) !== null && _a !== void 0 ? _a : field.key,
+            status: propStatus,
+            schema: field.effectSchema,
+            effectIndex: field.effectIndex,
+        });
+    }, [
+        field.description,
+        field.effectIndex,
+        field.effectSchema,
+        field.key,
+        nodePath,
+        propStatus,
+        setSelectedModal,
+        validatedLocation.source,
+    ]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
-        return [
+        const values = [
             {
                 type: 'item',
                 id: 'reset-effect-field',
@@ -304,7 +333,28 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
                 value: 'reset-effect-field',
             },
         ];
-    }, [canShowReset, onReset]);
+        if (propStatus !== null && isKeyframedStatus(propStatus)) {
+            values.push({
+                type: 'item',
+                id: 'keyframe-settings-effect-field',
+                keyHint: null,
+                label: 'Keyframe settings...',
+                leftItem: null,
+                disabled: previewServerState.type !== 'connected',
+                onClick: onOpenKeyframeSettings,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'keyframe-settings-effect-field',
+            });
+        }
+        return values;
+    }, [
+        canShowReset,
+        onOpenKeyframeSettings,
+        onReset,
+        previewServerState,
+        propStatus,
+    ]);
     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/TimelineKeyframeControls.js

@@ -11,6 +11,7 @@ const call_add_keyframe_1 = require("./call-add-keyframe");
 const call_delete_keyframe_1 = require("./call-delete-keyframe");
 const get_keyframe_navigation_1 = require("./get-keyframe-navigation");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
+const TimelineKeyframeDiamondIcon_1 = require("./TimelineKeyframeDiamondIcon");
 const TimelineSelection_1 = require("./TimelineSelection");
 const controlsContainerStyle = {
     alignItems: 'center',
@@ -41,14 +42,6 @@ const isKeyframedStatus = (status) => {
 const diamondButtonStyle = {
     ...navButtonStyle,
     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, }) => {
@@ -108,8 +101,8 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         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 previousDisplayFrame = (0, react_1.useMemo)(() => (0, get_keyframe_navigation_1.getPreviousKeyframeDisplayFrame)(keyframes, timelinePosition, videoConfig.durationInFrames), [keyframes, timelinePosition, videoConfig.durationInFrames]);
+    const nextDisplayFrame = (0, react_1.useMemo)(() => (0, get_keyframe_navigation_1.getNextKeyframeDisplayFrame)(keyframes, timelinePosition, videoConfig.durationInFrames), [keyframes, timelinePosition, videoConfig.durationInFrames]);
     const keyframable = (0, studio_shared_1.isSchemaFieldKeyframable)({
         schema,
         key: fieldKey,
@@ -225,12 +218,9 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         cursor: canToggleKeyframe && clientId ? 'pointer' : 'default',
         opacity: canToggleKeyframe && clientId ? 1 : 0.35,
     }), [canToggleKeyframe, clientId]);
-    const diamondIcon = (0, react_1.useMemo)(() => ({
-        ...diamondIconStyle,
-        backgroundColor: hasKeyframeAtCurrentFrame ? colors_1.BLUE : colors_1.LIGHT_TEXT,
-    }), [hasKeyframeAtCurrentFrame]);
+    const diamondColor = hasKeyframeAtCurrentFrame ? colors_1.BLUE : colors_1.LIGHT_TEXT;
     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: "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" }) }) })
+            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(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: diamondColor, size: 12 }) }), 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;