@remotion/cli 4.0.0-lambda.3 → 4.0.0-newpaths.13

package/dist/editor/components/NewComposition/ComboBox.js

@@ -33,6 +33,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
+    const refresh = size === null || size === void 0 ? void 0 : size.refresh;
     const onHide = (0, react_1.useCallback)(() => {
         setOpened(false);
     }, []);
@@ -45,7 +46,12 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
         const onMouseLeave = () => setIsHovered(false);
         const onClick = (e) => {
             e.stopPropagation();
-            return setOpened((o) => !o);
+            return setOpened((o) => {
+                if (!o) {
+                    refresh === null || refresh === void 0 ? void 0 : refresh();
+                }
+                return !o;
+            });
         };
         current.addEventListener('mouseenter', onMouseEnter);
         current.addEventListener('mouseleave', onMouseLeave);
@@ -55,15 +61,25 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
             current.removeEventListener('mouseleave', onMouseLeave);
             current.removeEventListener('click', onClick);
         };
-    }, []);
+    }, [refresh]);
     const portalStyle = (0, react_1.useMemo)(() => {
         if (!opened || !size) {
             return null;
         }
+        const spaceToBottom = size.windowSize.height - (size.top + size.height);
+        const spaceToTop = size.top;
+        const layout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
         return {
-            ...styles_1.menuContainer,
+            ...(layout === 'top'
+                ? {
+                    ...styles_1.menuContainerTowardsBottom,
+                    top: size.top + size.height,
+                }
+                : {
+                    ...styles_1.menuContainerTowardsTop,
+                    bottom: size.windowSize.height - size.top,
+                }),
             left: size.left,
-            top: size.top + size.height,
         };
     }, [opened, size]);
     const selected = values.find((v) => v.id === selectedId);

package/dist/editor/components/NewComposition/InputDragger.d.ts

@@ -1,6 +1,8 @@
-import React, { InputHTMLAttributes } from 'react';
+import type { InputHTMLAttributes } from 'react';
+import React from 'react';
 declare type Props = InputHTMLAttributes<HTMLInputElement> & {
     onValueChange: (newVal: number) => void;
+    onTextChange: (newVal: string) => void;
 };
 export declare const InputDragger: React.FC<Props>;
 export {};

package/dist/editor/components/NewComposition/InputDragger.js

@@ -8,7 +8,7 @@ const noop_1 = require("../../helpers/noop");
 const input_dragger_click_lock_1 = require("../../state/input-dragger-click-lock");
 const z_index_1 = require("../../state/z-index");
 const RemInput_1 = require("./RemInput");
-const InputDragger = ({ onValueChange, min: _min, step: _step, value, ...props }) => {
+const InputDragger = ({ onValueChange, min: _min, step: _step, value, onTextChange, ...props }) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
     const style = (0, react_1.useMemo)(() => {
@@ -25,6 +25,7 @@ const InputDragger = ({ onValueChange, min: _min, step: _step, value, ...props }
         cursor: 'ew-resize',
         userSelect: 'none',
         fontSize: 13,
+        fontVariantNumeric: 'tabular-nums',
     }), []);
     const onClick = (0, react_1.useCallback)((e) => {
         if (!(0, input_dragger_click_lock_1.getClickLock)()) {
@@ -35,12 +36,30 @@ const InputDragger = ({ onValueChange, min: _min, step: _step, value, ...props }
         }
         setInputFallback(true);
     }, []);
-    const onBlur = (0, react_1.useCallback)(() => {
+    const onEscape = (0, react_1.useCallback)(() => {
         setInputFallback(false);
     }, []);
+    const onBlur = (0, react_1.useCallback)(() => {
+        if (!fallbackRef.current) {
+            return;
+        }
+        const newValue = fallbackRef.current.value;
+        if (newValue.trim() === '') {
+            onEscape();
+            return;
+        }
+        if (fallbackRef.current.checkValidity()) {
+            onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(newValue);
+            setInputFallback(false);
+        }
+        else {
+            fallbackRef.current.reportValidity();
+        }
+    }, [onEscape, onTextChange]);
     const onKeyPress = (0, react_1.useCallback)((e) => {
+        var _a;
         if (e.key === 'Enter') {
-            setInputFallback(false);
+            (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.blur();
         }
     }, []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
@@ -75,7 +94,7 @@ const InputDragger = ({ onValueChange, min: _min, step: _step, value, ...props }
         }
     }, [inputFallback]);
     if (inputFallback) {
-        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onBlur, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, value: value, min: _min, step: _step, ...props }) }));
+        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, min: _min, step: _step, defaultValue: value, ...props }) }));
     }
     return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: (0, jsx_runtime_1.jsx)("span", { style: span, children: value }) }));
 };

package/dist/editor/components/NewComposition/MenuContent.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComboboxValue } from './ComboBox';
+import type { ComboboxValue } from './ComboBox';
 export declare const MenuContent: React.FC<{
     values: ComboboxValue[];
     onHide: () => void;

package/dist/editor/components/NewComposition/MenuContent.js

@@ -99,13 +99,55 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         setSubMenuActivated('without-mouse');
     }, [onNextMenu, selectedItem, values]);
     (0, react_1.useEffect)(() => {
-        const escapeBinding = keybindings.registerKeybinding('keydown', 'Escape', onEscape);
-        const rightBinding = keybindings.registerKeybinding('keydown', 'ArrowRight', onArrowRight);
-        const leftBinding = keybindings.registerKeybinding('keydown', 'ArrowLeft', onPreviousMenu);
-        const downBinding = keybindings.registerKeybinding('keydown', 'ArrowDown', onArrowDown);
-        const upBinding = keybindings.registerKeybinding('keydown', 'ArrowUp', onArrowUp);
-        const enterBinding = keybindings.registerKeybinding('keydown', 'Enter', onEnter);
-        const spaceBinding = keybindings.registerKeybinding('keyup', ' ', onEnter);
+        const escapeBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'Escape',
+            callback: onEscape,
+            commandCtrlKey: false,
+            preventDefault: true,
+        });
+        const rightBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowRight',
+            commandCtrlKey: false,
+            callback: onArrowRight,
+            preventDefault: true,
+        });
+        const leftBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            commandCtrlKey: false,
+            key: 'ArrowLeft',
+            callback: onPreviousMenu,
+            preventDefault: true,
+        });
+        const downBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowDown',
+            commandCtrlKey: false,
+            callback: onArrowDown,
+            preventDefault: true,
+        });
+        const upBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowUp',
+            callback: onArrowUp,
+            commandCtrlKey: false,
+            preventDefault: true,
+        });
+        const enterBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'Enter',
+            callback: onEnter,
+            commandCtrlKey: false,
+            preventDefault: true,
+        });
+        const spaceBinding = keybindings.registerKeybinding({
+            event: 'keyup',
+            key: ' ',
+            callback: onEnter,
+            commandCtrlKey: false,
+            preventDefault: true,
+        });
         return () => {
             escapeBinding.unregister();
             leftBinding.unregister();

package/dist/editor/components/NewComposition/NewCompDuration.js

@@ -9,13 +9,15 @@ 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 onDurationInFramesChanged = (0, react_1.useCallback)((e) => {
-        setDurationInFrames(String(Number(e.target.value)));
+    const onDurationInFramesChanged = (0, react_1.useCallback)((newValue) => {
+        setDurationInFrames(String(Number(newValue)));
     }, [setDurationInFrames]);
     const onDurationChangedDirectly = (0, react_1.useCallback)((newVal) => {
         setDurationInFrames(String(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, onChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, max: 100000000, onValueChange: onDurationChangedDirectly }), compDurationErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compDurationErrMessage })) : 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.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, 
+                                // Hitting Promise.all() limit in Chrome
+                                max: 300000, onValueChange: onDurationChangedDirectly }), compDurationErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compDurationErrMessage })) : null] }), (0, jsx_runtime_1.jsxs)("span", { style: new_comp_layout_1.rightLabel, children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] })] }) }) }));
 };
 exports.NewCompDuration = NewCompDuration;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CompType } from '../../state/modals';
+import type { CompType } from '../../state/modals';
 declare const NewComposition: React.FC<{
     initialCompType: CompType;
 }>;

package/dist/editor/components/NewComposition/NewComposition.js

@@ -84,10 +84,10 @@ const NewComposition = (props) => {
     const onTypeChanged = (0, react_1.useCallback)((newType) => {
         setType(newType);
     }, []);
-    const onWidthChanged = (0, react_1.useCallback)((e) => {
+    const onWidthChanged = (0, react_1.useCallback)((newValue) => {
         setSize((s) => {
             const { height } = s;
-            const newWidth = Number(e.target.value);
+            const newWidth = Number(newValue);
             return {
                 height: lockedAspectRatio === null
                     ? height
@@ -118,10 +118,10 @@ const NewComposition = (props) => {
             };
         });
     }, [lockedAspectRatio]);
-    const onHeightChanged = (0, react_1.useCallback)((e) => {
+    const onHeightChanged = (0, react_1.useCallback)((newValue) => {
         setSize((s) => {
             const { width } = s;
-            const newHeight = Number(e.target.value);
+            const newHeight = Number(newValue);
             return {
                 width: lockedAspectRatio === null
                     ? width
@@ -147,6 +147,7 @@ const NewComposition = (props) => {
                 keyHint: null,
                 leftItem: String(frameRate) === selectedFrameRate ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
+                quickSwitcherLabel: null,
             };
         });
     }, [onFpsChange, selectedFrameRate]);
@@ -164,6 +165,7 @@ const NewComposition = (props) => {
                 subMenu: null,
                 type: 'item',
                 value: 'composition',
+                quickSwitcherLabel: null,
             },
             {
                 id: 'still',
@@ -174,10 +176,11 @@ const NewComposition = (props) => {
                 subMenu: null,
                 type: 'item',
                 value: 'still',
+                quickSwitcherLabel: null,
             },
         ];
     }, [onTypeChanged]);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "New composition" }), (0, jsx_runtime_1.jsxs)("div", { style: panelContent, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("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: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.inputArea, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Name" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name" }), compNameErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compNameErrMessage })) : null] })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(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: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width (px)", onChange: onWidthChanged, name: "width", step: 2, min: 2, max: 100000000, onValueChange: onWidthDirectlyChanged }), compWidthErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compWidthErrMessage })) : null] })] }) }) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", {}), (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: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onChange: onHeightChanged, placeholder: "Height (px)", name: "height", step: 2, min: 2, max: 100000000, onValueChange: onHeightDirectlyChanged }), compHeightErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compHeightErrMessage })) : null] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(size.width), height: Number(size.height), aspectRatioLocked: lockedAspectRatio, setAspectRatioLocked: setAspectRatioLocked }) })] }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames })) : null, (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", {}), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Framerate" }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Framerate", style: comboBoxStyle, values: items, selectedId: selectedFrameRate })] })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: panelRight, children: [(0, jsx_runtime_1.jsx)("pre", { style: pre, children: (0, NewCompCode_1.getNewCompositionCode)({
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "New composition" }), (0, jsx_runtime_1.jsxs)("div", { style: panelContent, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("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: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.inputArea, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Name" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name" }), compNameErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compNameErrMessage })) : null] })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(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: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width (px)", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, max: 100000000, onValueChange: onWidthDirectlyChanged }), compWidthErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compWidthErrMessage })) : null] })] }) }) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", {}), (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: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height (px)", name: "height", step: 2, required: true, min: 2, max: 100000000, onValueChange: onHeightDirectlyChanged }), compHeightErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compHeightErrMessage })) : null] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(size.width), height: Number(size.height), aspectRatioLocked: lockedAspectRatio, setAspectRatioLocked: setAspectRatioLocked }) })] }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames })) : null, (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", {}), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Framerate" }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Framerate", style: comboBoxStyle, values: items, selectedId: selectedFrameRate })] })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: panelRight, children: [(0, jsx_runtime_1.jsx)("pre", { style: pre, children: (0, NewCompCode_1.getNewCompositionCode)({
                                     type,
                                     durationInFrames: Number(durationInFrames),
                                     fps: Number(selectedFrameRate),

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -1,3 +1,5 @@
 import React from 'react';
+declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemotionInput: (props: React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/editor/components/NewComposition/RemInput.js

@@ -33,7 +33,7 @@ const RemInputForwardRef = (props, ref) => {
     }, [isFocused, isHovered, props.style]);
     (0, react_1.useImperativeHandle)(ref, () => {
         return inputRef.current;
-    });
+    }, []);
     (0, react_1.useEffect)(() => {
         if (!inputRef.current) {
             return;

package/dist/editor/components/NewComposition/new-comp-layout.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export declare const leftLabel: React.CSSProperties;
 export declare const inputArea: React.CSSProperties;
 export declare const rightLabel: React.CSSProperties;

package/dist/editor/components/Notifications/ColorDot.d.ts

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

package/dist/editor/components/Notifications/ColorDot.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorDot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const container = {
+    height: 16,
+    width: 16,
+    backgroundColor: 'red',
+    border: '1px solid rgba(255, 255, 255, 0.2)',
+    borderRadius: 8,
+};
+const ColorDot = ({ color }) => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            backgroundColor: color,
+        };
+    }, [color]);
+    return (0, jsx_runtime_1.jsx)("div", { style: style });
+};
+exports.ColorDot = ColorDot;

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

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

package/dist/editor/components/Notifications/Notification.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Notification = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const notification = {
+    backgroundColor: '#111111',
+    color: 'white',
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    display: 'inline-flex',
+    padding: '8px 14px',
+    borderRadius: 4,
+    fontSize: 15,
+    border: '0.25px solid rgba(255, 255, 255, 0.1)',
+    boxShadow: '0 2px 3px rgba(0, 0, 0, 1)',
+    marginTop: 3,
+    marginBottom: 3,
+    alignItems: 'center',
+};
+const Notification = ({ children, id, duration, created, onRemove }) => {
+    (0, react_1.useEffect)(() => {
+        const timeout = setTimeout(() => {
+            onRemove(id);
+        }, duration - (Date.now() - created));
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [created, duration, id, onRemove]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: notification, children: children }));
+};
+exports.Notification = Notification;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+declare type TNotification = {
+    id: string;
+    content: React.ReactNode;
+    created: number;
+    duration: number;
+};
+declare type TNotificationCenter = {
+    addNotification: (notification: TNotification) => void;
+};
+export declare const notificationCenter: React.RefObject<TNotificationCenter>;
+export declare const NotificationCenter: React.FC;
+export {};

package/dist/editor/components/Notifications/NotificationCenter.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationCenter = exports.notificationCenter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Notification_1 = require("./Notification");
+const container = {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    width: '100%',
+    flexDirection: 'column',
+    paddingTop: 20,
+    pointerEvents: 'none',
+    backgroundColor: 'transparent',
+};
+exports.notificationCenter = (0, react_1.createRef)();
+const NotificationCenter = () => {
+    const [notifications, setNotifications] = (0, react_1.useState)([]);
+    const onRemove = (0, react_1.useCallback)((id) => {
+        setNotifications((not) => {
+            return not.filter((n) => n.id !== id);
+        });
+    }, []);
+    const addNotification = (0, react_1.useCallback)((notification) => {
+        setNotifications((previousNotifications) => {
+            return [...previousNotifications, notification];
+        });
+    }, []);
+    (0, react_1.useImperativeHandle)(exports.notificationCenter, () => {
+        return {
+            addNotification,
+        };
+    }, [addNotification]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: notifications.map((n) => {
+            return ((0, jsx_runtime_1.jsx)(Notification_1.Notification, { created: n.created, duration: n.duration, id: n.id, onRemove: onRemove, children: n.content }, n.id));
+        }) }));
+};
+exports.NotificationCenter = NotificationCenter;

package/dist/editor/components/Notifications/ServerDisconnected.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const serverDisconnectedRef: React.RefObject<{
+    setServerDisconnected: () => void;
+    setServerConnected: () => void;
+}>;
+export declare const ServerDisconnected: React.FC;

package/dist/editor/components/Notifications/ServerDisconnected.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServerDisconnected = exports.serverDisconnectedRef = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const container = {
+    position: 'fixed',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-start',
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    flexDirection: 'column',
+    padding: 30,
+    pointerEvents: 'none',
+    backgroundColor: 'transparent',
+    fontFamily: 'SF Pro, Arial, Helvetica, sans-serif',
+};
+const message = {
+    backgroundColor: '#e74c3c',
+    color: 'white',
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingTop: 12,
+    paddingBottom: 12,
+    borderRadius: 4,
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.4)',
+    lineHeight: 1.5,
+};
+const inlineCode = {
+    fontSize: 16,
+    fontFamily: 'monospace',
+};
+exports.serverDisconnectedRef = (0, react_1.createRef)();
+let pageIsGoingToReload = false;
+window.addEventListener('beforeunload', () => {
+    pageIsGoingToReload = true;
+});
+const ServerDisconnected = () => {
+    const [serverDisconnected, setServerDisconnected] = (0, react_1.useState)(false);
+    (0, react_1.useImperativeHandle)(exports.serverDisconnectedRef, () => {
+        return {
+            setServerDisconnected: () => {
+                setServerDisconnected(true);
+            },
+            setServerConnected: () => {
+                setServerDisconnected(false);
+            },
+        };
+    }, []);
+    if (!serverDisconnected) {
+        return null;
+    }
+    if (pageIsGoingToReload) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsxs)("div", { style: message, children: ["The preview server has disconnected. ", (0, jsx_runtime_1.jsx)("br", {}), window.remotion_previewServerCommand ? ((0, jsx_runtime_1.jsxs)("span", { children: ["Run", ' ', (0, jsx_runtime_1.jsx)("code", { style: inlineCode, children: window.remotion_previewServerCommand }), ' ', "to run it again."] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Fast refresh will not work." }))] }) }));
+};
+exports.ServerDisconnected = ServerDisconnected;