@remotion/studio 4.0.472 → 4.0.474

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");
@@ -42,15 +43,15 @@ const isResettableStatus = ({ status, defaultValue, }) => {
 const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) => {
     var _a;
     var _b;
-    const { setEffectDragOverrides, clearEffectDragOverrides, setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
         : null;
-    const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
-        codeValues: visualModeCodeValues,
+    const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses: visualModePropStatuses,
         nodePath,
         effectIndex: field.effectIndex,
     });
@@ -109,8 +110,8 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         }
         return (0, save_prop_queue_1.enqueueSavePropChange)({
             nodePath,
-            setCodeValues,
-            applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
+            setPropStatuses,
+            applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForEffectPropStatuses)({
                 previous: prev,
                 effectIndex: field.effectIndex,
                 fieldKey: field.key,
@@ -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,
@@ -137,7 +139,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         field.key,
         nodePath,
         propStatus,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation,
     ]);
     const onSaveKeyframed = (0, react_1.useCallback)((value, sourceFrame) => {
@@ -155,7 +157,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
             sourceFrame,
             value,
             schema: field.effectSchema,
-            setCodeValues,
+            setPropStatuses,
             clientId,
         });
     }, [
@@ -164,7 +166,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         field.effectSchema,
         field.key,
         nodePath,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation,
     ]);
     if (field.fieldSchema.type === 'scale') {
@@ -201,7 +203,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) });
     }
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
-        codeValue: propStatus,
+        propStatus,
         dragOverrideValue,
         defaultValue: field.fieldSchema.default,
         frame: jsxFrame,
@@ -213,8 +215,9 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     var _a;
     var _b, _c;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    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 style = (0, react_1.useMemo)(() => {
@@ -223,11 +226,11 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             height: field.rowHeight,
         };
     }, [field.rowHeight]);
-    const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectCodeValuesCtx({
-        codeValues,
+    const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
         nodePath,
         effectIndex: field.effectIndex,
-    }), [codeValues, nodePath, field.effectIndex]);
+    }), [propStatuses, nodePath, field.effectIndex]);
     const propStatus = effectStatus.type === 'can-update-effect'
         ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a[field.key]) !== null && _b !== void 0 ? _b : null)
         : null;
@@ -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,
@@ -274,7 +278,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             value: field.fieldSchema.default,
             defaultValue,
             schema: field.effectSchema,
-            setCodeValues,
+            setPropStatuses,
             clientId: previewServerState.clientId,
         });
     }, [
@@ -286,11 +290,36 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         field.key,
         nodePath,
         previewServerState,
-        setCodeValues,
+        setPropStatuses,
+        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/TimelineExpandedKeyframeRow.js

@@ -37,7 +37,9 @@ exports.TimelineExpandedKeyframeRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
 const TimelineKeyframeDiamond_1 = require("./TimelineKeyframeDiamond");
+const TimelineKeyframeEasingLine_1 = require("./TimelineKeyframeEasingLine");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const row = {
@@ -49,7 +51,10 @@ const rowSeparator = {
 const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, nodePathInfo, showSeparator }) => {
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const { selected: rowSelected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowSelected && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth) })) : null, keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })
+    const easingSegments = TimelineSelection_1.ENABLE_OUTLINES
+        ? (0, get_timeline_easing_segments_1.getTimelineEasingSegments)(keyframes)
+        : [];
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowSelected && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })
         ] }));
 };
 exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized);

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -56,28 +56,28 @@ const separator = {
 const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth, keyframeDisplayOffset, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
         getDragOverrides,
         getEffectDragOverrides,
-        codeValues: visualModeCodeValues,
+        propStatuses: visualModePropStatuses,
     }), [
         sequence,
         nodePathInfo,
         getDragOverrides,
         getEffectDragOverrides,
-        visualModeCodeValues,
+        visualModePropStatuses,
     ]);
     const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded }), [tree, getIsExpanded]);
     const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)({
         sequence,
         nodePathInfo,
         getIsExpanded,
-        codeValues: visualModeCodeValues,
-    }), [sequence, nodePathInfo, getIsExpanded, visualModeCodeValues]);
+        propStatuses: visualModePropStatuses,
+    }), [sequence, nodePathInfo, getIsExpanded, visualModePropStatuses]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...expandedSectionBase,

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,20 +42,12 @@ 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, }) => {
     if (isKeyframedStatus(propStatus)) {
         return remotion_1.Internals.getEffectiveVisualModeValue({
-            codeValue: propStatus,
+            propStatus,
             dragOverrideValue,
             frame: jsxFrame,
             defaultValue,
@@ -63,7 +56,7 @@ const getCurrentKeyframeValue = ({ propStatus, jsxFrame, defaultValue, dragOverr
     }
     if (propStatus.status === 'static') {
         return remotion_1.Internals.getEffectiveVisualModeValue({
-            codeValue: propStatus,
+            propStatus,
             dragOverrideValue,
             frame: jsxFrame,
             defaultValue,
@@ -89,7 +82,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const setFrame = remotion_1.Internals.useTimelineSetFrame();
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
@@ -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,
@@ -149,7 +142,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
                     fieldKey,
                     sourceFrame: jsxFrame,
                     schema,
-                    setCodeValues,
+                    setPropStatuses,
                     clientId,
                 });
                 return;
@@ -161,7 +154,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
                 fieldKey,
                 sourceFrame: jsxFrame,
                 schema,
-                setCodeValues,
+                setPropStatuses,
                 clientId,
             });
             return;
@@ -178,7 +171,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
                 sourceFrame: jsxFrame,
                 value,
                 schema,
-                setCodeValues,
+                setPropStatuses,
                 clientId,
             });
             return;
@@ -191,7 +184,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
             sourceFrame: jsxFrame,
             value,
             schema,
-            setCodeValues,
+            setPropStatuses,
             clientId,
         });
     }, [
@@ -206,7 +199,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         nodePath,
         propStatus,
         schema,
-        setCodeValues,
+        setPropStatuses,
     ]);
     const previousDisabled = previousDisplayFrame === null;
     const nextDisabled = nextDisplayFrame === null;
@@ -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;

package/dist/components/Timeline/TimelineKeyframeDiamond.js

@@ -40,49 +40,51 @@ const remotion_1 = require("remotion");
 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 TimelineKeyframeDiamondIcon_1 = require("./TimelineKeyframeDiamondIcon");
+const TimelineKeyframeDragState_1 = require("./TimelineKeyframeDragState");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const use_timeline_keyframe_drag_1 = require("./use-timeline-keyframe-drag");
+const diamondSize = 12;
 const diamondBase = {
+    alignItems: 'center',
+    background: 'none',
+    border: 'none',
+    display: 'flex',
+    height: diamondSize,
+    justifyContent: 'center',
+    padding: 0,
     position: 'absolute',
-    width: 8,
-    height: 8,
-    backgroundColor: colors_1.LIGHT_TEXT,
-    borderRadius: 1,
-    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
+    width: diamondSize,
 };
 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 { isKeyframeDragging } = (0, TimelineKeyframeDragState_1.useTimelineKeyframeDragState)();
+    const visuallySelected = selected || isKeyframeDragging({ nodePathInfo, frame });
     const style = (0, react_1.useMemo)(() => {
         if (timelineWidth === null) {
             return null;
         }
         return {
             ...diamondBase,
-            backgroundColor: colors_1.LIGHT_TEXT,
-            outline: selected ? '2px solid ' + colors_1.BLUE : 'none',
-            border: 'none',
-            cursor: 'pointer',
             left: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, timelineWidth) - timeline_layout_1.TIMELINE_PADDING,
-            padding: 0,
             pointerEvents: 'auto',
             top: rowHeight / 2,
-            transform: 'translate(-50%, -50%) rotate(45deg)',
+            transform: 'translate(-50%, -50%)',
         };
-    }, [frame, rowHeight, selected, timelineWidth, videoConfig.durationInFrames]);
-    const onPointerDown = (0, react_1.useCallback)((e) => {
-        if (e.button === 0) {
-            e.stopPropagation();
-            onSelect({
-                shiftKey: e.shiftKey,
-                toggleKey: e.metaKey || e.ctrlKey,
-            });
-        }
-    }, [onSelect]);
+    }, [frame, rowHeight, timelineWidth, videoConfig.durationInFrames]);
+    const onPointerDown = (0, use_timeline_keyframe_drag_1.useTimelineKeyframeDrag)({
+        frame,
+        nodePathInfo,
+        onSelect,
+        selectable,
+        selected,
+    });
     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 }));
+    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 }) }));
 };
 exports.TimelineKeyframeDiamond = react_1.default.memo(TimelineKeyframeDiamondUnmemoized);

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const TimelineKeyframeDiamondIcon: React.FC<{
+    readonly color: string;
+    readonly selected?: boolean;
+    readonly size: number;
+}>;

package/dist/components/Timeline/TimelineKeyframeDiamondIcon.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineKeyframeDiamondIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const svgStyle = {
+    display: 'block',
+    overflow: 'visible',
+};
+const TimelineKeyframeDiamondIcon = ({ color, selected = false, size }) => {
+    return (jsx_runtime_1.jsxs("svg", { width: size, height: size, viewBox: "0 0 12 12", style: svgStyle, "aria-hidden": "true", focusable: "false", children: [selected ? (jsx_runtime_1.jsx("polygon", { points: "6 0.75 11.25 6 6 11.25 0.75 6", fill: "none", stroke: colors_1.BLUE, strokeWidth: "1.5", strokeLinejoin: "round" })) : null, jsx_runtime_1.jsx("polygon", { points: "6 1.5 10.5 6 6 10.5 1.5 6", fill: color, stroke: "rgba(0, 0, 0, 0.4)", strokeWidth: "1", strokeLinejoin: "round" })
+        ] }));
+};
+exports.TimelineKeyframeDiamondIcon = TimelineKeyframeDiamondIcon;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export type TimelineDraggedKeyframe = {
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly frame: number;
+};
+export declare const getTimelineKeyframeDragKey: ({ nodePathInfo, frame, }: TimelineDraggedKeyframe) => string;
+type TimelineKeyframeDragStateContextValue = {
+    readonly clearDraggedKeyframes: () => void;
+    readonly isKeyframeDragging: (keyframe: TimelineDraggedKeyframe) => boolean;
+    readonly setDraggedKeyframes: (keyframes: readonly TimelineDraggedKeyframe[]) => void;
+};
+export declare const TimelineKeyframeDragStateProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const useTimelineKeyframeDragState: () => TimelineKeyframeDragStateContextValue;
+export {};

package/dist/components/Timeline/TimelineKeyframeDragState.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineKeyframeDragState = exports.TimelineKeyframeDragStateProvider = exports.getTimelineKeyframeDragKey = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const emptyDraggedKeyframes = new Set();
+const getTimelineKeyframeDragKey = ({ nodePathInfo, frame, }) => {
+    return `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo)}.keyframe.${frame}`;
+};
+exports.getTimelineKeyframeDragKey = getTimelineKeyframeDragKey;
+const TimelineKeyframeDragStateContext = (0, react_1.createContext)({
+    clearDraggedKeyframes: () => undefined,
+    isKeyframeDragging: () => false,
+    setDraggedKeyframes: () => undefined,
+});
+const TimelineKeyframeDragStateProvider = ({ children }) => {
+    const [draggedKeys, setDraggedKeys] = (0, react_1.useState)(emptyDraggedKeyframes);
+    const setDraggedKeyframes = (0, react_1.useCallback)((keyframes) => {
+        setDraggedKeys(new Set(keyframes.map(exports.getTimelineKeyframeDragKey)));
+    }, []);
+    const clearDraggedKeyframes = (0, react_1.useCallback)(() => {
+        setDraggedKeys(emptyDraggedKeyframes);
+    }, []);
+    const isKeyframeDragging = (0, react_1.useCallback)((keyframe) => {
+        return draggedKeys.has((0, exports.getTimelineKeyframeDragKey)(keyframe));
+    }, [draggedKeys]);
+    const value = (0, react_1.useMemo)(() => ({
+        clearDraggedKeyframes,
+        isKeyframeDragging,
+        setDraggedKeyframes,
+    }), [clearDraggedKeyframes, isKeyframeDragging, setDraggedKeyframes]);
+    return (jsx_runtime_1.jsx(TimelineKeyframeDragStateContext.Provider, { value: value, children: children }));
+};
+exports.TimelineKeyframeDragStateProvider = TimelineKeyframeDragStateProvider;
+const useTimelineKeyframeDragState = () => {
+    return (0, react_1.useContext)(TimelineKeyframeDragStateContext);
+};
+exports.useTimelineKeyframeDragState = useTimelineKeyframeDragState;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TimelineKeyframeEasingLine: React.NamedExoticComponent<{
+    readonly fromFrame: number;
+    readonly toFrame: number;
+    readonly rowHeight: number;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly segmentIndex: number;
+}>;