@remotion/studio 4.0.133 → 4.0.135

package/dist/components/NewComposition/DuplicateComposition.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DuplicateComposition = 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 layout_1 = require("../layout");
+const ModalHeader_1 = require("../ModalHeader");
+const layout_2 = require("../RenderModal/layout");
+const ResolveCompositionBeforeModal_1 = require("../RenderModal/ResolveCompositionBeforeModal");
+const CodemodFooter_1 = require("./CodemodFooter");
+const ComboBox_1 = require("./ComboBox");
+const DismissableModal_1 = require("./DismissableModal");
+const InputDragger_1 = require("./InputDragger");
+const NewCompDuration_1 = require("./NewCompDuration");
+const RemInput_1 = require("./RemInput");
+const ValidationMessage_1 = require("./ValidationMessage");
+const content = {
+    padding: 12,
+    paddingRight: 12,
+    flex: 1,
+    fontSize: 13,
+    minWidth: 500,
+};
+const comboBoxStyle = {
+    width: 190,
+};
+const DuplicateCompositionLoaded = () => {
+    const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
+    if (!context) {
+        throw new Error('Resolved composition context');
+    }
+    const { resolved, unresolved } = context;
+    const initialCompType = resolved.result.durationInFrames === 1 ? 'still' : 'composition';
+    const hadDimensionsDefined = unresolved.width && unresolved.height;
+    const hadFpsDefined = unresolved.fps !== undefined;
+    const hadDurationDefined = unresolved.durationInFrames !== undefined;
+    const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(resolved.result.fps);
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const [type, setType] = (0, react_1.useState)(initialCompType);
+    const [newId, setName] = (0, react_1.useState)(() => {
+        var _a;
+        const numberAtEnd = (_a = resolved.result.id.match(/([0-9]+)$/)) === null || _a === void 0 ? void 0 : _a[0];
+        let prefix = numberAtEnd ? Number(numberAtEnd) : 1;
+        const initialName = resolved.result.id.replace(/([0-9]+)$/, '');
+        let currentName = initialName;
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+            currentName = initialName + prefix;
+            const err = (0, validate_new_comp_data_1.validateCompositionName)(currentName, compositions);
+            if (!err) {
+                break;
+            }
+            prefix++;
+        }
+        return currentName;
+    });
+    const [size, setSize] = (0, react_1.useState)(() => ({
+        width: resolved.result.width,
+        height: resolved.result.height,
+    }));
+    const [durationInFrames, setDurationInFrames] = (0, react_1.useState)(resolved.result.durationInFrames);
+    const onTypeChanged = (0, react_1.useCallback)((newType) => {
+        setType(newType);
+    }, []);
+    const onWidthChanged = (0, react_1.useCallback)((newValue) => {
+        setSize((s) => {
+            const { height } = s;
+            const newWidth = Number(newValue);
+            return {
+                height,
+                width: newWidth,
+            };
+        });
+    }, []);
+    const onWidthDirectlyChanged = (0, react_1.useCallback)((newWidth) => {
+        setSize((s) => {
+            const { height } = s;
+            return {
+                height,
+                width: newWidth,
+            };
+        });
+    }, []);
+    const onHeightDirectlyChanged = (0, react_1.useCallback)((newHeight) => {
+        setSize((s) => {
+            const { width } = s;
+            return {
+                width,
+                height: newHeight,
+            };
+        });
+    }, []);
+    const onHeightChanged = (0, react_1.useCallback)((newValue) => {
+        setSize((s) => {
+            const { width } = s;
+            const newHeight = Number(newValue);
+            return {
+                width,
+                height: newHeight,
+            };
+        });
+    }, []);
+    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 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 typeValues = (0, react_1.useMemo)(() => {
+        return [
+            {
+                id: 'composition',
+                keyHint: null,
+                label: '<Composition />',
+                leftItem: null,
+                onClick: () => onTypeChanged('composition'),
+                subMenu: null,
+                type: 'item',
+                value: 'composition',
+                quickSwitcherLabel: null,
+            },
+            {
+                id: 'still',
+                keyHint: null,
+                label: '<Still />',
+                leftItem: null,
+                onClick: () => onTypeChanged('still'),
+                subMenu: null,
+                type: 'item',
+                value: 'still',
+                quickSwitcherLabel: null,
+            },
+        ];
+    }, [onTypeChanged]);
+    const valid = compNameErrMessage === null &&
+        compWidthErrMessage === null &&
+        compHeightErrMessage === null;
+    const codemod = (0, react_1.useMemo)(() => {
+        return {
+            type: 'duplicate-composition',
+            idToDuplicate: resolved.result.id,
+            newDurationInFrames: hadDurationDefined ? Number(durationInFrames) : null,
+            newFps: hadFpsDefined ? Number(selectedFrameRate) : null,
+            newHeight: hadDimensionsDefined ? Number(size.height) : null,
+            newWidth: hadDimensionsDefined ? Number(size.width) : null,
+            newId,
+            tag: type === 'still' ? 'Still' : 'Composition',
+        };
+    }, [
+        durationInFrames,
+        hadDimensionsDefined,
+        hadDurationDefined,
+        hadFpsDefined,
+        newId,
+        resolved.result.id,
+        selectedFrameRate,
+        size.height,
+        size.width,
+        type,
+    ]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Duplicate ${resolved.result.id}` }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("div", { style: content, children: [initialCompType === 'composition' ? (
+                            // We allow converting from a composition to a still, but
+                            // not the other way around
+                            (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] })) : null, (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "ID" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] }) })] }), hadDimensionsDefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.rightRow, children: [(0, 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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.rightRow, children: [(0, 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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })] })) : null] })] })] })) : null, type === 'composition' && hadDurationDefined ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames })) : null, type === 'composition' && hadFpsDefined ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "FPS" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, 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 }) })] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: { ...content, borderTop: '1px solid black' }, children: (0, jsx_runtime_1.jsx)(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', succeessNotifcation: `Duplicated ${unresolved.id}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, valid: valid }) })] })] }));
+};
+const DuplicateComposition = ({ compositionId }) => {
+    return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: compositionId, children: (0, jsx_runtime_1.jsx)(DuplicateCompositionLoaded, {}) }) }));
+};
+exports.DuplicateComposition = DuplicateComposition;

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

@@ -1,6 +1,5 @@
 import React from 'react';
 export declare const NewCompDuration: React.FC<{
-    durationInFrames: string;
-    fps: string;
-    setDurationInFrames: React.Dispatch<React.SetStateAction<string>>;
+    durationInFrames: number;
+    setDurationInFrames: React.Dispatch<React.SetStateAction<number>>;
 }>;

package/dist/components/NewComposition/NewCompDuration.js

@@ -5,19 +5,19 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
 const layout_1 = require("../layout");
+const layout_2 = require("../RenderModal/layout");
 const InputDragger_1 = require("./InputDragger");
-const new_comp_layout_1 = require("./new-comp-layout");
 const ValidationMessage_1 = require("./ValidationMessage");
-const NewCompDuration = ({ durationInFrames, setDurationInFrames, fps }) => {
+const NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
     const onDurationInFramesChanged = (0, react_1.useCallback)((newValue) => {
-        setDurationInFrames(String(Number(newValue)));
+        setDurationInFrames(Number(newValue));
     }, [setDurationInFrames]);
     const onDurationChangedDirectly = (0, react_1.useCallback)((newVal) => {
-        setDurationInFrames(String(newVal));
+        setDurationInFrames(newVal);
     }, [setDurationInFrames]);
     const compDurationErrMessage = (0, validate_new_comp_data_1.validateCompositionDuration)(durationInFrames);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: " Duration in frames" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, status: "ok", 
-                                // Hitting Promise.all() limit in Chrome
-                                max: 300000, onValueChange: onDurationChangedDirectly, rightAlign: false }), compDurationErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })] })) : null] }), (0, jsx_runtime_1.jsxs)("span", { style: new_comp_layout_1.rightLabel, children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] })] }) }) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Duration in frames" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_2.rightRow, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, status: "ok", 
+                        // Hitting Promise.all() limit in Chrome
+                        max: 300000, onValueChange: onDurationChangedDirectly, rightAlign: false }), compDurationErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })] })) : null] })] }));
 };
 exports.NewCompDuration = NewCompDuration;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const RenameComposition: React.FC<{
+    compositionId: string;
+}>;

package/dist/components/NewComposition/RenameComposition.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 layout_1 = require("../layout");
+const ModalHeader_1 = require("../ModalHeader");
+const layout_2 = require("../RenderModal/layout");
+const ResolveCompositionBeforeModal_1 = require("../RenderModal/ResolveCompositionBeforeModal");
+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 RenameCompositionLoaded = () => {
+    const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
+    if (!context) {
+        throw new Error('Resolved composition context');
+    }
+    const { resolved } = context;
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const [newId, setName] = (0, react_1.useState)(() => {
+        return resolved.result.id;
+    });
+    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]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Rename ${resolved.result.id}` }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsx)("div", { style: content, children: (0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "ID" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })] })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: { ...content, borderTop: '1px solid black' }, children: (0, jsx_runtime_1.jsx)(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', succeessNotifcation: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, valid: valid }) })] })] }));
+};
+const RenameComposition = ({ compositionId }) => {
+    return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionBeforeModal_1.ResolveCompositionBeforeModal, { compositionId: compositionId, children: (0, jsx_runtime_1.jsx)(RenameCompositionLoaded, {}) }) }));
+};
+exports.RenameComposition = RenameComposition;

package/dist/components/Notifications/Notification.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export declare const Notification: React.FC<{
     children: React.ReactNode;
     created: number;
-    duration: number;
+    duration: number | null;
     id: string;
     onRemove: (id: string) => void;
 }>;

package/dist/components/Notifications/Notification.js

@@ -19,6 +19,9 @@ const notification = {
 };
 const Notification = ({ children, id, duration, created, onRemove }) => {
     (0, react_1.useEffect)(() => {
+        if (duration === null) {
+            return;
+        }
         const timeout = setTimeout(() => {
             onRemove(id);
         }, duration - (Date.now() - created));

package/dist/components/Notifications/NotificationCenter.d.ts

@@ -1,14 +1,7 @@
 import React from 'react';
-type TNotification = {
-    id: string;
-    content: React.ReactNode;
-    created: number;
-    duration: number;
+type CreatedNotification = {
+    replaceContent: (newContent: React.ReactNode, durationInMs: number | null) => void;
 };
-type TNotificationCenter = {
-    addNotification: (notification: TNotification) => void;
-};
-export declare const notificationCenter: React.RefObject<TNotificationCenter>;
-export declare const sendErrorNotification: (content: React.ReactNode) => void;
+export declare const showNotification: (content: React.ReactNode, durationInMs: number | null) => CreatedNotification;
 export declare const NotificationCenter: React.FC;
 export {};

package/dist/components/Notifications/NotificationCenter.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NotificationCenter = exports.sendErrorNotification = exports.notificationCenter = void 0;
+exports.NotificationCenter = exports.showNotification = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Notification_1 = require("./Notification");
@@ -15,17 +15,16 @@ const container = {
     pointerEvents: 'none',
     backgroundColor: 'transparent',
 };
-exports.notificationCenter = (0, react_1.createRef)();
-const sendErrorNotification = (content) => {
-    var _a;
-    (_a = exports.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+const notificationCenter = (0, react_1.createRef)();
+const showNotification = (content, durationInMs) => {
+    return notificationCenter.current.addNotification({
         content,
-        duration: 2000,
+        duration: durationInMs,
         created: Date.now(),
         id: String(Math.random()).replace('0.', ''),
     });
 };
-exports.sendErrorNotification = sendErrorNotification;
+exports.showNotification = showNotification;
 const NotificationCenter = () => {
     const [notifications, setNotifications] = (0, react_1.useState)([]);
     const onRemove = (0, react_1.useCallback)((id) => {
@@ -37,8 +36,25 @@ const NotificationCenter = () => {
         setNotifications((previousNotifications) => {
             return [...previousNotifications, notification];
         });
+        return {
+            replaceContent: (newContent, durationInMs) => {
+                setNotifications((oldNotifications) => {
+                    return oldNotifications.map((notificationToMap) => {
+                        if (notificationToMap.id === notification.id) {
+                            return {
+                                ...notificationToMap,
+                                duration: durationInMs,
+                                content: newContent,
+                                created: Date.now(),
+                            };
+                        }
+                        return notificationToMap;
+                    });
+                });
+            },
+        };
     }, []);
-    (0, react_1.useImperativeHandle)(exports.notificationCenter, () => {
+    (0, react_1.useImperativeHandle)(notificationCenter, () => {
         return {
             addNotification,
         };

package/dist/components/OpenEditorButton.js

@@ -35,13 +35,13 @@ const OpenEditorButton = ({ type }) => {
                 .then((res) => res.json())
                 .then(({ success }) => {
                 if (!success) {
-                    (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
+                    (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
                 }
             })
                 .catch((err) => {
                 // eslint-disable-next-line no-console
                 console.error(err);
-                (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
+                (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
             });
         }
         if (type === 'git') {

package/dist/components/QuickSwitcher/QuickSwitcher.js

@@ -1,16 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const modals_1 = require("../../state/modals");
-const ModalContainer_1 = require("../ModalContainer");
+const DismissableModal_1 = require("../NewComposition/DismissableModal");
 const QuickSwitcherContent_1 = require("./QuickSwitcherContent");
 const QuickSwitcher = ({ initialMode, invocationTimestamp, readOnlyStudio }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const onQuit = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-    }, [setSelectedModal]);
-    // Separate child component to correctly capture keybindings
-    return ((0, jsx_runtime_1.jsx)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: (0, jsx_runtime_1.jsx)(QuickSwitcherContent_1.QuickSwitcherContent, { readOnlyStudio: readOnlyStudio, invocationTimestamp: invocationTimestamp, initialMode: initialMode }) }));
+    return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(QuickSwitcherContent_1.QuickSwitcherContent, { readOnlyStudio: readOnlyStudio, invocationTimestamp: invocationTimestamp, initialMode: initialMode }) }));
 };
 exports.default = QuickSwitcher;

package/dist/components/RenderModal/DataEditor.js

@@ -210,12 +210,12 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
     }, [mode]);
     const onUpdate = (0, react_1.useCallback)(() => {
         if (schema === 'no-zod' || schema === 'no-schema' || z === null) {
-            (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
+            (0, NotificationCenter_1.showNotification)('Cannot update default props: No Zod schema', 2000);
             return;
         }
         (0, actions_1.updateDefaultProps)(unresolvedComposition.id, inputProps, (0, extract_enum_json_paths_1.extractEnumJsonPaths)(schema, z, [])).then((response) => {
             if (!response.success) {
-                (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: ' + response.reason);
+                (0, NotificationCenter_1.showNotification)(`Cannot update default props: ${response.reason}`, 2000);
             }
         });
     }, [unresolvedComposition.id, inputProps, schema, z]);
@@ -225,7 +225,7 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
     const onSave = (0, react_1.useCallback)((updater) => {
         var _a;
         if (schema === 'no-zod' || schema === 'no-schema' || z === null) {
-            (0, NotificationCenter_1.sendErrorNotification)('Cannot update default props: No Zod schema');
+            (0, NotificationCenter_1.showNotification)('Cannot update default props: No Zod schema', 2000);
             return;
         }
         setSaving(true);
@@ -234,11 +234,11 @@ const DataEditor = ({ unresolvedComposition, inputProps, setInputProps, mayShowS
             if (!response.success) {
                 // eslint-disable-next-line no-console
                 console.log(response.stack);
-                (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${response.reason}. See console for more information.`);
+                (0, NotificationCenter_1.showNotification)(`Cannot update default props: ${response.reason}. See console for more information.`, 2000);
             }
         })
             .catch((err) => {
-            (0, NotificationCenter_1.sendErrorNotification)(`Cannot update default props: ${err.message}`);
+            (0, NotificationCenter_1.showNotification)(`Cannot update default props: ${err.message}`, 2000);
             setSaving(false);
         });
     }, [