@remotion/studio 4.0.521 → 4.0.523

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragDelta = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceLeftEdgeDraggable = exports.canResizeTimelineSequenceDuration = exports.isTimelineSequenceDurationDraggable = exports.isCascadingSequence = exports.isTransitionSeriesSequence = exports.timelineSequenceFromDragSnapThresholdPx = void 0;
+exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragDelta = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceLeftEdgeDraggable = exports.canResizeTimelineSequenceDuration = exports.isTimelineSequenceDurationDraggable = exports.isCascadingSequence = exports.isTransitionSeriesSequence = exports.getTimelineSequenceMediaDurationDragLimits = exports.TimelineSequenceMediaDurationDragLimitsProvider = exports.TimelineSequenceMediaDurationDragLimitsContext = exports.timelineSequenceFromDragSnapThresholdPx = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const canvas_1 = require("@remotion/canvas");
 const studio_shared_1 = require("@remotion/studio-shared");
@@ -51,7 +51,46 @@ 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;
+exports.TimelineSequenceMediaDurationDragLimitsContext = react_1.default.createContext(null);
+const TimelineSequenceMediaDurationDragLimitsProvider = ({ children }) => {
+    const limits = (0, react_1.useRef)(new Map());
+    return (jsx_runtime_1.jsx(exports.TimelineSequenceMediaDurationDragLimitsContext.Provider, { value: limits, children: children }));
+};
+exports.TimelineSequenceMediaDurationDragLimitsProvider = TimelineSequenceMediaDurationDragLimitsProvider;
+const getTimelineSequenceMediaDurationDragLimits = ({ cascadedStart, displayDurationInFrames, displayStart, effectiveMaxMediaDuration, explicitDurationInFrames, hasImplicitDuration, naturalMediaDuration, timelineDurationInFrames, }) => {
+    if (naturalMediaDuration === null ||
+        !Number.isFinite(naturalMediaDuration) ||
+        naturalMediaDuration <= 0) {
+        return null;
+    }
+    const initialDuration = explicitDurationInFrames !== null && explicitDurationInFrames !== void 0 ? explicitDurationInFrames : Math.ceil(displayStart +
+        Math.max(0, Math.min(displayDurationInFrames, timelineDurationInFrames - displayStart, effectiveMaxMediaDuration !== null && effectiveMaxMediaDuration !== void 0 ? effectiveMaxMediaDuration : Infinity)) -
+        cascadedStart);
+    const maximumDuration = 
+    // Keeping duration omitted represents the media's natural end. An
+    // explicit duration is only useful once its edge is before that end.
+    Math.ceil(displayStart + naturalMediaDuration - cascadedStart) -
+        (hasImplicitDuration ? 1 : 0);
+    if (hasImplicitDuration && initialDuration > maximumDuration) {
+        return null;
+    }
+    return { initialDuration, maximumDuration };
+};
+exports.getTimelineSequenceMediaDurationDragLimits = getTimelineSequenceMediaDurationDragLimits;
+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,
@@ -192,14 +231,8 @@ const isTimelineSequenceDurationDraggable = (sequence) => {
         Boolean(sequence.controls));
 };
 exports.isTimelineSequenceDurationDraggable = isTimelineSequenceDurationDraggable;
-const canResizeTimelineSequenceDuration = ({ sequence, status, }) => {
-    if ((status === null || status === void 0 ? void 0 : status.status) !== 'static') {
-        return false;
-    }
-    if (sequence.type === 'audio' || sequence.type === 'video') {
-        return status.codeValue !== undefined;
-    }
-    return true;
+const canResizeTimelineSequenceDuration = ({ status, }) => {
+    return (status === null || status === void 0 ? void 0 : status.status) === 'static';
 };
 exports.canResizeTimelineSequenceDuration = canResizeTimelineSequenceDuration;
 const isTimelineSequenceLeftEdgeDraggable = (sequence) => {
@@ -233,7 +266,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;
@@ -252,7 +285,10 @@ const getTimelineSequenceLeftEdgeDragValues = ({ initialDuration, initialFrom, i
     return {
         durationInFrames: initialDuration - clampedDeltaFrames,
         from: initialFrom + clampedDeltaFrames,
-        trimBefore: initialTrimBefore + clampedDeltaFrames * playbackRate,
+        // Division and multiplication by playbackRate may not cancel exactly.
+        trimBefore: clampedDeltaFrames === -initialTrimBefore / playbackRate
+            ? 0
+            : initialTrimBefore + clampedDeltaFrames * playbackRate,
     };
 };
 exports.getTimelineSequenceLeftEdgeDragValues = getTimelineSequenceLeftEdgeDragValues;
@@ -307,6 +343,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 +364,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 +385,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,8 +453,9 @@ 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, draggedSequenceMediaDurationDragLimits, selectedSequenceMediaDurationDragLimits, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, timelineDurationInFrames, }) => {
     var _a;
+    var _b, _c, _d;
     const draggedSelectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(draggedNodePathInfo);
     const selectedSequenceItems = selectedItems.filter((item) => item.type === 'sequence');
     const draggedItemIsSelected = selectedSequenceItems.some((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo) ===
@@ -445,7 +483,6 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
         const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
         const durationStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.durationInFrames;
         if (!(0, exports.canResizeTimelineSequenceDuration)({
-            sequence: originalSequence,
             status: durationStatus,
         })) {
             return null;
@@ -456,13 +493,29 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
         }
         const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
         if (!targets.has(key)) {
+            const selectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(nodePathInfo);
+            const isMedia = originalSequence.type === 'audio' || originalSequence.type === 'video';
+            const isDraggedSequence = selectionKey === draggedSelectionKey;
+            const mediaDurationDragLimits = isMedia
+                ? isDraggedSequence
+                    ? draggedSequenceMediaDurationDragLimits
+                    : ((_b = selectedSequenceMediaDurationDragLimits === null || selectedSequenceMediaDurationDragLimits === void 0 ? void 0 : selectedSequenceMediaDurationDragLimits.get(selectionKey)) !== null && _b !== void 0 ? _b : null)
+                : null;
+            if (isMedia && mediaDurationDragLimits === null) {
+                return null;
+            }
+            const minimumDuration = Math.max(1 - originalSequence.from, getMinimumSequenceDuration({ sequence: originalSequence, sequences }));
+            const initialDuration = (_c = mediaDurationDragLimits === null || mediaDurationDragLimits === void 0 ? void 0 : mediaDurationDragLimits.initialDuration) !== null && _c !== void 0 ? _c : originalSequence.duration;
+            const constrainedMaximumDuration = Math.min((_d = mediaDurationDragLimits === null || mediaDurationDragLimits === void 0 ? void 0 : mediaDurationDragLimits.maximumDuration) !== null && _d !== void 0 ? _d : Infinity, timelineDurationInFrames - track.cascadedStart);
+            const maximumDuration = isMedia
+                ? Math.max(minimumDuration, initialDuration, constrainedMaximumDuration)
+                : Math.max(minimumDuration, constrainedMaximumDuration);
             targets.set(key, {
                 fileName: nodePath.absolutePath,
-                initialDuration: originalSequence.duration,
-                minimumDuration: getMinimumSequenceDuration({
-                    sequence: originalSequence,
-                    sequences,
-                }),
+                initialDuration,
+                maximumDuration,
+                // A negative start needs enough duration to retain one visible frame.
+                minimumDuration,
                 nodePath,
                 schema: controls.schema,
             });
@@ -558,6 +611,7 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
             {
                 nodePath: track.nodePathInfo.sequenceSubscriptionKey,
                 originalSequence,
+                initialTimelineStart: track.cascadedStart,
             },
         ];
     });
@@ -579,7 +633,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 +681,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 +721,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 +738,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         previewServerState,
         overrideIdToNodePathMappings,
         onDragEnd,
+        onSelect,
     });
     latestRef.current = {
         nodePathInfo,
@@ -691,6 +748,7 @@ const TimelineSequenceLeftEdgeDragHandleInner = ({ nodePathInfo, windowWidth, ti
         previewServerState,
         overrideIdToNodePathMappings,
         onDragEnd,
+        onSelect,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -702,7 +760,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 +804,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 +877,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 +913,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,
@@ -998,16 +1068,17 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         document.body.style.webkitUserSelect = 'none';
         // Register before React commits so no pointer move can arrive before
         // the global session listeners exist.
-        stopPointerSessionRef.current = (0, pointer_session_1.startCapturedPointerSession)({
+        stopPointerSessionRef.current = (0, pointer_session_1.startDeferredCapturedPointerSession)({
             event: e.nativeEvent,
-            captureTarget: e.currentTarget,
-            onMove: (moveEvent) => {
+            captureTarget: e.currentTarget.ownerDocument.body,
+            onMove: (moveEvent, capturePointer) => {
                 const dragState = dragStateRef.current;
                 if (!dragState) {
                     return;
                 }
                 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,
@@ -1015,6 +1086,10 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
                 });
                 dragState.latestDeltaFrames = deltaFrames;
                 if (deltaFrames !== 0) {
+                    // The bar can be removed when it leaves the visible timeline.
+                    // Capture only after a real drag starts so clicks and double-clicks
+                    // remain targeted at the bar.
+                    capturePointer();
                     dragState.didMove = true;
                 }
                 for (const target of dragState.targets) {
@@ -1073,33 +1148,38 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
     };
 };
 exports.useTimelineSequenceFromDrag = useTimelineSequenceFromDrag;
-const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd }) => {
+const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, mediaDurationDragLimits, 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 mediaDurationDragLimitsRegistry = (0, react_1.useContext)(exports.TimelineSequenceMediaDurationDragLimitsContext);
+    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)({
         nodePathInfo,
+        mediaDurationDragLimits,
         setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
         onDragEnd,
+        onSelect,
     });
     latestRef.current = {
         nodePathInfo,
+        mediaDurationDragLimits,
         setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
         previewServerState,
         overrideIdToNodePathMappings,
         onDragEnd,
+        onSelect,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -1111,7 +1191,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 +1233,98 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
         });
     }, []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
-        var _a, _b;
+        var _a;
+        var _b, _c;
         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 { nodePathInfo: latestNodePathInfo, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, } = latestRef.current;
+        const canCalculateDelta = Number.isFinite(pxPerFrame) && pxPerFrame > 0;
+        const { nodePathInfo: latestNodePathInfo, mediaDurationDragLimits: latestMediaDurationDragLimits, 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
+            ? ((_c = (0, exports.getTimelineSequenceDurationDragTargets)({
+                draggedNodePathInfo: latestNodePathInfo,
+                draggedSequenceMediaDurationDragLimits: latestMediaDurationDragLimits,
+                selectedSequenceMediaDurationDragLimits: (_b = mediaDurationDragLimitsRegistry === null || mediaDurationDragLimitsRegistry === void 0 ? void 0 : mediaDurationDragLimitsRegistry.current) !== null && _b !== void 0 ? _b : null,
+                selectedItems: latestSelectedItems,
+                sequences: sequencesRef.current,
+                overrideIdsToNodePaths: latestOverrideIdsToNodePaths,
+                propStatuses: propStatusesRef.current,
+                timelineDurationInFrames,
+            })) !== null && _c !== void 0 ? _c : [])
+            : [];
+        (_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)({
+                const previewValue = (0, exports.getTimelineSequenceDurationDragValue)({
                     initialDuration: target.initialDuration,
                     deltaFrames,
+                    maximumDuration: target.maximumDuration,
                     minimumDuration: target.minimumDuration,
-                })));
+                });
+                latestRef.current.setDragOverrides(target.nodePath, 'durationInFrames', remotion_1.Internals.makeStaticDragOverride(previewValue));
             }
         };
-        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 +1339,23 @@ const TimelineSequenceRightEdgeDragHandleInner = ({ nodePathInfo, windowWidth, t
                 }
             },
         });
-    }, [dragging, finishDrag]);
+    }, [
+        currentSelection,
+        finishDrag,
+        mediaDurationDragLimitsRegistry,
+        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,