@remotion/studio 4.0.520 → 4.0.521

package/dist/components/CompositionSelectorItem.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelectorItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const hoverable_1 = require("../helpers/hoverable");
@@ -12,6 +13,7 @@ const folder_1 = require("../icons/folder");
 const modals_1 = require("../state/modals");
 const composition_drag_data_1 = require("./composition-drag-data");
 const composition_menu_items_1 = require("./composition-menu-items");
+const composition_selector_drag_data_1 = require("./composition-selector-drag-data");
 const CompositionContextButton_1 = require("./CompositionContextButton");
 const CompositionOrStillIcon_1 = require("./CompositionOrStillIcon");
 const ContextMenu_1 = require("./ContextMenu");
@@ -56,7 +58,56 @@ const iconStyle = {
     height: 18,
     flexShrink: 0,
 };
-const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, selectComposition, toggleFolder, clearRootDragHover, }) => {
+const reorderWrapper = {
+    position: 'relative',
+};
+const reorderLineBase = {
+    backgroundColor: colors_1.TIMELINE_BLUE,
+    height: 2,
+    left: 0,
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: 0,
+    zIndex: 1,
+};
+const folderAutoExpansionDelay = 700;
+const itemToDescriptor = (item) => {
+    return item.type === 'composition'
+        ? { type: 'composition', compositionId: item.composition.id }
+        : {
+            type: 'folder',
+            folderName: item.folderName,
+            parentName: item.parentName,
+        };
+};
+const itemsAreEqual = (left, right) => {
+    if (left.type === 'composition') {
+        return (right.type === 'composition' && left.compositionId === right.compositionId);
+    }
+    return (right.type === 'folder' &&
+        left.folderName === right.folderName &&
+        left.parentName === right.parentName);
+};
+const getFolderPath = ({ folderName, parentName, }) => {
+    return [parentName, folderName].filter(Boolean).join('/');
+};
+const wouldMoveFolderIntoItself = ({ activeDrag, destinationParentFolderPath, }) => {
+    if (activeDrag.item.type !== 'folder' ||
+        destinationParentFolderPath === null) {
+        return false;
+    }
+    const sourceFolderPath = getFolderPath(activeDrag.item);
+    return (destinationParentFolderPath === sourceFolderPath ||
+        destinationParentFolderPath.startsWith(`${sourceFolderPath}/`));
+};
+const canMoveIntoFolder = ({ activeDrag, destinationFolderPath, }) => {
+    return (activeDrag.parentFolderPath !== destinationFolderPath &&
+        !wouldMoveFolderIntoItself({
+            activeDrag,
+            destinationParentFolderPath: destinationFolderPath,
+        }));
+};
+const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, selectComposition, toggleFolder, clearRootDragHover, canReorder, activeDragRef, parentFolderPath, previousSibling, nextSibling, }) => {
     const selected = (0, react_1.useMemo)(() => {
         if (item.type === 'composition') {
             return currentComposition === item.composition.id;
@@ -64,7 +115,30 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         return false;
     }, [item, currentComposition]);
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
-    const [dragHovered, setDragHovered] = (0, react_1.useState)(false);
+    const [dropPosition, setDropPosition] = (0, react_1.useState)(null);
+    const dropPositionRef = (0, react_1.useRef)(null);
+    const folderExpansionTimer = (0, react_1.useRef)(null);
+    const folderExpansionRequested = (0, react_1.useRef)(false);
+    const cancelFolderExpansion = (0, react_1.useCallback)(() => {
+        if (folderExpansionTimer.current !== null) {
+            window.clearTimeout(folderExpansionTimer.current);
+            folderExpansionTimer.current = null;
+        }
+    }, []);
+    const updateDropPosition = (0, react_1.useCallback)((position) => {
+        dropPositionRef.current = position;
+        setDropPosition(position);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        return cancelFolderExpansion;
+    }, [cancelFolderExpansion]);
+    const folderIsExpanded = item.type === 'folder' && item.expanded;
+    (0, react_1.useEffect)(() => {
+        if (folderIsExpanded) {
+            folderExpansionRequested.current = false;
+            cancelFolderExpansion();
+        }
+    }, [cancelFolderExpansion, folderIsExpanded]);
     const compositionRowRef = (0, react_1.useRef)(null);
     const compositionId = item.type === 'composition' ? item.composition.id : null;
     (0, react_1.useLayoutEffect)(() => {
@@ -78,7 +152,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         });
     }, [compositionId, selected]);
     const style = (0, react_1.useMemo)(() => {
-        const idleBackground = dragHovered
+        const idleBackground = dropPosition === 'inside'
             ? colors_1.WHITE_ALPHA_12
             : selected
                 ? colors_1.WHITE_ALPHA_06
@@ -87,13 +161,22 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
             ...itemStyle,
             ...(0, hoverable_1.hoverableStyle)({
                 idleBackground,
-                hoverBackground: dragHovered ? colors_1.WHITE_ALPHA_12 : colors_1.WHITE_ALPHA_06,
+                hoverBackground: dropPosition === 'inside' ? colors_1.WHITE_ALPHA_12 : colors_1.WHITE_ALPHA_06,
                 idleColor: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
                 hoverColor: colors_1.WHITE,
             }),
             paddingLeft: 12 + level * 8,
         };
-    }, [dragHovered, level, selected]);
+    }, [dropPosition, level, selected]);
+    const reorderLineStyle = (0, react_1.useMemo)(() => {
+        if (dropPosition !== 'before' && dropPosition !== 'after') {
+            return null;
+        }
+        return {
+            ...reorderLineBase,
+            ...(dropPosition === 'before' ? { top: -1 } : { bottom: -1 }),
+        };
+    }, [dropPosition]);
     const onClick = (0, react_1.useCallback)((evt) => {
         evt.preventDefault();
         if (item.type === 'composition') {
@@ -146,84 +229,185 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         resolvedLocation,
         setSelectedModal,
     ]);
-    const onCompositionDragStart = (0, react_1.useCallback)((event) => {
-        var _a, _b, _c, _d;
-        if (item.type !== 'composition' || window.remotion_isReadOnlyStudio) {
+    const onItemDragStart = (0, react_1.useCallback)((event) => {
+        var _a, _b, _c, _d, _e;
+        if (window.remotion_isReadOnlyStudio) {
             event.preventDefault();
             return;
         }
+        const itemDescriptor = itemToDescriptor(item);
+        activeDragRef.current = {
+            item: itemDescriptor,
+            parentFolderPath,
+        };
         setIsDragging(true);
         event.dataTransfer.effectAllowed = 'copyMove';
-        const dragData = (0, composition_drag_data_1.makeCompositionDragData)({
-            compositionFile: (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : null,
-            compositionId: item.composition.id,
-            width: (_b = item.composition.width) !== null && _b !== void 0 ? _b : null,
-            height: (_c = item.composition.height) !== null && _c !== void 0 ? _c : null,
-            durationInFrames: (_d = item.composition.durationInFrames) !== null && _d !== void 0 ? _d : null,
+        const selectorDragData = (0, composition_selector_drag_data_1.makeCompositionSelectorDragData)({
+            item: itemDescriptor,
+            sourceFile: (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : null,
         });
-        event.dataTransfer.setData(dragData.mimeType, dragData.payload);
-    }, [item, resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source]);
-    const onCompositionDragEnd = (0, react_1.useCallback)(() => {
+        event.dataTransfer.setData(selectorDragData.mimeType, selectorDragData.payload);
+        if (item.type === 'composition') {
+            const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+            const compositionDragData = (0, composition_drag_data_1.makeCompositionDragData)({
+                compositionFile: browserStudioOperations === null
+                    ? ((_b = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _b !== void 0 ? _b : null)
+                    : browserStudioOperations.getCompositionFile(item.composition.id),
+                compositionId: item.composition.id,
+                width: (_c = item.composition.width) !== null && _c !== void 0 ? _c : null,
+                height: (_d = item.composition.height) !== null && _d !== void 0 ? _d : null,
+                durationInFrames: (_e = item.composition.durationInFrames) !== null && _e !== void 0 ? _e : null,
+            });
+            event.dataTransfer.setData(compositionDragData.mimeType, compositionDragData.payload);
+        }
+    }, [activeDragRef, item, parentFolderPath, resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source]);
+    const onItemDragEnd = (0, react_1.useCallback)(() => {
+        activeDragRef.current = null;
+        cancelFolderExpansion();
         setIsDragging(false);
-    }, []);
-    const onFolderDragOver = (0, react_1.useCallback)((event) => {
+        updateDropPosition(null);
+    }, [activeDragRef, cancelFolderExpansion, updateDropPosition]);
+    const getDropPosition = (0, react_1.useCallback)((event) => {
+        const activeDrag = activeDragRef.current;
+        if (activeDrag === null) {
+            return null;
+        }
+        if (!canReorder) {
+            if (item.type !== 'folder') {
+                return null;
+            }
+            return canMoveIntoFolder({
+                activeDrag,
+                destinationFolderPath: getFolderPath(item),
+            })
+                ? 'inside'
+                : null;
+        }
+        const { top, height } = event.currentTarget.getBoundingClientRect();
+        const progress = height === 0 ? 0.5 : (event.clientY - top) / height;
+        const position = item.type === 'composition'
+            ? progress < 0.5
+                ? 'before'
+                : 'after'
+            : progress < 0.25
+                ? 'before'
+                : progress > 0.75
+                    ? 'after'
+                    : 'inside';
+        const target = itemToDescriptor(item);
+        if (itemsAreEqual(activeDrag.item, target)) {
+            return null;
+        }
+        if (position === 'before' &&
+            previousSibling !== null &&
+            itemsAreEqual(activeDrag.item, itemToDescriptor(previousSibling))) {
+            return null;
+        }
+        if (position === 'after' &&
+            nextSibling !== null &&
+            itemsAreEqual(activeDrag.item, itemToDescriptor(nextSibling))) {
+            return null;
+        }
+        if (position === 'inside' && item.type === 'folder') {
+            return canMoveIntoFolder({
+                activeDrag,
+                destinationFolderPath: getFolderPath(item),
+            })
+                ? position
+                : null;
+        }
+        return wouldMoveFolderIntoItself({
+            activeDrag,
+            destinationParentFolderPath: parentFolderPath,
+        })
+            ? null
+            : position;
+    }, [
+        activeDragRef,
+        canReorder,
+        item,
+        nextSibling,
+        parentFolderPath,
+        previousSibling,
+    ]);
+    const scheduleFolderExpansion = (0, react_1.useCallback)(() => {
         if (item.type !== 'folder' ||
-            window.remotion_isReadOnlyStudio ||
-            (0, composition_drag_data_1.getCompositionDragPreviewMetadata)(event.dataTransfer.types) === null) {
+            item.expanded ||
+            folderExpansionTimer.current !== null ||
+            folderExpansionRequested.current) {
             return;
         }
-        event.preventDefault();
-        event.stopPropagation();
-        event.dataTransfer.dropEffect = 'move';
-        clearRootDragHover();
-        setDragHovered(true);
-    }, [clearRootDragHover, item]);
-    const onFolderDragLeave = (0, react_1.useCallback)(() => {
-        setDragHovered(false);
-    }, []);
-    const onFolderChildListDragOver = (0, react_1.useCallback)((event) => {
-        if (item.type !== 'folder' ||
-            window.remotion_isReadOnlyStudio ||
-            (0, composition_drag_data_1.getCompositionDragPreviewMetadata)(event.dataTransfer.types) === null) {
+        const activeDrag = activeDragRef.current;
+        if (activeDrag === null ||
+            !canMoveIntoFolder({
+                activeDrag,
+                destinationFolderPath: getFolderPath(item),
+            })) {
             return;
         }
-        event.preventDefault();
-        event.stopPropagation();
-        event.dataTransfer.dropEffect = 'move';
-        clearRootDragHover();
-    }, [clearRootDragHover, item]);
-    const onFolderDrop = (0, react_1.useCallback)(async (event) => {
-        if (item.type !== 'folder' || window.remotion_isReadOnlyStudio) {
+        folderExpansionTimer.current = window.setTimeout(() => {
+            folderExpansionTimer.current = null;
+            const currentActiveDrag = activeDragRef.current;
+            if (currentActiveDrag === null ||
+                !canMoveIntoFolder({
+                    activeDrag: currentActiveDrag,
+                    destinationFolderPath: getFolderPath(item),
+                })) {
+                return;
+            }
+            folderExpansionRequested.current = true;
+            toggleFolder(item.folderName, item.parentName);
+        }, folderAutoExpansionDelay);
+    }, [activeDragRef, item, toggleFolder]);
+    const onRowDragOver = (0, react_1.useCallback)((event) => {
+        if (window.remotion_isReadOnlyStudio ||
+            !(0, composition_selector_drag_data_1.hasCompositionSelectorDragData)(event.dataTransfer.types)) {
             return;
         }
-        const compositionDragData = (0, composition_drag_data_1.parseCompositionDragData)(event.dataTransfer);
-        if (compositionDragData === null) {
+        const position = getDropPosition(event);
+        if (position === null) {
+            cancelFolderExpansion();
+            updateDropPosition(null);
+            event.stopPropagation();
             return;
         }
+        if (position === 'inside') {
+            scheduleFolderExpansion();
+        }
+        else {
+            cancelFolderExpansion();
+        }
         event.preventDefault();
         event.stopPropagation();
+        event.dataTransfer.dropEffect = 'move';
         clearRootDragHover();
-        setDragHovered(false);
-        const isAlreadyDirectChild = item.items.some((child) => {
-            return (child.type === 'composition' &&
-                child.composition.id === compositionDragData.compositionId);
-        });
-        if (isAlreadyDirectChild) {
-            return;
-        }
-        const notification = (0, NotificationCenter_1.showNotification)(`Moving ${compositionDragData.compositionId}...`, null);
-        const controller = new AbortController();
+        updateDropPosition(position);
+    }, [
+        cancelFolderExpansion,
+        clearRootDragHover,
+        getDropPosition,
+        scheduleFolderExpansion,
+        updateDropPosition,
+    ]);
+    const onRowDragLeave = (0, react_1.useCallback)(() => {
+        cancelFolderExpansion();
+        updateDropPosition(null);
+    }, [cancelFolderExpansion, updateDropPosition]);
+    const moveItem = (0, react_1.useCallback)(async ({ destination, dragData, }) => {
+        const label = dragData.item.type === 'composition'
+            ? dragData.item.compositionId
+            : dragData.item.folderName;
+        const notification = (0, NotificationCenter_1.showNotification)(`Moving ${label}...`, null);
         try {
             const result = await (0, actions_1.applyCodemod)({
                 codemod: {
-                    type: 'move-composition-to-folder',
-                    idToMove: compositionDragData.compositionId,
-                    folderName: item.folderName,
-                    parentName: item.parentName,
+                    type: 'move-composition-or-folder',
+                    source: dragData.item,
+                    destination,
                 },
                 dryRun: false,
-                signal: controller.signal,
-                symbolicatedStack: (0, composition_drag_data_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
+                signal: new AbortController().signal,
+                symbolicatedStack: (0, composition_selector_drag_data_1.compositionSelectorDragDataToSymbolicatedStack)(dragData),
             });
             if (result.success) {
                 notification.dismiss();
@@ -231,23 +415,115 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
             else {
                 notification.replaceContent(result.reason, 4000);
             }
-            if (result.success && !item.expanded) {
+            if (result.success &&
+                destination.type === 'folder' &&
+                item.type === 'folder' &&
+                !item.expanded) {
                 toggleFolder(item.folderName, item.parentName);
             }
         }
         catch (err) {
             notification.replaceContent(err instanceof Error ? err.message : String(err), 4000);
         }
-    }, [clearRootDragHover, item, toggleFolder]);
+    }, [item, toggleFolder]);
+    const onRowDrop = (0, react_1.useCallback)(async (event) => {
+        cancelFolderExpansion();
+        const dragData = (0, composition_selector_drag_data_1.parseCompositionSelectorDragData)(event.dataTransfer);
+        const position = dropPositionRef.current;
+        if (dragData === null) {
+            return;
+        }
+        if (position === null) {
+            event.stopPropagation();
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        clearRootDragHover();
+        updateDropPosition(null);
+        await moveItem({
+            dragData,
+            destination: position === 'inside' && item.type === 'folder'
+                ? {
+                    type: 'folder',
+                    folderName: item.folderName,
+                    parentName: item.parentName,
+                }
+                : {
+                    type: position === 'before' ? 'before' : 'after',
+                    target: itemToDescriptor(item),
+                },
+        });
+    }, [
+        cancelFolderExpansion,
+        clearRootDragHover,
+        item,
+        moveItem,
+        updateDropPosition,
+    ]);
+    const onFolderChildListDragOver = (0, react_1.useCallback)((event) => {
+        if (item.type !== 'folder' ||
+            window.remotion_isReadOnlyStudio ||
+            !(0, composition_selector_drag_data_1.hasCompositionSelectorDragData)(event.dataTransfer.types)) {
+            return;
+        }
+        const activeDrag = activeDragRef.current;
+        if (activeDrag === null ||
+            !canMoveIntoFolder({
+                activeDrag,
+                destinationFolderPath: getFolderPath(item),
+            })) {
+            event.stopPropagation();
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        event.dataTransfer.dropEffect = 'move';
+        clearRootDragHover();
+    }, [activeDragRef, clearRootDragHover, item]);
+    const onFolderChildListDrop = (0, react_1.useCallback)(async (event) => {
+        if (item.type !== 'folder' || window.remotion_isReadOnlyStudio) {
+            return;
+        }
+        const dragData = (0, composition_selector_drag_data_1.parseCompositionSelectorDragData)(event.dataTransfer);
+        if (dragData === null) {
+            return;
+        }
+        const activeDrag = activeDragRef.current;
+        if (activeDrag === null ||
+            !canMoveIntoFolder({
+                activeDrag,
+                destinationFolderPath: getFolderPath(item),
+            })) {
+            event.stopPropagation();
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        clearRootDragHover();
+        await moveItem({
+            dragData,
+            destination: {
+                type: 'folder',
+                folderName: item.folderName,
+                parentName: item.parentName,
+            },
+        });
+    }, [activeDragRef, clearRootDragHover, item, moveItem]);
     if (item.type === 'folder') {
+        const folderPath = getFolderPath(item);
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: `__remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, onDragOver: onFolderDragOver, onDragLeave: onFolderDragLeave, onDrop: onFolderDrop, title: item.folderName, role: "button", children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: colors_1.CURRENT_COLOR })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: colors_1.CURRENT_COLOR, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: true, readOnlyStudio: window.remotion_isReadOnlyStudio })
-                            ] }) }) }), item.expanded ? (jsx_runtime_1.jsx("div", { onDragOver: onFolderChildListDragOver, onDrop: onFolderDrop, children: item.items.map((childItem) => {
-                        return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover }, childItem.key + childItem.type));
+                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsxs("div", { style: reorderWrapper, children: [reorderLineStyle ? (jsx_runtime_1.jsx("div", { "data-composition-reorder-line": true, style: reorderLineStyle })) : null, jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: `__remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onItemDragStart, onDragEnd: onItemDragEnd, onDragOver: onRowDragOver, onDragLeave: onRowDragLeave, onDrop: onRowDrop, title: item.folderName, role: "button", "aria-expanded": item.expanded, children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: colors_1.CURRENT_COLOR })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: colors_1.CURRENT_COLOR, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: true, readOnlyStudio: window.remotion_isReadOnlyStudio })
+                                    ] }) })
+                        ] }) }), item.expanded ? (jsx_runtime_1.jsx("div", { onDragOver: onFolderChildListDragOver, onDrop: onFolderChildListDrop, children: item.items.map((childItem, index) => {
+                        return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover, canReorder: canReorder, activeDragRef: activeDragRef, parentFolderPath: folderPath, previousSibling: index === 0 ? null : item.items[index - 1], nextSibling: index === item.items.length - 1
+                                ? null
+                                : item.items[index + 1] }, childItem.key + childItem.type));
                     }) })) : null] }));
     }
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onCompositionDragStart, onDragEnd: onCompositionDragEnd, type: "button", title: item.composition.id, className: `__remotion-composition __remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, "data-compname": item.composition.id, children: [
-                    jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: colors_1.CURRENT_COLOR, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: !isDragging, readOnlyStudio: window.remotion_isReadOnlyStudio }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: !isDragging, composition: item.composition, readOnlyStudio: window.remotion_isReadOnlyStudio })
-                ] }) }) }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsxs("div", { style: reorderWrapper, children: [reorderLineStyle ? (jsx_runtime_1.jsx("div", { "data-composition-reorder-line": true, style: reorderLineStyle })) : null, jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onItemDragStart, onDragEnd: onItemDragEnd, onDragOver: onRowDragOver, onDragLeave: onRowDragLeave, onDrop: onRowDrop, type: "button", title: item.composition.id, className: `__remotion-composition __remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, "data-compname": item.composition.id, children: [
+                            jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: colors_1.CURRENT_COLOR, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: !isDragging, readOnlyStudio: window.remotion_isReadOnlyStudio }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: !isDragging, composition: item.composition, readOnlyStudio: window.remotion_isReadOnlyStudio })
+                        ] }) })
+            ] }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;