@remotion/studio 4.0.474 → 4.0.476

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -1,17 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineKeyframeControls = exports.shouldShowTimelineKeyframeControls = void 0;
+exports.TimelineKeyframeControls = exports.shouldShowTimelineKeyframeControls = exports.getSelectedKeyframeControlNodePathInfos = 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");
 const colors_1 = require("../../helpers/colors");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 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 TimelineKeyframeTracksContext_1 = require("./TimelineKeyframeTracksContext");
 const TimelineSelection_1 = require("./TimelineSelection");
 const controlsContainerStyle = {
     alignItems: 'center',
@@ -44,7 +47,181 @@ const diamondButtonStyle = {
     background: 'none',
 };
 const svgStyle = { display: 'block' };
-const getCurrentKeyframeValue = ({ propStatus, jsxFrame, defaultValue, dragOverrideValue, }) => {
+const isKeyframeControlSelection = (selection) => {
+    return (selection.type === 'sequence-prop' ||
+        selection.type === 'sequence-effect-prop');
+};
+const getSelectedKeyframeControlNodePathInfos = ({ clickedNodePathInfo, selectedItems, }) => {
+    const clickedSelection = (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(clickedNodePathInfo);
+    if (clickedSelection === null ||
+        !isKeyframeControlSelection(clickedSelection)) {
+        return [clickedNodePathInfo];
+    }
+    const clickedSelectionKey = (0, TimelineSelection_1.getTimelineSelectionKey)(clickedSelection);
+    const selectedKeyframeControls = selectedItems.filter(isKeyframeControlSelection);
+    const clickedIsSelected = selectedKeyframeControls.some((selection) => (0, TimelineSelection_1.getTimelineSelectionKey)(selection) === clickedSelectionKey);
+    if (!clickedIsSelected || selectedKeyframeControls.length <= 1) {
+        return [clickedNodePathInfo];
+    }
+    return selectedKeyframeControls.map((selection) => selection.nodePathInfo);
+};
+exports.getSelectedKeyframeControlNodePathInfos = getSelectedKeyframeControlNodePathInfos;
+const findFieldNode = (nodes, nodePathInfoKey) => {
+    for (const node of nodes) {
+        if ((0, timeline_node_path_key_1.timelineNodePathInfoToKey)(node.nodePathInfo) === nodePathInfoKey) {
+            return node.kind === 'field' ? node : null;
+        }
+        if (node.kind === 'group') {
+            const child = findFieldNode(node.children, nodePathInfoKey);
+            if (child !== null) {
+                return child;
+            }
+        }
+    }
+    return null;
+};
+const findTrackForNodePathInfo = ({ tracks, nodePathInfo, }) => {
+    var _a;
+    return ((_a = tracks.find((track) => {
+        if (track.nodePathInfo === null) {
+            return false;
+        }
+        return ((0, timeline_node_path_key_1.timelineNodePathInfoToKey)({
+            ...track.nodePathInfo,
+            auxiliaryKeys: [],
+        }) ===
+            (0, timeline_node_path_key_1.timelineNodePathInfoToKey)({
+                ...nodePathInfo,
+                auxiliaryKeys: [],
+            }));
+    })) !== null && _a !== void 0 ? _a : null);
+};
+const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getDragOverrides, getEffectDragOverrides, timelinePosition, }) => {
+    var _a;
+    var _b, _c, _d;
+    const track = findTrackForNodePathInfo({ tracks, nodePathInfo });
+    if (track === null ||
+        track.nodePathInfo === null ||
+        !track.sequence.controls) {
+        return null;
+    }
+    const tree = (0, timeline_layout_1.buildTimelineTree)({
+        sequence: track.sequence,
+        nodePathInfo: track.nodePathInfo,
+        getDragOverrides,
+        getEffectDragOverrides,
+        propStatuses,
+    });
+    const fieldNode = findFieldNode(tree, (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo));
+    if (fieldNode === null || fieldNode.field === null) {
+        return null;
+    }
+    const nodePath = nodePathInfo.sequenceSubscriptionKey;
+    if (fieldNode.field.kind === 'sequence-field') {
+        const sequencePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
+        const sequenceSelectedPropStatus = (_b = sequencePropStatuses === null || sequencePropStatuses === void 0 ? void 0 : sequencePropStatuses[fieldNode.field.key]) !== null && _b !== void 0 ? _b : null;
+        if (sequenceSelectedPropStatus === null) {
+            return null;
+        }
+        return {
+            nodePathInfo,
+            fieldKey: fieldNode.field.key,
+            propStatus: sequenceSelectedPropStatus,
+            nodePath,
+            fileName: nodePath.absolutePath,
+            keyframeDisplayOffset: track.keyframeDisplayOffset,
+            sourceFrame: timelinePosition - track.keyframeDisplayOffset,
+            defaultValue: fieldNode.field.fieldSchema.default,
+            dragOverrideValue: ((_c = getDragOverrides(nodePath)) !== null && _c !== void 0 ? _c : {})[fieldNode.field.key],
+            schema: track.sequence.controls.schema,
+            effectIndex: null,
+        };
+    }
+    const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
+        nodePath,
+        effectIndex: fieldNode.field.effectIndex,
+    });
+    const effectSelectedPropStatus = effectStatus.type === 'can-update-effect'
+        ? ((_d = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a[fieldNode.field.key]) !== null && _d !== void 0 ? _d : null)
+        : null;
+    if (effectSelectedPropStatus === null) {
+        return null;
+    }
+    return {
+        nodePathInfo,
+        fieldKey: fieldNode.field.key,
+        propStatus: effectSelectedPropStatus,
+        nodePath,
+        fileName: nodePath.absolutePath,
+        keyframeDisplayOffset: track.keyframeDisplayOffset,
+        sourceFrame: timelinePosition - track.keyframeDisplayOffset,
+        defaultValue: fieldNode.field.fieldSchema.default,
+        dragOverrideValue: getEffectDragOverrides(nodePath, fieldNode.field.effectIndex)[fieldNode.field.key],
+        schema: fieldNode.field.effectSchema,
+        effectIndex: fieldNode.field.effectIndex,
+    };
+};
+const hasTargetKeyframeAtCurrentFrame = (target) => {
+    if (!isKeyframedStatus(target.propStatus)) {
+        return false;
+    }
+    return (0, get_keyframe_navigation_1.hasKeyframeAtSourceFrame)(target.propStatus.keyframes, target.sourceFrame);
+};
+const getAddChange = (target) => {
+    if (target.propStatus.status === 'computed' ||
+        !(0, studio_shared_1.isSchemaFieldKeyframable)({ schema: target.schema, key: target.fieldKey }) ||
+        hasTargetKeyframeAtCurrentFrame(target)) {
+        return null;
+    }
+    const value = getCurrentKeyframeValue({
+        propStatus: target.propStatus,
+        jsxFrame: target.sourceFrame,
+        defaultValue: target.defaultValue,
+        dragOverrideValue: target.dragOverrideValue,
+    });
+    if (value === null) {
+        return null;
+    }
+    const change = {
+        fileName: target.fileName,
+        nodePath: target.nodePath,
+        fieldKey: target.fieldKey,
+        sourceFrame: target.sourceFrame,
+        value,
+        schema: target.schema,
+    };
+    if (target.effectIndex === null) {
+        return change;
+    }
+    return {
+        ...change,
+        effectIndex: target.effectIndex,
+    };
+};
+const getDeleteChange = (target) => {
+    if (!hasTargetKeyframeAtCurrentFrame(target)) {
+        return null;
+    }
+    const change = {
+        fileName: target.fileName,
+        nodePath: target.nodePath,
+        fieldKey: target.fieldKey,
+        sourceFrame: target.sourceFrame,
+        schema: target.schema,
+    };
+    if (target.effectIndex === null) {
+        return change;
+    }
+    return {
+        ...change,
+        effectIndex: target.effectIndex,
+    };
+};
+const hasEffectIndex = (change) => {
+    return 'effectIndex' in change;
+};
+function getCurrentKeyframeValue({ propStatus, jsxFrame, defaultValue, dragOverrideValue, }) {
     if (isKeyframedStatus(propStatus)) {
         return remotion_1.Internals.getEffectiveVisualModeValue({
             propStatus,
@@ -64,7 +241,7 @@ const getCurrentKeyframeValue = ({ propStatus, jsxFrame, defaultValue, dragOverr
         });
     }
     return null;
-};
+}
 const shouldShowTimelineKeyframeControls = ({ propStatus, selected, keyframable, }) => {
     if (propStatus === null) {
         return false;
@@ -75,15 +252,19 @@ const shouldShowTimelineKeyframeControls = ({ propStatus, selected, keyframable,
     if (selected) {
         return true;
     }
-    return TimelineSelection_1.SELECTION_ENABLED && isKeyframedStatus(propStatus);
+    return isKeyframedStatus(propStatus);
 };
 exports.shouldShowTimelineKeyframeControls = shouldShowTimelineKeyframeControls;
-const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, }) => {
+const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, nodePathInfo, }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const setFrame = remotion_1.Internals.useTimelineSetFrame();
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const tracks = (0, TimelineKeyframeTracksContext_1.useTimelineKeyframeTracks)();
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
         : null;
@@ -95,12 +276,6 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         }
         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, 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)({
@@ -110,6 +285,62 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const canAddKeyframe = keyframable;
     const canToggleKeyframe = propStatus.status !== 'computed' &&
         (hasKeyframeAtCurrentFrame || canAddKeyframe);
+    const selectedNodePathInfos = (0, react_1.useMemo)(() => (0, exports.getSelectedKeyframeControlNodePathInfos)({
+        clickedNodePathInfo: nodePathInfo,
+        selectedItems,
+    }), [nodePathInfo, selectedItems]);
+    const clickedTarget = (0, react_1.useMemo)(() => ({
+        nodePathInfo,
+        fieldKey,
+        propStatus,
+        nodePath,
+        fileName,
+        keyframeDisplayOffset,
+        sourceFrame: jsxFrame,
+        defaultValue,
+        dragOverrideValue,
+        schema,
+        effectIndex,
+    }), [
+        defaultValue,
+        dragOverrideValue,
+        effectIndex,
+        fieldKey,
+        fileName,
+        jsxFrame,
+        keyframeDisplayOffset,
+        nodePath,
+        nodePathInfo,
+        propStatus,
+        schema,
+    ]);
+    const keyframeToggleTargets = (0, react_1.useMemo)(() => {
+        const clickedNodePathInfoKey = (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo);
+        return selectedNodePathInfos.flatMap((selectedNodePathInfo) => {
+            if ((0, timeline_node_path_key_1.timelineNodePathInfoToKey)(selectedNodePathInfo) ===
+                clickedNodePathInfoKey) {
+                return [clickedTarget];
+            }
+            const target = resolveKeyframeControlTarget({
+                nodePathInfo: selectedNodePathInfo,
+                tracks,
+                propStatuses,
+                getDragOverrides,
+                getEffectDragOverrides,
+                timelinePosition,
+            });
+            return target === null ? [] : [target];
+        });
+    }, [
+        clickedTarget,
+        getDragOverrides,
+        getEffectDragOverrides,
+        nodePathInfo,
+        propStatuses,
+        selectedNodePathInfos,
+        timelinePosition,
+        tracks,
+    ]);
     const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
         setFrame((current) => {
             const next = { ...current, [videoConfig.id]: frame };
@@ -134,71 +365,37 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         if (!clientId || !canToggleKeyframe) {
             return;
         }
-        if (hasKeyframeAtCurrentFrame && isKeyframedStatus(propStatus)) {
-            if (effectIndex === null) {
-                await (0, call_delete_keyframe_1.callDeleteSequenceKeyframe)({
-                    fileName,
-                    nodePath,
-                    fieldKey,
-                    sourceFrame: jsxFrame,
-                    schema,
-                    setPropStatuses,
-                    clientId,
-                });
-                return;
-            }
-            await (0, call_delete_keyframe_1.callDeleteEffectKeyframe)({
-                fileName,
-                nodePath,
-                effectIndex,
-                fieldKey,
-                sourceFrame: jsxFrame,
-                schema,
+        if (hasKeyframeAtCurrentFrame) {
+            const deleteChanges = keyframeToggleTargets.flatMap((target) => {
+                const change = getDeleteChange(target);
+                return change === null ? [] : [change];
+            });
+            await (0, call_delete_keyframe_1.callDeleteKeyframes)({
+                sequenceKeyframes: deleteChanges.filter((change) => !hasEffectIndex(change)),
+                effectKeyframes: deleteChanges.filter((change) => hasEffectIndex(change)),
                 setPropStatuses,
                 clientId,
             });
             return;
         }
-        const value = currentKeyframeValue;
-        if (value === null) {
-            return;
-        }
-        if (effectIndex === null) {
-            await (0, call_add_keyframe_1.callAddSequenceKeyframe)({
-                fileName,
-                nodePath,
-                fieldKey,
-                sourceFrame: jsxFrame,
-                value,
-                schema,
-                setPropStatuses,
-                clientId,
-            });
+        const addChanges = keyframeToggleTargets.flatMap((target) => {
+            const change = getAddChange(target);
+            return change === null ? [] : [change];
+        });
+        if (addChanges.length === 0) {
             return;
         }
-        await (0, call_add_keyframe_1.callAddEffectKeyframe)({
-            fileName,
-            nodePath,
-            effectIndex,
-            fieldKey,
-            sourceFrame: jsxFrame,
-            value,
-            schema,
+        await (0, call_add_keyframe_1.callAddKeyframes)({
+            sequenceKeyframes: addChanges.filter((change) => !hasEffectIndex(change)),
+            effectKeyframes: addChanges.filter((change) => hasEffectIndex(change)),
             setPropStatuses,
             clientId,
         });
     }, [
         canToggleKeyframe,
         clientId,
-        effectIndex,
-        fieldKey,
-        fileName,
         hasKeyframeAtCurrentFrame,
-        currentKeyframeValue,
-        jsxFrame,
-        nodePath,
-        propStatus,
-        schema,
+        keyframeToggleTargets,
         setPropStatuses,
     ]);
     const previousDisabled = previousDisplayFrame === null;

package/dist/components/Timeline/TimelineKeyframeDiamond.js

@@ -60,7 +60,9 @@ const diamondBase = {
 const TimelineKeyframeDiamondUnmemoized = ({ frame, rowHeight, nodePathInfo }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
-    const { selected, onSelect, selectable } = (0, TimelineSelection_1.useTimelineKeyframeSelection)(nodePathInfo, frame);
+    const ref = (0, react_1.useRef)(null);
+    const { selected, onSelect, selectable, selectionItem } = (0, TimelineSelection_1.useTimelineKeyframeSelection)(nodePathInfo, frame);
+    (0, TimelineSelection_1.useTimelineMarqueeSelectableItem)(selectionItem, ref);
     const { isKeyframeDragging } = (0, TimelineKeyframeDragState_1.useTimelineKeyframeDragState)();
     const visuallySelected = selected || isKeyframeDragging({ nodePathInfo, frame });
     const style = (0, react_1.useMemo)(() => {
@@ -85,6 +87,6 @@ const TimelineKeyframeDiamondUnmemoized = ({ frame, rowHeight, nodePathInfo }) =
     if (style === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: `Keyframe at frame ${frame}`, "aria-label": `Select keyframe at frame ${frame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: colors_1.LIGHT_TEXT, selected: visuallySelected, size: diamondSize }) }));
+    return (jsx_runtime_1.jsx("button", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: style, title: `Keyframe at frame ${frame}`, "aria-label": `Select keyframe at frame ${frame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: colors_1.LIGHT_TEXT, selected: visuallySelected, size: diamondSize }) }));
 };
 exports.TimelineKeyframeDiamond = react_1.default.memo(TimelineKeyframeDiamondUnmemoized);

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -35,13 +35,18 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineKeyframeEasingLine = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const modals_1 = require("../../state/modals");
+const ContextMenu_1 = require("../ContextMenu");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const update_selected_easing_1 = require("./update-selected-easing");
 const hitTargetHeight = 12;
 const lineHeight = 2;
 const easingLineButton = {
@@ -53,7 +58,7 @@ const easingLineButton = {
     transform: 'translateY(-50%)',
 };
 const easingLine = {
-    backgroundColor: colors_1.LINE_COLOR,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
     borderRadius: lineHeight / 2,
     height: lineHeight,
     left: 0,
@@ -63,14 +68,132 @@ const easingLine = {
     transform: 'translateY(-50%)',
 };
 const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nodePathInfo, segmentIndex }) => {
+    const buttonRef = (0, react_1.useRef)(null);
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
-    const { selected, onSelect, selectable } = (0, TimelineSelection_1.useTimelineEasingSelection)({
+    const { selected, onSelect, selectable, selectionItem } = (0, TimelineSelection_1.useTimelineEasingSelection)({
         nodePathInfo,
         fromFrame,
         toFrame,
         segmentIndex,
     });
+    (0, TimelineSelection_1.useTimelineMarqueeSelectableItem)(selectionItem, buttonRef);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const getTargetSelections = (0, react_1.useCallback)(() => {
+        const selectedEasings = (0, update_selected_easing_1.getEasingSelections)(currentSelection.current.selectedItems);
+        return selected ? selectedEasings : [selectionItem];
+    }, [currentSelection, selected, selectionItem]);
+    const updateEasing = (0, react_1.useCallback)((easing) => {
+        if (previewServerState.type !== 'connected') {
+            return;
+        }
+        const promise = (0, update_selected_easing_1.updateSelectedTimelineEasings)({
+            selections: getTargetSelections(),
+            sequences: sequencesRef.current,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            propStatuses: propStatusesRef.current,
+            setPropStatuses,
+            clientId: previewServerState.clientId,
+            easing,
+        });
+        promise === null || promise === void 0 ? void 0 : promise.catch(() => undefined);
+    }, [
+        getTargetSelections,
+        overrideIdToNodePathMappings,
+        previewServerState,
+        propStatusesRef,
+        sequencesRef,
+        setPropStatuses,
+    ]);
+    const onOpenEasingEditor = (0, react_1.useCallback)(() => {
+        if (previewServerState.type !== 'connected') {
+            return;
+        }
+        const initialEasing = (0, update_selected_easing_1.getTimelineEasingValueForSelection)({
+            selection: selectionItem,
+            sequences: sequencesRef.current,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            propStatuses: propStatusesRef.current,
+        });
+        if (initialEasing === null) {
+            return;
+        }
+        setSelectedModal({
+            type: 'easing-editor',
+            initialEasing,
+            selections: getTargetSelections(),
+        });
+    }, [
+        getTargetSelections,
+        overrideIdToNodePathMappings,
+        previewServerState,
+        propStatusesRef,
+        selectionItem,
+        sequencesRef,
+        setSelectedModal,
+    ]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
+        return [
+            {
+                type: 'item',
+                id: 'linear',
+                keyHint: null,
+                label: 'Linear',
+                leftItem: null,
+                disabled: previewServerState.type !== 'connected',
+                onClick: () => updateEasing('linear'),
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'linear',
+            },
+            ...studio_shared_1.KEYFRAME_EASING_PRESETS.map((preset) => ({
+                type: 'item',
+                id: preset.id,
+                keyHint: null,
+                label: preset.label,
+                leftItem: null,
+                disabled: previewServerState.type !== 'connected',
+                onClick: () => updateEasing(preset.easing),
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: preset.id,
+            })),
+            {
+                type: 'divider',
+                id: 'edit-easing-divider',
+            },
+            {
+                type: 'item',
+                id: 'edit-easing',
+                keyHint: null,
+                label: 'Edit...',
+                leftItem: null,
+                disabled: previewServerState.type !== 'connected',
+                onClick: onOpenEasingEditor,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'edit-easing',
+            },
+        ];
+    }, [onOpenEasingEditor, previewServerState.type, updateEasing]);
+    const onOpenContextMenu = (0, react_1.useCallback)((event) => {
+        if (!selectable) {
+            return false;
+        }
+        if (!selected) {
+            onSelect({
+                shiftKey: event.shiftKey,
+                toggleKey: event.metaKey || event.ctrlKey,
+            });
+        }
+        return contextMenuValues;
+    }, [contextMenuValues, onSelect, selectable, selected]);
     const style = (0, react_1.useMemo)(() => {
         if (timelineWidth === null) {
             return null;
@@ -115,6 +238,8 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
     if (style === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: `Easing from frame ${fromFrame} to ${toFrame}`, "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx("div", { style: lineStyle }) }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("button", { ref: buttonRef, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: style, title: `Easing from frame ${fromFrame} to ${toFrame}`, "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx("div", { style: lineStyle }) }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: buttonRef, values: contextMenuValues, onOpen: onOpenContextMenu })
+        ] }));
 };
 exports.TimelineKeyframeEasingLine = react_1.default.memo(TimelineKeyframeEasingLineUnmemoized);

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TimelineKeyframeTracksProvider: React.FC<{
+    readonly tracks: readonly TrackWithHash[];
+    readonly children: React.ReactNode;
+}>;
+export declare const useTimelineKeyframeTracks: () => readonly TrackWithHash[];

package/dist/components/Timeline/TimelineKeyframeTracksContext.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineKeyframeTracks = exports.TimelineKeyframeTracksProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TimelineKeyframeTracksContext = (0, react_1.createContext)([]);
+// Keyframe diamonds need track metadata to resolve other selected rows. The
+// selection state only stores identities, and a mounted-row registry would miss
+// collapsed or otherwise unmounted rows.
+const TimelineKeyframeTracksProvider = ({ tracks, children }) => {
+    return (jsx_runtime_1.jsx(TimelineKeyframeTracksContext.Provider, { value: tracks, children: children }));
+};
+exports.TimelineKeyframeTracksProvider = TimelineKeyframeTracksProvider;
+const useTimelineKeyframeTracks = () => {
+    return (0, react_1.useContext)(TimelineKeyframeTracksContext);
+};
+exports.useTimelineKeyframeTracks = useTimelineKeyframeTracks;

package/dist/components/Timeline/TimelineMediaInfo.js

@@ -5,9 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
-const use_select_asset_1 = require("../use-select-asset");
 const timeline_asset_link_1 = require("./timeline-asset-link");
-const TimelineSelection_1 = require("./TimelineSelection");
 const lineStyle = {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -18,24 +16,10 @@ const lineStyle = {
     display: 'inline-block',
 };
 const useAssetLink = (src) => {
-    const selectAsset = (0, use_select_asset_1.useSelectAsset)();
-    const [hovered, setHovered] = (0, react_1.useState)(false);
     const linkInfo = (0, react_1.useMemo)(() => (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(src), [src]);
-    const interactive = !TimelineSelection_1.SELECTION_ENABLED && linkInfo !== null;
-    const onClick = (0, react_1.useCallback)((e) => {
-        if (!linkInfo) {
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        (0, timeline_asset_link_1.openTimelineAssetLink)(linkInfo, selectAsset);
-    }, [linkInfo, selectAsset]);
-    const onPointerEnter = (0, react_1.useCallback)(() => setHovered(true), []);
-    const onPointerLeave = (0, react_1.useCallback)(() => setHovered(false), []);
     const fileNameStyle = (0, react_1.useMemo)(() => ({
         ...lineStyle,
-        color: interactive && hovered ? colors_1.LIGHT_TEXT : colors_1.VERY_LIGHT_TEXT,
-        cursor: interactive ? 'pointer' : undefined,
+        color: colors_1.VERY_LIGHT_TEXT,
         textDecoration: 'none',
         display: 'inline-block',
         overflow: 'hidden',
@@ -43,19 +27,15 @@ const useAssetLink = (src) => {
         textOverflow: 'ellipsis',
         userSelect: 'none',
         WebkitUserSelect: 'none',
-    }), [interactive, hovered]);
+    }), []);
     return {
         linkInfo,
-        interactive,
-        onClick,
-        onPointerEnter,
-        onPointerLeave,
         fileNameStyle,
     };
 };
 const TimelineMediaInfo = ({ src }) => {
     const fileName = (0, react_1.useMemo)(() => remotion_1.Internals.getAssetDisplayName(src), [src]);
-    const { linkInfo, interactive, onClick, onPointerEnter, onPointerLeave, fileNameStyle, } = useAssetLink(src);
-    return (jsx_runtime_1.jsx("div", { style: fileNameStyle, title: linkInfo ? linkInfo.title : fileName, onClick: interactive ? onClick : undefined, onPointerEnter: interactive ? onPointerEnter : undefined, onPointerLeave: interactive ? onPointerLeave : undefined, children: fileName }));
+    const { linkInfo, fileNameStyle } = useAssetLink(src);
+    return (jsx_runtime_1.jsx("div", { style: fileNameStyle, title: linkInfo ? linkInfo.title : fileName, children: fileName }));
 };
 exports.TimelineMediaInfo = TimelineMediaInfo;