@remotion/studio 4.0.521 → 4.0.522

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -51,7 +51,20 @@ const save_sequence_prop_1 = require("./save-sequence-prop");
 const TimelineSelection_1 = require("./TimelineSelection");
 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,
@@ -233,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;
@@ -307,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) {
@@ -327,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)({
@@ -351,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, }) => {
@@ -416,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');
@@ -456,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,
             });
@@ -558,6 +572,7 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
             {
                 nodePath: track.nodePathInfo.sequenceSubscriptionKey,
                 originalSequence,
+                initialTimelineStart: track.cascadedStart,
             },
         ];
     });
@@ -579,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;
         }
@@ -627,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,
@@ -665,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,
@@ -682,6 +699,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         previewServerState,
         overrideIdToNodePathMappings,
         onDragEnd,
+        onSelect,
     });
     latestRef.current = {
         nodePathInfo,
@@ -691,6 +709,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         previewServerState,
         overrideIdToNodePathMappings,
         onDragEnd,
+        onSelect,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -702,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,
@@ -742,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) {
@@ -819,31 +838,28 @@ 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(e);
+            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) => {
+                stopPointerSessionRef.current = null;
                 if ((reason === 'pointerup' ||
                     reason === 'buttons-released' ||
                     (reason === 'lostpointercapture' && (endEvent === null || endEvent === void 0 ? void 0 : endEvent.buttons) === 0)) &&
@@ -858,7 +874,22 @@ 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: -HANDLE_OUTSET,
@@ -1000,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) {
@@ -1008,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,
@@ -1073,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)({
@@ -1091,6 +1125,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
         previewServerState,
         overrideIdToNodePathMappings,
         onDragEnd,
+        onSelect,
     });
     latestRef.current = {
         nodePathInfo,
@@ -1100,6 +1135,7 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
         previewServerState,
         overrideIdToNodePathMappings,
         onDragEnd,
+        onSelect,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -1111,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,
@@ -1149,103 +1189,95 @@ 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(e);
+            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) => {
+                stopPointerSessionRef.current = null;
                 if ((reason === 'pointerup' ||
                     reason === 'buttons-released' ||
                     (reason === 'lostpointercapture' && (endEvent === null || endEvent === void 0 ? void 0 : endEvent.buttons) === 0)) &&
@@ -1260,7 +1292,22 @@ 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: -HANDLE_OUTSET,

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

@@ -15,7 +15,6 @@ const TimelineWidthProvider = ({ children }) => {
         shouldApplyCssTransforms: true,
     });
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const width = (0, react_1.useMemo)(() => {
         var _a, _b;
@@ -28,12 +27,10 @@ const TimelineWidthProvider = ({ children }) => {
         const zoom = (0, get_timeline_max_zoom_1.getTimelineZoom)({
             durationInFrames,
             timelineViewportWidth: scrollableWidth,
-            zoom: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
-                ? ((_f = zoomMap[canvasContent.compositionId]) !== null && _f !== void 0 ? _f : null)
-                : null,
+            zoom: videoConfig ? ((_f = zoomMap[videoConfig.id]) !== null && _f !== void 0 ? _f : null) : null,
         });
         return (0, get_timeline_max_zoom_1.getTimelineWidth)({ durationInFrames, zoom });
-    }, [canvasContent, size === null || size === void 0 ? void 0 : size.width, videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames, zoomMap]);
+    }, [size === null || size === void 0 ? void 0 : size.width, videoConfig, zoomMap]);
     return (jsx_runtime_1.jsx(exports.TimelineWidthContext.Provider, { value: width, children: children }));
 };
 exports.TimelineWidthProvider = TimelineWidthProvider;