@remotion/studio 4.0.468 → 4.0.470

package/dist/components/Timeline/Timeline.js

@@ -52,11 +52,13 @@ const SubscribeToNodePaths_1 = require("./SubscribeToNodePaths");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineDragHandler_1 = require("./TimelineDragHandler");
 const TimelineHeightContainer_1 = require("./TimelineHeightContainer");
+const TimelineInOutDragHandler_1 = require("./TimelineInOutDragHandler");
 const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
 const TimelineList_1 = require("./TimelineList");
 const TimelinePinchZoom_1 = require("./TimelinePinchZoom");
 const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
 const TimelineScrollable_1 = require("./TimelineScrollable");
+const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
@@ -70,6 +72,19 @@ const container = {
     backgroundColor: colors_1.BACKGROUND,
 };
 const noop = () => undefined;
+const TimelineClearSelectionArea = ({ children }) => {
+    const { clearSelection } = (0, TimelineSelection_1.useTimelineSelection)();
+    // Selection-triggering click handlers in children call e.stopPropagation(),
+    // so any pointerdown that bubbles up here is by definition on empty space
+    // and should clear the current selection.
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        clearSelection();
+    }, [clearSelection]);
+    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: onPointerDown, children: children }));
+};
 const TimelineInner = () => {
     var _a;
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
@@ -98,15 +113,15 @@ const TimelineInner = () => {
             : filtered;
     }, [filtered]);
     const hasBeenCut = filtered.length > shown.length;
-    return (jsx_runtime_1.jsxs("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [sequences.map((sequence) => {
+    return (jsx_runtime_1.jsxs(TimelineClearSelectionArea, { children: [sequences.map((sequence) => {
                 if (!sequence.controls || !previewConnected || !sequence.getStack()) {
                     return null;
                 }
                 return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
-            }), jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
+            }), jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}), jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown }), jsx_runtime_1.jsx(TimelineHeightContainer_1.TimelineHeightContainer, { shown: shown, hasBeenCut: hasBeenCut, children: isStill ? (jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown })) : (jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
                         jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
                                 jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
-                                            jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
+                                            jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
                                         ] }) })
                             ] })
                     ] })) })

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

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const TimelineDeleteKeybindings: React.FC;

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineDeleteKeybindings = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const use_keybinding_1 = require("../../helpers/use-keybinding");
+const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
+const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
+const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineDeleteKeybindings = () => {
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    (0, react_1.useEffect)(() => {
+        if (!canSelect || previewServerState.type !== 'connected') {
+            return;
+        }
+        const { clientId } = previewServerState;
+        const backspace = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'Backspace',
+            callback: () => {
+                const { selectedItems, clearSelection } = currentSelection.current;
+                if (selectedItems.length === 0) {
+                    return;
+                }
+                const deletePromise = (0, delete_selected_timeline_item_1.deleteSelectedTimelineItems)({
+                    selections: selectedItems,
+                    sequences,
+                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    setCodeValues,
+                    clientId,
+                });
+                if (deletePromise === null) {
+                    return;
+                }
+                clearSelection();
+                deletePromise.catch(() => undefined);
+            },
+            commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const duplicate = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'd',
+            callback: () => {
+                const { selectedItems } = currentSelection.current;
+                if (selectedItems.length === 0) {
+                    return;
+                }
+                const duplicatePromise = (0, duplicate_selected_timeline_item_1.duplicateSelectedTimelineItems)({
+                    selections: selectedItems,
+                });
+                if (duplicatePromise === null) {
+                    return;
+                }
+                duplicatePromise.catch(() => undefined);
+            },
+            commandCtrlKey: true,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => {
+            backspace.unregister();
+            duplicate.unregister();
+        };
+    }, [
+        canSelect,
+        currentSelection,
+        keybindings,
+        overrideIdToNodePathMappings,
+        previewServerState,
+        sequences,
+        setCodeValues,
+    ]);
+    return null;
+};
+exports.TimelineDeleteKeybindings = TimelineDeleteKeybindings;

package/dist/components/Timeline/TimelineDragHandler.js

@@ -38,21 +38,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
-const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const in_out_1 = require("../../state/in-out");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const z_index_1 = require("../../state/z-index");
-const ContextMenu_1 = require("../ContextMenu");
-const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const is_menu_item_1 = require("../Menu/is-menu-item");
-const TimelineInOutToggle_1 = require("../TimelineInOutToggle");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
-const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
-const TimelineInOutPointerHandle_1 = require("./TimelineInOutPointerHandle");
+const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSlider_1 = require("./TimelineSlider");
-const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const inner = {
     overflowY: 'auto',
     overflowX: 'hidden',
@@ -69,6 +63,7 @@ const style = {
     height: '100%',
     userSelect: 'none',
     WebkitUserSelect: 'none',
+    position: 'absolute',
 };
 const getClientXWithScroll = (x) => {
     var _a;
@@ -87,6 +82,7 @@ const TimelineDragHandler = () => {
         return {
             ...container,
             width: 100 * zoom + '%',
+            ...(TimelineSelection_1.TIMELINE_TOP_DRAG ? { height: TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT } : {}),
         };
     }, [canvasContent, zoomMap]);
     if (!canvasContent || canvasContent.type !== 'composition') {
@@ -105,20 +101,8 @@ const TimelineDragHandlerInner = () => {
     });
     const { isHighestContext } = (0, z_index_1.useZIndex)();
     const setFrame = remotion_1.Internals.useTimelineSetFrame();
-    const [inOutDragging, setInOutDragging] = (0, react_1.useState)({
-        dragging: false,
-    });
-    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
-    const get = (0, react_1.useCallback)((frame) => {
-        if (timelineWidth === null) {
-            throw new Error('timeline width is not yet determined');
-        }
-        return (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, timelineWidth);
-    }, [timelineWidth, videoConfig.durationInFrames]);
     const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
     const left = (_c = size === null || size === void 0 ? void 0 : size.left) !== null && _c !== void 0 ? _c : 0;
-    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
-    const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const [dragging, setDragging] = (0, react_1.useState)({
         dragging: false,
     });
@@ -143,37 +127,6 @@ const TimelineDragHandlerInner = () => {
         }
         document.body.style.userSelect = 'none';
         document.body.style.webkitUserSelect = 'none';
-        if (e.target === TimelineInOutPointerHandle_1.inPointerHandle.current) {
-            if (inFrame === null) {
-                throw new Error('expected outframe');
-            }
-            const inMarker = get(inFrame);
-            const outMarker = outFrame === null ? Infinity : get(outFrame - 1);
-            (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
-            setInOutDragging({
-                dragging: 'in',
-                initialOffset: getClientXWithScroll(e.clientX),
-                boundaries: [-Infinity, outMarker - inMarker],
-            });
-            return;
-        }
-        if (e.target === TimelineInOutPointerHandle_1.outPointerHandle.current) {
-            if (outFrame === null) {
-                throw new Error('expected outframe');
-            }
-            const outMarker = get(outFrame);
-            const inMarker = inFrame === null ? -Infinity : get(inFrame + 1);
-            (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
-            setInOutDragging({
-                dragging: 'out',
-                initialOffset: getClientXWithScroll(e.clientX),
-                boundaries: [inMarker - outMarker, Infinity],
-            });
-            return;
-        }
-        if (e.button !== 0) {
-            return;
-        }
         const frame = (0, timeline_scroll_logic_1.getFrameFromX)({
             clientX: getClientXWithScroll(e.clientX) - left,
             durationInFrames: videoConfig.durationInFrames,
@@ -186,18 +139,7 @@ const TimelineDragHandlerInner = () => {
             wasPlaying: playing,
         });
         pause();
-    }, [
-        isHighestContext,
-        videoConfig,
-        left,
-        width,
-        seek,
-        playing,
-        pause,
-        inFrame,
-        get,
-        outFrame,
-    ]);
+    }, [isHighestContext, videoConfig, left, width, seek, playing, pause]);
     const onPointerMoveScrubbing = (0, react_1.useCallback)((e) => {
         var _a;
         if (!videoConfig) {
@@ -277,45 +219,6 @@ const TimelineDragHandlerInner = () => {
             seek(frame);
         }
     }, [videoConfig, dragging.dragging, left, width, seek]);
-    const onPointerMoveInOut = (0, react_1.useCallback)((e) => {
-        if (!videoConfig) {
-            return;
-        }
-        if (!inOutDragging.dragging) {
-            return;
-        }
-        const offset = Math.max(inOutDragging.boundaries[0], Math.min(inOutDragging.boundaries[1], getClientXWithScroll(e.clientX) - inOutDragging.initialOffset));
-        if (inOutDragging.dragging === 'in') {
-            if (!TimelineInOutPointerHandle_1.inPointerHandle.current) {
-                throw new Error('in pointer handle');
-            }
-            if (!TimelineInOutPointer_1.inMarkerAreaRef.current) {
-                throw new Error('expected inMarkerAreaRef');
-            }
-            if (!inFrame) {
-                throw new Error('expected inframes');
-            }
-            TimelineInOutPointerHandle_1.inPointerHandle.current.style.transform = `translateX(${get(inFrame) + offset}px)`;
-            TimelineInOutPointer_1.inMarkerAreaRef.current.style.width =
-                String(get(inFrame) + offset) + 'px';
-        }
-        if (inOutDragging.dragging === 'out') {
-            if (!TimelineInOutPointerHandle_1.outPointerHandle.current) {
-                throw new Error('in pointer handle');
-            }
-            if (!TimelineInOutPointer_1.outMarkerAreaRef.current) {
-                throw new Error('in outMarkerAreaRef');
-            }
-            if (!outFrame) {
-                throw new Error('expected outframes');
-            }
-            TimelineInOutPointerHandle_1.outPointerHandle.current.style.transform = `translateX(${get(outFrame) + offset}px)`;
-            TimelineInOutPointer_1.outMarkerAreaRef.current.style.left =
-                String(get(outFrame) + offset) + 'px';
-            TimelineInOutPointer_1.outMarkerAreaRef.current.style.width =
-                String(width - get(outFrame) - offset) + 'px';
-        }
-    }, [get, inFrame, inOutDragging, outFrame, videoConfig, width]);
     const onPointerUpScrubbing = (0, react_1.useCallback)((e) => {
         stopInterval();
         document.body.style.userSelect = '';
@@ -344,84 +247,6 @@ const TimelineDragHandlerInner = () => {
             play();
         }
     }, [dragging, left, play, videoConfig, setFrame, width]);
-    const onPointerUpInOut = (0, react_1.useCallback)((e) => {
-        document.body.style.userSelect = '';
-        document.body.style.webkitUserSelect = '';
-        (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-        if (!videoConfig) {
-            return;
-        }
-        if (!inOutDragging.dragging) {
-            return;
-        }
-        setInOutDragging({
-            dragging: false,
-        });
-        const frame = (0, timeline_scroll_logic_1.getFrameFromX)({
-            clientX: getClientXWithScroll(e.clientX) - left,
-            durationInFrames: videoConfig.durationInFrames,
-            width,
-            extrapolate: 'extend',
-        });
-        if (inOutDragging.dragging === 'in') {
-            if (frame < 1) {
-                return setInAndOutFrames((prev) => {
-                    var _a;
-                    return ({
-                        ...prev,
-                        [videoConfig.id]: {
-                            ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
-                            inFrame: null,
-                        },
-                    });
-                });
-            }
-            const maxFrame = outFrame === null ? Infinity : outFrame - 1;
-            setInAndOutFrames((prev) => {
-                var _a;
-                return ({
-                    ...prev,
-                    [videoConfig.id]: {
-                        ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
-                        inFrame: Math.min(maxFrame, frame),
-                    },
-                });
-            });
-        }
-        else {
-            if (frame > videoConfig.durationInFrames - 2) {
-                return setInAndOutFrames((prev) => {
-                    var _a;
-                    return ({
-                        ...prev,
-                        [videoConfig.id]: {
-                            ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
-                            outFrame: null,
-                        },
-                    });
-                });
-            }
-            const minFrame = inFrame === null ? -Infinity : inFrame + 1;
-            setInAndOutFrames((prev) => {
-                var _a;
-                return ({
-                    ...prev,
-                    [videoConfig.id]: {
-                        ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
-                        outFrame: Math.max(minFrame, frame),
-                    },
-                });
-            });
-        }
-    }, [
-        inFrame,
-        inOutDragging.dragging,
-        left,
-        outFrame,
-        setInAndOutFrames,
-        videoConfig,
-        width,
-    ]);
     (0, react_1.useEffect)(() => {
         if (!dragging.dragging) {
             return;
@@ -433,74 +258,24 @@ const TimelineDragHandlerInner = () => {
             window.removeEventListener('pointerup', onPointerUpScrubbing);
         };
     }, [dragging.dragging, onPointerMoveScrubbing, onPointerUpScrubbing]);
+    const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        if (inOutDragging.dragging === false) {
+        const currentRef = ref.current;
+        if (!currentRef) {
             return;
         }
-        window.addEventListener('pointermove', onPointerMoveInOut);
-        window.addEventListener('pointerup', onPointerUpInOut);
+        const { current } = timeline_refs_1.timelineVerticalScroll;
+        if (!current) {
+            return;
+        }
+        const onScroll = () => {
+            currentRef.style.top = current.scrollTop + 'px';
+        };
+        current.addEventListener('scroll', onScroll);
         return () => {
-            window.removeEventListener('pointermove', onPointerMoveInOut);
-            window.removeEventListener('pointerup', onPointerUpInOut);
+            current.removeEventListener('scroll', onScroll);
         };
-    }, [inOutDragging.dragging, onPointerMoveInOut, onPointerUpInOut]);
-    const inContextMenu = (0, react_1.useMemo)(() => {
-        return [
-            {
-                id: 'hide-in',
-                keyHint: null,
-                label: 'Clear In marker',
-                leftItem: null,
-                onClick: (_, e) => {
-                    e === null || e === void 0 ? void 0 : e.stopPropagation();
-                    e === null || e === void 0 ? void 0 : e.preventDefault();
-                    setInAndOutFrames((prev) => {
-                        var _a;
-                        return ({
-                            ...prev,
-                            [videoConfig.id]: {
-                                ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
-                                inFrame: null,
-                            },
-                        });
-                    });
-                },
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'hide-in',
-            },
-        ];
-    }, [setInAndOutFrames, videoConfig.id]);
-    const outContextMenu = (0, react_1.useMemo)(() => {
-        return [
-            {
-                id: 'hide-out',
-                keyHint: null,
-                label: 'Clear Out marker',
-                leftItem: null,
-                onClick: (_, e) => {
-                    e === null || e === void 0 ? void 0 : e.stopPropagation();
-                    e === null || e === void 0 ? void 0 : e.preventDefault();
-                    setInAndOutFrames((prev) => {
-                        var _a;
-                        return ({
-                            ...prev,
-                            [videoConfig.id]: {
-                                ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : TimelineInOutToggle_1.defaultInOutValue),
-                                outFrame: null,
-                            },
-                        });
-                    });
-                },
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'hide-out',
-            },
-        ];
-    }, [setInAndOutFrames, videoConfig.id]);
-    return (jsx_runtime_1.jsxs("div", { style: style, onPointerDown: onPointerDown, children: [
-            jsx_runtime_1.jsx("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }), inFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: inContextMenu, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "in", atFrame: inFrame, dragging: inOutDragging.dragging === 'in' }) })), outFrame !== null && (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: outContextMenu, children: jsx_runtime_1.jsx(TimelineInOutPointerHandle_1.TimelineInOutPointerHandle, { type: "out", dragging: inOutDragging.dragging === 'out', atFrame: outFrame }) }))] }));
+    }, []);
+    return (jsx_runtime_1.jsx("div", { ref: ref, style: style, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("div", { style: inner, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME }) }));
 };
 const TimelineDragHandlerInnerMemo = react_1.default.memo(TimelineDragHandlerInner);

package/dist/components/Timeline/{TimelineEffectGroupRow.d.ts → TimelineEffectItem.d.ts}

@@ -3,7 +3,7 @@ import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { GetIsExpanded } from '../ExpandedTracksProvider';
-export declare const TimelineEffectGroupRow: React.FC<{
+export declare const TimelineEffectItem: React.FC<{
     readonly label: string;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly effectIndex: number;

package/dist/components/Timeline/{TimelineEffectGroupRow.js → TimelineEffectItem.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineEffectGroupRow = void 0;
+exports.TimelineEffectItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -13,19 +13,20 @@ const save_effect_prop_1 = require("./save-effect-prop");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
+const TimelineSelection_1 = require("./TimelineSelection");
 const rowLabel = {
     fontSize: 12,
     color: 'rgba(255, 255, 255, 0.8)',
     userSelect: 'none',
 };
-const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema, documentationLink, nodePath, validatedLocation, rowDepth, getIsExpanded, toggleTrack, }) => {
+const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, documentationLink, nodePath, validatedLocation, rowDepth, getIsExpanded, toggleTrack, }) => {
     var _a;
     var _b;
-    const [labelHovered, setLabelHovered] = (0, react_1.useState)(false);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectCodeValuesCtx({
         codeValues,
         nodePath,
@@ -49,11 +50,14 @@ const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema
             return;
         }
         try {
-            const result = await (0, call_api_1.callApi)('/api/delete-effect', {
-                fileName: validatedLocation.source,
-                sequenceNodePath: nodePath,
-                effectIndex,
-            });
+            const result = await (0, call_api_1.callApi)('/api/delete-effect', [
+                {
+                    type: 'single-effect',
+                    fileName: validatedLocation.source,
+                    sequenceNodePath: nodePath,
+                    effectIndex,
+                },
+            ]);
             if (result.success) {
                 (0, NotificationCenter_1.showNotification)('Removed effect from source file', 2000);
             }
@@ -69,26 +73,51 @@ const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema
         if (!previewConnected) {
             return [];
         }
-        return [
-            {
+        const items = [];
+        if (documentationLink) {
+            items.push({
                 type: 'item',
-                id: 'delete-effect',
+                id: 'open-effect-docs',
                 keyHint: null,
-                label: 'Delete',
+                label: 'Open effect docs',
                 leftItem: null,
-                disabled: deleteDisabled,
+                disabled: false,
                 onClick: () => {
-                    if (deleteDisabled) {
-                        return;
-                    }
-                    onDeleteEffectFromSource();
+                    window.open(documentationLink, '_blank', 'noopener,noreferrer');
                 },
                 quickSwitcherLabel: null,
                 subMenu: null,
-                value: 'delete-effect',
+                value: 'open-effect-docs',
+            });
+            items.push({
+                type: 'divider',
+                id: 'open-effect-docs-divider',
+            });
+        }
+        items.push({
+            type: 'item',
+            id: 'delete-effect',
+            keyHint: null,
+            label: 'Delete',
+            leftItem: null,
+            disabled: deleteDisabled,
+            onClick: () => {
+                if (deleteDisabled) {
+                    return;
+                }
+                onDeleteEffectFromSource();
             },
-        ];
-    }, [deleteDisabled, onDeleteEffectFromSource, previewConnected]);
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'delete-effect',
+        });
+        return items;
+    }, [
+        deleteDisabled,
+        documentationLink,
+        onDeleteEffectFromSource,
+        previewConnected,
+    ]);
     const onToggle = (0, react_1.useCallback)((type) => {
         if (!canToggle || previewServerState.type !== 'connected') {
             return;
@@ -121,24 +150,21 @@ const TimelineEffectGroupRow = ({ label, nodePathInfo, effectIndex, effectSchema
     const isExpanded = getIsExpanded(nodePathInfo);
     const rowStyle = (0, react_1.useMemo)(() => ({
         height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
-        paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
     }), []);
     const labelStyle = (0, react_1.useMemo)(() => {
-        const hoverEffect = labelHovered && documentationLink !== null;
         return {
             ...rowLabel,
-            textDecoration: hoverEffect ? 'underline' : 'none',
-            textUnderlineOffset: 2,
-            cursor: hoverEffect ? 'pointer' : undefined,
+            ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selection.selected, true),
+            alignSelf: 'stretch',
+            alignItems: 'center',
+            color: (0, TimelineSelection_1.getTimelineColor)(selection.selected, true),
+            display: 'flex',
+            flex: 1,
+            minWidth: 0,
+            paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
         };
-    }, [documentationLink, labelHovered]);
-    const onClickLabel = (0, react_1.useCallback)(() => {
-        if (documentationLink === null) {
-            return;
-        }
-        window.open(documentationLink, '_blank', 'noopener,noreferrer');
-    }, [documentationLink]);
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, children: jsx_runtime_1.jsx("span", { onPointerEnter: () => setLabelHovered(true), onPointerLeave: () => setLabelHovered(false), onClick: onClickLabel, title: documentationLink ? `Open documentation: ${documentationLink}` : label, style: labelStyle, children: label }) }));
-    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: row })) : (row);
+    }, [selection.selected]);
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
+    return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row })) : (row);
 };
-exports.TimelineEffectGroupRow = TimelineEffectGroupRow;
+exports.TimelineEffectItem = TimelineEffectItem;

package/dist/components/Timeline/{TimelineEffectFieldRow.d.ts → TimelineEffectPropItem.d.ts}

@@ -1,10 +1,13 @@
 import React from 'react';
 import type { SequencePropsSubscriptionKey } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { EffectSchemaFieldInfo } from '../../helpers/timeline-layout';
-export declare const TimelineEffectFieldRow: React.FC<{
+export declare const TimelineEffectPropItem: React.FC<{
     readonly field: EffectSchemaFieldInfo;
     readonly validatedLocation: CodePosition;
     readonly rowDepth: number;
     readonly nodePath: SequencePropsSubscriptionKey;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly keyframeDisplayOffset: number;
 }>;