@remotion/studio 4.0.521 → 4.0.523

package/dist/components/Timeline/TimelineSequence.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequence = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_1 = require("@remotion/canvas");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
@@ -45,7 +46,7 @@ const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-seque
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const is_video_with_last_frame_hold_1 = require("../../helpers/is-video-with-last-frame-hold");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const use_max_media_duration_1 = require("../../helpers/use-max-media-duration");
+const use_media_metadata_1 = require("../../helpers/use-media-metadata");
 const modals_1 = require("../../state/modals");
 const AudioWaveform_1 = require("../AudioWaveform");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
@@ -55,6 +56,8 @@ 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 get_timeline_media_start_frame_1 = require("./get-timeline-media-start-frame");
 const get_timeline_sequence_visible_layout_1 = require("./get-timeline-sequence-visible-layout");
 const imperative_state_1 = require("./imperative-state");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
@@ -66,6 +69,7 @@ const TimelineSequenceRightEdgeDragHandle_1 = require("./TimelineSequenceRightEd
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
 const TimelineViewport_1 = require("./TimelineViewport");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+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_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
@@ -115,8 +119,10 @@ const TimelineSequenceNegativeStartInner = ({ left, width, leftEdgeVisible, clip
     return (jsx_runtime_1.jsx("div", { style: outerStyle, children: jsx_runtime_1.jsx("div", { style: innerStyle }) }));
 };
 const TimelineSequenceNegativeStart = react_1.default.memo(TimelineSequenceNegativeStartInner);
-const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, postmount, negativeStart, leftEdgeVisible, negativeStartClipped, style, children, edgeDragHandles, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, onPointerDownCapture, onDoubleClick, }) => {
+const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, postmount, negativeStart, leftEdgeVisible, negativeStartClipped, style, children, edgeDragHandles, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, onPointerDownCapture, onClick, }) => {
     var _a, _b, _c;
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const isAsset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset';
     const ref = (0, react_1.useRef)(null);
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     (0, TimelineSelection_1.useTimelineMarqueeSelectableItem)(selectionItem, ref);
@@ -160,9 +166,9 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
             ...style,
             background: negativeStart ? colors_1.TRANSPARENT : style.background,
             border: negativeStart ? 'none' : style.border,
-            opacity: selected ? 1 : 0.75,
+            opacity: selected || isAsset ? 1 : 0.75,
         };
-    }, [negativeStart, selected, style]);
+    }, [isAsset, negativeStart, selected, style]);
     const content = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [premount ? (jsx_runtime_1.jsx("div", { style: {
                     left: premount.left,
                     width: premount.width,
@@ -197,7 +203,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
                     display: 'flex',
                     alignItems: 'center',
                 }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame, frozenFrame: frozenFrame }) })) : null] }));
-    return (jsx_runtime_1.jsxs("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDownCapture: onPointerDownCapture, onPointerDown: selectable ? onPointerDown : undefined, onDoubleClick: onDoubleClick, children: [negativeStart ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsxs("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDownCapture: onPointerDownCapture, onPointerDown: selectable ? onPointerDown : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, children: [negativeStart ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(TimelineSequenceNegativeStart, { left: negativeStart.left, width: negativeStart.width, leftEdgeVisible: leftEdgeVisible, clipped: negativeStartClipped }), jsx_runtime_1.jsx("div", { style: {
                             background: style.background,
                             border: style.border,
@@ -232,14 +238,31 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
-    var _a, _b, _c;
-    var _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e;
+    var _f, _g, _h, _j, _k, _l, _m;
     const video = remotion_1.Internals.useVideo();
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const renderWindow = (0, react_1.useContext)(TimelineViewport_1.TimelineViewportContext);
+    const mediaDurationDragLimitsRegistry = (0, react_1.useContext)(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceMediaDurationDragLimitsContext);
     const dragAwareDoubleClick = (0, react_1.useMemo)(() => (0, drag_aware_double_click_1.createDragAwareDoubleClickTracker)(), []);
-    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_d = video === null || video === void 0 ? void 0 : video.fps) !== null && _d !== void 0 ? _d : 30);
-    const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
+    const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)(s.type === 'audio' || s.type === 'video' ? s.src : null);
     const extendVideoLastFrame = (0, is_video_with_last_frame_hold_1.isVideoWithLastFrameHold)(s);
+    const naturalMediaDuration = (s.type === 'audio' || s.type === 'video') &&
+        mediaMetadata !== null &&
+        s.playbackRate > 0
+        ? Math.max(0, (mediaMetadata.duration * ((_f = video === null || video === void 0 ? void 0 : video.fps) !== null && _f !== void 0 ? _f : 30) -
+            (0, get_timeline_media_start_frame_1.getTimelineMediaStartFrame)({
+                startMediaFrom: s.startMediaFrom,
+                mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero,
+                sequenceFrameOffset,
+                playbackRate: s.playbackRate,
+            })) /
+            s.playbackRate)
+        : null;
+    const maxMediaDuration = s.type === 'sequence' || s.type === 'image' || extendVideoLastFrame
+        ? Infinity
+        : naturalMediaDuration;
+    const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
     const { canOpenInEditor, canConfigureApps, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(s);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
@@ -255,7 +278,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         };
     }, [originalLocation]);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    const nodePath = (_e = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _e !== void 0 ? _e : null;
+    const nodePath = (_g = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _g !== void 0 ? _g : null;
     const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
             ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
@@ -265,7 +288,6 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         ((_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
     const durationCanResize = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         (0, TimelineSequenceRightEdgeDragHandle_1.canResizeTimelineSequenceDuration)({
-            sequence: s,
             status: propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames,
         }));
     const fromCanUpdate = Boolean((0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
@@ -278,6 +300,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     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 confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const deleteTimelineItems = (0, use_delete_timeline_items_1.useDeleteTimelineItems)();
@@ -291,7 +314,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         }
         return selectedItems.flatMap((item) => item.type === 'sequence' ? [item.nodePathInfo] : []);
     }, [selected, selectedItems]);
-    const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
+    const performSequenceDoubleClick = (0, react_1.useCallback)((e) => {
         if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
             e.stopPropagation();
             return;
@@ -325,10 +348,16 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         selectComposition,
         sequenceFrameOffset,
     ]);
+    const onSequenceClick = (0, react_1.useCallback)((e) => {
+        if (!dragAwareDoubleClick.acceptClickAsDoubleClick(e)) {
+            return;
+        }
+        performSequenceDoubleClick(e);
+    }, [dragAwareDoubleClick, performSequenceDoubleClick]);
     const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const deleteDisabled = !previewInteractive || !s.controls || !canDeleteFromSource;
-    const isProgrammaticallyDuplicated = ((_f = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _f !== void 0 ? _f : 1) > 1;
+    const isProgrammaticallyDuplicated = ((_h = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _h !== void 0 ? _h : 1) > 1;
     const duplicateDisabled = deleteDisabled || isProgrammaticallyDuplicated;
     const disableInteractivityDisabled = !previewInteractive ||
         !s.showInTimeline ||
@@ -395,6 +424,9 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     ]);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         var _a;
+        if (assetContextMenu !== null) {
+            return assetContextMenu;
+        }
         if (selectable && !selected) {
             onSelect({ shiftKey: false, toggleKey: false });
         }
@@ -406,6 +438,14 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                 onDuplicateSelectedSequences,
             });
         }
+        const splitMenuItem = (0, get_sequence_split_menu_item_1.getSequenceSplitMenuItem)({
+            nodePathInfo,
+            sequence: s,
+            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
@@ -447,11 +487,15 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             originalLocation,
             selectAsset,
             sequence: s,
-            sourceActions: (0, interactivity_enabled_1.isStudioInteractivityEnabled)() && freezeFrameMenuItem
-                ? [freezeFrameMenuItem]
+            sourceActions: (0, interactivity_enabled_1.isStudioInteractivityEnabled)()
+                ? [
+                    ...(splitMenuItem ? [splitMenuItem] : []),
+                    ...(freezeFrameMenuItem ? [freezeFrameMenuItem] : []),
+                ]
                 : [],
         });
     }, [
+        assetContextMenu,
         canOpenInEditor,
         canConfigureApps,
         codingAgentInfo,
@@ -462,6 +506,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         isProgrammaticallyDuplicated,
         mediaSrc,
         nodePath,
+        nodePathInfo,
         onSelect,
         onDeleteSequenceFromSource,
         onDeleteSelectedSequences,
@@ -478,6 +523,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         selectAsset,
         selectable,
         selected,
+        selectedItems.length,
         selectedSequenceNodePathInfos,
         sequenceFrameOffset,
         setPropStatuses,
@@ -488,7 +534,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
         nodePathInfo,
         windowWidth,
-        timelineDurationInFrames: (_g = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _g !== void 0 ? _g : 1,
+        timelineDurationInFrames: (_j = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _j !== void 0 ? _j : 1,
         onDragEnd: dragAwareDoubleClick.endPointerGesture,
     });
     if (!video) {
@@ -502,7 +548,8 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             durationInFrames: displayDurationInFrames,
             startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
             cascadedStart,
-            startFromMedia: s.type === 'sequence' || s.type === 'image' ? 0 : s.startMediaFrom,
+            // The media duration cap already accounts for trimming and playback speed.
+            startFromMedia: 0,
             maxMediaDuration: effectiveMaxMediaDuration,
             video,
             windowWidth,
@@ -549,7 +596,76 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     }, [visibleLayout]);
     const showLeftBorderRadius = (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible) === true &&
         localStart >= 0 &&
-        ((_h = s.trimBefore) !== null && _h !== void 0 ? _h : 0) === 0;
+        ((_k = s.trimBefore) !== null && _k !== void 0 ? _k : 0) === 0 &&
+        (s.type === 'sequence' ||
+            s.type === 'image' ||
+            (0, get_timeline_media_start_frame_1.getTimelineMediaStartFrame)({
+                startMediaFrom: s.startMediaFrom,
+                mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero,
+                sequenceFrameOffset,
+                playbackRate: s.playbackRate,
+            }) === 0);
+    // Compare frame boundaries: fractional media durations still occupy the last frame.
+    const endsAtNaturalMediaDuration = !s.loopDisplay &&
+        s.frozenFrame === null &&
+        (s.type === 'audio' || s.type === 'video') &&
+        s.frozenMediaFrame === null &&
+        naturalMediaDuration !== null &&
+        Number.isFinite(naturalMediaDuration) &&
+        naturalMediaDuration > 0 &&
+        Math.ceil(Math.min(s.duration, video.durationInFrames - s.from, maxMediaDuration !== null && maxMediaDuration !== void 0 ? maxMediaDuration : Infinity)) === Math.ceil(naturalMediaDuration);
+    const parentSequence = sequences.find((candidate) => candidate.id === s.parent);
+    const parentEnd = parentSequence
+        ? (0, canvas_1.getTimelineVisibleStart)(parentSequence, sequences) +
+            (0, canvas_1.getTimelineVisibleDuration)(parentSequence, sequences)
+        : video.durationInFrames;
+    const endsAtContainerBoundary = Math.ceil(s.from + displayDurationInFrames) >=
+        Math.ceil(Math.min(parentEnd, video.durationInFrames));
+    const hasImplicitMediaDuration = (s.type === 'audio' || s.type === 'video') &&
+        ((_d = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _d === void 0 ? void 0 : _d.status) === 'static' &&
+        propStatusesForOverride.durationInFrames.codeValue === undefined;
+    const durationInFramesCodeValue = ((_e = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _e === void 0 ? void 0 : _e.status) === 'static'
+        ? propStatusesForOverride.durationInFrames.codeValue
+        : null;
+    const explicitDurationInFrames = typeof durationInFramesCodeValue === 'number' &&
+        Number.isFinite(durationInFramesCodeValue)
+        ? durationInFramesCodeValue
+        : null;
+    const isMedia = s.type === 'audio' || s.type === 'video';
+    const mediaDurationDragLimits = isMedia
+        ? (0, TimelineSequenceRightEdgeDragHandle_1.getTimelineSequenceMediaDurationDragLimits)({
+            cascadedStart,
+            displayDurationInFrames: s.duration,
+            displayStart: s.from,
+            effectiveMaxMediaDuration,
+            explicitDurationInFrames,
+            hasImplicitDuration: hasImplicitMediaDuration,
+            naturalMediaDuration,
+            timelineDurationInFrames: video.durationInFrames,
+        })
+        : null;
+    const mediaDurationDragSelectionKey = nodePathInfo
+        ? (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(nodePathInfo)
+        : null;
+    (0, react_1.useEffect)(() => {
+        if (mediaDurationDragLimitsRegistry === null ||
+            mediaDurationDragSelectionKey === null ||
+            !isMedia) {
+            return;
+        }
+        const registry = mediaDurationDragLimitsRegistry.current;
+        registry.set(mediaDurationDragSelectionKey, mediaDurationDragLimits);
+        return () => {
+            registry.delete(mediaDurationDragSelectionKey);
+        };
+    }, [
+        isMedia,
+        mediaDurationDragLimits,
+        mediaDurationDragLimitsRegistry,
+        mediaDurationDragSelectionKey,
+    ]);
+    const showRightBorderRadius = (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.rightEdgeVisible) === true &&
+        (endsAtContainerBoundary || endsAtNaturalMediaDuration);
     const style = (0, react_1.useMemo)(() => {
         var _a, _b;
         return {
@@ -567,8 +683,8 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                 : colors_1.TRANSPARENT,
             borderTopLeftRadius: showLeftBorderRadius ? 2 : 0,
             borderBottomLeftRadius: showLeftBorderRadius ? 2 : 0,
-            borderTopRightRadius: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.rightEdgeVisible) ? 2 : 0,
-            borderBottomRightRadius: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.rightEdgeVisible) ? 2 : 0,
+            borderTopRightRadius: showRightBorderRadius ? 2 : 0,
+            borderBottomRightRadius: showRightBorderRadius ? 2 : 0,
             position: 'absolute',
             height: (0, timeline_layout_1.getTimelineLayerHeight)(s.type),
             marginLeft: (_a = visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.marginLeft) !== null && _a !== void 0 ? _a : 0,
@@ -577,11 +693,18 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             // Edge handles extend outside the layer; media is clipped separately.
             overflow: 'visible',
         };
-    }, [negativeStartClipped, s.type, showLeftBorderRadius, visibleLayout]);
+    }, [
+        negativeStartClipped,
+        s.type,
+        showLeftBorderRadius,
+        showRightBorderRadius,
+        visibleLayout,
+    ]);
     const showRightEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceDurationDraggable)(s) &&
         nodePath !== null &&
         validatedLocation !== null &&
-        durationCanResize;
+        durationCanResize &&
+        (!isMedia || mediaDurationDragLimits !== null);
     const showLeftEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceLeftEdgeDraggable)(s) &&
         nodePath !== null &&
         validatedLocation !== null &&
@@ -598,14 +721,14 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const mediaDisplayDurationInFrames = visibleLayout.media
         ? visibleLayout.media.width / frameIncrement
         : 0;
-    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premount: visibleLayout.premount, postmount: visibleLayout.postmount, negativeStart: visibleLayout.negativeStart, leftEdgeVisible: visibleLayout.leftEdgeVisible, negativeStartClipped: negativeStartClipped, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, onPointerDownCapture: dragAwareDoubleClick.beginPointerGesture, edgeDragHandles: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showLeftEdgeDragHandle &&
+    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premount: visibleLayout.premount, postmount: visibleLayout.postmount, negativeStart: visibleLayout.negativeStart, leftEdgeVisible: visibleLayout.leftEdgeVisible, negativeStartClipped: negativeStartClipped, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, onPointerDownCapture: dragAwareDoubleClick.beginPointerGesture, onClick: canHandleSequenceDoubleClick ? onSequenceClick : null, edgeDragHandles: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showLeftEdgeDragHandle &&
                     visibleLayout.leftEdgeVisible &&
                     negativeStartWidth === 0 &&
                     nodePathInfo &&
-                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture })) : null, showRightEdgeDragHandle &&
+                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_l = video.durationInFrames) !== null && _l !== void 0 ? _l : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture, onSelect: onSelect, selected: selected })) : null, showRightEdgeDragHandle &&
                     visibleLayout.rightEdgeVisible &&
                     nodePathInfo &&
-                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_k = video.durationInFrames) !== null && _k !== void 0 ? _k : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture })) : null] }), onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: [s.type === 'audio' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, muted: s.muted, visualizationWidth: visibleLayout.media.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' && visibleLayout.media ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: visibleLayout.media.width, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, playbackRate: s.playbackRate, volume: s.volume, muted: s.muted, doesVolumeChange: s.doesVolumeChange, marginLeft: visibleLayout.media.left, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, offsetInPixels: visibleLayout.media.offset }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes, fullWidth: width, visibleOffset: visibleLayout.cropLeft, visibleWidth: visibleLayout.width }))] }));
+                    validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, mediaDurationDragLimits: mediaDurationDragLimits, windowWidth: windowWidth, timelineDurationInFrames: (_m = video.durationInFrames) !== null && _m !== void 0 ? _m : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture, onSelect: onSelect, selected: selected })) : null] }), children: [s.type === 'audio' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, muted: s.muted, visualizationWidth: visibleLayout.media.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' && visibleLayout.media ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: visibleLayout.media.width, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, playbackRate: s.playbackRate, volume: s.volume, muted: s.muted, doesVolumeChange: s.doesVolumeChange, marginLeft: visibleLayout.media.left, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, offsetInPixels: visibleLayout.media.offset }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes, fullWidth: width, visibleOffset: visibleLayout.cropLeft, visibleWidth: visibleLayout.width }))] }));
     return previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const SEQUENCE_REORDER_MIME_TYPE = "application/remotion-sequence-reorder";
 export declare const TimelineSequenceItem: React.NamedExoticComponent<{
     readonly afterDropLineOffset: number;
     readonly sequence: TSequence;