@remotion/studio 4.0.483 → 4.0.484

package/dist/components/InspectorPanel/keyframe-easing-navigator-items.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNavigatorItemPlayheadFrame = exports.getKeyframeEasingNavigatorItems = void 0;
+const getKeyframeEasingNavigatorItems = ({ includeEasings, keyframes, nodePathInfo, }) => {
+    return keyframes.flatMap((keyframe, index) => {
+        const keyframeItem = {
+            type: 'keyframe',
+            selection: {
+                type: 'keyframe',
+                nodePathInfo,
+                frame: keyframe.frame,
+            },
+        };
+        const nextKeyframe = keyframes[index + 1];
+        if (!includeEasings || !nextKeyframe) {
+            return [keyframeItem];
+        }
+        return [
+            keyframeItem,
+            {
+                type: 'easing',
+                selection: {
+                    type: 'easing',
+                    nodePathInfo,
+                    fromFrame: keyframe.frame,
+                    toFrame: nextKeyframe.frame,
+                    segmentIndex: index,
+                },
+            },
+        ];
+    });
+};
+exports.getKeyframeEasingNavigatorItems = getKeyframeEasingNavigatorItems;
+const getNavigatorItemPlayheadFrame = (item) => {
+    if (item.type === 'keyframe') {
+        return item.selection.frame;
+    }
+    return Math.round((item.selection.fromFrame + item.selection.toFrame) / 2);
+};
+exports.getNavigatorItemPlayheadFrame = getNavigatorItemPlayheadFrame;

package/dist/components/InspectorPanel/keyframe-inspector-frame.d.ts

@@ -0,0 +1,8 @@
+export declare const clampInspectorKeyframeDisplayFrame: ({ durationInFrames, frame, }: {
+    readonly durationInFrames: number;
+    readonly frame: number;
+}) => number;
+export declare const getInspectorKeyframeSourceFrame: ({ displayFrame, keyframeDisplayOffset, }: {
+    readonly displayFrame: number;
+    readonly keyframeDisplayOffset: number;
+}) => number;

package/dist/components/InspectorPanel/keyframe-inspector-frame.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInspectorKeyframeSourceFrame = exports.clampInspectorKeyframeDisplayFrame = void 0;
+const clampInspectorKeyframeDisplayFrame = ({ durationInFrames, frame, }) => {
+    if (durationInFrames <= 0) {
+        return 0;
+    }
+    return Math.min(Math.max(Math.round(frame), 0), durationInFrames - 1);
+};
+exports.clampInspectorKeyframeDisplayFrame = clampInspectorKeyframeDisplayFrame;
+const getInspectorKeyframeSourceFrame = ({ displayFrame, keyframeDisplayOffset, }) => {
+    return displayFrame - keyframeDisplayOffset;
+};
+exports.getInspectorKeyframeSourceFrame = getInspectorKeyframeSourceFrame;

package/dist/components/InspectorPanel/styles.d.ts

@@ -5,6 +5,7 @@ export declare const defaultPropsSection: React.CSSProperties;
 export declare const visualControlsSection: React.CSSProperties;
 export declare const compositionSection: React.CSSProperties;
 export declare const inspectorSectionDivider: React.CSSProperties;
+export declare const sequenceHeaderDivider: React.CSSProperties;
 export declare const sectionHeader: React.CSSProperties;
 export declare const sequenceHeader: React.CSSProperties;
 export declare const sequenceHeaderTitle: React.CSSProperties;

package/dist/components/InspectorPanel/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
+exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
 const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 exports.container = {
@@ -31,6 +31,12 @@ exports.compositionSection = {
 exports.inspectorSectionDivider = {
     borderBottom: `1px solid ${colors_1.LINE_COLOR}`,
 };
+exports.sequenceHeaderDivider = {
+    backgroundColor: colors_1.LINE_COLOR,
+    flexShrink: 0,
+    height: 1,
+    margin: '4px 0',
+};
 exports.sectionHeader = {
     color: colors_1.LIGHT_TEXT,
     fontSize: 12,

package/dist/components/InspectorSequenceSection.js

@@ -60,14 +60,8 @@ const emptyState = {
     lineHeight: 1.4,
     padding: '0 12px 8px',
 };
-const divider = {
-    backgroundColor: colors_1.LINE_COLOR,
-    flexShrink: 0,
-    height: 1,
-    margin: '4px 0',
-};
 const controlsEffectsDivider = {
-    ...divider,
+    ...styles_1.sequenceHeaderDivider,
     margin: '8px 0 4px',
 };
 const effectsHeaderTitle = {
@@ -191,10 +185,10 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
     };
     if (controlRows.length === 0 && !showEffectsSection) {
         return (jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx("div", { style: divider }), jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" })
+                jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider }), jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" })
             ] }));
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: divider }), controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group, i) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i === 0 ? null : jsx_runtime_1.jsx("div", { style: controlsEffectsDivider }), renderSectionHeader(group.label), group.rows.map(renderRow)] }, group.id))) })) : null, showEffectsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showControlsEffectsDivider ? (jsx_runtime_1.jsx("div", { style: controlsEffectsDivider })) : null, renderEffectsHeader(), effectRows.length === 0 ? (jsx_runtime_1.jsx("div", { style: emptyState, children: "None" })) : (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) }))] })) : null] }));
+            jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider }), controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group, i) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i === 0 ? null : jsx_runtime_1.jsx("div", { style: controlsEffectsDivider }), renderSectionHeader(group.label), group.rows.map(renderRow)] }, group.id))) })) : null, showEffectsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showControlsEffectsDivider ? (jsx_runtime_1.jsx("div", { style: controlsEffectsDivider })) : null, renderEffectsHeader(), effectRows.length === 0 ? (jsx_runtime_1.jsx("div", { style: emptyState, children: "None" })) : (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) }))] })) : null] }));
 };
 exports.InspectorSequenceSection = InspectorSequenceSection;

package/dist/components/Preview.js

@@ -122,7 +122,7 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
         return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(RenderPreview_1.RenderPreview, { path: canvasContent.displayName, assetMetadata: assetMetadata, getBlob: canvasContent.getBlob }) }));
     }
     return (jsx_runtime_1.jsxs("div", { style: outer, children: [
-            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { scale: scale })
+            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
         ] }));
 };
 const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -11,4 +11,6 @@ export declare const orderOutlinesForRendering: ({ outlines, targetsByKey, }: {
 }) => readonly SelectedOutline[];
 export declare const SelectedOutlineOverlay: React.FC<{
     readonly scale: number;
+    readonly translationX: number;
+    readonly translationY: number;
 }>;

package/dist/components/SelectedOutlineOverlay.js

@@ -105,7 +105,7 @@ const orderOutlinesForRendering = ({ outlines, targetsByKey, }) => {
     });
 };
 exports.orderOutlinesForRendering = orderOutlinesForRendering;
-const SelectedOutlineOverlay = ({ scale }) => {
+const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
     const { selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineSelection)();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -613,28 +613,49 @@ const SelectedOutlineOverlay = ({ scale }) => {
             }
         };
     }, [keybindings, onArrowKeyDown, onArrowKeyUp, saveKeyboardNudgeSession]);
-    (0, react_1.useEffect)(() => {
-        if (outlineTargets.length === 0) {
+    const updateOutlines = (0, react_1.useCallback)(() => {
+        if (overlayRef.current === null || outlineTargets.length === 0) {
             setOutlines((prevOutlines) => prevOutlines.length === 0 ? prevOutlines : []);
             return;
         }
+        const nextOutlines = (0, selected_outline_measurement_1.measureOutlines)(overlayRef.current, outlineTargets);
+        setOutlines((prevOutlines) => (0, selected_outline_measurement_1.outlinesAreEqual)(prevOutlines, nextOutlines)
+            ? prevOutlines
+            : nextOutlines);
+    }, [outlineTargets]);
+    (0, react_1.useLayoutEffect)(() => {
+        updateOutlines();
+    }, [outlineTargets, scale, translationX, translationY, updateOutlines]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (outlineTargets.length === 0 || typeof ResizeObserver === 'undefined') {
+            return;
+        }
         let animationFrame = null;
-        const updateOutlines = () => {
-            if (overlayRef.current) {
-                const nextOutlines = (0, selected_outline_measurement_1.measureOutlines)(overlayRef.current, outlineTargets);
-                setOutlines((prevOutlines) => (0, selected_outline_measurement_1.outlinesAreEqual)(prevOutlines, nextOutlines)
-                    ? prevOutlines
-                    : nextOutlines);
+        const scheduleUpdate = () => {
+            if (animationFrame !== null) {
+                return;
             }
-            animationFrame = requestAnimationFrame(updateOutlines);
+            animationFrame = requestAnimationFrame(() => {
+                animationFrame = null;
+                updateOutlines();
+            });
         };
-        updateOutlines();
+        const resizeObserver = new ResizeObserver(scheduleUpdate);
+        if (overlayRef.current !== null) {
+            resizeObserver.observe(overlayRef.current);
+        }
+        for (const target of outlineTargets) {
+            if (target.ref.current !== null) {
+                resizeObserver.observe(target.ref.current);
+            }
+        }
         return () => {
             if (animationFrame !== null) {
                 cancelAnimationFrame(animationFrame);
             }
+            resizeObserver.disconnect();
         };
-    }, [outlineTargets]);
+    }, [outlineTargets, updateOutlines]);
     if (outlineTargets.length === 0) {
         return null;
     }

package/dist/components/Timeline/EasingEditorModal.js

@@ -80,8 +80,8 @@ const inlineContainer = {
 const segmentedControlWrapper = {
     display: 'flex',
     justifyContent: 'flex-start',
+    marginTop: 8,
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
-    marginBottom: 10,
 };
 const presetButtonsWrapper = {
     display: 'flex',
@@ -91,6 +91,10 @@ const presetButtonsWrapper = {
     marginBottom: 8,
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
 };
+const inspectorPresetButtonsWrapper = {
+    ...presetButtonsWrapper,
+    padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 0`,
+};
 const presetButtonBase = {
     alignItems: 'center',
     backgroundColor: colors_1.INPUT_BACKGROUND,
@@ -721,10 +725,11 @@ const EasingEditor = ({ state, renderHeader }) => {
         gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
         padding: '0 12px 12px',
     }), []);
-    return (jsx_runtime_1.jsxs("div", { style: inlineContainer, children: [renderHeader ? (renderHeader(modeItems)) : (jsx_runtime_1.jsx("div", { style: segmentedControlWrapper, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false, size: "compact" }) })), jsx_runtime_1.jsx("div", { style: presetButtonsWrapper, children: EDITOR_EASING_PRESETS.map((preset) => (jsx_runtime_1.jsx(EasingPresetButton, { currentEasing: currentEasing, disabled: disabled, onClick: applyPreset, preset: preset }, preset.id))) }), mode === 'bezier' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    const modeSwitcher = (jsx_runtime_1.jsx("div", { style: segmentedControlWrapper, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }) }));
+    return (jsx_runtime_1.jsxs("div", { style: inlineContainer, children: [renderHeader ? renderHeader(modeItems) : null, jsx_runtime_1.jsx("div", { style: renderHeader ? inspectorPresetButtonsWrapper : presetButtonsWrapper, children: EDITOR_EASING_PRESETS.map((preset) => (jsx_runtime_1.jsx(EasingPresetButton, { currentEasing: currentEasing, disabled: disabled, onClick: applyPreset, preset: preset }, preset.id))) }), mode === 'bezier' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("svg", { ref: svgRef, width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Bezier curve editor", children: [
                             jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("line", { x1: startPoint.x, y1: startPoint.y, x2: firstHandle.x, y2: firstHandle.y, stroke: "rgba(255, 255, 255, 0.35)", strokeWidth: 1 }), jsx_runtime_1.jsx("line", { x1: endPoint.x, y1: endPoint.y, x2: secondHandle.x, y2: secondHandle.y, stroke: "rgba(255, 255, 255, 0.35)", strokeWidth: 1 }), jsx_runtime_1.jsx("path", { d: bezierPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: startPoint.x, cy: startPoint.y, r: 4, fill: "white" }), jsx_runtime_1.jsx("circle", { cx: endPoint.x, cy: endPoint.y, r: 4, fill: "white" }), jsx_runtime_1.jsx("circle", { cx: firstHandle.x, cy: firstHandle.y, r: 6, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: activeHandle === 0 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(0, event) }), jsx_runtime_1.jsx("circle", { cx: secondHandle.x, cy: secondHandle.y, r: 6, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: activeHandle === 1 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(1, event) })
-                        ] }), jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
+                        ] }), modeSwitcher, jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
                             jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "X1" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: bezier[0], status: "ok", onValueChange: (value) => setCoordinate(0, 'x', value, false), onValueChangeEnd: (value) => setCoordinate(0, 'x', value, true), onTextChange: () => undefined, min: 0, max: 1, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false, disabled: disabled }) })
                                 ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
@@ -738,7 +743,7 @@ const EasingEditor = ({ state, renderHeader }) => {
                 ] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("svg", { width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Spring easing curve", children: [
                             jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("path", { d: springPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: xToSvg(0), cy: yToSvg(0), r: 4, fill: "white" }), jsx_runtime_1.jsx("circle", { cx: xToSvg(1), cy: yToSvg(1), r: 4, fill: "white" })
-                        ] }), jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
+                        ] }), modeSwitcher, jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
                             jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Damping" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: spring.damping, status: "ok", onValueChange: (value) => setSpringNumber('damping', value, false), onValueChangeEnd: (value) => setSpringNumber('damping', value, true), onTextChange: () => undefined, min: SPRING_LIMITS.damping.min, max: SPRING_LIMITS.damping.max, step: SPRING_LIMITS.damping.step, formatter: springFormatters.damping, rightAlign: false, style: numberInputStyle, snapToStep: false, dragDecimalPlaces: SPRING_DECIMAL_PLACES.damping, disabled: disabled }) })
                                 ] }), jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -24,6 +24,9 @@ const TimelineDeleteKeybindings = () => {
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
+    timelinePositionRef.current = timelinePosition;
     (0, react_1.useEffect)(() => {
         if (!canSelect || previewServerState.type !== 'connected') {
             return;
@@ -58,7 +61,13 @@ const TimelineDeleteKeybindings = () => {
                 deletePromise
                     .then((deleted) => {
                     if (deleted) {
-                        const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)(selectedItems);
+                        const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)({
+                            selections: selectedItems,
+                            sequences,
+                            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                            propStatuses,
+                            timelinePosition: timelinePositionRef.current,
+                        });
                         if (nextSelection.length === 0) {
                             clearSelection();
                         }
@@ -154,6 +163,7 @@ const TimelineDeleteKeybindings = () => {
         sequencesRef,
         setGuidesList,
         setPropStatuses,
+        timelinePositionRef,
     ]);
     return null;
 };

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -10,6 +10,7 @@ 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");
+const get_animation_item_selection_for_frame_1 = require("./get-animation-item-selection-for-frame");
 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");
@@ -22,6 +23,7 @@ const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
+const update_selected_easing_1 = require("./update-selected-easing");
 const fieldRowBase = {};
 const isKeyframedStatus = (status) => {
     return status.status === 'keyframed';
@@ -219,6 +221,9 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const style = (0, react_1.useMemo)(() => {
@@ -359,7 +364,83 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         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, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
+    const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
+        setFrame((current) => {
+            const next = { ...current, [videoConfig.id]: frame };
+            remotion_1.Internals.persistCurrentFrame(next);
+            return next;
+        });
+    }, [setFrame, videoConfig.id]);
+    const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
+        if (propStatus === null || propStatus.status === 'computed') {
+            return;
+        }
+        const keyframeSelection = {
+            type: 'keyframe',
+            nodePathInfo,
+            frame: sourceFrame + keyframeDisplayOffset,
+        };
+        if (propStatus.status === 'static') {
+            if (!keyframable || previewServerState.type !== 'connected') {
+                return;
+            }
+            const value = remotion_1.Internals.getEffectiveVisualModeValue({
+                propStatus,
+                dragOverrideValue,
+                frame: sourceFrame,
+                defaultValue: field.fieldSchema.default,
+                shouldResortToDefaultValueIfUndefined: true,
+            });
+            event.stopPropagation();
+            (0, call_add_keyframe_1.callAddEffectKeyframe)({
+                fileName: validatedLocation.source,
+                nodePath,
+                effectIndex: field.effectIndex,
+                fieldKey: field.key,
+                sourceFrame,
+                value,
+                schema: field.effectSchema,
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+            }).catch(() => undefined);
+            selectItems([keyframeSelection], { reveal: true });
+            seekToDisplayFrame(keyframeSelection.frame);
+            return;
+        }
+        const targetSelection = (0, get_animation_item_selection_for_frame_1.getAnimationItemSelectionForSourceFrame)({
+            includeEasings: (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(propStatus.interpolationFunction),
+            keyframeDisplayOffset,
+            keyframes: propStatus.keyframes,
+            nodePathInfo,
+            sourceFrame,
+        });
+        if (targetSelection === null) {
+            return;
+        }
+        event.stopPropagation();
+        selectItems([targetSelection], { reveal: true });
+        if (targetSelection.type === 'keyframe') {
+            seekToDisplayFrame(targetSelection.frame);
+        }
+    }, [
+        dragOverrideValue,
+        field.effectIndex,
+        field.effectSchema,
+        field.fieldSchema.default,
+        field.key,
+        keyframeDisplayOffset,
+        keyframable,
+        nodePath,
+        nodePathInfo,
+        previewServerState,
+        propStatus,
+        seekToDisplayFrame,
+        selectItems,
+        setPropStatuses,
+        sourceFrame,
+        validatedLocation.source,
+    ]);
+    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, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, 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(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: sourceFrame }) })
         ] }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -11,11 +11,13 @@ 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_easing_selection_after_keyframe_delete_1 = require("./get-easing-selection-after-keyframe-delete");
 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 update_selected_easing_1 = require("./update-selected-easing");
 const controlsContainerStyle = {
     alignItems: 'center',
     display: 'flex',
@@ -262,7 +264,7 @@ const shouldShowTimelineKeyframeNavigation = ({ propStatus, selected, }) => {
     return isKeyframedStatus(propStatus);
 };
 exports.shouldShowTimelineKeyframeNavigation = shouldShowTimelineKeyframeNavigation;
-const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, nodePathInfo, }) => {
+const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, nodePathInfo, mode = 'timeline', }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const setFrame = remotion_1.Internals.useTimelineSetFrame();
@@ -270,7 +272,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     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 { selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const tracks = (0, TimelineKeyframeTracksContext_1.useTimelineKeyframeTracks)();
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
@@ -385,37 +387,65 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
             return;
         }
         if (hasKeyframeAtCurrentFrame) {
-            const deleteChanges = keyframeToggleTargets.flatMap((target) => {
+            const deleteTargets = keyframeToggleTargets.flatMap((target) => {
                 const change = getDeleteChange(target);
-                return change === null ? [] : [change];
+                return change === null ? [] : [{ target, change }];
             });
+            const singleDeleteTarget = deleteTargets[0];
+            const easingSelection = deleteTargets.length === 1 &&
+                singleDeleteTarget &&
+                isKeyframedStatus(singleDeleteTarget.target.propStatus) &&
+                (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(singleDeleteTarget.target.propStatus.interpolationFunction)
+                ? (0, get_easing_selection_after_keyframe_delete_1.getEasingSelectionAfterKeyframeDelete)({
+                    deletedSourceFrames: [singleDeleteTarget.target.sourceFrame],
+                    keyframeDisplayOffset: singleDeleteTarget.target.keyframeDisplayOffset,
+                    nodePathInfo: singleDeleteTarget.target.nodePathInfo,
+                    propStatus: singleDeleteTarget.target.propStatus,
+                    timelinePosition,
+                })
+                : null;
+            const deleteChanges = deleteTargets.map(({ change }) => change);
             await (0, call_delete_keyframe_1.callDeleteKeyframes)({
                 sequenceKeyframes: deleteChanges.filter((change) => !hasEffectIndex(change)),
                 effectKeyframes: deleteChanges.filter((change) => hasEffectIndex(change)),
                 setPropStatuses,
                 clientId,
             });
+            if (mode === 'timeline' && easingSelection !== null) {
+                selectItems([easingSelection], { reveal: true });
+            }
             return;
         }
         const addChanges = keyframeToggleTargets.flatMap((target) => {
             const change = getAddChange(target);
-            return change === null ? [] : [change];
+            return change === null ? [] : [{ target, change }];
         });
         if (addChanges.length === 0) {
             return;
         }
+        const addChangeValues = addChanges.map(({ change }) => change);
         await (0, call_add_keyframe_1.callAddKeyframes)({
-            sequenceKeyframes: addChanges.filter((change) => !hasEffectIndex(change)),
-            effectKeyframes: addChanges.filter((change) => hasEffectIndex(change)),
+            sequenceKeyframes: addChangeValues.filter((change) => !hasEffectIndex(change)),
+            effectKeyframes: addChangeValues.filter((change) => hasEffectIndex(change)),
             setPropStatuses,
             clientId,
         });
+        if (mode === 'timeline') {
+            selectItems(addChanges.map(({ target }) => ({
+                type: 'keyframe',
+                nodePathInfo: target.nodePathInfo,
+                frame: target.sourceFrame + target.keyframeDisplayOffset,
+            })), { reveal: true });
+        }
     }, [
         canToggleKeyframe,
         clientId,
         hasKeyframeAtCurrentFrame,
         keyframeToggleTargets,
+        mode,
+        selectItems,
         setPropStatuses,
+        timelinePosition,
     ]);
     const previousDisabled = previousDisplayFrame === null;
     const nextDisabled = nextDisplayFrame === null;

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

@@ -1,5 +1,9 @@
 import React from 'react';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const getTimelineKeyframeEasingLineStyle: (selected: boolean) => React.CSSProperties;
+export declare const TimelineKeyframeEasingLineVisual: React.FC<{
+    readonly selected: boolean;
+}>;
 export declare const TimelineKeyframeEasingLine: React.NamedExoticComponent<{
     readonly fromFrame: number;
     readonly toFrame: number;

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineKeyframeEasingLine = void 0;
+exports.TimelineKeyframeEasingLine = exports.TimelineKeyframeEasingLineVisual = exports.getTimelineKeyframeEasingLineStyle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
@@ -67,6 +67,16 @@ const easingLine = {
     top: '50%',
     transform: 'translateY(-50%)',
 };
+const getTimelineKeyframeEasingLineStyle = (selected) => ({
+    ...easingLine,
+    outline: selected ? `1px solid ${colors_1.BLUE}` : undefined,
+});
+exports.getTimelineKeyframeEasingLineStyle = getTimelineKeyframeEasingLineStyle;
+const TimelineKeyframeEasingLineVisual = ({ selected }) => {
+    const lineStyle = (0, react_1.useMemo)(() => (0, exports.getTimelineKeyframeEasingLineStyle)(selected), [selected]);
+    return jsx_runtime_1.jsx("div", { style: lineStyle });
+};
+exports.TimelineKeyframeEasingLineVisual = TimelineKeyframeEasingLineVisual;
 const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nodePathInfo, segmentIndex }) => {
     const buttonRef = (0, react_1.useRef)(null);
     const videoConfig = (0, remotion_1.useVideoConfig)();
@@ -176,10 +186,6 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
         toFrame,
         videoConfig.durationInFrames,
     ]);
-    const lineStyle = (0, react_1.useMemo)(() => ({
-        ...easingLine,
-        outline: selected ? `1px solid ${colors_1.BLUE}` : undefined,
-    }), [selected]);
     const onPointerDown = (0, use_timeline_keyframe_drag_1.useTimelineEasingKeyframeDrag)({
         onSelect,
         selectable,
@@ -190,7 +196,7 @@ const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, n
         return null;
     }
     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 })
+            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(exports.TimelineKeyframeEasingLineVisual, { selected: selected }) }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: buttonRef, values: contextMenuValues, onOpen: onOpenContextMenu })
         ] }));
 };
 exports.TimelineKeyframeEasingLine = react_1.default.memo(TimelineKeyframeEasingLineUnmemoized);