@remotion/studio 4.0.469 → 4.0.471

package/dist/components/Timeline/Timeline.js

@@ -41,7 +41,11 @@ const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
+const call_api_1 = require("../call-api");
+const ContextMenu_1 = require("../ContextMenu");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const SplitterContainer_1 = require("../Splitter/SplitterContainer");
 const SplitterElement_1 = require("../Splitter/SplitterElement");
 const SplitterHandle_1 = require("../Splitter/SplitterHandle");
@@ -52,6 +56,7 @@ 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");
@@ -62,6 +67,7 @@ const TimelineSlider_1 = require("./TimelineSlider");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const TimelineTracks_1 = require("./TimelineTracks");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const use_resolved_stack_1 = require("./use-resolved-stack");
 const container = {
     minHeight: '100%',
     flex: 1,
@@ -71,6 +77,89 @@ const container = {
     backgroundColor: colors_1.BACKGROUND,
 };
 const noop = () => undefined;
+const TimelineClearSelectionArea = ({ children }) => {
+    var _a, _b;
+    const { clearSelection } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
+    const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
+    const currentComposition = (0, react_1.useMemo)(() => {
+        var _a;
+        if (currentCompositionId === null) {
+            return null;
+        }
+        return ((_a = compositions.find((composition) => composition.id === currentCompositionId)) !== null && _a !== void 0 ? _a : null);
+    }, [compositions, currentCompositionId]);
+    const resolvedCompositionLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _a !== void 0 ? _a : null);
+    const compositionFile = (_b = resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source) !== null && _b !== void 0 ? _b : null;
+    const compositionComponentInfo = (0, open_in_editor_1.useCachedCompositionComponentInfo)({
+        compositionFile,
+        compositionId: currentCompositionId,
+    });
+    // Selection-triggering click handlers in children call e.stopPropagation(),
+    // so any pointerdown that bubbles up here is by definition on empty space
+    // and should clear the current selection.
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        clearSelection();
+    }, [clearSelection]);
+    const canInsertSolid = (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
+        currentCompositionId !== null &&
+        compositionFile !== null &&
+        videoConfig !== null &&
+        !isAddingSolid;
+    const insertSolid = (0, react_1.useCallback)(async () => {
+        if (!canInsertSolid ||
+            currentCompositionId === null ||
+            compositionFile === null ||
+            videoConfig === null) {
+            return;
+        }
+        setIsAddingSolid(true);
+        try {
+            const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
+                compositionFile,
+                compositionId: currentCompositionId,
+                element: {
+                    type: 'solid',
+                    width: videoConfig.width,
+                    height: videoConfig.height,
+                },
+            });
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)('Added <Solid> to source file', 2000);
+                return;
+            }
+            (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+        finally {
+            setIsAddingSolid(false);
+        }
+    }, [canInsertSolid, compositionFile, currentCompositionId, videoConfig]);
+    const contextMenuItems = (0, react_1.useMemo)(() => {
+        return [
+            {
+                type: 'item',
+                id: 'insert-solid',
+                label: 'Add <Solid>',
+                value: 'insert-solid',
+                onClick: insertSolid,
+                keyHint: null,
+                leftItem: null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+                disabled: !canInsertSolid,
+            },
+        ];
+    }, [insertSolid, canInsertSolid]);
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { ref: timeline_refs_1.timelineVerticalScroll, values: contextMenuItems, onOpen: null, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: onPointerDown, children: children }));
+};
 const TimelineInner = () => {
     var _a;
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
@@ -99,18 +188,18 @@ const TimelineInner = () => {
             : filtered;
     }, [filtered]);
     const hasBeenCut = filtered.length > shown.length;
-    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectionProvider, { 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(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, {})
-                                            ] }) })
-                                ] })
-                        ] })) })
-            ] }) }));
+    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(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(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, {})
+                                        ] }) })
+                            ] })
+                    ] })) })
+        ] }));
 };
 exports.Timeline = react_1.default.memo(TimelineInner);

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,101 @@
+"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 reset_selected_timeline_props_1 = require("./reset-selected-timeline-props");
+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 { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    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 resetPromise = (0, reset_selected_timeline_props_1.resetSelectedTimelineProps)({
+                    selections: selectedItems,
+                    sequences,
+                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    codeValues,
+                    setCodeValues,
+                    clientId,
+                });
+                if (resetPromise !== null) {
+                    resetPromise.catch(() => undefined);
+                    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,
+        codeValues,
+        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,
     });
@@ -141,39 +125,9 @@ const TimelineDragHandlerInner = () => {
         if (!videoConfig) {
             return;
         }
+        e.stopPropagation();
         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 +140,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 +220,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 +248,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 +259,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, onOpen: null, 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, onOpen: null, 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;