@remotion/studio 4.0.521 → 4.0.523

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineSequenceItem = exports.SEQUENCE_REORDER_MIME_TYPE = void 0;
+exports.TimelineSequenceItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -43,6 +43,8 @@ const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
 const get_sequence_double_click_action_1 = require("../../helpers/get-sequence-double-click-action");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
@@ -64,9 +66,12 @@ const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const get_sequence_context_menu_items_1 = require("./get-sequence-context-menu-items");
+const get_sequence_split_menu_item_1 = require("./get-sequence-split-menu-item");
 const imperative_state_1 = require("./imperative-state");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const timeline_asset_link_1 = require("./timeline-asset-link");
+const timeline_refs_1 = require("./timeline-refs");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineDuplicateCount_1 = require("./TimelineDuplicateCount");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
@@ -76,6 +81,8 @@ const TimelineMediaInfo_1 = require("./TimelineMediaInfo");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceName_1 = require("./TimelineSequenceName");
+const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
+const use_asset_timeline_context_menu_1 = require("./use-asset-timeline-context-menu");
 const use_delete_timeline_items_1 = require("./use-delete-timeline-items");
 const use_open_sequence_in_apps_1 = require("./use-open-sequence-in-apps");
 const use_rename_sequence_1 = require("./use-rename-sequence");
@@ -99,8 +106,6 @@ const effectDropHighlight = {
     outline: colors_1.BORDER_TIMELINE_DROP_BLUE,
     outlineOffset: -1,
 };
-exports.SEQUENCE_REORDER_MIME_TYPE = 'application/remotion-sequence-reorder';
-let currentSequenceDrag = null;
 const TimelineSequenceExpandArrowInner = ({ disabled, isExpanded, nodePathInfo, sequence }) => {
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const hasExpandableContent = (0, use_timeline_expanded_tree_1.useTimelineSequenceHasExpandableContent)({
@@ -146,39 +151,24 @@ const sequenceReorderAfterLine = {
     ...sequenceReorderLineBase,
     top: -1,
 };
-const hasSequenceReorderDragType = (dataTransfer) => {
-    return Array.from(dataTransfer.types).includes(exports.SEQUENCE_REORDER_MIME_TYPE);
-};
-const isSequenceReorderDrag = (dataTransfer) => {
-    return (currentSequenceDrag !== null || hasSequenceReorderDragType(dataTransfer));
+const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
+    return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
-const getSequenceReorderDragData = (dataTransfer) => {
-    if (currentSequenceDrag) {
-        return currentSequenceDrag;
-    }
-    const value = dataTransfer.getData(exports.SEQUENCE_REORDER_MIME_TYPE);
-    if (!value) {
-        return null;
-    }
-    try {
-        const parsed = JSON.parse(value);
-        if (typeof parsed.nodePathKey === 'string' &&
-            typeof parsed.siblingIndex === 'number' &&
-            (typeof parsed.parentId === 'string' || parsed.parentId === null) &&
-            typeof parsed.fileName === 'string' &&
-            parsed.nodePath &&
-            Array.isArray(parsed.nodePath.nodePath)) {
-            return parsed;
+const sequencePointerDropTargets = new Map();
+const getSequencePointerDropTargetAtPoint = ({ clientX, clientY, }) => {
+    for (const element of document.elementsFromPoint(clientX, clientY)) {
+        let current = element;
+        while (current) {
+            const dropTarget = sequencePointerDropTargets.get(current);
+            if (dropTarget) {
+                return dropTarget;
+            }
+            current = current.parentElement;
         }
     }
-    catch (_a) {
-        return null;
-    }
     return null;
 };
-const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
-    return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
-};
+const SEQUENCE_REORDER_POINTER_THRESHOLD = 3;
 const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, }) => {
     var _a, _b;
     var _c, _d, _e, _f;
@@ -187,12 +177,14 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
     const canMutateEffects = previewConnected && (0, interactivity_enabled_1.isStudioSelectionEnabled)() && (0, browser_studio_operations_1.canUseEffectOperations)();
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { isHighestContext } = (0, use_keybinding_1.useKeybinding)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
+    const assetContextMenu = (0, use_asset_timeline_context_menu_1.useAssetTimelineContextMenu)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
     const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
@@ -209,6 +201,9 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
     const [isRenaming, setIsRenaming] = (0, react_1.useState)(false);
     const [sequenceDropIndicator, setSequenceDropIndicator] = (0, react_1.useState)(null);
+    const sequenceReorderWrapperRef = (0, react_1.useRef)(null);
+    const stopSequencePointerSession = (0, react_1.useRef)(null);
+    const suppressNextClick = (0, react_1.useRef)(false);
     const { canOpenInEditor, canConfigureApps, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
@@ -306,11 +301,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         setPropStatuses,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
-    const getSequenceDropTarget = (0, react_1.useCallback)((e) => {
-        const dragData = getSequenceReorderDragData(e.dataTransfer);
-        if (!dragData) {
-            return null;
-        }
+    const getSequenceDropTarget = (0, react_1.useCallback)((clientY, dragData) => {
         if (!nodePath || !nodePathKey || !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
             return {
                 type: 'invalid',
@@ -336,8 +327,12 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 reason: 'Sequences can only be reordered with direct JSX siblings.',
             };
         }
-        const rect = e.currentTarget.getBoundingClientRect();
-        const before = e.clientY < rect.top + rect.height / 2;
+        const element = sequenceReorderWrapperRef.current;
+        if (!element) {
+            return null;
+        }
+        const rect = element.getBoundingClientRect();
+        const before = clientY < rect.top + rect.height / 2;
         const insertionIndex = before ? siblingIndex : siblingIndex + 1;
         const toIndex = getDestinationIndex({
             fromIndex: dragData.siblingIndex,
@@ -362,78 +357,13 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         siblingIndex,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
-    const onSequenceDragStart = (0, react_1.useCallback)((e) => {
-        if (!canReorderSequence ||
-            !nodePath ||
-            !nodePathKey ||
-            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
-            e.preventDefault();
-            return;
-        }
-        const dragData = {
-            nodePath,
-            nodePathKey,
-            siblingIndex,
-            parentId,
-            fileName: validatedLocation.source,
-        };
-        currentSequenceDrag = dragData;
-        e.dataTransfer.effectAllowed = 'move';
-        e.dataTransfer.setData(exports.SEQUENCE_REORDER_MIME_TYPE, JSON.stringify(dragData));
-        e.stopPropagation();
-    }, [
-        canReorderSequence,
-        nodePath,
-        nodePathKey,
-        parentId,
-        siblingIndex,
-        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
-    ]);
-    const onSequenceDragEnd = (0, react_1.useCallback)(() => {
-        currentSequenceDrag = null;
-        setSequenceDropIndicator(null);
-    }, []);
-    const onSequenceDragOver = (0, react_1.useCallback)((e) => {
-        if (!hasSequenceReorderDragType(e.dataTransfer)) {
-            return;
-        }
-        const dropTarget = getSequenceDropTarget(e);
-        if (!dropTarget) {
-            setSequenceDropIndicator(null);
-            return;
-        }
-        if (dropTarget.type === 'invalid') {
-            setSequenceDropIndicator(null);
-            e.dataTransfer.dropEffect = 'none';
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        e.dataTransfer.dropEffect = 'move';
-        setSequenceDropIndicator(dropTarget.position);
-    }, [getSequenceDropTarget]);
-    const onSequenceDragLeave = (0, react_1.useCallback)((e) => {
-        if (e.currentTarget.contains(e.relatedTarget)) {
-            return;
-        }
-        setSequenceDropIndicator(null);
-    }, []);
-    const onSequenceDrop = (0, react_1.useCallback)(async (e) => {
+    const reorderSequenceFromPointer = (0, react_1.useCallback)(async (dropTarget) => {
         if (!canReorderSequence ||
             previewServerState.type !== 'connected' ||
             !nodePath ||
             !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
             return;
         }
-        const dropTarget = getSequenceDropTarget(e);
-        if (!dropTarget || dropTarget.type === 'invalid') {
-            setSequenceDropIndicator(null);
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        setSequenceDropIndicator(null);
-        currentSequenceDrag = null;
         try {
             const result = await (0, reorder_sequence_api_1.reorderSequence)({
                 fileName: validatedLocation.source,
@@ -451,11 +381,178 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         }
     }, [
         canReorderSequence,
-        getSequenceDropTarget,
         nodePath,
         previewServerState,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
+    (0, react_1.useEffect)(() => {
+        const element = sequenceReorderWrapperRef.current;
+        if (!element || !canHandleSequenceDrag) {
+            return;
+        }
+        const pointerDropTarget = {
+            getDropTarget: getSequenceDropTarget,
+            reorder: (dropTarget) => {
+                reorderSequenceFromPointer(dropTarget).catch(() => undefined);
+            },
+            setDropIndicator: setSequenceDropIndicator,
+        };
+        sequencePointerDropTargets.set(element, pointerDropTarget);
+        return () => {
+            sequencePointerDropTargets.delete(element);
+        };
+    }, [
+        canHandleSequenceDrag,
+        getSequenceDropTarget,
+        reorderSequenceFromPointer,
+    ]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            var _a;
+            return (_a = stopSequencePointerSession.current) === null || _a === void 0 ? void 0 : _a.call(stopSequencePointerSession);
+        };
+    }, []);
+    const onSequencePointerDown = (0, react_1.useCallback)((e) => {
+        var _a;
+        if (!(e.target instanceof Element)) {
+            return;
+        }
+        if (e.button !== 0 ||
+            !e.isPrimary ||
+            e.target.closest('[data-remotion-sequence-reorder-row]') !==
+                e.currentTarget ||
+            e.target.closest('button, input, textarea, select, [contenteditable="true"], [data-timeline-layer-eye]') ||
+            !canReorderSequence ||
+            !nodePath ||
+            !nodePathKey ||
+            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
+            return;
+        }
+        (_a = stopSequencePointerSession.current) === null || _a === void 0 ? void 0 : _a.call(stopSequencePointerSession);
+        const dragData = {
+            fileName: validatedLocation.source,
+            nodePath,
+            nodePathKey,
+            parentId,
+            siblingIndex,
+        };
+        const sourceElement = e.currentTarget;
+        const sourceRect = sourceElement.getBoundingClientRect();
+        const startX = e.clientX;
+        const startY = e.clientY;
+        let currentClientY = startY;
+        let dragPreview = null;
+        let activeDropTarget = null;
+        let activeDrop = null;
+        let didDrag = false;
+        let previousUserSelect = '';
+        let previousWebkitUserSelect = '';
+        const updateDropTarget = (clientY) => {
+            var _a;
+            const pointerDropTarget = getSequencePointerDropTargetAtPoint({
+                clientX: startX,
+                clientY,
+            });
+            const dropTarget = pointerDropTarget === null || pointerDropTarget === void 0 ? void 0 : pointerDropTarget.getDropTarget(clientY, dragData);
+            if (activeDropTarget !== pointerDropTarget) {
+                activeDropTarget === null || activeDropTarget === void 0 ? void 0 : activeDropTarget.setDropIndicator(null);
+            }
+            activeDropTarget = pointerDropTarget;
+            activeDrop = (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.type) === 'valid' ? dropTarget : null;
+            activeDropTarget === null || activeDropTarget === void 0 ? void 0 : activeDropTarget.setDropIndicator((_a = activeDrop === null || activeDrop === void 0 ? void 0 : activeDrop.position) !== null && _a !== void 0 ? _a : null);
+        };
+        const verticalScroll = timeline_refs_1.timelineVerticalScroll.current;
+        const autoScroll = (0, timeline_scroll_logic_1.startTimelineEdgeAutoScroll)({
+            includeHorizontal: false,
+            includeVertical: true,
+            verticalTopOffset: isStill ? 0 : TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
+            onTick: (directions) => {
+                if (directions.y === null || !verticalScroll) {
+                    return;
+                }
+                verticalScroll.scrollTop +=
+                    directions.y === 'up'
+                        ? -timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT
+                        : timeline_scroll_logic_1.EDGE_SCROLL_VERTICAL_INCREMENT;
+                updateDropTarget(currentClientY);
+            },
+        });
+        stopSequencePointerSession.current = (0, pointer_session_1.startCapturedPointerSession)({
+            captureTarget: sourceElement,
+            event: e.nativeEvent,
+            onMove: (pointerEvent) => {
+                currentClientY = pointerEvent.clientY;
+                if (!didDrag &&
+                    Math.hypot(pointerEvent.clientX - startX, pointerEvent.clientY - startY) < SEQUENCE_REORDER_POINTER_THRESHOLD) {
+                    return;
+                }
+                if (!didDrag) {
+                    didDrag = true;
+                    previousUserSelect = document.body.style.userSelect;
+                    previousWebkitUserSelect = document.body.style.webkitUserSelect;
+                    document.body.style.userSelect = 'none';
+                    document.body.style.webkitUserSelect = 'none';
+                    dragPreview = sourceElement.cloneNode(true);
+                    dragPreview.setAttribute('aria-hidden', 'true');
+                    dragPreview.setAttribute('data-remotion-sequence-reorder-preview', 'true');
+                    dragPreview.removeAttribute('data-remotion-sequence-reorder-row');
+                    Object.assign(dragPreview.style, {
+                        height: `${sourceRect.height}px`,
+                        left: `${sourceRect.left}px`,
+                        margin: '0',
+                        opacity: '0.8',
+                        pointerEvents: 'none',
+                        position: 'fixed',
+                        top: `${sourceRect.top}px`,
+                        width: `${sourceRect.width}px`,
+                        zIndex: '2147483647',
+                    });
+                    document.body.appendChild(dragPreview);
+                }
+                pointerEvent.preventDefault();
+                dragPreview.style.transform = `translate3d(0, ${pointerEvent.clientY - startY}px, 0)`;
+                updateDropTarget(pointerEvent.clientY);
+                autoScroll.update({ clientX: startX, clientY: pointerEvent.clientY });
+            },
+            onEnd: (reason, pointerEvent) => {
+                if (reason === 'pointerup' && pointerEvent && didDrag) {
+                    updateDropTarget(pointerEvent.clientY);
+                }
+                autoScroll.stop();
+                activeDropTarget === null || activeDropTarget === void 0 ? void 0 : activeDropTarget.setDropIndicator(null);
+                dragPreview === null || dragPreview === void 0 ? void 0 : dragPreview.remove();
+                stopSequencePointerSession.current = null;
+                if (!didDrag) {
+                    return;
+                }
+                document.body.style.userSelect = previousUserSelect;
+                document.body.style.webkitUserSelect = previousWebkitUserSelect;
+                suppressNextClick.current = true;
+                setTimeout(() => {
+                    suppressNextClick.current = false;
+                }, 0);
+                if (reason === 'pointerup' && pointerEvent && activeDrop) {
+                    activeDropTarget === null || activeDropTarget === void 0 ? void 0 : activeDropTarget.reorder(activeDrop);
+                }
+            },
+        });
+    }, [
+        canReorderSequence,
+        isStill,
+        nodePath,
+        nodePathKey,
+        parentId,
+        siblingIndex,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
+    ]);
+    const onSequenceClickCapture = (0, react_1.useCallback)((e) => {
+        if (!suppressNextClick.current) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        suppressNextClick.current = false;
+    }, []);
     const mediaSrc = sequence.type === 'audio' ||
         sequence.type === 'video' ||
         sequence.type === 'image'
@@ -694,6 +791,9 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
     }, [canRotate, nodePathInfo, selectItem, setManuallyEnabled]);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         var _a;
+        if (assetContextMenu !== null) {
+            return assetContextMenu;
+        }
         if (selectable && !selected) {
             onSelect({ shiftKey: false, toggleKey: false });
         }
@@ -705,6 +805,14 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                 onDuplicateSelectedSequences,
             });
         }
+        const splitMenuItem = (0, get_sequence_split_menu_item_1.getSequenceSplitMenuItem)({
+            nodePathInfo,
+            sequence,
+            propStatuses: propStatusesForOverride,
+            splitFrame: (0, imperative_state_1.getCurrentFrame)(),
+            canEditSource: previewInteractive && Boolean(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source),
+            hasMultipleSelection: selected && selectedItems.length > 1,
+        });
         const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.getSequenceFreezeFrameMenuItem)({
             clientId: previewInteractive && previewServerState.type === 'connected'
                 ? previewServerState.clientId
@@ -820,11 +928,13 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                         subMenu: null,
                         value: 'rename-sequence',
                     },
+                    ...(splitMenuItem ? [splitMenuItem] : []),
                     ...(freezeFrameMenuItem ? [freezeFrameMenuItem] : []),
                 ]
                 : [],
         });
     }, [
+        assetContextMenu,
         canAddEffect,
         canCrop,
         canRotate,
@@ -839,7 +949,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         isProgrammaticallyDuplicated,
         mediaSrc,
         nodePath,
-        nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects,
+        nodePathInfo,
         onAddEffect,
         onCrop,
         onRotate,
@@ -859,6 +969,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         selectAsset,
         selectable,
         selected,
+        selectedItems.length,
         selectedSequenceNodePathInfos,
         sequence,
         sequenceFrameOffset,
@@ -880,9 +991,7 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
         };
     }, [sequenceDropIndicator]);
     const onEffectDragOver = (0, react_1.useCallback)((e) => {
-        if (!canDropEffect ||
-            isSequenceReorderDrag(e.dataTransfer) ||
-            !(0, effect_drag_and_drop_1.hasEffectDragType)(e.dataTransfer)) {
+        if (!canDropEffect || !(0, effect_drag_and_drop_1.hasEffectDragType)(e.dataTransfer)) {
             return;
         }
         e.preventDefault();
@@ -900,7 +1009,6 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
             previewServerState.type !== 'connected' ||
             nodePath === null ||
             validatedLocation === null ||
-            isSequenceReorderDrag(e.dataTransfer) ||
             !(0, effect_drag_and_drop_1.hasEffectDragType)(e.dataTransfer)) {
             return;
         }
@@ -935,11 +1043,11 @@ const TimelineSequenceItemInner = ({ afterDropLineOffset, connectedCompositions,
                         " ",
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })
                     ] })) : null] }) }));
-    const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, trackRow, sequenceDropIndicator === 'after' ? (jsx_runtime_1.jsx("div", { style: {
+    const reorderableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { ref: sequenceReorderWrapperRef, "data-remotion-sequence-reorder-row": true, onClickCapture: onSequenceClickCapture, onPointerDownCapture: onSequencePointerDown, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, trackRow, sequenceDropIndicator === 'after' ? (jsx_runtime_1.jsx("div", { style: {
                     ...sequenceReorderAfterLineWrapper,
                     top: afterDropLineOffset,
                 }, children: jsx_runtime_1.jsx("div", { style: sequenceReorderAfterLine }) })) : null] })) : (trackRow);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: reorderableTrackRow })) : (reorderableTrackRow), previewConnected &&
                 (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
                 isExpanded &&
                 hasExpandableContent &&

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

@@ -4,9 +4,28 @@ import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-s
 import type { MoveEffectKeyframeChange, MoveSequenceKeyframeChange } from './call-move-keyframe';
 import { type SaveSequencePropChange } from './save-sequence-prop';
 export declare const timelineSequenceFromDragSnapThresholdPx = 10;
+export type TimelineSequenceMediaDurationDragLimits = {
+    readonly initialDuration: number;
+    readonly maximumDuration: number;
+};
+export declare const TimelineSequenceMediaDurationDragLimitsContext: React.Context<React.RefObject<Map<string, TimelineSequenceMediaDurationDragLimits | null>> | null>;
+export declare const TimelineSequenceMediaDurationDragLimitsProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const getTimelineSequenceMediaDurationDragLimits: ({ cascadedStart, displayDurationInFrames, displayStart, effectiveMaxMediaDuration, explicitDurationInFrames, hasImplicitDuration, naturalMediaDuration, timelineDurationInFrames, }: {
+    readonly cascadedStart: number;
+    readonly displayDurationInFrames: number;
+    readonly displayStart: number;
+    readonly effectiveMaxMediaDuration: number | null;
+    readonly explicitDurationInFrames: number | null;
+    readonly hasImplicitDuration: boolean;
+    readonly naturalMediaDuration: number | null;
+    readonly timelineDurationInFrames: number;
+}) => TimelineSequenceMediaDurationDragLimits | null;
 export type TimelineSequenceDurationDragTarget = {
     readonly fileName: string;
     readonly initialDuration: number;
+    readonly maximumDuration: number;
     readonly minimumDuration: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
@@ -24,6 +43,8 @@ export type TimelineSequenceLeftEdgeDragTarget = {
 };
 export type TimelineSequenceFromDragTarget = {
     readonly canSnapToTimelineStart: boolean;
+    readonly minimumDeltaFrames: number;
+    readonly initialTimelineStart: number;
     readonly effectKeyframes: TimelineSequenceEffectKeyframeDragTarget[];
     readonly fileName: string;
     readonly initialFrom: number;
@@ -44,14 +65,14 @@ type TimelineSequenceEffectKeyframeDragTarget = TimelineSequenceKeyframeDragTarg
 export declare const isTransitionSeriesSequence: (sequence: TSequence) => boolean;
 export declare const isCascadingSequence: (sequence: TSequence) => boolean;
 export declare const isTimelineSequenceDurationDraggable: (sequence: TSequence) => boolean;
-export declare const canResizeTimelineSequenceDuration: ({ sequence, status, }: {
-    readonly sequence: TSequence;
+export declare const canResizeTimelineSequenceDuration: ({ status, }: {
     readonly status: CanUpdateSequencePropStatus | undefined;
 }) => boolean;
 export declare const isTimelineSequenceLeftEdgeDraggable: (sequence: TSequence) => boolean;
-export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, deltaFrames, minimumDuration, }: {
+export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, deltaFrames, maximumDuration, minimumDuration, }: {
     readonly initialDuration: number;
     readonly deltaFrames: number;
+    readonly maximumDuration: number;
     readonly minimumDuration?: number | undefined;
 }) => number;
 export declare const getTimelineSequenceLeftEdgeDragDelta: ({ initialDuration, initialTrimBefore, deltaFrames, playbackRate, minimumDuration, }: {
@@ -85,8 +106,9 @@ export declare const getTimelineSequenceFromDragValue: ({ initialFrom, deltaFram
     readonly initialFrom: number;
     readonly deltaFrames: number;
 }) => number;
-export declare const getTimelineSequenceFromDragDelta: ({ deltaFrames, pxPerFrame, snappingEnabled, targets, }: {
+export declare const getTimelineSequenceFromDragDelta: ({ deltaFrames, timelineDurationInFrames, pxPerFrame, snappingEnabled, targets, }: {
     readonly deltaFrames: number;
+    readonly timelineDurationInFrames: number;
     readonly pxPerFrame: number;
     readonly snappingEnabled: boolean;
     readonly targets: readonly TimelineSequenceFromDragTarget[];
@@ -102,12 +124,15 @@ export declare const getTimelineSequenceFromDragKeyframeMoves: ({ targets, delta
     readonly effectKeyframes: MoveEffectKeyframeChange[];
     readonly sequenceKeyframes: MoveSequenceKeyframeChange[];
 };
-export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
+export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathInfo, draggedSequenceMediaDurationDragLimits, selectedSequenceMediaDurationDragLimits, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, timelineDurationInFrames, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
+    readonly draggedSequenceMediaDurationDragLimits: TimelineSequenceMediaDurationDragLimits | null;
+    readonly selectedSequenceMediaDurationDragLimits: ReadonlyMap<string, TimelineSequenceMediaDurationDragLimits | null> | null;
     readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
+    readonly timelineDurationInFrames: number;
 }) => TimelineSequenceDurationDragTarget[] | null;
 export declare const getTimelineSequenceLeftEdgeDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
@@ -128,6 +153,8 @@ export declare const TimelineSequenceLeftEdgeDragHandle: React.NamedExoticCompon
     readonly windowWidth: number;
     readonly timelineDurationInFrames: number;
     readonly onDragEnd: (wasDragged: boolean) => void;
+    readonly onSelect: (interaction?: import("@remotion/canvas").CanvasSelectionInteraction | undefined) => void;
+    readonly selected: boolean;
 }>;
 export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth, timelineDurationInFrames, onDragEnd, }: {
     readonly nodePathInfo: SequenceNodePathInfo | null;
@@ -139,8 +166,11 @@ export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth,
 };
 export declare const TimelineSequenceRightEdgeDragHandle: React.NamedExoticComponent<{
     readonly nodePathInfo: SequenceNodePathInfo;
+    readonly mediaDurationDragLimits: TimelineSequenceMediaDurationDragLimits | null;
     readonly windowWidth: number;
     readonly timelineDurationInFrames: number;
     readonly onDragEnd: (wasDragged: boolean) => void;
+    readonly onSelect: (interaction?: import("@remotion/canvas").CanvasSelectionInteraction | undefined) => void;
+    readonly selected: boolean;
 }>;
 export {};