@remotion/studio 4.0.519 → 4.0.521

package/dist/components/CompositionSelector.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelector = exports.useCompositionNavigation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_protocol_1 = require("@remotion/studio-protocol");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
@@ -13,6 +11,7 @@ const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const folders_1 = require("../state/folders");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
+const composition_selector_drag_data_1 = require("./composition-selector-drag-data");
 const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
 const ContextMenu_1 = require("./ContextMenu");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
@@ -64,6 +63,19 @@ const container = {
     overflow: 'hidden',
     backgroundColor: colors_1.BACKGROUND,
 };
+const list = {
+    flex: 1,
+    overflowY: 'auto',
+    paddingTop: 4,
+    paddingBottom: 4,
+    backgroundColor: colors_1.BACKGROUND,
+};
+const rootReorderLine = {
+    backgroundColor: colors_1.TIMELINE_BLUE,
+    height: 2,
+    pointerEvents: 'none',
+    width: '100%',
+};
 const autoScrollThreshold = 70;
 const maxAutoScrollSpeed = 18;
 const getAutoScrollSpeed = ({ clientY, element, }) => {
@@ -106,6 +118,7 @@ const CompositionSelector = () => {
         setSelectedModal,
     ]);
     const [rootDragHovered, setRootDragHovered] = (0, react_1.useState)(false);
+    const activeDragRef = (0, react_1.useRef)(null);
     const listRef = (0, react_1.useRef)(null);
     const autoScrollAnimation = (0, react_1.useRef)(null);
     const autoScrollSpeed = (0, react_1.useRef)(0);
@@ -117,15 +130,6 @@ const CompositionSelector = () => {
             ? (0, create_folder_tree_1.sortFolderTreeAlphabetically)(tree)
             : tree;
     }, [compositionSortOrder, compositions, folders, foldersExpanded]);
-    const list = (0, react_1.useMemo)(() => {
-        return {
-            flex: 1,
-            overflowY: 'auto',
-            paddingTop: 4,
-            paddingBottom: 4,
-            backgroundColor: rootDragHovered ? colors_1.WHITE_ALPHA_12 : colors_1.BACKGROUND,
-        };
-    }, [rootDragHovered]);
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
         var _a;
         (_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.toggleFolder(folderName, parentName);
@@ -166,9 +170,8 @@ const CompositionSelector = () => {
         }
     }, [runCompositionListAutoScroll, stopCompositionListAutoScroll]);
     const onCompositionListDragOverCapture = (0, react_1.useCallback)((event) => {
-        var _a;
         if (window.remotion_isReadOnlyStudio ||
-            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            !(0, composition_selector_drag_data_1.hasCompositionSelectorDragData)(event.dataTransfer.types)) {
             stopCompositionListAutoScroll();
             return;
         }
@@ -183,9 +186,13 @@ const CompositionSelector = () => {
         return stopCompositionListAutoScroll;
     }, [stopCompositionListAutoScroll]);
     const onRootDragOver = (0, react_1.useCallback)((event) => {
-        var _a;
         if (window.remotion_isReadOnlyStudio ||
-            ((_a = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
+            !(0, composition_selector_drag_data_1.hasCompositionSelectorDragData)(event.dataTransfer.types)) {
+            return;
+        }
+        if (activeDragRef.current === null ||
+            activeDragRef.current.parentFolderPath === null) {
+            setRootDragHovered(false);
             return;
         }
         event.preventDefault();
@@ -205,32 +212,32 @@ const CompositionSelector = () => {
         if (window.remotion_isReadOnlyStudio) {
             return;
         }
-        const parsed = studio_protocol_1.StudioProtocolInternals.parseDragData(event.dataTransfer);
-        if ((parsed === null || parsed === void 0 ? void 0 : parsed.type) !== 'composition') {
+        const dragData = (0, composition_selector_drag_data_1.parseCompositionSelectorDragData)(event.dataTransfer);
+        if (dragData === null) {
+            return;
+        }
+        if (activeDragRef.current === null ||
+            activeDragRef.current.parentFolderPath === null) {
+            event.stopPropagation();
+            setRootDragHovered(false);
             return;
         }
-        const compositionDragData = parsed.data;
         event.preventDefault();
         event.stopPropagation();
         stopCompositionListAutoScroll();
         setRootDragHovered(false);
-        const composition = compositions.find((c) => c.id === compositionDragData.compositionId);
-        if (!composition || composition.folderName === null) {
-            return;
-        }
-        const notification = (0, NotificationCenter_1.showNotification)(`Moving ${compositionDragData.compositionId}...`, null);
+        const notification = (0, NotificationCenter_1.showNotification)(`Moving ${dragData.item.type === 'composition' ? dragData.item.compositionId : dragData.item.folderName}...`, null);
         const controller = new AbortController();
         try {
             const result = await (0, actions_1.applyCodemod)({
                 codemod: {
-                    type: 'move-composition-to-folder',
-                    idToMove: compositionDragData.compositionId,
-                    folderName: null,
-                    parentName: null,
+                    type: 'move-composition-or-folder',
+                    source: dragData.item,
+                    destination: { type: 'root' },
                 },
                 dryRun: false,
                 signal: controller.signal,
-                symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
+                symbolicatedStack: (0, composition_selector_drag_data_1.compositionSelectorDragDataToSymbolicatedStack)(dragData),
             });
             if (result.success) {
                 notification.dismiss();
@@ -242,13 +249,13 @@ const CompositionSelector = () => {
         catch (err) {
             notification.replaceContent(err instanceof Error ? err.message : String(err), 4000);
         }
-    }, [compositions, stopCompositionListAutoScroll]);
+    }, [stopCompositionListAutoScroll]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: listRef, getItems: getRootContextMenuItems }), jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "compositions", showShortcut: true, tabIndex: tabIndex, getActions: getRootContextMenuItems }), jsx_runtime_1.jsx("div", { ref: listRef, className: "__remotion-vertical-scrollbar", style: list, onDragOverCapture: onCompositionListDragOverCapture, onDragEndCapture: stopCompositionListAutoScroll, onDragOver: onRootDragOver, onDragLeave: onRootDragLeave, onDropCapture: stopCompositionListAutoScroll, onDrop: onRootDrop, children: items.map((c) => {
-                    return (jsx_runtime_1.jsx(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: canvasContent && canvasContent.type === 'composition'
-                            ? canvasContent.compositionId
-                            : null, selectComposition: selectComposition, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover, tabIndex: tabIndex, item: c }, c.key + c.type));
-                }) })
+            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: listRef, getItems: getRootContextMenuItems }), jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "compositions", showShortcut: true, tabIndex: tabIndex, getActions: getRootContextMenuItems }), jsx_runtime_1.jsxs("div", { ref: listRef, className: "__remotion-vertical-scrollbar", style: list, onDragOverCapture: onCompositionListDragOverCapture, onDragEndCapture: stopCompositionListAutoScroll, onDragOver: onRootDragOver, onDragLeave: onRootDragLeave, onDropCapture: stopCompositionListAutoScroll, onDrop: onRootDrop, children: [items.map((c, index) => {
+                        return (jsx_runtime_1.jsx(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: canvasContent && canvasContent.type === 'composition'
+                                ? canvasContent.compositionId
+                                : null, selectComposition: selectComposition, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover, canReorder: compositionSortOrder === 'registration', tabIndex: tabIndex, item: c, activeDragRef: activeDragRef, parentFolderPath: null, previousSibling: index === 0 ? null : items[index - 1], nextSibling: index === items.length - 1 ? null : items[index + 1] }, c.key + c.type));
+                    }), rootDragHovered ? (jsx_runtime_1.jsx("div", { "data-composition-root-reorder-line": true, style: rootReorderLine })) : null] })
         ] }));
 };
 exports.CompositionSelector = CompositionSelector;

package/dist/components/CompositionSelectorItem.d.ts

@@ -1,5 +1,7 @@
+import type { MutableRefObject } from 'react';
 import React from 'react';
 import { type _InternalTypes } from 'remotion';
+import { type CompositionSelectorActiveDrag } from './composition-selector-drag-data';
 export type CompositionSelectorItemType = {
     key: string;
     type: 'composition';
@@ -20,5 +22,10 @@ export declare const CompositionSelectorItem: React.FC<{
     readonly selectComposition: (c: _InternalTypes['AnyComposition'], push: boolean) => void;
     readonly toggleFolder: (folderName: string, parentName: string | null) => void;
     readonly clearRootDragHover: () => void;
+    readonly canReorder: boolean;
     readonly level: number;
+    readonly activeDragRef: MutableRefObject<CompositionSelectorActiveDrag | null>;
+    readonly parentFolderPath: string | null;
+    readonly previousSibling: CompositionSelectorItemType | null;
+    readonly nextSibling: CompositionSelectorItemType | null;
 }>;