@remotion/studio 4.0.502 → 4.0.503

package/dist/components/RenderQueue/RenderQueueRepeat.js

@@ -44,6 +44,6 @@ const RenderQueueRepeatItem = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H464c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0L386.3 160z" }) }));
     }, [icon]);
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, renderAction: renderAction });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, renderAction: renderAction, variant: null }));
 };
 exports.RenderQueueRepeatItem = RenderQueueRepeatItem;

package/dist/components/SelectedOutlineCropControls.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
+const pointer_session_1 = require("../helpers/pointer-session");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const selected_outline_drag_1 = require("./selected-outline-drag");
@@ -232,9 +233,6 @@ const CropHandle = ({ handle, outline, onDraggingChange, target }) => {
             }
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             if (dragStarted) {
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 onDraggingChange(false);
@@ -270,9 +268,12 @@ const CropHandle = ({ handle, outline, onDraggingChange, target }) => {
                 clearDragOverrides(cropDrag.nodePath);
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
     }, [
         clearDragOverrides,
         cropDrag,

package/dist/components/SelectedOutlineElement.js

@@ -45,6 +45,7 @@ const get_connected_compositions_1 = require("../helpers/get-connected-compositi
 const get_sequence_double_click_action_1 = require("../helpers/get-sequence-double-click-action");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const open_in_editor_1 = require("../helpers/open-in-editor");
+const pointer_session_1 = require("../helpers/pointer-session");
 const editor_snapping_1 = require("../state/editor-snapping");
 const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
@@ -227,9 +228,6 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
             updateFromPointerPosition();
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
             (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
@@ -272,9 +270,12 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
                 clearDragOverrides(transformOriginDrag.nodePath);
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
         window.addEventListener('keydown', onKeyChange);
         window.addEventListener('keyup', onKeyChange);
     }, [
@@ -437,9 +438,6 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
             updateDragOverrides();
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
             if (dragStarted) {
@@ -486,9 +484,12 @@ const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuVa
                 (0, selected_outline_drag_1.clearSelectedOutlineDragOverrides)({ clearDragOverrides, dragStates });
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
         window.addEventListener('keydown', onKeyChange);
         window.addEventListener('keyup', onKeyChange);
     }, [
@@ -648,9 +649,6 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
             }
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             if (dragStarted) {
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 onDraggingChange(false);
@@ -701,9 +699,12 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
                 });
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
     }, [
         allScaleDragTargets,
         clearDragOverrides,
@@ -864,9 +865,6 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
             }
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
             if (dragStarted) {
@@ -919,9 +917,12 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
                 });
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
         window.addEventListener('keydown', onKeyChange);
         window.addEventListener('keyup', onKeyChange);
     }, [
@@ -1003,7 +1004,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
             if (originalLocation === null) {
                 return;
             }
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation);
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, null);
         };
         openTargetInEditor().catch((err) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
@@ -1050,6 +1051,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
             deleteDisabled: sourceEditDisabled,
             disableInteractivityDisabled,
             duplicateDisabled: sourceEditDisabled,
+            editorInfo: null,
             fileLocation,
             includeSourceEditItems: sourceEditingEnabled,
             onDeleteSequenceFromSource: async () => {
@@ -1107,7 +1109,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
                 if (!originalLocation) {
                     return;
                 }
-                (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation).catch((err) => {
+                (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, null).catch((err) => {
                     (0, NotificationCenter_1.showNotification)(err.message, 2000);
                 });
             },

package/dist/components/SelectedOutlineUvControls.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
+const pointer_session_1 = require("../helpers/pointer-session");
 const editor_snapping_1 = require("../state/editor-snapping");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const selected_outline_drag_1 = require("./selected-outline-drag");
@@ -217,9 +218,6 @@ const SelectedUvEllipseStartHandle = ({ control, onDraggingChange, outline }) =>
             updateFromPointerEvent(moveEvent);
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             if (dragging) {
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 onDraggingChange(false);
@@ -236,9 +234,12 @@ const SelectedUvEllipseStartHandle = ({ control, onDraggingChange, outline }) =>
                 sourceFrame: control.handle.sourceFrame,
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
     }, [
         clearEffectDragOverrides,
         control.handle,
@@ -317,9 +318,6 @@ const SelectedUvEllipseResizeHandle = ({ axis, control, onDraggingChange, outlin
             updateFromPointerEvent(moveEvent);
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             if (dragging) {
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 onDraggingChange(false);
@@ -336,9 +334,12 @@ const SelectedUvEllipseResizeHandle = ({ axis, control, onDraggingChange, outlin
                 sourceFrame: control.handle.sourceFrame,
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
     }, [
         axis,
         clearEffectDragOverrides,
@@ -470,9 +471,6 @@ const SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
             }
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
             if (dragging) {
@@ -491,9 +489,12 @@ const SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
                 sourceFrame: control.handle.sourceFrame,
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
         window.addEventListener('keydown', onKeyChange);
         window.addEventListener('keyup', onKeyChange);
     }, [
@@ -595,9 +596,6 @@ const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSele
             updateDragFromPointerEvent(moveEvent);
         };
         const onPointerUp = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerUp);
             if (dragging) {
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 onDraggingChange(false);
@@ -645,9 +643,12 @@ const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSele
                 clearEffectDragOverrides(handle.nodePath, handle.effectIndex);
             });
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerUp);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
     }, [
         clearEffectDragOverrides,
         editorSnapping,

package/dist/components/ShowGuidesProvider.js

@@ -7,6 +7,7 @@ const editor_guides_1 = require("../state/editor-guides");
 const ShowGuidesProvider = ({ children }) => {
     const [guidesList, setGuidesList] = (0, react_1.useState)(() => (0, editor_guides_1.loadGuidesList)());
     const [draggingGuideId, setDraggingGuideId] = (0, react_1.useState)(null);
+    const moveGuidePointerRef = (0, react_1.useRef)(null);
     const [hoveredGuideId, setHoveredGuideId] = (0, react_1.useState)(null);
     const [editorShowGuides, setEditorShowGuidesState] = (0, react_1.useState)(() => (0, editor_guides_1.loadEditorShowGuidesOption)());
     const shouldCreateGuideRef = (0, react_1.useRef)(false);
@@ -25,6 +26,7 @@ const ShowGuidesProvider = ({ children }) => {
             guidesList,
             setGuidesList,
             draggingGuideId,
+            moveGuidePointerRef,
             setDraggingGuideId,
             shouldCreateGuideRef,
             shouldDeleteGuideRef,

package/dist/components/SidebarCollapserControls.js

@@ -139,8 +139,8 @@ const SidebarCollapserControl = ({ side }) => {
         return (jsx_runtime_1.jsx("div", { "data-sidebar-toggle": "right", style: colorStyle(color), title: toggleRightTooltip, children: jsx_runtime_1.jsx("div", { style: rightIcon(color) }) }));
     }, [colorStyle, rightIcon, toggleRightTooltip]);
     if (side === 'left') {
-        return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleLeft, renderAction: toggleLeftAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
+        return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleLeft, renderAction: toggleLeftAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
     }
-    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: toggleRight, renderAction: toggleRightAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: toggleRight, renderAction: toggleRightAction, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.SidebarCollapserControl = SidebarCollapserControl;

package/dist/components/SidebarRenderButton.js

@@ -101,6 +101,6 @@ const SidebarRenderButton = ({ composition, visible }) => {
     if (!visible || connectionStatus !== 'connected') {
         return null;
     }
-    return jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick });
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, variant: null }));
 };
 exports.SidebarRenderButton = SidebarRenderButton;

package/dist/components/Splitter/SplitterHandle.js

@@ -4,6 +4,7 @@ exports.SplitterHandle = exports.SPLITTER_HANDLE_SIZE = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const SplitterContext_1 = require("./SplitterContext");
 exports.SPLITTER_HANDLE_SIZE = 3;
@@ -28,7 +29,6 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
         if (!current) {
             return;
         }
-        // Cleanup for the listeners that only exist for the duration of a drag.
         let endDrag = null;
         const onPointerDown = (e) => {
             var _a;
@@ -60,7 +60,6 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             const startFlex = Math.min(maxFlex, Math.max(minFlex, dragContext.flexValue));
             dragContext.isDragging.current = start;
             (0, ForceSpecificCursor_1.forceSpecificCursor)(dragContext.orientation === 'horizontal' ? 'row-resize' : 'col-resize');
-            current.classList.add('remotion-splitter-active');
             const getNewValue = (ev, clamp) => {
                 if (!dragContext.ref.current) {
                     throw new Error('domRect is not mounted');
@@ -75,17 +74,6 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                 }
                 return newFlex;
             };
-            endDrag = () => {
-                dragContext.isDragging.current = false;
-                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-                current.classList.remove('remotion-splitter-active');
-                window.removeEventListener('pointermove', onPointerMove);
-                window.removeEventListener('pointerup', onPointerUp);
-                window.removeEventListener('pointercancel', onPointerCancel);
-                window.removeEventListener('blur', onWindowBlur);
-                endDrag = null;
-                player_1.PlayerInternals.updateAllElementsSizes();
-            };
             const onPointerMove = (ev) => {
                 if (!dragContext.isDragging.current) {
                     return;
@@ -107,23 +95,22 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                     }
                 }
             };
-            const onPointerUp = (ev) => {
-                if (!dragContext.isDragging.current) {
-                    return;
-                }
-                dragContext.persistFlex(getNewValue(ev, true));
-                endDrag === null || endDrag === void 0 ? void 0 : endDrag();
-            };
-            const onPointerCancel = () => {
-                endDrag === null || endDrag === void 0 ? void 0 : endDrag();
-            };
-            const onWindowBlur = () => {
-                endDrag === null || endDrag === void 0 ? void 0 : endDrag();
-            };
-            window.addEventListener('pointermove', onPointerMove);
-            window.addEventListener('pointerup', onPointerUp);
-            window.addEventListener('pointercancel', onPointerCancel);
-            window.addEventListener('blur', onWindowBlur);
+            endDrag = (0, pointer_session_1.startPointerSession)({
+                event: e,
+                target: current,
+                onMove: onPointerMove,
+                onEnd: (reason, endEvent) => {
+                    if ((reason === 'pointerup' || reason === 'buttons-released') &&
+                        endEvent &&
+                        dragContext.isDragging.current) {
+                        dragContext.persistFlex(getNewValue(endEvent, true));
+                    }
+                    dragContext.isDragging.current = false;
+                    (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                    endDrag = null;
+                    player_1.PlayerInternals.updateAllElementsSizes();
+                },
+            });
         };
         current.addEventListener('pointerdown', onPointerDown);
         return () => {
@@ -131,44 +118,6 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             endDrag === null || endDrag === void 0 ? void 0 : endDrag();
         };
     }, []);
-    (0, react_1.useEffect)(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        let isMouseDown = false;
-        const onMouseDown = () => {
-            isMouseDown = true;
-        };
-        const onMouseUp = () => {
-            isMouseDown = false;
-        };
-        const onMouseEnter = (e) => {
-            if (e.button !== 0) {
-                return;
-            }
-            if (isMouseDown) {
-                return;
-            }
-            current.classList.add('remotion-splitter-hover');
-        };
-        const onMouseLeave = (e) => {
-            if (e.button !== 0) {
-                return;
-            }
-            current.classList.remove('remotion-splitter-hover');
-        };
-        current.addEventListener('mouseenter', onMouseEnter);
-        current.addEventListener('mouseleave', onMouseLeave);
-        window.addEventListener('mousedown', onMouseDown);
-        window.addEventListener('mouseup', onMouseUp);
-        return () => {
-            current.removeEventListener('mouseenter', onMouseEnter);
-            current.removeEventListener('mouseleave', onMouseLeave);
-            window.removeEventListener('mousedown', onMouseDown);
-            window.removeEventListener('mouseup', onMouseUp);
-        };
-    }, []);
     return (jsx_runtime_1.jsx("div", { ref: ref, className: [
             'remotion-splitter',
             context.orientation === 'horizontal'

package/dist/components/Timeline/EasingEditorModal.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const Checkbox_1 = require("../Checkbox");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const InputDragger_1 = require("../NewComposition/InputDragger");
@@ -642,33 +643,40 @@ const EasingEditor = ({ state, renderHeader }) => {
         }
         setBezierAndPreview(next);
     }, [getValueFromPointer, setBezierAndPreview]);
-    (0, react_1.useEffect)(() => {
-        if (activeHandle === null) {
-            return;
-        }
-        const onPointerMove = (event) => {
-            updateHandleFromPointer(activeHandle, event);
-        };
-        const onPointerUp = () => {
-            commitEasing(serializeBezier(bezierRef.current), liveOverrideVersionRef.current);
-            setActiveHandle(null);
-        };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp, { once: true });
-        return () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-        };
-    }, [activeHandle, commitEasing, updateHandleFromPointer]);
     const onHandlePointerDown = (0, react_1.useCallback)((handle, event) => {
         if (previewServerState.type !== 'connected') {
             return;
         }
         event.preventDefault();
         event.stopPropagation();
+        const bezierBeforeDrag = [...bezierRef.current];
         setActiveHandle(handle);
         updateHandleFromPointer(handle, event);
-    }, [previewServerState.type, updateHandleFromPointer]);
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: (moveEvent) => {
+                updateHandleFromPointer(handle, moveEvent);
+            },
+            onEnd: (reason) => {
+                if (reason === 'pointerup' || reason === 'buttons-released') {
+                    commitEasing(serializeBezier(bezierRef.current), liveOverrideVersionRef.current);
+                }
+                else {
+                    clearEasingDragOverrides(pendingOverrideTargetsRef.current);
+                    pendingOverrideTargetsRef.current = [];
+                    bezierRef.current = bezierBeforeDrag;
+                    setBezier(bezierBeforeDrag);
+                }
+                setActiveHandle(null);
+            },
+        });
+    }, [
+        clearEasingDragOverrides,
+        commitEasing,
+        previewServerState.type,
+        updateHandleFromPointer,
+    ]);
     (0, react_1.useEffect)(() => {
         return () => {
             clearEasingDragOverrides(pendingOverrideTargetsRef.current);

package/dist/components/Timeline/TimelineAssetField.js

@@ -96,7 +96,7 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
             compositionSelection: null,
         });
     }, [initialQuery, onSelect, selectFile, setSelectedModal]);
-    const action = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openAssetSelection, disabled: window.remotion_isReadOnlyStudio, title: "Change source", renderAction: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }) }));
+    const action = (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openAssetSelection, disabled: window.remotion_isReadOnlyStudio, title: "Change source", renderAction: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }) }));
     if (inlineSourceAction === null) {
         return action;
     }

package/dist/components/Timeline/TimelineDragHandler.js

@@ -39,6 +39,7 @@ const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_zoom_1 = require("../../state/timeline-zoom");
 const z_index_1 = require("../../state/z-index");
@@ -116,6 +117,7 @@ const TimelineDragHandlerInner = () => {
         }
     };
     const onPointerDown = (0, react_1.useCallback)((e) => {
+        var _a, _b;
         if (e.button !== 0) {
             return;
         }
@@ -139,7 +141,11 @@ const TimelineDragHandlerInner = () => {
         setDragging({
             dragging: true,
             wasPlaying: playing,
+            button: e.button,
+            pointerId: e.pointerId,
+            target: e.currentTarget,
         });
+        (_b = (_a = e.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
         pause();
     }, [isHighestContext, videoConfig, left, width, seek, playing, pause]);
     const onPointerMoveScrubbing = (0, react_1.useCallback)((e) => {
@@ -249,17 +255,42 @@ const TimelineDragHandlerInner = () => {
             play();
         }
     }, [dragging, left, play, videoConfig, setFrame, width]);
+    const onPointerCancelScrubbing = (0, react_1.useCallback)(() => {
+        stopInterval();
+        document.body.style.userSelect = '';
+        document.body.style.webkitUserSelect = '';
+        if (!dragging.dragging) {
+            return;
+        }
+        setDragging({ dragging: false });
+        if (dragging.wasPlaying) {
+            play();
+        }
+    }, [dragging, play]);
     (0, react_1.useEffect)(() => {
         if (!dragging.dragging) {
             return;
         }
-        window.addEventListener('pointermove', onPointerMoveScrubbing);
-        window.addEventListener('pointerup', onPointerUpScrubbing);
-        return () => {
-            window.removeEventListener('pointermove', onPointerMoveScrubbing);
-            window.removeEventListener('pointerup', onPointerUpScrubbing);
-        };
-    }, [dragging.dragging, onPointerMoveScrubbing, onPointerUpScrubbing]);
+        return (0, pointer_session_1.startPointerSession)({
+            event: dragging,
+            target: dragging.target,
+            onMove: onPointerMoveScrubbing,
+            onEnd: (reason, endEvent) => {
+                if ((reason === 'pointerup' || reason === 'buttons-released') &&
+                    endEvent) {
+                    onPointerUpScrubbing(endEvent);
+                }
+                else {
+                    onPointerCancelScrubbing();
+                }
+            },
+        });
+    }, [
+        dragging,
+        onPointerCancelScrubbing,
+        onPointerMoveScrubbing,
+        onPointerUpScrubbing,
+    ]);
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const currentRef = ref.current;