@remotion/studio 4.0.518 → 4.0.519

package/dist/components/NewComposition/NewComposition.js

@@ -1,18 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NewComposition = void 0;
+exports.NewComposition = exports.NewCompositionFields = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_static_files_1 = require("../../api/get-static-files");
 const write_static_file_1 = require("../../api/write-static-file");
+const colors_1 = require("../../helpers/colors");
+const get_folder_id_1 = require("../../helpers/get-folder-id");
 const install_required_package_1 = require("../../helpers/install-required-package");
+const sort_by_nonce_history_1 = require("../../helpers/sort-by-nonce-history");
 const use_create_composition_1 = require("../../helpers/use-create-composition");
+const Checkmark_1 = require("../../icons/Checkmark");
+const folder_1 = require("../../icons/folder");
+const folders_1 = require("../../state/folders");
 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 ComboBox_1 = require("./ComboBox");
 const DismissableModal_1 = require("./DismissableModal");
 const get_new_composition_defaults_1 = require("./get-new-composition-defaults");
 const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
@@ -27,9 +34,198 @@ const content = {
     fontSize: 13,
     minWidth: 500,
 };
-const folderPathStyle = {
-    fontSize: 14,
+const folderSelectStyle = {
+    boxSizing: 'border-box',
+    width: 250,
 };
+const folderIconStyle = {
+    flexShrink: 0,
+    height: 16,
+    width: 16,
+};
+const folderLabelStyle = {
+    alignItems: 'center',
+    color: 'inherit',
+    display: 'flex',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'normal',
+    minWidth: 0,
+};
+const folderLabelTextStyle = {
+    color: 'inherit',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'normal',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const FolderDropdownLabel = ({ folderPath, indentation }) => {
+    return (jsx_runtime_1.jsxs("div", { style: folderLabelStyle, children: [
+            jsx_runtime_1.jsx(layout_1.Spacing, { x: indentation * 1.5 }), folderPath === null ? (jsx_runtime_1.jsx("div", { style: folderIconStyle })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: colors_1.LIGHT_TEXT, style: folderIconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("span", { style: folderLabelTextStyle, children: folderPath !== null && folderPath !== void 0 ? folderPath : 'None' })
+        ] }));
+};
+const rootFolderId = 'new-composition-root-folder';
+const folderSelectIdPrefix = 'new-composition-folder-';
+const NewCompositionFields = ({ heightValidationMessage, inputRef, nameValidationMessage, setValues, values, widthValidationMessage, }) => {
+    const { folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { compositionSortOrder } = (0, react_1.useContext)(folders_1.FolderContext);
+    const selectedFolderId = values.folder.folderName
+        ? `${folderSelectIdPrefix}${(0, get_folder_id_1.getFolderId)({
+            folderName: values.folder.folderName,
+            parentName: values.folder.parentName,
+        })}`
+        : rootFolderId;
+    const folderValues = (0, react_1.useMemo)(() => {
+        const foldersInTreeOrder = [];
+        const sortedFolders = compositionSortOrder === 'alphabetical'
+            ? folders
+                .slice()
+                .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }))
+            : (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(folders);
+        const appendFolders = (parent) => {
+            sortedFolders
+                .filter((folder) => folder.parent === parent)
+                .forEach((folder) => {
+                foldersInTreeOrder.push(folder);
+                appendFolders((0, get_folder_id_1.getFolderId)({ folderName: folder.name, parentName: folder.parent }));
+            });
+        };
+        appendFolders(null);
+        return [
+            {
+                id: rootFolderId,
+                keyHint: null,
+                label: jsx_runtime_1.jsx(FolderDropdownLabel, { folderPath: null, indentation: 0 }),
+                leftItem: values.folder.folderName === null ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                onClick: () => {
+                    setValues((current) => ({
+                        ...current,
+                        folder: {
+                            folderName: null,
+                            parentName: null,
+                            stack: null,
+                        },
+                    }));
+                },
+                quickSwitcherLabel: 'None',
+                subMenu: null,
+                type: 'item',
+                value: rootFolderId,
+            },
+            ...(folders.length === 0
+                ? []
+                : [
+                    {
+                        id: 'new-composition-root-folder-divider',
+                        type: 'divider',
+                    },
+                ]),
+            ...foldersInTreeOrder.map((folder) => {
+                var _a;
+                var _b;
+                const folderPath = (0, get_folder_id_1.getFolderId)({
+                    folderName: folder.name,
+                    parentName: folder.parent,
+                });
+                const indentation = (_b = (_a = folder.parent) === null || _a === void 0 ? void 0 : _a.split('/').length) !== null && _b !== void 0 ? _b : 0;
+                const id = `${folderSelectIdPrefix}${folderPath}`;
+                return {
+                    id,
+                    keyHint: null,
+                    label: (jsx_runtime_1.jsx(FolderDropdownLabel, { folderPath: folderPath, indentation: indentation })),
+                    leftItem: selectedFolderId === id ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                    onClick: () => {
+                        setValues((current) => ({
+                            ...current,
+                            folder: {
+                                folderName: folder.name,
+                                parentName: folder.parent,
+                                stack: folder.stack,
+                            },
+                        }));
+                    },
+                    quickSwitcherLabel: folderPath,
+                    subMenu: null,
+                    type: 'item',
+                    value: id,
+                    disabled: folder.stack === null,
+                };
+            }),
+        ];
+    }, [
+        compositionSortOrder,
+        folders,
+        selectedFolderId,
+        setValues,
+        values.folder.folderName,
+    ]);
+    const onWidthChanged = (0, react_1.useCallback)((newValue) => {
+        setValues((current) => ({
+            ...current,
+            size: { height: current.size.height, width: Number(newValue) },
+        }));
+    }, [setValues]);
+    const onWidthDirectlyChanged = (0, react_1.useCallback)((newWidth) => {
+        setValues((current) => ({
+            ...current,
+            size: { height: current.size.height, width: newWidth },
+        }));
+    }, [setValues]);
+    const onHeightChanged = (0, react_1.useCallback)((newValue) => {
+        setValues((current) => ({
+            ...current,
+            size: { height: Number(newValue), width: current.size.width },
+        }));
+    }, [setValues]);
+    const onHeightDirectlyChanged = (0, react_1.useCallback)((newHeight) => {
+        setValues((current) => ({
+            ...current,
+            size: { height: newHeight, width: current.size.width },
+        }));
+    }, [setValues]);
+    const onNameChange = (0, react_1.useCallback)((event) => {
+        setValues((current) => ({ ...current, id: event.target.value }));
+    }, [setValues]);
+    const onTextFpsChange = (0, react_1.useCallback)((newFps) => {
+        setValues((current) => ({ ...current, fps: Number(newFps) }));
+    }, [setValues]);
+    const onFpsChange = (0, react_1.useCallback)((newFps) => {
+        setValues((current) => ({ ...current, fps: newFps }));
+    }, [setValues]);
+    const setDurationInFrames = (0, react_1.useCallback)((update) => {
+        setValues((current) => ({
+            ...current,
+            durationInFrames: typeof update === 'function'
+                ? update(current.durationInFrames)
+                : update,
+        }));
+    }, [setValues]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            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(ComboBox_1.Combobox, { values: folderValues, selectedId: selectedFolderId, style: folderSelectStyle, title: "Folder" }) })
+                ] }), 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, { ref: inputRef, value: values.id, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), nameValidationMessage ? (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: nameValidationMessage, 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.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
+                                jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": "Width", type: "number", value: values.size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (width) => `${width}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), widthValidationMessage ? (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: widthValidationMessage, 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.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
+                                jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": "Height", type: "number", value: values.size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (height) => `${height}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), heightValidationMessage ? (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: heightValidationMessage, type: "error" })
+                                    ] })) : null] }) })
+                ] }), jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: values.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, { "aria-label": "FPS", type: "number", value: values.fps, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
+                ] })
+        ] }));
+};
+exports.NewCompositionFields = NewCompositionFields;
 const NewCompositionLoaded = ({ canvasCapture, folderName, parentName, stack }) => {
     var _a;
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -39,7 +235,16 @@ const NewCompositionLoaded = ({ canvasCapture, folderName, parentName, stack })
         ? resolvedComposition.result
         : null;
     const initialDimensions = (0, get_new_composition_defaults_1.getNewCompositionDefaults)(initialComposition, (_a = canvasCapture === null || canvasCapture === void 0 ? void 0 : canvasCapture.durationInSeconds) !== null && _a !== void 0 ? _a : null);
-    const [newId, setName] = (0, react_1.useState)(() => (0, use_create_composition_1.getUniqueCompositionName)(compositions));
+    const [values, setValues] = (0, react_1.useState)(() => ({
+        durationInFrames: initialDimensions.durationInFrames,
+        folder: { folderName, parentName, stack },
+        fps: initialDimensions.fps,
+        id: (0, use_create_composition_1.getUniqueCompositionName)(compositions),
+        size: {
+            height: initialDimensions.height,
+            width: initialDimensions.width,
+        },
+    }));
     const inputRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const input = inputRef.current;
@@ -47,61 +252,14 @@ const NewCompositionLoaded = ({ canvasCapture, folderName, parentName, stack })
             return;
         input.select();
     }, []);
-    const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(initialDimensions.fps);
-    const [size, setSize] = (0, react_1.useState)(() => ({
-        width: initialDimensions.width,
-        height: initialDimensions.height,
-    }));
-    const [durationInFrames, setDurationInFrames] = (0, react_1.useState)(initialDimensions.durationInFrames);
-    const onWidthChanged = (0, react_1.useCallback)((newValue) => {
-        setSize((s) => {
-            return {
-                height: s.height,
-                width: Number(newValue),
-            };
-        });
-    }, []);
-    const onWidthDirectlyChanged = (0, react_1.useCallback)((newWidth) => {
-        setSize((s) => {
-            return {
-                height: s.height,
-                width: newWidth,
-            };
-        });
-    }, []);
-    const onHeightDirectlyChanged = (0, react_1.useCallback)((newHeight) => {
-        setSize((s) => {
-            return {
-                width: s.width,
-                height: newHeight,
-            };
-        });
-    }, []);
-    const onHeightChanged = (0, react_1.useCallback)((newValue) => {
-        setSize((s) => {
-            return {
-                width: s.width,
-                height: Number(newValue),
-            };
-        });
-    }, []);
-    const onNameChange = (0, react_1.useCallback)((e) => {
-        setName(e.target.value);
-    }, []);
-    const onTextFpsChange = (0, react_1.useCallback)((newFps) => {
-        setFrameRate(Number(newFps));
-    }, []);
-    const onFpsChange = (0, react_1.useCallback)((newFps) => {
-        setFrameRate(newFps);
-    }, []);
-    const { codemod, createComposition, heightValidationMessage: compHeightErrMessage, nameValidationMessage: compNameErrMessage, valid, widthValidationMessage: compWidthErrMessage, } = (0, use_create_composition_1.useCreateComposition)({
+    const { codemod, createComposition, heightValidationMessage, nameValidationMessage, valid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
         compositions,
-        durationInFrames,
-        folderName,
-        newId,
-        parentName,
-        selectedFrameRate,
-        size,
+        durationInFrames: values.durationInFrames,
+        folderName: values.folder.folderName,
+        newId: values.id,
+        parentName: values.folder.parentName,
+        selectedFrameRate: values.fps,
+        size: values.size,
         canvasCapture: canvasCapture === null
             ? null
             : {
@@ -134,30 +292,9 @@ const NewCompositionLoaded = ({ canvasCapture, folderName, parentName, stack })
     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: canvasCapture === null ? 'New composition' : 'Import Canvas Capture' }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, 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, { 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.jsxs("div", { style: layout_2.optionRow, children: [
-                                    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.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: null, errorNotification: "Could not create composition", genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createCanvasCaptureComposition({
+                    jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsx(exports.NewCompositionFields, { heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: nameValidationMessage, setValues: setValues, values: values, widthValidationMessage: widthValidationMessage }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: null, errorNotification: "Could not create composition", genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: values.folder.stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createCanvasCaptureComposition({
                                 signal,
                                 symbolicatedStack,
                             }), applyCodemodForPreview: null, fallbackToRootFile: true }) })

package/dist/components/{UpdateModal/OpenIssueButton.js → OpenIssueButton.js}

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OpenIssueButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
+const colors_1 = require("../helpers/colors");
 const svgStyle = {
     width: '11px',
     height: '11px',

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -11,7 +11,7 @@ const ellipsis_1 = require("../../icons/ellipsis");
 const modals_1 = require("../../state/modals");
 const InlineDropdown_1 = require("../InlineDropdown");
 const quickSwitcherArea = {
-    padding: '4px 8px',
+    padding: '4px 4px 4px 8px',
     borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
     display: 'flex',
     alignItems: 'center',
@@ -28,6 +28,7 @@ const quickSwitcherTrigger = {
     border: 'none',
     flex: 1,
     appearance: 'none',
+    userSelect: 'none',
     ...(0, hoverable_1.hoverableStyle)({
         idleBackground: colors_1.WHITE_ALPHA_06,
         hoverBackground: colors_1.WHITE_ALPHA_06,

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -27,6 +27,10 @@ const input = {
     width: '100%',
     borderRadius: 4,
 };
+const touchscreenInput = {
+    ...input,
+    fontSize: 16,
+};
 const modeSelector = {
     paddingLeft: 16,
     paddingRight: 16,
@@ -42,6 +46,7 @@ const modeItem = {
     padding: 0,
     fontSize: 13,
     cursor: 'pointer',
+    userSelect: 'none',
 };
 const modeInactive = {
     ...modeItem,
@@ -126,6 +131,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         });
     }, [assetSelection, compositionSelection, initialMode, invocationTimestamp]);
     const inputRef = (0, react_1.useRef)(null);
+    const isTouchscreen = navigator.maxTouchPoints > 0;
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const closeMenu = (0, react_1.useCallback)(() => undefined, []);
@@ -314,39 +320,41 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         setState({ query: e.target.value, selectedIndex: 0 });
     }, []);
     const selectedIndexRounded = (0, shared_1.loopIndex)(state.selectedIndex, resultsArray.length);
-    const onActionsSelected = (0, react_1.useCallback)(() => {
+    const focusInput = (0, react_1.useCallback)(() => {
         var _a;
+        if (!isTouchscreen) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [isTouchscreen]);
+    const onActionsSelected = (0, react_1.useCallback)(() => {
         setState((s) => ({
             query: `> ${stripQuery(s.query)}`,
             selectedIndex: 0,
         }));
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
+        focusInput();
+    }, [focusInput]);
     const onCompositionsSelected = (0, react_1.useCallback)(() => {
-        var _a;
         setState((s) => ({
             query: stripQuery(s.query),
             selectedIndex: 0,
         }));
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
+        focusInput();
+    }, [focusInput]);
     const onAssetsSelected = (0, react_1.useCallback)(() => {
-        var _a;
         setState((s) => ({
             query: `$ ${stripQuery(s.query)}`,
             selectedIndex: 0,
         }));
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
+        focusInput();
+    }, [focusInput]);
     const onDocSearchSelected = (0, react_1.useCallback)(() => {
-        var _a;
         setState((s) => ({
             query: `? ${stripQuery(s.query)}`,
             selectedIndex: 0,
         }));
         setDocResults({ type: 'initial' });
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
+        focusInput();
+    }, [focusInput]);
     const showSearchLoadingState = mode === 'docs' && docResults.type === 'loading';
     const showEmptyDocSearch = mode === 'docs' && actualQuery.trim() === '';
     const placeholder = mode === 'assets'
@@ -360,7 +368,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
                     jsx_runtime_1.jsx("button", { onClick: onCompositionsSelected, style: mode === 'compositions' ? modeActive : modeInactive, type: "button", children: "Compositions" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onAssetsSelected, style: mode === 'assets' ? modeActive : modeInactive, type: "button", children: "Assets" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onActionsSelected, style: mode === 'commands' ? modeActive : modeInactive, type: "button", children: "Actions" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onDocSearchSelected, style: mode === 'docs' ? modeActive : modeInactive, type: "button", children: "Documentation" })
                 ] })), jsx_runtime_1.jsx("div", { style: assetSelection === null && compositionSelection === null
                     ? content
-                    : contentWithoutModeSelector, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: input, autoFocus: true, status: "ok", value: state.query, onChange: onTextChange, placeholder: placeholder, rightAlign: false }) }), jsx_runtime_1.jsx("div", { style: results, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: showEmptyDocSearch ||
+                    : contentWithoutModeSelector, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: isTouchscreen ? touchscreenInput : input, autoFocus: !isTouchscreen, status: "ok", value: state.query, onChange: onTextChange, placeholder: placeholder, rightAlign: false }) }), jsx_runtime_1.jsx("div", { style: results, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: showEmptyDocSearch ||
                     showSearchLoadingState ? null : resultsArray.length === 0 ? (jsx_runtime_1.jsx(NoResults_1.QuickSwitcherNoResults, { mode: mode, query: actualQuery })) : (resultsArray.map((result, i) => {
                     return (jsx_runtime_1.jsx(QuickSwitcherResult_1.QuickSwitcherResult, { selected: selectedIndexRounded === i, result: result }, result.id));
                 })) })

package/dist/components/RenderQueue/actions.d.ts

@@ -109,6 +109,7 @@ export declare const applyCodemod: ({ codemod, dryRun, symbolicatedStack, signal
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("@remotion/studio-shared").CancelRenderResponse>;
 export declare const updateAvailable: (signal: AbortSignal) => Promise<import("@remotion/studio-shared").UpdateAvailableResponse>;
+export declare const getReleaseNotes: (currentVersion: string, latestVersion: string, signal: AbortSignal) => Promise<import("@remotion/studio-shared").GetReleaseNotesResponse>;
 export declare const getProjectInfo: (signal: AbortSignal) => Promise<import("@remotion/studio-shared").ProjectInfoResponse>;
 export declare const callUpdateDefaultPropsApi: (compositionId: string, defaultProps: Record<string, unknown>, enumPaths: EnumPath[]) => Promise<import("@remotion/studio-shared").UpdateDefaultPropsResponse>;
 export declare const applyVisualControlChange: ({ fileName, changes, }: {

package/dist/components/RenderQueue/actions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyVisualControlChange = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
+exports.applyVisualControlChange = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.getReleaseNotes = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
 const no_react_1 = require("remotion/no-react");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const call_api_1 = require("../call-api");
@@ -166,6 +166,10 @@ const updateAvailable = (signal) => {
     return (0, call_api_1.callApi)('/api/update-available', {}, signal);
 };
 exports.updateAvailable = updateAvailable;
+const getReleaseNotes = (currentVersion, latestVersion, signal) => {
+    return (0, call_api_1.callApi)('/api/release-notes', { currentVersion, latestVersion }, signal);
+};
+exports.getReleaseNotes = getReleaseNotes;
 const getProjectInfo = (signal) => {
     return (0, call_api_1.callApi)('/api/project-info', {}, signal);
 };

package/dist/components/SelectedOutlineCanvasRotation.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
+const is_mac_1 = require("../helpers/is-mac");
 const pointer_session_1 = require("../helpers/pointer-session");
 const editor_snapping_1 = require("../state/editor-snapping");
 const canvas_rotation_cursor_1 = require("./canvas-rotation-cursor");
@@ -57,9 +58,34 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
+    const [commandKeyPressed, setCommandKeyPressed] = react_1.default.useState(false);
     const cursor = transform3DMode
         ? canvas_rotation_cursor_1.canvasRotationCursor
         : canvas2DRotationCursor;
+    react_1.default.useEffect(() => {
+        const commandKey = is_mac_1.isMac ? 'Meta' : 'Control';
+        const onKeyDown = (event) => {
+            if (event.key === commandKey) {
+                setCommandKeyPressed(true);
+            }
+        };
+        const onKeyUp = (event) => {
+            if (event.key === commandKey) {
+                setCommandKeyPressed(false);
+            }
+        };
+        const onBlur = () => {
+            setCommandKeyPressed(false);
+        };
+        window.addEventListener('keydown', onKeyDown);
+        window.addEventListener('keyup', onKeyUp);
+        window.addEventListener('blur', onBlur);
+        return () => {
+            window.removeEventListener('keydown', onKeyDown);
+            window.removeEventListener('keyup', onKeyUp);
+            window.removeEventListener('blur', onBlur);
+        };
+    }, []);
     const onPointerDown = react_1.default.useCallback((event) => {
         var _a, _b;
         if (event.button !== 0) {
@@ -241,6 +267,6 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
         setDragOverrides,
         setPropStatuses,
     ]);
-    return (jsx_runtime_1.jsx("polygon", { points: outline.points.map((point) => `${point.x},${point.y}`).join(' '), fill: colors_1.TRANSPARENT, pointerEvents: "all", cursor: cursor, onPointerDown: onPointerDown, "data-remotion-studio-canvas-rotation": true }));
+    return (jsx_runtime_1.jsx("polygon", { points: outline.points.map((point) => `${point.x},${point.y}`).join(' '), fill: colors_1.TRANSPARENT, pointerEvents: commandKeyPressed ? 'none' : 'all', cursor: commandKeyPressed ? 'default' : cursor, onPointerDown: onPointerDown, "data-remotion-studio-canvas-rotation": true }));
 };
 exports.SelectedOutlineCanvasRotation = SelectedOutlineCanvasRotation;

package/dist/components/SelectedOutlineElement.js

@@ -362,6 +362,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         };
     }, [onContextMenuOpen, outline.key, registerContextMenuOpen]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon_1.SelectedOutlinePolygon, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, containsSelection: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) === true, directlySelected: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selected) === true, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLayoutTarget: getLayoutTarget, getTarget: getTarget, hasTarget: layoutTarget !== undefined, hovered: hovered, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, showSelectedOutline: (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.showSelectedOutline) !== null && _a !== void 0 ? _a : false }), (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) && (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) ? (jsx_runtime_1.jsx(SelectedOutlineCanvasRotation_1.SelectedOutlineCanvasRotation, { getLatestTargetByKey: getLatestTargetByKey, layoutTarget: layoutTarget, onDraggingChange: onDraggingChange, outline: outline, transform3DMode: controlTarget.rotationDrag.transform3DMode })) : null] }));
+            jsx_runtime_1.jsx(SelectedOutlinePolygon_1.SelectedOutlinePolygon, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, containsSelection: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) === true, directlySelected: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selected) === true, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLayoutTarget: getLayoutTarget, getTarget: getTarget, hasTarget: layoutTarget !== undefined, hovered: hovered, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, showSelectedOutline: (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.showSelectedOutline) !== null && _a !== void 0 ? _a : false, translateWithCommandKey: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) === true &&
+                    Boolean(controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) }), (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) && (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) ? (jsx_runtime_1.jsx(SelectedOutlineCanvasRotation_1.SelectedOutlineCanvasRotation, { getLatestTargetByKey: getLatestTargetByKey, layoutTarget: layoutTarget, onDraggingChange: onDraggingChange, outline: outline, transform3DMode: controlTarget.rotationDrag.transform3DMode })) : null] }));
 };
 exports.SelectedOutlineElement = react_1.default.memo(SelectedOutlineElementUnmemoized);

package/dist/components/SelectedOutlineKeyboardControls.d.ts

@@ -1,7 +1,7 @@
-import type { CanvasSelectableOutline } from '@remotion/canvas';
 import type React from 'react';
+import type { getSequencesWithSelectableOutlines } from './selected-outline-measurement';
 import { type SelectedOutlineTarget } from './selected-outline-types';
 export declare const SelectedOutlineKeyboardControls: React.FC<{
     readonly getLatestOutlineTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
-    readonly getSelectableOutlines: () => readonly CanvasSelectableOutline[];
+    readonly getSelectableOutlines: () => ReturnType<typeof getSequencesWithSelectableOutlines>;
 }>;

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import { orderOutlinesForRendering } from './selected-outline-order';
+export { orderOutlinesForRendering };
 export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutline3DRotationDragValues, getSelectedOutlineActiveSchema, getSelectedOutlineCropDragChanges, getSelectedOutlineCropDragValues, getSelectedOutlineCropFollowingTransformOrigin, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginDragChanges, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
-export { getOutlineSelectionInteraction, getSelectedCropInfo, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, } from './selected-outline-measurement';
+export { getOutlineSelectionInteraction, getSelectedCropInfo, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
 export { selectedOutlineDragThresholdPx } from './selected-outline-types';
 export type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineScaleDragState, } from './selected-outline-types';
 type SelectedOutlineOverlayProps = {