@remotion/studio 4.0.484 → 4.0.486

package/dist/components/NewComposition/NewComposition.js

@@ -4,14 +4,14 @@ exports.NewComposition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const url_state_1 = require("../../helpers/url-state");
-const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
+const use_create_composition_1 = require("../../helpers/use-create-composition");
 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 InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const InputDragger_1 = require("./InputDragger");
 const NewCompDuration_1 = require("./NewCompDuration");
 const RemInput_1 = require("./RemInput");
@@ -23,49 +23,12 @@ const content = {
     fontSize: 13,
     minWidth: 500,
 };
-const toPascalCase = (value) => {
-    var _a;
-    const words = (_a = value.match(/[a-zA-Z0-9]+/g)) !== null && _a !== void 0 ? _a : [];
-    const candidate = words
-        .map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
-        .join('');
-    if (!candidate) {
-        return 'NewComposition';
-    }
-    if (/^[0-9]/.test(candidate)) {
-        return `Composition${candidate}`;
-    }
-    return candidate;
+const folderPathStyle = {
+    fontSize: 14,
 };
-const waitForComposition = (compositionId) => {
-    return new Promise((resolve) => {
-        const started = Date.now();
-        const interval = window.setInterval(() => {
-            var _a;
-            var _b;
-            const compositionNames = (_b = (_a = window.remotion_getCompositionNames) === null || _a === void 0 ? void 0 : _a.call(window)) !== null && _b !== void 0 ? _b : [];
-            if (compositionNames.includes(compositionId) ||
-                Date.now() - started > 10000) {
-                window.clearInterval(interval);
-                resolve();
-            }
-        }, 100);
-    });
-};
-const getUniqueCompositionName = (compositions) => {
-    let counter = 1;
-    while (true) {
-        const name = counter === 1 ? 'NewComposition' : `NewComposition${counter}`;
-        const err = (0, validate_new_comp_data_1.validateCompositionName)(name, compositions);
-        if (!err) {
-            return name;
-        }
-        counter++;
-    }
-};
-const NewCompositionLoaded = () => {
+const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const [newId, setName] = (0, react_1.useState)(() => getUniqueCompositionName(compositions));
+    const [newId, setName] = (0, react_1.useState)(() => (0, use_create_composition_1.getUniqueCompositionName)(compositions));
     const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(30);
     const [size, setSize] = (0, react_1.useState)(() => ({
         width: 1920,
@@ -113,66 +76,49 @@ const NewCompositionLoaded = () => {
     const onFpsChange = (0, react_1.useCallback)((newFps) => {
         setFrameRate(newFps);
     }, []);
-    const compNameErrMessage = (0, validate_new_comp_data_1.validateCompositionName)(newId, compositions);
-    const compWidthErrMessage = (0, validate_new_comp_data_1.validateCompositionDimension)('Width', size.width);
-    const compHeightErrMessage = (0, validate_new_comp_data_1.validateCompositionDimension)('Height', size.height);
-    const componentName = toPascalCase(newId);
-    const valid = compNameErrMessage === null &&
-        compWidthErrMessage === null &&
-        compHeightErrMessage === null;
-    const codemod = (0, react_1.useMemo)(() => {
-        return {
-            type: 'new-composition',
-            newDurationInFrames: Number(durationInFrames),
-            newFps: Number(selectedFrameRate),
-            newHeight: Number(size.height),
-            newWidth: Number(size.width),
-            newId,
-            componentName,
-            componentImportPath: `./${componentName}`,
-        };
-    }, [
-        componentName,
+    const { codemod, createComposition, heightValidationMessage: compHeightErrMessage, nameValidationMessage: compNameErrMessage, valid, widthValidationMessage: compWidthErrMessage, } = (0, use_create_composition_1.useCreateComposition)({
+        compositions,
         durationInFrames,
+        folderName,
         newId,
+        parentName,
         selectedFrameRate,
-        size.height,
-        size.width,
-    ]);
-    const onSuccess = (0, react_1.useCallback)(() => {
-        waitForComposition(newId).then(() => {
-            (0, url_state_1.pushUrl)(`/${newId}`);
-        });
-    }, [newId]);
+        size,
+    });
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
+    const folderPath = [parentName, folderName].filter(Boolean).join('/');
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "New composition" }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
-                    jsx_runtime_1.jsxs("div", { style: content, children: [
-                            jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { children: [
+                    jsx_runtime_1.jsxs("div", { style: content, children: [folderPath ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Folder" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("span", { style: folderPathStyle, children: folderPath }) })
+                                ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
                                                 jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (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: compNameErrMessage, type: "error" })
                                                     ] })) : null] }) })
                                 ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Width" }), jsx_runtime_1.jsxs("div", { style: layout_2.rightRow, children: [
-                                            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (w) => `${w}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), compWidthErrMessage ? (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: compWidthErrMessage, type: "error" })
-                                                ] })) : null] })
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Width" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
+                                                jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (w) => `${w}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), compWidthErrMessage ? (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: compWidthErrMessage, type: "error" })
+                                                    ] })) : null] }) })
                                 ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Height" }), jsx_runtime_1.jsxs("div", { style: layout_2.rightRow, children: [
-                                            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (h) => `${h}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), compHeightErrMessage ? (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: compHeightErrMessage, type: "error" })
-                                                ] })) : null] })
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Height" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
+                                                jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (h) => `${h}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), compHeightErrMessage ? (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: compHeightErrMessage, type: "error" })
+                                                    ] })) : null] }) })
                                 ] }), jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
                                 ] })
-                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: "Creating composition...", errorNotification: "Could not create composition", successNotification: `Created ${newId}`, genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: null, valid: valid, onSuccess: onSuccess, fallbackToRootFile: true }) })
+                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: "Creating composition...", errorNotification: "Could not create composition", successNotification: `Created ${newId}`, genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createComposition({
+                                signal,
+                                symbolicatedStack,
+                            }), fallbackToRootFile: true }) })
                 ] })
         ] }));
 };
-const NewComposition = () => {
-    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { children: jsx_runtime_1.jsx(NewCompositionLoaded, {}) }));
+const NewComposition = ({ folderName, parentName, stack }) => {
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { children: jsx_runtime_1.jsx(NewCompositionLoaded, { folderName: folderName, parentName: parentName, stack: stack }) }));
 };
 exports.NewComposition = NewComposition;

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

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

package/dist/components/NewComposition/NewFolder.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewFolder = 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_new_folder_name_1 = require("../../helpers/validate-new-folder-name");
+const layout_1 = require("../layout");
+const ModalFooter_1 = require("../ModalFooter");
+const ModalHeader_1 = require("../ModalHeader");
+const layout_2 = require("../RenderModal/layout");
+const actions_1 = require("../RenderQueue/actions");
+const CodemodFooter_1 = require("./CodemodFooter");
+const DismissableModal_1 = require("./DismissableModal");
+const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
+const RemInput_1 = require("./RemInput");
+const ValidationMessage_1 = require("./ValidationMessage");
+const content = {
+    padding: 12,
+    paddingRight: 12,
+    flex: 1,
+    fontSize: 13,
+    minWidth: 500,
+};
+const getUniqueFolderName = ({ folders, parentName, }) => {
+    let counter = 1;
+    while (true) {
+        const name = counter === 1 ? 'NewFolder' : `NewFolder${counter}`;
+        const err = (0, validate_new_folder_name_1.validateNewFolderName)({ folders, newName: name, parentName });
+        if (!err) {
+            return name;
+        }
+        counter++;
+    }
+};
+const NewFolder = ({ parentName, stack }) => {
+    const { folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const [newName, setName] = (0, react_1.useState)(() => getUniqueFolderName({ folders, parentName }));
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const input = inputRef.current;
+        if (!input)
+            return;
+        input.select();
+    }, []);
+    const onNameChange = (0, react_1.useCallback)((e) => {
+        setName(e.target.value);
+    }, []);
+    const folderNameErrMessage = (0, validate_new_folder_name_1.validateNewFolderName)({
+        folders,
+        newName,
+        parentName,
+    });
+    const valid = folderNameErrMessage === null;
+    const codemod = (0, react_1.useMemo)(() => {
+        return {
+            type: 'new-folder',
+            folderName: newName,
+            parentName,
+        };
+    }, [newName, parentName]);
+    const onSubmit = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+    }, []);
+    const folderId = (0, get_folder_id_1.getFolderId)({ folderName: newName, parentName });
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "New folder" }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
+                    jsx_runtime_1.jsxs("div", { style: content, children: [parentName ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Parent" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: parentName })
+                                ] })) : null, 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(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
+                                                jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, 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: 'Creating folder...', errorNotification: 'Could not create folder', successNotification: `Created folder ${folderId}`, genericSubmitLabel: 'Add to root file', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, fallbackToRootFile: true, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                                codemod,
+                                dryRun: false,
+                                signal,
+                                symbolicatedStack,
+                            }) }) })
+                ] })
+        ] }));
+};
+exports.NewFolder = NewFolder;

package/dist/components/NewComposition/RemInput.js

@@ -15,7 +15,7 @@ const RightAlignInput = ({ children }) => {
 exports.RightAlignInput = RightAlignInput;
 exports.inputBaseStyle = {
     padding: `${exports.INPUT_HORIZONTAL_PADDING}px 10px`,
-    color: 'white',
+    color: colors_1.WHITE,
     borderStyle: 'solid',
     borderWidth: 1,
     fontSize: 14,
@@ -32,8 +32,8 @@ const getInputBorderColor = ({ status, isFocused, isHovered, }) => status === 'w
         : isFocused
             ? colors_1.SELECTED_BACKGROUND
             : isHovered
-                ? colors_1.INPUT_BORDER_COLOR_HOVERED
-                : colors_1.INPUT_BORDER_COLOR_UNHOVERED;
+                ? colors_1.WHITE_ALPHA_05
+                : colors_1.BLACK_ALPHA_60;
 exports.getInputBorderColor = getInputBorderColor;
 const RemInputForwardRef = ({ status, rightAlign, small = false, ...props }, ref) => {
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);

package/dist/components/NewComposition/RemTextarea.js

@@ -9,7 +9,7 @@ const is_menu_item_1 = require("../Menu/is-menu-item");
 const RemInput_1 = require("../NewComposition/RemInput");
 const inputBaseStyle = {
     padding: `${RemInput_1.INPUT_HORIZONTAL_PADDING}px 10px`,
-    color: 'white',
+    color: colors_1.WHITE,
     borderStyle: 'solid',
     borderWidth: 1,
     fontSize: 14,

package/dist/components/NewComposition/RenameComposition.js

@@ -4,7 +4,7 @@ exports.RenameComposition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
+const use_rename_composition_1 = require("../../helpers/use-rename-composition");
 const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
@@ -12,6 +12,7 @@ const layout_2 = require("../RenderModal/layout");
 const ResolveCompositionBeforeModal_1 = require("../RenderModal/ResolveCompositionBeforeModal");
 const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
+const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const RemInput_1 = require("./RemInput");
 const ValidationMessage_1 = require("./ValidationMessage");
 const content = {
@@ -43,28 +44,26 @@ const RenameCompositionLoaded = () => {
     const onNameChange = (0, react_1.useCallback)((e) => {
         setName(e.target.value);
     }, []);
-    const compNameErrMessage = newId === resolved.result.id
-        ? null
-        : (0, validate_new_comp_data_1.validateCompositionName)(newId, compositions);
-    const valid = compNameErrMessage === null && resolved.result.id !== newId;
-    const codemod = (0, react_1.useMemo)(() => {
-        return {
-            type: 'rename-composition',
-            idToRename: resolved.result.id,
-            newId,
-        };
-    }, [newId, resolved.result.id]);
+    const { codemod, renameComposition, valid, validationMessage: compNameErrMessage, } = (0, use_rename_composition_1.useRenameComposition)({
+        compositions,
+        currentId: resolved.result.id,
+        newId,
+    });
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Rename ${resolved.result.id}` }), 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: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { children: [
+                                jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
                                             jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (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: compNameErrMessage, type: "error" })
                                                 ] })) : null] }) })
-                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', successNotification: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: null }) })
+                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', successNotification: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => renameComposition({
+                                newCompositionId: newId,
+                                signal,
+                                symbolicatedStack,
+                            }) }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/RenameFolder.js

@@ -10,8 +10,10 @@ const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
 const layout_2 = require("../RenderModal/layout");
+const actions_1 = require("../RenderQueue/actions");
 const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
+const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const RemInput_1 = require("./RemInput");
 const ValidationMessage_1 = require("./ValidationMessage");
 const content = {
@@ -56,11 +58,16 @@ const RenameFolder = ({ folderName, parentName, stack }) => {
     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("div", { style: layout_2.label, children: "Name" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
                                             jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, 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 }) })
+                            ] }) }), 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, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                                codemod,
+                                dryRun: false,
+                                signal,
+                                symbolicatedStack,
+                            }) }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/RenameStaticFile.js

@@ -3,19 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenameStaticFileModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
-const rename_static_file_1 = require("../../api/rename-static-file");
-const url_state_1 = require("../../helpers/url-state");
 const modals_1 = require("../../state/modals");
 const Button_1 = require("../Button");
 const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const layout_2 = require("../RenderModal/layout");
 const use_static_files_1 = require("../use-static-files");
 const DismissableModal_1 = require("./DismissableModal");
+const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const RemInput_1 = require("./RemInput");
+const use_rename_static_file_1 = require("./use-rename-static-file");
 const ValidationMessage_1 = require("./ValidationMessage");
 const content = {
     padding: 12,
@@ -24,54 +22,32 @@ const content = {
     fontSize: 13,
     minWidth: 500,
 };
-const getParent = (relativePath) => {
-    const slashIndex = relativePath.lastIndexOf('/');
-    return slashIndex === -1 ? '' : relativePath.slice(0, slashIndex);
-};
-const getBaseName = (relativePath) => {
-    const slashIndex = relativePath.lastIndexOf('/');
-    return slashIndex === -1 ? relativePath : relativePath.slice(slashIndex + 1);
-};
 const RenameStaticFileModal = ({ relativePath }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
-    const [newName, setNewName] = (0, react_1.useState)(() => getBaseName(relativePath));
+    const [newName, setNewName] = (0, react_1.useState)(() => (0, use_rename_static_file_1.getStaticFileBaseName)(relativePath));
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
+    const renameFile = (0, use_rename_static_file_1.useRenameStaticFile)({ relativePath, staticFiles });
     (0, react_1.useEffect)(() => {
         const input = inputRef.current;
         if (!input)
             return;
-        const dotIndex = newName.lastIndexOf('.');
-        const stemEnd = dotIndex === -1 ? newName.length : dotIndex;
-        input.setSelectionRange(0, stemEnd);
+        const [start, end] = (0, use_rename_static_file_1.getStaticFileRenameSelection)(newName);
+        input.setSelectionRange(start, end);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const parent = (0, react_1.useMemo)(() => getParent(relativePath), [relativePath]);
     const newRelativePath = (0, react_1.useMemo)(() => {
-        return [parent, newName].filter(Boolean).join('/');
-    }, [newName, parent]);
+        return (0, use_rename_static_file_1.getRenamedStaticFilePath)({ newName, relativePath });
+    }, [newName, relativePath]);
     const changed = newRelativePath !== relativePath;
     const validationMessage = (0, react_1.useMemo)(() => {
-        const trimmedName = newName.trim();
-        if (trimmedName.length === 0) {
-            return 'Name cannot be empty';
-        }
-        if (trimmedName !== newName) {
-            return 'Name cannot start or end with whitespace';
-        }
-        if (newName.includes('/') || newName.includes('\\')) {
-            return 'Name cannot include slashes';
-        }
-        const existingFile = staticFiles.find((file) => {
-            return file.name === newRelativePath && file.name !== relativePath;
+        return (0, use_rename_static_file_1.validateStaticFileRename)({
+            newName,
+            newRelativePath,
+            relativePath,
+            staticFiles,
         });
-        if (existingFile) {
-            return 'An asset with this name already exists';
-        }
-        return null;
     }, [newName, newRelativePath, relativePath, staticFiles]);
     const valid = changed && validationMessage === null;
     const onNameChange = (0, react_1.useCallback)((e) => {
@@ -82,32 +58,18 @@ const RenameStaticFileModal = ({ relativePath }) => {
             return;
         }
         setSubmitting(true);
-        const notification = (0, NotificationCenter_1.showNotification)(`Renaming ${relativePath}...`, null);
-        (0, rename_static_file_1.renameStaticFile)({
-            oldRelativePath: relativePath,
-            newRelativePath,
-        })
-            .then(() => {
-            setSelectedModal(null);
-            if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
-                canvasContent.asset === relativePath) {
-                setCanvasContent({ type: 'asset', asset: newRelativePath });
-                (0, url_state_1.pushUrl)(`/assets/${newRelativePath}`);
+        renameFile(newName)
+            .then((renamed) => {
+            if (!renamed) {
+                setSubmitting(false);
+                return;
             }
-            notification.replaceContent(`Renamed to ${newRelativePath}`, 2000);
+            setSelectedModal(null);
         })
-            .catch((err) => {
+            .catch(() => {
             setSubmitting(false);
-            notification.replaceContent(`Could not rename ${relativePath}: ${err.message}`, 3000);
         });
-    }, [
-        canvasContent,
-        newRelativePath,
-        relativePath,
-        setCanvasContent,
-        setSelectedModal,
-        valid,
-    ]);
+    }, [newName, renameFile, setSelectedModal, valid]);
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
         onRename();
@@ -115,7 +77,7 @@ const RenameStaticFileModal = ({ relativePath }) => {
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Rename ${relativePath}` }), 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("div", { style: layout_2.label, children: "Name" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
                                             jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newName, onChange: onNameChange, type: "text", autoFocus: true, autoComplete: "off", "data-1p-ignore": true, placeholder: "Asset name", status: validationMessage ? 'error' : 'ok', rightAlign: true }), validationMessage ? (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: validationMessage, type: "error" })
                                                 ] })) : null] }) })

package/dist/components/NewComposition/ValidationMessage.js

@@ -20,12 +20,20 @@ const compactStyle = {
     height: 10,
 };
 const container = {
+    width: '100%',
     maxWidth: 500,
+    minWidth: 0,
+};
+const row = {
+    minWidth: 0,
 };
 const label = {
     fontSize: 13,
-    color: 'white',
+    color: colors_1.WHITE,
     fontFamily: 'sans-serif',
+    minWidth: 0,
+    whiteSpace: 'normal',
+    overflowWrap: 'anywhere',
 };
 const compactLabel = {
     ...label,
@@ -40,7 +48,7 @@ const ValidationMessage = ({ message, align, type, action, size = 'default' }) =
             fill: type === 'warning' ? colors_1.WARNING_COLOR : colors_1.FAIL_COLOR,
         };
     }, [iconStyle, type]);
-    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", justify: align, children: [
+    return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", justify: align, style: row, children: [
                 jsx_runtime_1.jsx(exports.WarningTriangle, { style: finalStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: size === 'compact' ? 0.75 : 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: message }), action ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: size === 'compact' ? 0.75 : 1 }), action] })) : null] }) }));
 };

package/dist/components/NewComposition/use-rename-static-file.d.ts

@@ -0,0 +1,18 @@
+import { type StaticFile } from 'remotion';
+export declare const getStaticFileParent: (relativePath: string) => string;
+export declare const getStaticFileBaseName: (relativePath: string) => string;
+export declare const getStaticFileRenameSelection: (fileName: string) => [number, number];
+export declare const getRenamedStaticFilePath: ({ newName, relativePath, }: {
+    readonly newName: string;
+    readonly relativePath: string;
+}) => string;
+export declare const validateStaticFileRename: ({ newName, newRelativePath, relativePath, staticFiles, }: {
+    readonly newName: string;
+    readonly newRelativePath: string;
+    readonly relativePath: string;
+    readonly staticFiles: StaticFile[];
+}) => "An asset with this name already exists" | "Name cannot be empty" | "Name cannot include slashes" | "Name cannot start or end with whitespace" | null;
+export declare const useRenameStaticFile: ({ relativePath, staticFiles, }: {
+    readonly relativePath: string;
+    readonly staticFiles: StaticFile[];
+}) => (newName: string) => Promise<boolean>;