@remotion/studio 4.0.522 → 4.0.524

package/dist/components/Timeline/TimelineSelection.js

@@ -60,6 +60,7 @@ const getTimelineSelectedTrackHighlightStyle = (timelineWidth, backgroundColor =
     position: 'absolute',
     top: 0,
     width: timelineWidth,
+    minWidth: `calc(100% + ${timeline_layout_1.TIMELINE_PADDING * 2}px)`,
 });
 exports.getTimelineSelectedTrackHighlightStyle = getTimelineSelectedTrackHighlightStyle;
 const getTimelineRowHighlightBackground = ({ showSelectedBackground, selected, containsSelection, hovered, selectedBackground, }) => {
@@ -219,6 +220,7 @@ const defaultTimelineSelectionContextValue = {
         selectedItems: [],
     }),
     containsSelection: () => false,
+    remapSelectionNodePaths: () => undefined,
     clearSelection: () => undefined,
 };
 const TimelineSelectionContext = (0, react_1.createContext)(defaultTimelineSelectionContextValue);
@@ -414,7 +416,7 @@ const TimelineSelectAllKeybindings = ({ timeline }) => {
         }
         const selectAll = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'a',
+            action: 'selectAllSequenceRows',
             callback: () => {
                 const latestSelectableSequenceSelections = selectableSequenceSelectionsRef.current;
                 if (latestSelectableSequenceSelections.length === 0) {
@@ -422,7 +424,6 @@ const TimelineSelectAllKeybindings = ({ timeline }) => {
                 }
                 currentSelection.current.selectItems(latestSelectableSequenceSelections);
             },
-            commandCtrlKey: true,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
@@ -684,6 +685,56 @@ const TimelineSelectionProvider = ({ children }) => {
         return availableSelectedItems.some((selected) => selected.type !== 'guide' &&
             nodePathDescendsFrom(selected.nodePathInfo, nodePathInfo));
     }, [availableSelectedItems]);
+    const remapSelectionNodePaths = (0, react_1.useCallback)((mutations) => {
+        const remapItem = (item) => {
+            if (item === null || item.type === 'guide') {
+                return item;
+            }
+            const { sequenceSubscriptionKey } = item.nodePathInfo;
+            let { nodePath } = sequenceSubscriptionKey;
+            let wasRemapped = false;
+            for (const mutation of mutations) {
+                const file = mutation.files.find((candidate) => candidate.absolutePath === sequenceSubscriptionKey.absolutePath);
+                if (!file) {
+                    continue;
+                }
+                const nodePathString = JSON.stringify(nodePath);
+                const remapping = file.remappings.find((candidate) => candidate.oldNodePath !== null &&
+                    JSON.stringify(candidate.oldNodePath) === nodePathString);
+                if (!remapping) {
+                    continue;
+                }
+                wasRemapped = true;
+                if (remapping.newNodePath === null) {
+                    return null;
+                }
+                nodePath = remapping.newNodePath;
+            }
+            if (!wasRemapped) {
+                return item;
+            }
+            return {
+                ...item,
+                nodePathInfo: {
+                    ...item.nodePathInfo,
+                    sequenceSubscriptionKey: {
+                        ...sequenceSubscriptionKey,
+                        nodePath,
+                    },
+                },
+            };
+        };
+        const snapshot = selectionController.getSnapshot();
+        const selectedItems = snapshot.selectedItems
+            .map(remapItem)
+            .filter((item) => item !== null);
+        const anchor = remapItem(snapshot.anchor);
+        if (selectedItems.some((item, index) => item !== snapshot.selectedItems[index]) ||
+            selectedItems.length !== snapshot.selectedItems.length ||
+            anchor !== snapshot.anchor) {
+            selectionController.setSnapshot({ selectedItems, anchor });
+        }
+    }, [selectionController]);
     const value = (0, react_1.useMemo)(() => ({
         canSelect,
         revealRequest,
@@ -694,6 +745,7 @@ const TimelineSelectionProvider = ({ children }) => {
         registerMarqueeSelectableItem,
         getMarqueeSelection: getMarqueeSelectionForRect,
         containsSelection,
+        remapSelectionNodePaths,
         clearSelection,
     }), [
         canSelect,
@@ -705,6 +757,7 @@ const TimelineSelectionProvider = ({ children }) => {
         registerMarqueeSelectableItem,
         getMarqueeSelectionForRect,
         containsSelection,
+        remapSelectionNodePaths,
         clearSelection,
     ]);
     const currentSelection = (0, react_1.useRef)(value);

package/dist/components/Timeline/TimelineSequence.js

@@ -69,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");
@@ -118,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);
@@ -163,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,
@@ -200,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,
@@ -235,18 +238,19 @@ 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 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 * ((_d = video === null || video === void 0 ? void 0 : video.fps) !== null && _d !== void 0 ? _d : 30) -
+        ? 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,
@@ -274,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)
@@ -284,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)() &&
@@ -297,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)();
@@ -310,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;
@@ -344,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 ||
@@ -414,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 });
         }
@@ -482,6 +495,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                 : [],
         });
     }, [
+        assetContextMenu,
         canOpenInEditor,
         canConfigureApps,
         codingAgentInfo,
@@ -520,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) {
@@ -582,7 +596,7 @@ 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)({
@@ -607,6 +621,49 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         : 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)(() => {
@@ -646,7 +703,8 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     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 &&
@@ -663,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, onSelect: onSelect, selected: selected })) : 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, onSelect: onSelect, selected: selected })) : 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;