@remotion/studio 4.0.471 → 4.0.472

package/dist/components/AssetSelector.js

@@ -93,6 +93,15 @@ const AssetSelector = ({ readOnlyStudio }) => {
             const makePath = (file) => {
                 return [assetPath, file.name].filter(Boolean).join('/');
             };
+            const differentExistingFile = Array.from(files).find((file) => {
+                const filePath = makePath(file);
+                return staticFiles.some((staticFile) => staticFile.name === filePath &&
+                    staticFile.sizeInBytes !== file.size);
+            });
+            if (differentExistingFile) {
+                (0, NotificationCenter_1.showNotification)(`File with name ${makePath(differentExistingFile)} already exists and is different`, 4000);
+                return;
+            }
             for (const file of files) {
                 const body = await file.arrayBuffer();
                 await (0, write_static_file_1.writeStaticFile)({
@@ -113,7 +122,7 @@ const AssetSelector = ({ readOnlyStudio }) => {
         finally {
             setDropLocation(null);
         }
-    }, [dropLocation]);
+    }, [dropLocation, staticFiles]);
     return (jsx_runtime_1.jsxs("div", { style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: [showCurrentAsset ? jsx_runtime_1.jsx(CurrentAsset_1.CurrentAsset, {}) : null, staticFiles.length === 0 ? (publicFolderExists ? (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, place a file in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
                         " folder of your project or drag and drop a file here."] }) })) : (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, create a folder called", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
                         " in the root of your project and place a file in it."] }) }))) : (jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: {

package/dist/components/Canvas.js

@@ -7,9 +7,11 @@ exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
+const open_in_editor_1 = require("../helpers/open-in-editor");
 const smooth_zoom_1 = require("../helpers/smooth-zoom");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const canvas_ref_1 = require("../state/canvas-ref");
@@ -18,9 +20,11 @@ const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
+const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
 const Preview_1 = require("./Preview");
 const ResetZoomButton_1 = require("./ResetZoomButton");
+const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const getContainerStyle = (editorZoomGestures) => ({
     flex: 1,
     display: 'flex',
@@ -35,7 +39,28 @@ const resetZoom = {
     right: layout_1.SPACING_UNIT * 2,
 };
 const ZOOM_PX_FACTOR = 0.003;
+const isFileDragEvent = (event) => {
+    var _a;
+    var _b;
+    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes('Files');
+};
+const isDragEventInsideCanvas = (event) => {
+    const { current } = canvas_ref_1.canvasRef;
+    if (!current) {
+        return false;
+    }
+    const targetIsNode = event.target instanceof Node;
+    if (targetIsNode && current.contains(event.target)) {
+        return true;
+    }
+    const rect = current.getBoundingClientRect();
+    return (event.clientX >= rect.left &&
+        event.clientX <= rect.right &&
+        event.clientY >= rect.top &&
+        event.clientY <= rect.bottom);
+};
 const Canvas = ({ canvasContent, size }) => {
+    var _a, _b;
     const { setSize, size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
     const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const previewSnapshotRef = (0, react_1.useRef)({
@@ -50,7 +75,30 @@ const Canvas = ({ canvasContent, size }) => {
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const areRulersVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
     const { editorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
+    const currentCompositionId = canvasContent.type === 'composition' ? canvasContent.compositionId : null;
+    const currentComposition = (0, react_1.useMemo)(() => {
+        var _a;
+        if (currentCompositionId === null) {
+            return null;
+        }
+        return ((_a = compositions.find((composition) => composition.id === currentCompositionId)) !== null && _a !== void 0 ? _a : null);
+    }, [compositions, currentCompositionId]);
+    const resolvedCompositionLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _a !== void 0 ? _a : null);
+    const compositionFile = (_b = resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source) !== null && _b !== void 0 ? _b : null;
+    const compositionComponentInfo = (0, open_in_editor_1.useCachedCompositionComponentInfo)({
+        compositionFile,
+        compositionId: currentCompositionId,
+    });
+    const canDropAssets = previewServerState.type === 'connected' &&
+        !window.remotion_isReadOnlyStudio &&
+        (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
+        currentCompositionId !== null &&
+        compositionFile !== null &&
+        !isAddingAsset;
     const contentDimensions = (0, react_1.useMemo)(() => {
         if ((canvasContent.type === 'asset' ||
             canvasContent.type === 'output' ||
@@ -417,6 +465,56 @@ const Canvas = ({ canvasContent, size }) => {
     (0, react_1.useEffect)(() => {
         fetchMetadata();
     }, [fetchMetadata]);
+    const onDragOver = (0, react_1.useCallback)((event) => {
+        if (!canDropAssets ||
+            !isFileDragEvent(event) ||
+            !isDragEventInsideCanvas(event)) {
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'copy';
+        }
+    }, [canDropAssets]);
+    const onDrop = (0, react_1.useCallback)(async (event) => {
+        var _a;
+        var _b;
+        if (!canDropAssets ||
+            compositionFile === null ||
+            currentCompositionId === null ||
+            !isFileDragEvent(event) ||
+            !isDragEventInsideCanvas(event)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const files = Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
+        if (files.length === 0) {
+            return;
+        }
+        setIsAddingAsset(true);
+        try {
+            await (0, import_assets_1.importAssets)({
+                files,
+                compositionFile,
+                compositionId: currentCompositionId,
+            });
+        }
+        finally {
+            setIsAddingAsset(false);
+        }
+    }, [canDropAssets, compositionFile, currentCompositionId]);
+    (0, react_1.useEffect)(() => {
+        if (!canDropAssets) {
+            return;
+        }
+        document.addEventListener('dragover', onDragOver, { capture: true });
+        document.addEventListener('drop', onDrop, { capture: true });
+        return () => {
+            document.removeEventListener('dragover', onDragOver, { capture: true });
+            document.removeEventListener('drop', onDrop, { capture: true });
+        };
+    }, [canDropAssets, onDragOver, onDrop]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
 };

package/dist/components/CompositionSelectorItem.d.ts

@@ -7,6 +7,7 @@ export type CompositionSelectorItemType = {
 } | {
     key: string;
     type: 'folder';
+    folder: _InternalTypes['TFolder'];
     folderName: string;
     parentName: string | null;
     items: CompositionSelectorItemType[];

package/dist/components/CompositionSelectorItem.js

@@ -15,6 +15,7 @@ const modals_1 = require("../state/modals");
 const composition_menu_items_1 = require("./composition-menu-items");
 const CompositionContextButton_1 = require("./CompositionContextButton");
 const ContextMenu_1 = require("./ContextMenu");
+const folder_menu_items_1 = require("./folder-menu-items");
 const layout_1 = require("./layout");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
@@ -108,7 +109,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
-    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(item.type === 'composition' ? item.composition.stack : null);
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(item.type === 'composition' ? item.composition.stack : item.folder.stack);
     const contextMenu = (0, react_1.useMemo)(() => {
         if (item.type === 'composition') {
             return (0, composition_menu_items_1.getCompositionMenuItems)({
@@ -120,12 +121,19 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                 readOnlyStudio: window.remotion_isReadOnlyStudio,
             });
         }
-        return [];
+        return (0, folder_menu_items_1.getFolderMenuItems)({
+            closeMenu: noop_1.noop,
+            connectionStatus,
+            folder: item.folder,
+            resolvedLocation,
+            setSelectedModal,
+            readOnlyStudio: window.remotion_isReadOnlyStudio,
+        });
     }, [connectionStatus, item, resolvedLocation, setSelectedModal]);
     if (item.type === 'folder') {
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsxs("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.folderName, children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName })
-                    ] }), item.expanded
+                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.folderName, children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered })
+                            ] }) }) }), item.expanded
                     ? item.items.map((childItem) => {
                         return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder }, childItem.key + childItem.type));
                     })

package/dist/components/ContextMenu.js

@@ -47,58 +47,25 @@ const z_index_1 = require("../state/z-index");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
-exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, style = undefined, className = undefined, onPointerDown = undefined, }, forwardedRef) => {
-    const ref = (0, react_1.useRef)(null);
-    const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
-    const { currentZIndex } = (0, z_index_1.useZIndex)();
-    const setRef = (0, react_1.useCallback)((node) => {
-        ref.current = node;
-        if (typeof forwardedRef === 'function') {
-            forwardedRef(node);
-            return;
-        }
-        if (forwardedRef) {
-            forwardedRef.current = node;
-        }
-    }, [forwardedRef]);
-    const size = player_1.PlayerInternals.useElementSize(ref, {
+const ContextMenuPortal = ({ containerRef, currentZIndex, onHide, opened, values }) => {
+    const size = player_1.PlayerInternals.useElementSize(containerRef, {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
-    (0, react_1.useEffect)(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        const onClick = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-            setOpened({ type: 'open', left: e.clientX, top: e.clientY });
-            return false;
-        };
-        current.addEventListener('contextmenu', onClick);
-        return () => {
-            current.removeEventListener('contextmenu', onClick);
-        };
-    }, [onOpen, size]);
     const spaceToBottom = (0, react_1.useMemo)(() => {
-        if (size && opened.type === 'open') {
+        if (size) {
             return size.windowSize.height - opened.top;
         }
         return 0;
-    }, [opened, size]);
+    }, [opened.top, size]);
     const spaceToTop = (0, react_1.useMemo)(() => {
-        if (size && opened.type === 'open') {
+        if (size) {
             return opened.top;
         }
         return 0;
-    }, [opened, size]);
+    }, [opened.top, size]);
     const portalStyle = (0, react_1.useMemo)(() => {
-        if (opened.type === 'not-open') {
-            return;
-        }
         if (!size) {
             return;
         }
@@ -128,17 +95,58 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
                     right: canOpenOnLeft ? size.windowSize.width - opened.left : 0,
                 }),
         };
-    }, [opened, size, isMobileLayout, spaceToTop, spaceToBottom]);
-    const onHide = (0, react_1.useCallback)(() => {
-        setOpened({ type: 'not-open' });
-    }, []);
+    }, [
+        opened.left,
+        opened.top,
+        size,
+        isMobileLayout,
+        spaceToTop,
+        spaceToBottom,
+    ]);
     // Prevent deselection of a selected item
     const onMenuPointerDown = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
     }, []);
+    if (!portalStyle) {
+        return null;
+    }
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex));
+};
+exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, style = undefined, className = undefined, onPointerDown = undefined, }, forwardedRef) => {
+    const ref = (0, react_1.useRef)(null);
+    const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
+    const setRef = (0, react_1.useCallback)((node) => {
+        ref.current = node;
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+            return;
+        }
+        if (forwardedRef) {
+            forwardedRef.current = node;
+        }
+    }, [forwardedRef]);
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const onClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+            setOpened({ type: 'open', left: e.clientX, top: e.clientY });
+            return false;
+        };
+        current.addEventListener('contextmenu', onClick);
+        return () => {
+            current.removeEventListener('contextmenu', onClick);
+        };
+    }, [onOpen]);
+    const onHide = (0, react_1.useCallback)(() => {
+        setOpened({ type: 'not-open' });
+    }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, children: children }), portalStyle
-                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
-                : null] }));
+            jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, children: children }), opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { containerRef: ref, currentZIndex: currentZIndex, onHide: onHide, opened: opened, values: values })) : null] }));
 });
 exports.ContextMenu.displayName = 'ContextMenu';

package/dist/components/Editor.js

@@ -41,6 +41,7 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const noop_1 = require("../helpers/noop");
 const canvas_ref_1 = require("../state/canvas-ref");
+const scale_lock_1 = require("../state/scale-lock");
 const timeline_zoom_1 = require("../state/timeline-zoom");
 const z_index_1 = require("../state/z-index");
 const EditorContent_1 = require("./EditorContent");
@@ -65,7 +66,8 @@ exports.BUFFER_STATE_DELAY_IN_MILLISECONDS = typeof process.env.BUFFER_STATE_DEL
     ? DEFAULT_BUFFER_STATE_DELAY_IN_MILLISECONDS
     : Number(process.env.BUFFER_STATE_DELAY_IN_MILLISECONDS);
 const Editor = ({ Root, readOnlyStudio }) => {
-    const size = player_1.PlayerInternals.useElementSize(canvas_ref_1.drawRef, {
+    const [drawElement, setDrawElement] = (0, react_1.useState)(null);
+    const size = player_1.PlayerInternals.useElementSize(drawElement, {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
@@ -73,6 +75,12 @@ const Editor = ({ Root, readOnlyStudio }) => {
     const onMounted = (0, react_1.useCallback)(() => {
         setCanvasMounted(true);
     }, []);
+    // Use a callback ref so the late-mounted canvas container triggers a render
+    // and useElementSize() can observe it. See GitHub issue #8098.
+    const setDrawRef = (0, react_1.useCallback)((node) => {
+        canvas_ref_1.drawRef.current = node;
+        setDrawElement(node);
+    }, []);
     const value = (0, react_1.useMemo)(() => {
         if (!size) {
             return null;
@@ -93,11 +101,11 @@ const Editor = ({ Root, readOnlyStudio }) => {
     const renderErrorContextValue = (0, react_1.useMemo)(() => ({ error: renderError }), [renderError]);
     return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(timeline_zoom_1.TimelineZoomContext, { children: jsx_runtime_1.jsxs(SequencePropsSubscriptionProvider_1.SequencePropsSubscriptionProvider, { children: [
                     jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
-                            jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsxs("div", { style: background, children: [
-                                    jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
-                                            jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: canvas_ref_1.drawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
-                                        ] })
-                                ] })
+                            jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsx(scale_lock_1.ScaleLockProvider, { children: jsx_runtime_1.jsxs("div", { style: background, children: [
+                                        jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
+                                                jsx_runtime_1.jsx(RenderErrorContext_1.RenderErrorContext.Provider, { value: renderErrorContextValue, children: jsx_runtime_1.jsx(EditorContent_1.EditorContent, { readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsx(TopPanel_1.TopPanel, { drawRef: setDrawRef, bufferStateDelayInMilliseconds: exports.BUFFER_STATE_DELAY_IN_MILLISECONDS, onMounted: onMounted, readOnlyStudio: readOnlyStudio }) }) }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {})
+                                            ] })
+                                    ] }) })
                         ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
                 ] }) }) }));
 };

package/dist/components/Modals.js

@@ -11,8 +11,10 @@ const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
 const InstallPackage_1 = require("./InstallPackage");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
+const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
 const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
 const RenameComposition_1 = require("./NewComposition/RenameComposition");
+const RenameFolder_1 = require("./NewComposition/RenameFolder");
 const OverrideInputProps_1 = require("./OverrideInputProps");
 const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher"));
 const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
@@ -24,7 +26,7 @@ const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
                 (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };

package/dist/components/NewComposition/CodemodFooter.js

@@ -70,7 +70,7 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
         if (!stack) {
             setCanApplyCodemod({
                 type: 'fail',
-                error: 'Could not determine where this composition is defined',
+                error: 'Could not determine where this item is defined',
             });
             return;
         }
@@ -80,7 +80,7 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
         if (!symbolicatedStack) {
             setCanApplyCodemod({
                 type: 'fail',
-                error: 'Could not resolve the source location of this composition',
+                error: 'Could not resolve the source location of this item',
             });
             return;
         }

package/dist/components/NewComposition/DeleteFolder.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const DeleteFolder: React.FC<{
+    readonly folderName: string;
+    readonly parentName: string | null;
+    readonly stack: string | null;
+}>;

package/dist/components/NewComposition/DeleteFolder.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeleteFolder = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const get_folder_id_1 = require("../../helpers/get-folder-id");
+const styles_1 = require("../Menu/styles");
+const ModalFooter_1 = require("../ModalFooter");
+const ModalHeader_1 = require("../ModalHeader");
+const CodemodFooter_1 = require("./CodemodFooter");
+const DismissableModal_1 = require("./DismissableModal");
+const content = {
+    padding: 16,
+    fontSize: 14,
+    flex: 1,
+    minWidth: 500,
+};
+const DeleteFolder = ({ folderName, parentName, stack }) => {
+    const codemod = (0, react_1.useMemo)(() => {
+        return {
+            type: 'delete-folder',
+            folderName,
+            parentName,
+        };
+    }, [folderName, parentName]);
+    const onSubmit = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+    }, []);
+    const folderId = (0, get_folder_id_1.getFolderId)({ folderName, parentName });
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: 'Delete folder' }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
+                    jsx_runtime_1.jsxs("div", { style: content, children: ["Do you want to delete the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "Folder" }),
+                            " with ID ", '"', folderId, '"', "?",
+                            jsx_runtime_1.jsx("br", {}),
+                            "The compositions and nested folders inside it will stay in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete folder`, loadingNotification: 'Deleting folder', successNotification: `Deleted folder ${folderId}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: stack, valid: true, onSuccess: null }) })
+                ] })
+        ] }));
+};
+exports.DeleteFolder = DeleteFolder;

package/dist/components/NewComposition/RenameFolder.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const RenameFolder: React.FC<{
+    readonly folderName: string;
+    readonly parentName: string | null;
+    readonly stack: string | null;
+}>;

package/dist/components/NewComposition/RenameFolder.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenameFolder = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const get_folder_id_1 = require("../../helpers/get-folder-id");
+const validate_folder_rename_1 = require("../../helpers/validate-folder-rename");
+const layout_1 = require("../layout");
+const ModalFooter_1 = require("../ModalFooter");
+const ModalHeader_1 = require("../ModalHeader");
+const layout_2 = require("../RenderModal/layout");
+const CodemodFooter_1 = require("./CodemodFooter");
+const DismissableModal_1 = require("./DismissableModal");
+const RemInput_1 = require("./RemInput");
+const ValidationMessage_1 = require("./ValidationMessage");
+const content = {
+    padding: 12,
+    paddingRight: 12,
+    flex: 1,
+    fontSize: 13,
+    minWidth: 500,
+};
+const RenameFolder = ({ folderName, parentName, stack }) => {
+    const { folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const [newName, setName] = (0, react_1.useState)(folderName);
+    const onNameChange = (0, react_1.useCallback)((e) => {
+        setName(e.target.value);
+    }, []);
+    const folderNameErrMessage = (0, validate_folder_rename_1.validateFolderRename)({
+        folders,
+        newName,
+        originalName: folderName,
+        parentName,
+    });
+    const valid = folderNameErrMessage === null && folderName !== newName;
+    const codemod = (0, react_1.useMemo)(() => {
+        return {
+            type: 'rename-folder',
+            folderName,
+            parentName,
+            newName,
+        };
+    }, [folderName, newName, parentName]);
+    const onSubmit = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+    }, []);
+    const folderId = (0, get_folder_id_1.getFolderId)({ folderName, parentName });
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Rename ${folderId}` }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
+                    jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                                jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Name" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { children: [
+                                            jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newName, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Folder name", status: "ok", rightAlign: true }), folderNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                                    jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: folderNameErrMessage, type: "error" })
+                                                ] })) : null] }) })
+                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming folder...', errorNotification: 'Could not rename folder', successNotification: `Renamed folder to ${newName}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null }) })
+                ] })
+        ] }));
+};
+exports.RenameFolder = RenameFolder;