@remotion/studio 4.0.520 → 4.0.522

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -49,13 +49,28 @@ const editor_snapping_1 = require("../../state/editor-snapping");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const TimelineSelection_1 = require("./TimelineSelection");
-const HANDLE_WIDTH = 6;
+const HANDLE_INSET = 6;
+const HANDLE_OUTSET = 8;
+const timelineSequenceEdgeDragThresholdPx = 4;
 exports.timelineSequenceFromDragSnapThresholdPx = 10;
+const getTimelineSequenceEdgeSelectionInteraction = ({ button, selected, shiftKey, metaKey, ctrlKey, }) => {
+    if (button !== 0 ||
+        !(0, TimelineSelection_1.shouldSelectTimelineRowOnPointerDown)({
+            selected,
+            shiftKey,
+            metaKey,
+            ctrlKey,
+        })) {
+        return null;
+    }
+    return { shiftKey, toggleKey: metaKey || ctrlKey };
+};
 const baseStyle = {
     position: 'absolute',
     top: 0,
     bottom: 0,
-    width: HANDLE_WIDTH,
+    // Keep the middle half of narrow layers available for moving.
+    width: `calc(${HANDLE_OUTSET}px + min(${HANDLE_INSET}px, 25%))`,
     cursor: 'ew-resize',
     zIndex: 1,
     touchAction: 'none',
@@ -231,7 +246,7 @@ const isFromDraggableSequence = (sequence) => {
         !sequence.isInsideSeries &&
         Boolean(sequence.controls));
 };
-const getTimelineSequenceDurationDragValue = ({ initialDuration, deltaFrames, minimumDuration = 1, }) => Math.max(minimumDuration, initialDuration + deltaFrames);
+const getTimelineSequenceDurationDragValue = ({ initialDuration, deltaFrames, maximumDuration, minimumDuration = 1, }) => Math.min(maximumDuration, Math.max(minimumDuration, initialDuration + deltaFrames));
 exports.getTimelineSequenceDurationDragValue = getTimelineSequenceDurationDragValue;
 const getTimelineSequenceLeftEdgeDragDelta = ({ initialDuration, initialTrimBefore, deltaFrames, playbackRate, minimumDuration = 1, }) => {
     const minDeltaFrames = 0 - initialTrimBefore / playbackRate;
@@ -305,6 +320,7 @@ const getTimelineSequenceDurationDragChanges = ({ targets, deltaFrames, }) => {
         const nextValue = (0, exports.getTimelineSequenceDurationDragValue)({
             initialDuration: target.initialDuration,
             deltaFrames,
+            maximumDuration: target.maximumDuration,
             minimumDuration: target.minimumDuration,
         });
         if (nextValue === target.initialDuration) {
@@ -325,14 +341,11 @@ const getTimelineSequenceDurationDragChanges = ({ targets, deltaFrames, }) => {
 exports.getTimelineSequenceDurationDragChanges = getTimelineSequenceDurationDragChanges;
 const getTimelineSequenceFromDragValue = ({ initialFrom, deltaFrames, }) => initialFrom + deltaFrames;
 exports.getTimelineSequenceFromDragValue = getTimelineSequenceFromDragValue;
-const getTimelineSequenceFromDragDelta = ({ deltaFrames, pxPerFrame, snappingEnabled, targets, }) => {
+const getTimelineSequenceFromDragDelta = ({ deltaFrames, timelineDurationInFrames, pxPerFrame, snappingEnabled, targets, }) => {
     var _a;
-    if (!snappingEnabled) {
-        return deltaFrames;
-    }
     let closestSnap;
     for (const target of targets) {
-        if (!target.canSnapToTimelineStart) {
+        if (!snappingEnabled || !target.canSnapToTimelineStart) {
             continue;
         }
         const nextFrom = (0, exports.getTimelineSequenceFromDragValue)({
@@ -349,7 +362,10 @@ const getTimelineSequenceFromDragDelta = ({ deltaFrames, pxPerFrame, snappingEna
             distancePx,
         };
     }
-    return (_a = closestSnap === null || closestSnap === void 0 ? void 0 : closestSnap.deltaFrames) !== null && _a !== void 0 ? _a : deltaFrames;
+    const minimumDelta = Math.max(...targets.map((target) => target.minimumDeltaFrames));
+    const maximumDelta = Math.min(...targets.map((target) => timelineDurationInFrames - 1 - target.initialTimelineStart));
+    // Clamp the shared delta after snapping so every selected track retains a frame.
+    return Math.max(minimumDelta, Math.min(maximumDelta, (_a = closestSnap === null || closestSnap === void 0 ? void 0 : closestSnap.deltaFrames) !== null && _a !== void 0 ? _a : deltaFrames));
 };
 exports.getTimelineSequenceFromDragDelta = getTimelineSequenceFromDragDelta;
 const getTimelineSequenceFromDragChanges = ({ targets, deltaFrames, }) => {
@@ -414,7 +430,7 @@ const findSequenceTrack = ({ tracks, nodePathInfo, }) => {
         return ((0, studio_shared_1.stringifySequenceExpandedRowKey)(candidate.nodePathInfo.sequenceSubscriptionKey) === key && candidate.nodePathInfo.index === nodePathInfo.index);
     });
 };
-const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, timelineDurationInFrames, }) => {
     var _a;
     const draggedSelectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(draggedNodePathInfo);
     const selectedSequenceItems = selectedItems.filter((item) => item.type === 'sequence');
@@ -454,13 +470,13 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
         }
         const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
         if (!targets.has(key)) {
+            const minimumDuration = Math.max(1 - originalSequence.from, getMinimumSequenceDuration({ sequence: originalSequence, sequences }));
             targets.set(key, {
                 fileName: nodePath.absolutePath,
                 initialDuration: originalSequence.duration,
-                minimumDuration: getMinimumSequenceDuration({
-                    sequence: originalSequence,
-                    sequences,
-                }),
+                maximumDuration: Math.max(minimumDuration, timelineDurationInFrames - track.cascadedStart),
+                // A negative start needs enough duration to retain one visible frame.
+                minimumDuration,
                 nodePath,
                 schema: controls.schema,
             });
@@ -556,6 +572,7 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
             {
                 nodePath: track.nodePathInfo.sequenceSubscriptionKey,
                 originalSequence,
+                initialTimelineStart: track.cascadedStart,
             },
         ];
     });
@@ -577,7 +594,7 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
     });
     const targets = new Map();
     const includedKeyframeNodePaths = new Set();
-    for (const { nodePath, originalSequence, } of sequencesWithoutSelectedAncestors) {
+    for (const { nodePath, originalSequence, initialTimelineStart, } of sequencesWithoutSelectedAncestors) {
         if (!isFromDraggableSequence(originalSequence)) {
             return null;
         }
@@ -625,6 +642,8 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
             const sequenceKeyframes = descendantKeyframes.flatMap((descendant) => descendant.sequenceKeyframes);
             targets.set(key, {
                 canSnapToTimelineStart: originalSequence.parent === null,
+                minimumDeltaFrames: 1 - originalSequence.duration - originalSequence.from,
+                initialTimelineStart,
                 effectKeyframes,
                 fileName: nodePath.absolutePath,
                 initialFrom: originalSequence.from,
@@ -663,14 +682,14 @@ const clearFromDragOverrides = ({ clearDragOverrides, clearEffectDragOverrides,
         }
     }
 };
-const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd }) => {
+const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd, onSelect, selected, }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
-    const [dragging, setDragging] = (0, react_1.useState)(false);
+    const stopPointerSessionRef = (0, react_1.useRef)(null);
     const dragStateRef = (0, react_1.useRef)(null);
     const latestRef = (0, react_1.useRef)({
         nodePathInfo,
@@ -680,6 +699,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         previewServerState,
         overrideIdToNodePathMappings,
         onDragEnd,
+        onSelect,
     });
     latestRef.current = {
         nodePathInfo,
@@ -689,6 +709,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         previewServerState,
         overrideIdToNodePathMappings,
         onDragEnd,
+        onSelect,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -700,7 +721,11 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
         (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-        setDragging(false);
+        if (commit &&
+            !dragState.didMove &&
+            dragState.selectionInteraction !== null) {
+            latestRef.current.onSelect(dragState.selectionInteraction);
+        }
         const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
         const changes = (0, exports.getTimelineSequenceLeftEdgeDragChanges)({
             targets: dragState.targets,
@@ -740,65 +765,61 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         });
     }, []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
-        var _a, _b;
+        var _a;
+        var _b;
         if (e.button !== 0) {
             return;
         }
+        e.stopPropagation();
+        e.preventDefault();
+        const selectionInteraction = getTimelineSequenceEdgeSelectionInteraction({
+            button: e.button,
+            selected,
+            shiftKey: e.shiftKey,
+            metaKey: e.metaKey,
+            ctrlKey: e.ctrlKey,
+        });
         const pxPerFrame = timelineDurationInFrames > 0
             ? (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2) / timelineDurationInFrames
             : 0;
-        if (pxPerFrame <= 0) {
-            return;
-        }
+        const canCalculateDelta = Number.isFinite(pxPerFrame) && pxPerFrame > 0;
         const { nodePathInfo: latestNodePathInfo, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, } = latestRef.current;
         const { selectedItems: latestSelectedItems } = currentSelection.current;
-        const targets = (0, exports.getTimelineSequenceLeftEdgeDragTargets)({
-            draggedNodePathInfo: latestNodePathInfo,
-            selectedItems: latestSelectedItems,
-            sequences: sequencesRef.current,
-            overrideIdsToNodePaths: latestOverrideIdsToNodePaths,
-            propStatuses: propStatusesRef.current,
-        });
-        if (targets === null || targets.length === 0) {
-            return;
-        }
-        e.stopPropagation();
-        e.preventDefault();
+        const targets = canCalculateDelta
+            ? ((_b = (0, exports.getTimelineSequenceLeftEdgeDragTargets)({
+                draggedNodePathInfo: latestNodePathInfo,
+                selectedItems: latestSelectedItems,
+                sequences: sequencesRef.current,
+                overrideIdsToNodePaths: latestOverrideIdsToNodePaths,
+                propStatuses: propStatusesRef.current,
+            })) !== null && _b !== void 0 ? _b : [])
+            : [];
+        (_a = stopPointerSessionRef.current) === null || _a === void 0 ? void 0 : _a.call(stopPointerSessionRef);
         dragStateRef.current = {
             initialClientX: e.clientX,
             latestDeltaFrames: 0,
             didMove: false,
-            pxPerFrame,
+            pxPerFrame: canCalculateDelta ? pxPerFrame : 1,
             pointerId: e.pointerId,
-            button: e.button,
-            target: e.currentTarget,
+            selectionInteraction,
             targets,
         };
-        (_b = (_a = e.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
         document.body.style.userSelect = 'none';
         document.body.style.webkitUserSelect = 'none';
         (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
-        setDragging(true);
-    }, [
-        currentSelection,
-        propStatusesRef,
-        sequencesRef,
-        timelineDurationInFrames,
-        windowWidth,
-    ]);
-    (0, react_1.useEffect)(() => {
-        if (!dragging) {
-            return;
-        }
-        const onMove = (e) => {
+        const onMove = (pointerEvent) => {
             const dragState = dragStateRef.current;
-            if (!dragState || e.pointerId !== dragState.pointerId) {
+            if (!dragState || pointerEvent.pointerId !== dragState.pointerId) {
                 return;
             }
-            const dx = e.clientX - dragState.initialClientX;
+            const dx = pointerEvent.clientX - dragState.initialClientX;
             const deltaFrames = Math.round(dx / dragState.pxPerFrame);
             dragState.latestDeltaFrames = deltaFrames;
-            if (deltaFrames !== 0) {
+            if (Math.abs(dx) >= timelineSequenceEdgeDragThresholdPx ||
+                (0, exports.getTimelineSequenceLeftEdgeDragChanges)({
+                    targets: dragState.targets,
+                    deltaFrames,
+                }).length > 0) {
                 dragState.didMove = true;
             }
             for (const target of dragState.targets) {
@@ -817,30 +838,31 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
                 latestRef.current.setDragOverrides(target.nodePath, 'trimBefore', remotion_1.Internals.makeStaticDragOverride(nextValues.trimBefore));
             }
         };
-        const onUp = (e) => {
+        const onUp = (pointerEvent) => {
             const dragState = dragStateRef.current;
-            if (!dragState || e.pointerId !== dragState.pointerId) {
+            if (!dragState || pointerEvent.pointerId !== dragState.pointerId) {
                 return;
             }
+            // Include the release position even if the final pointermove was skipped.
+            onMove(pointerEvent);
             finishDrag(true);
         };
-        const onCancel = (e) => {
+        const onCancel = (pointerEvent) => {
             const dragState = dragStateRef.current;
-            if (!dragState || e.pointerId !== dragState.pointerId) {
+            if (!dragState || pointerEvent.pointerId !== dragState.pointerId) {
                 return;
             }
             finishDrag(false);
         };
-        const activeDragState = dragStateRef.current;
-        if (!activeDragState) {
-            return;
-        }
-        return (0, pointer_session_1.startCapturedPointerSession)({
-            event: activeDragState,
-            captureTarget: activeDragState.target,
+        stopPointerSessionRef.current = (0, pointer_session_1.startCapturedPointerSession)({
+            event: e.nativeEvent,
+            captureTarget: e.currentTarget,
             onMove,
             onEnd: (reason, endEvent) => {
-                if ((reason === 'pointerup' || reason === 'buttons-released') &&
+                stopPointerSessionRef.current = null;
+                if ((reason === 'pointerup' ||
+                    reason === 'buttons-released' ||
+                    (reason === 'lostpointercapture' && (endEvent === null || endEvent === void 0 ? void 0 : endEvent.buttons) === 0)) &&
                     endEvent) {
                     onUp(endEvent);
                 }
@@ -852,10 +874,25 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
                 }
             },
         });
-    }, [dragging, finishDrag]);
+    }, [
+        currentSelection,
+        finishDrag,
+        propStatusesRef,
+        selected,
+        sequencesRef,
+        timelineDurationInFrames,
+        windowWidth,
+    ]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            var _a;
+            (_a = stopPointerSessionRef.current) === null || _a === void 0 ? void 0 : _a.call(stopPointerSessionRef);
+            stopPointerSessionRef.current = null;
+        };
+    }, []);
     const style = {
         ...baseStyle,
-        left: 0,
+        left: -HANDLE_OUTSET,
         background: colors_1.TRANSPARENT,
     };
     return (jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to trim start", style: style, onPointerDown: onPointerDown }));
@@ -994,7 +1031,9 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         // the global session listeners exist.
         stopPointerSessionRef.current = (0, pointer_session_1.startCapturedPointerSession)({
             event: e.nativeEvent,
-            captureTarget: e.currentTarget,
+            // The bar is removed when it leaves the visible timeline. Capture on
+            // a stable element so the move continues until the pointer is released.
+            captureTarget: e.currentTarget.ownerDocument.body,
             onMove: (moveEvent) => {
                 const dragState = dragStateRef.current;
                 if (!dragState) {
@@ -1002,6 +1041,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
                 }
                 const dx = moveEvent.clientX - dragState.initialClientX;
                 const deltaFrames = (0, exports.getTimelineSequenceFromDragDelta)({
+                    timelineDurationInFrames,
                     deltaFrames: Math.round(dx / dragState.pxPerFrame),
                     pxPerFrame: dragState.pxPerFrame,
                     snappingEnabled: latestRef.current.editorSnapping,
@@ -1041,7 +1081,9 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
             },
             onEnd: (reason, endEvent) => {
                 stopPointerSessionRef.current = null;
-                finishDrag((reason === 'pointerup' || reason === 'buttons-released') &&
+                finishDrag((reason === 'pointerup' ||
+                    reason === 'buttons-released' ||
+                    (reason === 'lostpointercapture' && (endEvent === null || endEvent === void 0 ? void 0 : endEvent.buttons) === 0)) &&
                     endEvent !== null);
             },
         });
@@ -1065,14 +1107,14 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
     };
 };
 exports.useTimelineSequenceFromDrag = useTimelineSequenceFromDrag;
-const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd }) => {
+const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd, onSelect, selected, }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
     const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
-    const [dragging, setDragging] = (0, react_1.useState)(false);
+    const stopPointerSessionRef = (0, react_1.useRef)(null);
     const dragStateRef = (0, react_1.useRef)(null);
     // Keep latest props/setters available to window listeners installed once at pointerdown.
     const latestRef = (0, react_1.useRef)({
@@ -1083,6 +1125,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
         previewServerState,
         overrideIdToNodePathMappings,
         onDragEnd,
+        onSelect,
     });
     latestRef.current = {
         nodePathInfo,
@@ -1092,6 +1135,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
         previewServerState,
         overrideIdToNodePathMappings,
         onDragEnd,
+        onSelect,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -1103,7 +1147,11 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
         document.body.style.userSelect = '';
         document.body.style.webkitUserSelect = '';
         (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-        setDragging(false);
+        if (commit &&
+            !dragState.didMove &&
+            dragState.selectionInteraction !== null) {
+            latestRef.current.onSelect(dragState.selectionInteraction);
+        }
         const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
         const changes = (0, exports.getTimelineSequenceDurationDragChanges)({
             targets: dragState.targets,
@@ -1141,102 +1189,98 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
         });
     }, []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
-        var _a, _b;
+        var _a;
+        var _b;
         if (e.button !== 0) {
             return;
         }
+        e.stopPropagation();
+        e.preventDefault();
+        const selectionInteraction = getTimelineSequenceEdgeSelectionInteraction({
+            button: e.button,
+            selected,
+            shiftKey: e.shiftKey,
+            metaKey: e.metaKey,
+            ctrlKey: e.ctrlKey,
+        });
         const pxPerFrame = timelineDurationInFrames > 0
             ? (windowWidth - timeline_layout_1.TIMELINE_PADDING * 2) / timelineDurationInFrames
             : 0;
-        if (pxPerFrame <= 0) {
-            return;
-        }
+        const canCalculateDelta = Number.isFinite(pxPerFrame) && pxPerFrame > 0;
         const { nodePathInfo: latestNodePathInfo, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, } = latestRef.current;
         const { selectedItems: latestSelectedItems } = currentSelection.current;
-        const targets = (0, exports.getTimelineSequenceDurationDragTargets)({
-            draggedNodePathInfo: latestNodePathInfo,
-            selectedItems: latestSelectedItems,
-            sequences: sequencesRef.current,
-            overrideIdsToNodePaths: latestOverrideIdsToNodePaths,
-            propStatuses: propStatusesRef.current,
-        });
-        if (targets === null || targets.length === 0) {
-            return;
-        }
-        e.stopPropagation();
-        e.preventDefault();
+        const targets = canCalculateDelta
+            ? ((_b = (0, exports.getTimelineSequenceDurationDragTargets)({
+                draggedNodePathInfo: latestNodePathInfo,
+                selectedItems: latestSelectedItems,
+                sequences: sequencesRef.current,
+                overrideIdsToNodePaths: latestOverrideIdsToNodePaths,
+                propStatuses: propStatusesRef.current,
+                timelineDurationInFrames,
+            })) !== null && _b !== void 0 ? _b : [])
+            : [];
+        (_a = stopPointerSessionRef.current) === null || _a === void 0 ? void 0 : _a.call(stopPointerSessionRef);
         dragStateRef.current = {
             initialClientX: e.clientX,
             latestDeltaFrames: 0,
             didMove: false,
-            pxPerFrame,
+            pxPerFrame: canCalculateDelta ? pxPerFrame : 1,
             pointerId: e.pointerId,
-            button: e.button,
-            target: e.currentTarget,
+            selectionInteraction,
             targets,
         };
-        (_b = (_a = e.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, e.pointerId);
         document.body.style.userSelect = 'none';
         document.body.style.webkitUserSelect = 'none';
         (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
-        setDragging(true);
-    }, [
-        currentSelection,
-        propStatusesRef,
-        sequencesRef,
-        timelineDurationInFrames,
-        windowWidth,
-    ]);
-    // Install global pointer listeners while dragging. They survive parent re-renders
-    // and element remounts that would otherwise drop React's synthetic handlers or
-    // pointer capture.
-    (0, react_1.useEffect)(() => {
-        if (!dragging) {
-            return;
-        }
-        const onMove = (e) => {
+        const onMove = (pointerEvent) => {
             const dragState = dragStateRef.current;
-            if (!dragState || e.pointerId !== dragState.pointerId) {
+            if (!dragState || pointerEvent.pointerId !== dragState.pointerId) {
                 return;
             }
-            const dx = e.clientX - dragState.initialClientX;
+            const dx = pointerEvent.clientX - dragState.initialClientX;
             const deltaFrames = Math.round(dx / dragState.pxPerFrame);
             dragState.latestDeltaFrames = deltaFrames;
-            if (deltaFrames !== 0) {
+            if (Math.abs(dx) >= timelineSequenceEdgeDragThresholdPx ||
+                (0, exports.getTimelineSequenceDurationDragChanges)({
+                    targets: dragState.targets,
+                    deltaFrames,
+                }).length > 0) {
                 dragState.didMove = true;
             }
             for (const target of dragState.targets) {
                 latestRef.current.setDragOverrides(target.nodePath, 'durationInFrames', remotion_1.Internals.makeStaticDragOverride((0, exports.getTimelineSequenceDurationDragValue)({
                     initialDuration: target.initialDuration,
                     deltaFrames,
+                    maximumDuration: target.maximumDuration,
                     minimumDuration: target.minimumDuration,
                 })));
             }
         };
-        const onUp = (e) => {
+        const onUp = (pointerEvent) => {
             const dragState = dragStateRef.current;
-            if (!dragState || e.pointerId !== dragState.pointerId) {
+            if (!dragState || pointerEvent.pointerId !== dragState.pointerId) {
                 return;
             }
+            // Include the release position even if the final pointermove was skipped.
+            onMove(pointerEvent);
             finishDrag(true);
         };
-        const onCancel = (e) => {
+        const onCancel = (pointerEvent) => {
             const dragState = dragStateRef.current;
-            if (!dragState || e.pointerId !== dragState.pointerId) {
+            if (!dragState || pointerEvent.pointerId !== dragState.pointerId) {
                 return;
             }
             finishDrag(false);
         };
-        const activeDragState = dragStateRef.current;
-        if (!activeDragState) {
-            return;
-        }
-        return (0, pointer_session_1.startCapturedPointerSession)({
-            event: activeDragState,
-            captureTarget: activeDragState.target,
+        stopPointerSessionRef.current = (0, pointer_session_1.startCapturedPointerSession)({
+            event: e.nativeEvent,
+            captureTarget: e.currentTarget,
             onMove,
             onEnd: (reason, endEvent) => {
-                if ((reason === 'pointerup' || reason === 'buttons-released') &&
+                stopPointerSessionRef.current = null;
+                if ((reason === 'pointerup' ||
+                    reason === 'buttons-released' ||
+                    (reason === 'lostpointercapture' && (endEvent === null || endEvent === void 0 ? void 0 : endEvent.buttons) === 0)) &&
                     endEvent) {
                     onUp(endEvent);
                 }
@@ -1248,10 +1292,25 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
                 }
             },
         });
-    }, [dragging, finishDrag]);
+    }, [
+        currentSelection,
+        finishDrag,
+        propStatusesRef,
+        selected,
+        sequencesRef,
+        timelineDurationInFrames,
+        windowWidth,
+    ]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            var _a;
+            (_a = stopPointerSessionRef.current) === null || _a === void 0 ? void 0 : _a.call(stopPointerSessionRef);
+            stopPointerSessionRef.current = null;
+        };
+    }, []);
     const style = {
         ...baseStyle,
-        right: 0,
+        right: -HANDLE_OUTSET,
         background: colors_1.TRANSPARENT,
     };
     return (jsx_runtime_1.jsx("div", { role: "separator", "aria-orientation": "vertical", title: "Drag to change duration", style: style, onPointerDown: onPointerDown }));

package/dist/components/Timeline/TimelineSlider.js

@@ -55,13 +55,10 @@ const TimelineSliderInner = () => {
     const ref = (0, react_1.useRef)(null);
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     if (timelineWidth === null) {
         throw new Error('Unexpectedly did not have timeline width');
     }
-    const zoomLevel = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
-        ? ((_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : null)
-        : null;
+    const zoomLevel = (_a = zoomMap[videoConfig.id]) !== null && _a !== void 0 ? _a : null;
     (0, react_1.useLayoutEffect)(() => {
         var _a;
         const el = ref.current;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const TimelineTickFormatContext: React.Context<{
+    showFrames: boolean;
+    setShowFrames: React.Dispatch<React.SetStateAction<boolean>>;
+}>;
+export declare const TimelineTickFormatProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/components/Timeline/TimelineTickFormatProvider.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineTickFormatProvider = exports.TimelineTickFormatContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const STORAGE_KEY = 'remotion.timelineShowFrames';
+exports.TimelineTickFormatContext = (0, react_1.createContext)({ showFrames: false, setShowFrames: () => undefined });
+const TimelineTickFormatProvider = ({ children }) => {
+    const [showFrames, setShowFrames] = (0, react_1.useState)(() => localStorage.getItem(STORAGE_KEY) === 'true');
+    (0, react_1.useEffect)(() => {
+        localStorage.setItem(STORAGE_KEY, String(showFrames));
+    }, [showFrames]);
+    const value = (0, react_1.useMemo)(() => ({ showFrames, setShowFrames }), [showFrames]);
+    return (jsx_runtime_1.jsx(exports.TimelineTickFormatContext.Provider, { value: value, children: children }));
+};
+exports.TimelineTickFormatProvider = TimelineTickFormatProvider;