@remotion/studio 4.0.502 → 4.0.504

package/dist/components/Splitter/SplitterContainer.js

@@ -20,7 +20,7 @@ exports.containerColumn = {
     flex: 1,
     height: 0,
 };
-const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, maxFlexerSize, minFlexerSize, maxAntiFlexerSize, id, }) => {
+const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, maxFlexerSize, minFlexerSize, maxAntiFlexerSize, minAntiFlexerSize, id, }) => {
     const [initialTimelineFlex, persistFlex] = (0, timeline_1.useTimelineFlex)(id);
     const [flexValue, setFlexValue] = (0, react_1.useState)(initialTimelineFlex !== null && initialTimelineFlex !== void 0 ? initialTimelineFlex : defaultFlex);
     const ref = (0, react_1.useRef)(null);
@@ -39,6 +39,7 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         maxAntiFlexerSize,
         maxFlex,
         maxFlexerSize,
+        minAntiFlexerSize,
         minFlex,
         minFlexerSize,
     });
@@ -55,6 +56,7 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
             maxFlexerSize,
             minFlexerSize,
             maxAntiFlexerSize,
+            minAntiFlexerSize,
             defaultFlex,
             persistFlex,
         };
@@ -66,6 +68,7 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         maxFlexerSize,
         minFlexerSize,
         maxAntiFlexerSize,
+        minAntiFlexerSize,
         minFlex,
         orientation,
         persistFlex,

package/dist/components/Splitter/SplitterContext.d.ts

@@ -14,6 +14,7 @@ export type TSplitterContext = {
     maxFlexerSize: number | null;
     minFlexerSize: number | null;
     maxAntiFlexerSize: number | null;
+    minAntiFlexerSize: number | null;
     defaultFlex: number;
     id: string;
     persistFlex: (value: number) => void;
@@ -22,14 +23,14 @@ export type TSplitterContext = {
         y: number;
     }>;
 };
-type SplitterFlexBounds = Pick<TSplitterContext, 'maxAntiFlexerSize' | 'maxFlex' | 'maxFlexerSize' | 'minFlex' | 'minFlexerSize'> & {
+type SplitterFlexBounds = Pick<TSplitterContext, 'maxAntiFlexerSize' | 'maxFlex' | 'maxFlexerSize' | 'minAntiFlexerSize' | 'minFlex' | 'minFlexerSize'> & {
     readonly availableSize: number | null;
 };
-export declare const getSplitterFlexBounds: ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minFlex, minFlexerSize, }: SplitterFlexBounds) => {
+export declare const getSplitterFlexBounds: ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minAntiFlexerSize, minFlex, minFlexerSize, }: SplitterFlexBounds) => {
     minFlex: number;
     maxFlex: number;
 };
-export declare const getClampedSplitterFlex: ({ flexValue, ...bounds }: Pick<TSplitterContext, "maxAntiFlexerSize" | "maxFlex" | "maxFlexerSize" | "minFlex" | "minFlexerSize"> & {
+export declare const getClampedSplitterFlex: ({ flexValue, ...bounds }: Pick<TSplitterContext, "maxAntiFlexerSize" | "maxFlex" | "maxFlexerSize" | "minAntiFlexerSize" | "minFlex" | "minFlexerSize"> & {
     readonly availableSize: number | null;
 } & {
     readonly flexValue: number;

package/dist/components/Splitter/SplitterContext.js

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitterContext = exports.getClampedSplitterFlex = exports.getSplitterFlexBounds = void 0;
 const react_1 = __importDefault(require("react"));
-const getSplitterFlexBounds = ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minFlex, minFlexerSize, }) => {
+const getSplitterFlexBounds = ({ availableSize, maxAntiFlexerSize, maxFlex, maxFlexerSize, minAntiFlexerSize, minFlex, minFlexerSize, }) => {
     if (availableSize === null || availableSize <= 0) {
         return { minFlex, maxFlex };
     }
     const minimum = Math.min(1, Math.max(minFlex, minFlexerSize === null ? 0 : minFlexerSize / availableSize, maxAntiFlexerSize === null ? 0 : 1 - maxAntiFlexerSize / availableSize));
-    const maximum = Math.max(minimum, Math.min(maxFlex, maxFlexerSize === null ? 1 : maxFlexerSize / availableSize));
+    const maximum = Math.max(minimum, Math.min(maxFlex, maxFlexerSize === null ? 1 : maxFlexerSize / availableSize, minAntiFlexerSize === null ? 1 : 1 - minAntiFlexerSize / availableSize));
     return { minFlex: minimum, maxFlex: maximum };
 };
 exports.getSplitterFlexBounds = getSplitterFlexBounds;
@@ -30,6 +30,7 @@ exports.SplitterContext = react_1.default.createContext({
     maxFlexerSize: null,
     minFlexerSize: null,
     maxAntiFlexerSize: null,
+    minAntiFlexerSize: null,
     defaultFlex: 1,
     id: '--',
     persistFlex: () => undefined,

package/dist/components/Splitter/SplitterElement.js

@@ -9,6 +9,7 @@ const SplitterContext_1 = require("./SplitterContext");
 const SplitterElement = ({ children, type, sticky }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
     const maxSize = type === 'flexer' ? context.maxFlexerSize : context.maxAntiFlexerSize;
+    const minSize = type === 'flexer' ? context.minFlexerSize : context.minAntiFlexerSize;
     const style = (0, react_1.useMemo)(() => {
         return {
             flex: 
@@ -22,8 +23,12 @@ const SplitterElement = ({ children, type, sticky }) => {
             maxHeight: context.orientation === 'horizontal'
                 ? (maxSize !== null && maxSize !== void 0 ? maxSize : undefined)
                 : undefined,
+            minWidth: context.orientation === 'vertical' ? (minSize !== null && minSize !== void 0 ? minSize : undefined) : undefined,
+            minHeight: context.orientation === 'horizontal'
+                ? (minSize !== null && minSize !== void 0 ? minSize : undefined)
+                : undefined,
         };
-    }, [context.flexValue, context.orientation, maxSize, type]);
+    }, [context.flexValue, context.orientation, maxSize, minSize, type]);
     const stickStyle = (0, react_1.useMemo)(() => {
         return {
             position: 'absolute',

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;
@@ -54,13 +54,13 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                 maxAntiFlexerSize: dragContext.maxAntiFlexerSize,
                 maxFlex: dragContext.maxFlex,
                 maxFlexerSize: dragContext.maxFlexerSize,
+                minAntiFlexerSize: dragContext.minAntiFlexerSize,
                 minFlex: dragContext.minFlex,
                 minFlexerSize: dragContext.minFlexerSize,
             });
             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 +75,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 +96,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 +119,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/Tabs/vertical.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export declare const VerticalTab: React.FC<{
     readonly children: React.ReactNode;
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
+    readonly renderIcon?: (color: string) => React.ReactNode;
     readonly style?: React.CSSProperties;
     readonly selected: boolean;
 }>;

package/dist/components/Tabs/vertical.js

@@ -12,13 +12,14 @@ const selectorButton = {
     paddingLeft: 16,
     display: 'flex',
     flexDirection: 'row',
+    fontFamily: 'sans-serif',
     fontSize: 14,
     color: 'inherit',
     alignItems: 'center',
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
-const VerticalTab = ({ children, onClick, style, selected }) => {
+const VerticalTab = ({ children, onClick, renderIcon, style, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -27,19 +28,16 @@ const VerticalTab = ({ children, onClick, style, selected }) => {
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
+    const color = selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT;
     const definiteStyle = (0, react_1.useMemo)(() => {
         return {
             ...selectorButton,
-            backgroundColor: selected
-                ? colors_1.SELECTED_BACKGROUND
-                : hovered
-                    ? colors_1.WHITE_ALPHA_06
-                    : colors_1.TRANSPARENT,
-            color: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
-            boxShadow: selected ? 'none' : undefined,
+            backgroundColor: selected || hovered ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
+            color,
+            boxShadow: 'none',
             ...style,
         };
-    }, [hovered, selected, style]);
-    return (jsx_runtime_1.jsx("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
+    }, [color, hovered, selected, style]);
+    return (jsx_runtime_1.jsxs("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: [renderIcon ? renderIcon(color) : null, children] }));
 };
 exports.VerticalTab = VerticalTab;

package/dist/components/TimeValue.js

@@ -11,6 +11,7 @@ const use_keybinding_1 = require("../helpers/use-keybinding");
 const render_frame_1 = require("../state/render-frame");
 const layout_1 = require("./layout");
 const InputDragger_1 = require("./NewComposition/InputDragger");
+const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const text = {
     color: colors_1.WHITE,
     display: 'flex',
@@ -20,19 +21,32 @@ const text = {
     lineHeight: 1,
     width: '100%',
 };
-const time = {
+const currentTimeTypography = {
+    color: colors_1.WHITE,
     display: 'inline-block',
-    fontSize: 16,
+    fontSize: 14,
+    fontVariantNumeric: 'tabular-nums',
+    fontWeight: 400,
     lineHeight: 1,
     fontFamily: 'monospace',
 };
-const frameStyle = {
+const currentTimeInputStyle = {
+    ...currentTimeTypography,
+    padding: '4px 6px 4px 0',
+};
+const currentTimeButtonStyle = {
+    paddingLeft: 0,
+    transform: 'translateY(-1px)',
+};
+const currentTimeSubtitle = {
     color: colors_1.LIGHT_TEXT,
-    fontWeight: 500,
-    lineHeight: 1,
-    fontSize: 16,
+    display: 'block',
     fontFamily: 'monospace',
-    paddingRight: 10,
+    fontSize: 10,
+    fontWeight: 400,
+    lineHeight: 1,
+    marginTop: -2,
+    textAlign: 'left',
 };
 const TimeValue = () => {
     const frame = (0, remotion_1.useCurrentFrame)();
@@ -47,6 +61,10 @@ const TimeValue = () => {
     const onValueChange = (0, react_1.useCallback)((val) => {
         seek(val);
     }, [seek]);
+    const formatter = (0, react_1.useCallback)((value) => {
+        return config ? (0, render_frame_1.renderFrame)(Number(value), config.fps) : String(value);
+    }, [config]);
+    const formatterSubtitle = (0, react_1.useCallback)((value) => String(value), []);
     (0, react_1.useImperativeHandle)(remotion_1.Internals.timeValueRef, () => ({
         goToFrame: () => {
             var _a;
@@ -81,7 +99,7 @@ const TimeValue = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: text, children: [
-            jsx_runtime_1.jsx("div", { style: time, children: (0, render_frame_1.renderFrame)(frame, config.fps) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { ref: ref, value: frame, onTextChange: onTextChange, onValueChange: onValueChange, rightAlign: true, status: "ok", style: frameStyle })
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { ref: ref, "aria-label": String(frame), value: frame, onTextChange: onTextChange, onValueChange: onValueChange, formatter: formatter, formatterStyle: currentTimeTypography, formatterSubtitle: formatterSubtitle, formatterSubtitleStyle: currentTimeSubtitle, buttonStyle: currentTimeButtonStyle, rightAlign: false, status: "ok", style: currentTimeInputStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, { sliderMaxWidth: 80 }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
         ] }));
 };
 exports.TimeValue = TimeValue;

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/Timeline.js

@@ -268,7 +268,7 @@ const TimelineInner = () => {
                 }
                 return (jsx_runtime_1.jsx(SubscribeToNodePaths_1.SubscribeToNodePaths, { overrideId: sequence.controls.overrideId, componentIdentity: sequence.controls.componentIdentity, schema: sequence.controls.schema, getStack: sequence.getStack, effects: sequence.effects }, sequence.id));
             }), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? jsx_runtime_1.jsx(SequencePropsObserver_1.SequencePropsObserver, {}) : null, jsx_runtime_1.jsx(TimelineKeyframeTracksContext_1.TimelineKeyframeTracksProvider, { tracks: filtered, children: jsx_runtime_1.jsxs(TimelineSelection_1.TimelineSelectableItemsProvider, { timeline: shown, children: [(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectAllKeybindings, { timeline: shown })) : null, 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, maxFlexerSize: null, minFlexerSize: MIN_TIMELINE_LABELS_WIDTH, maxAntiFlexerSize: null, 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, maxFlexerSize: null, minFlexerSize: MIN_TIMELINE_LABELS_WIDTH, maxAntiFlexerSize: null, minAntiFlexerSize: null, 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, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsx(TimelineInOutDragHandler_1.TimelineInOutDragHandler, {})) : null, jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
                                                     ] }) })

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/TimelineClipboardKeybindings.js

@@ -18,6 +18,7 @@ const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings
 const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const effects_clipboard_1 = require("./effects-clipboard");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const imperative_state_1 = require("./imperative-state");
 const keyframe_clipboard_1 = require("./keyframe-clipboard");
 const save_effect_prop_1 = require("./save-effect-prop");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -379,9 +380,6 @@ const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequen
 exports.getPasteEffectPropTarget = getPasteEffectPropTarget;
 const TimelineClipboardKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
-    timelinePositionRef.current = timelinePosition;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
@@ -556,7 +554,7 @@ const TimelineClipboardKeybindings = () => {
                         clientId,
                         confirm,
                         propStatuses,
-                        timelinePosition: timelinePositionRef.current,
+                        timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
                     });
                     return deletePromise === null || deletePromise === void 0 ? void 0 : deletePromise.then((deleted) => {
                         if (!deleted) {
@@ -612,7 +610,7 @@ const TimelineClipboardKeybindings = () => {
                     const keyframeTarget = (0, keyframe_clipboard_1.getPasteKeyframeTarget)({
                         selectedItems,
                         payload: keyframeResult.data,
-                        timelinePosition: timelinePositionRef.current,
+                        timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
                         sequences,
                         overrideIdsToNodePaths: overrideIdToNodePathMappings,
                         propStatuses,
@@ -870,7 +868,6 @@ const TimelineClipboardKeybindings = () => {
         previewServerState,
         sequencesRef,
         setPropStatuses,
-        timelinePositionRef,
     ]);
     return null;
 };

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -10,6 +10,7 @@ const editor_guides_1 = require("../../state/editor-guides");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
+const imperative_state_1 = require("./imperative-state");
 const reset_selected_timeline_props_1 = require("./reset-selected-timeline-props");
 const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -25,15 +26,13 @@ const TimelineDeleteKeybindings = () => {
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
-    timelinePositionRef.current = timelinePosition;
     (0, react_1.useEffect)(() => {
         if (!canSelect || previewServerState.type !== 'connected') {
             return;
         }
         const { clientId } = previewServerState;
         const handleDelete = () => {
+            const timelinePosition = (0, imperative_state_1.getCurrentFrame)();
             const { selectedItems, clearSelection, selectItems } = currentSelection.current;
             const sequences = sequencesRef.current;
             const propStatuses = propStatusesRef.current;
@@ -58,7 +57,7 @@ const TimelineDeleteKeybindings = () => {
                 clientId,
                 confirm,
                 propStatuses,
-                timelinePosition: timelinePositionRef.current,
+                timelinePosition,
             });
             if (deletePromise !== null) {
                 deletePromise
@@ -69,7 +68,7 @@ const TimelineDeleteKeybindings = () => {
                             sequences,
                             overrideIdsToNodePaths: overrideIdToNodePathMappings,
                             propStatuses,
-                            timelinePosition: timelinePositionRef.current,
+                            timelinePosition,
                         });
                         if (nextSelection.length === 0) {
                             clearSelection();
@@ -169,7 +168,7 @@ const TimelineDeleteKeybindings = () => {
                     sequences: sequencesRef.current,
                     overrideIdsToNodePaths: overrideIdToNodePathMappings,
                     propStatuses: propStatusesRef.current,
-                    splitFrame: timelinePositionRef.current,
+                    splitFrame: (0, imperative_state_1.getCurrentFrame)(),
                 });
                 if (splitPromise === null) {
                     return;
@@ -198,7 +197,6 @@ const TimelineDeleteKeybindings = () => {
         sequencesRef,
         setGuidesList,
         setPropStatuses,
-        timelinePositionRef,
     ]);
     return null;
 };

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;

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -43,6 +43,7 @@ const TimelineKeyframeEasingLine_1 = require("./TimelineKeyframeEasingLine");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const rowClipper = {
+    boxSizing: 'border-box',
     marginLeft: -timeline_layout_1.TIMELINE_PADDING,
     marginRight: -timeline_layout_1.TIMELINE_PADDING,
     overflow: 'hidden',
@@ -61,7 +62,7 @@ const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, canEditEasin
     const easingSegments = canEditEasing
         ? (0, get_timeline_easing_segments_1.getTimelineEasingSegments)(keyframes)
         : [];
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsx("div", { style: { ...rowClipper, height }, children: jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] }) })
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsx("div", { style: { ...rowClipper, height, width: timelineWidth !== null && timelineWidth !== void 0 ? timelineWidth : undefined }, children: jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] }) })
         ] }));
 };
 exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized);