@remotion/cli 4.0.0-alpha.217 → 4.0.0-alpha4

package/dist/editor/components/ModalHeader.js

@@ -10,14 +10,10 @@ const container = {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    padding: '12px 16px',
+    padding: 12,
     width: '100%',
     borderBottom: '1px solid black',
 };
-const titleStyle = {
-    fontSize: 14,
-    color: 'white',
-};
 const icon = {
     height: 20,
     width: 20,
@@ -27,6 +23,6 @@ const NewCompHeader = ({ title }) => {
     const onPress = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: titleStyle, children: title }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onPress })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { children: title }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onPress })] }));
 };
 exports.NewCompHeader = NewCompHeader;

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

@@ -9,9 +9,6 @@ const style = {
     backgroundColor: 'transparent',
     color: 'white',
     cursor: 'pointer',
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
 };
 const CancelButton = ({ onPress, ...props }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();

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

@@ -21,16 +21,9 @@ const container = {
     padding: '8px 10px',
     display: 'inline-block',
     backgroundColor: colors_1.INPUT_BACKGROUND,
+    fontSize: 14,
     borderWidth: 1,
     borderStyle: 'solid',
-    maxWidth: '100%',
-};
-const label = {
-    flex: 1,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    fontSize: 14,
-    textAlign: 'left',
 };
 const Combobox = ({ values, selectedId, style: customStyle, title }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
@@ -52,10 +45,18 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
         }
         const onMouseEnter = () => setIsHovered(true);
         const onMouseLeave = () => setIsHovered(false);
-        const onPointerDown = () => {
+        const onPointerDown = (e) => {
+            e.stopPropagation();
             return setOpened((o) => {
                 if (!o) {
                     refresh === null || refresh === void 0 ? void 0 : refresh();
+                    window.addEventListener('pointerup', (evt) => {
+                        if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
+                            setOpened(false);
+                        }
+                    }, {
+                        once: true,
+                    });
                 }
                 return !o;
             });
@@ -97,12 +98,9 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
         }
         const spaceToBottom = size.windowSize.height - (size.top + size.height);
         const spaceToTop = size.top;
-        const spaceToRight = size.windowSize.width - (size.left + size.width);
-        const minSpaceToRightRequired = styles_1.MAX_MENU_WIDTH;
-        const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
-        const horizontalLayout = spaceToRight >= minSpaceToRightRequired ? 'left' : 'right';
+        const layout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
         return {
-            ...(verticalLayout === 'top'
+            ...(layout === 'top'
                 ? {
                     ...styles_1.menuContainerTowardsBottom,
                     top: size.top + size.height,
@@ -111,13 +109,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
                     ...styles_1.menuContainerTowardsTop,
                     bottom: size.windowSize.height - size.top,
                 }),
-            ...(horizontalLayout === 'left'
-                ? {
-                    left: size.left,
-                }
-                : {
-                    right: size.windowSize.width - size.left - size.width,
-                }),
+            left: size.left,
         };
     }, [opened, size]);
     const selected = values.find((v) => v.id === selectedId);
@@ -137,8 +129,8 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
                     : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
         };
     }, [customStyle, hovered, opened]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [(0, jsx_runtime_1.jsx)("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: label, children: selected === null || selected === void 0 ? void 0 : selected.label }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => v.id === selected.id), topItemCanBeUnselected: false }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected.label, " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => v.id === selected.id), topItemCanBeUnselected: false }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.Combobox = Combobox;

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

@@ -1,12 +1,8 @@
 import type { InputHTMLAttributes } from 'react';
 import React from 'react';
-import type { RemInputStatus } from './RemInput';
 declare type Props = InputHTMLAttributes<HTMLInputElement> & {
     onValueChange: (newVal: number) => void;
     onTextChange: (newVal: string) => void;
-    status: RemInputStatus;
-    formatter?: (str: number | string) => string;
-    rightAlign: boolean;
 };
 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, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, ...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)(() => {
@@ -62,10 +62,6 @@ const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value,
             (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.blur();
         }
     }, []);
-    const roundToStep = (val, stepSize) => {
-        const factor = 1 / stepSize;
-        return Math.ceil(val * factor) / factor;
-    };
     const onPointerDown = (0, react_1.useCallback)((e) => {
         const { pageX, pageY } = e;
         const moveListener = (ev) => {
@@ -73,14 +69,13 @@ const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value,
             const distanceFromStart = Math.sqrt(xDistance ** 2 + (ev.pageY - pageY) ** 2);
             const step = Number(_step !== null && _step !== void 0 ? _step : 1);
             const min = Number(_min !== null && _min !== void 0 ? _min : 0);
-            const max = Number(_max !== null && _max !== void 0 ? _max : Infinity);
             if (distanceFromStart > 4) {
                 (0, input_dragger_click_lock_1.setClickLock)(true);
             }
             const diff = (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step, 0, 0, 0, step]);
-            const newValue = Math.min(max, Math.max(min, Number(value) + diff));
-            const roundedToStep = roundToStep(newValue, step);
-            onValueChange(roundedToStep);
+            const newValue = Math.max(min, Math.floor(Number(value) + diff));
+            const roundToStep = Math.floor(newValue / step) * step;
+            onValueChange(roundToStep);
         };
         window.addEventListener('mousemove', moveListener);
         window.addEventListener('pointerup', () => {
@@ -91,7 +86,7 @@ const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value,
         }, {
             once: true,
         });
-    }, [_step, _min, _max, value, onValueChange]);
+    }, [_step, _min, value, onValueChange]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (inputFallback) {
@@ -99,8 +94,8 @@ const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value,
         }
     }, [inputFallback]);
     if (inputFallback) {
-        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, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...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: formatter(value) }) }));
+    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 }) }));
 };
 exports.InputDragger = InputDragger;

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

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
-const is_menu_item_1 = require("../Menu/is-menu-item");
 const MenuDivider_1 = require("../Menu/MenuDivider");
 const MenuSubItem_1 = require("../Menu/MenuSubItem");
 const styles_1 = require("../Menu/styles");
@@ -15,11 +14,6 @@ const container = {
     paddingBottom: styles_1.MENU_VERTICAL_PADDING,
     border: `${BORDER_SIZE}px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
     marginLeft: 0 - BORDER_SIZE,
-    overflowY: 'auto',
-    overflowX: 'hidden',
-    minWidth: 200,
-    maxWidth: styles_1.MAX_MENU_WIDTH,
-    maxHeight: 600,
 };
 const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMenu, leaveLeftSpace, topItemCanBeUnselected, }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
@@ -114,7 +108,6 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             callback: onEscape,
             commandCtrlKey: false,
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
         });
         const rightBinding = keybindings.registerKeybinding({
             event: 'keydown',
@@ -122,7 +115,6 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             commandCtrlKey: false,
             callback: onArrowRight,
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
         });
         const leftBinding = keybindings.registerKeybinding({
             event: 'keydown',
@@ -130,7 +122,6 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             key: 'ArrowLeft',
             callback: onPreviousMenu,
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
         });
         const downBinding = keybindings.registerKeybinding({
             event: 'keydown',
@@ -138,7 +129,6 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             commandCtrlKey: false,
             callback: onArrowDown,
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
         });
         const upBinding = keybindings.registerKeybinding({
             event: 'keydown',
@@ -146,7 +136,6 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             callback: onArrowUp,
             commandCtrlKey: false,
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
         });
         const enterBinding = keybindings.registerKeybinding({
             event: 'keydown',
@@ -154,7 +143,6 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             callback: onEnter,
             commandCtrlKey: false,
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
         });
         const spaceBinding = keybindings.registerKeybinding({
             event: 'keyup',
@@ -162,7 +150,6 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             callback: onEnter,
             commandCtrlKey: false,
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
         });
         return () => {
             escapeBinding.unregister();
@@ -216,7 +203,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         current.addEventListener('pointerleave', onPointerLeave);
         return () => current.removeEventListener('pointerleave', onPointerLeave);
     }, [onHide, subMenuActivated]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: values.map((item) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: container, children: values.map((item) => {
             if (item.type === 'divider') {
                 return (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}, item.id);
             }

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

@@ -16,8 +16,8 @@ const NewCompDuration = ({ durationInFrames, setDurationInFrames, fps }) => {
         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, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, status: "ok", 
+    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, 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"] })] }) }) }));
+                                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.js

@@ -28,12 +28,12 @@ const left = {
     fontSize: 13,
 };
 const panelRight = {
+    width: 400,
     backgroundColor: 'black',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     position: 'relative',
-    width: 400,
 };
 const pre = {
     fontSize: 17,
@@ -67,11 +67,8 @@ const NewComposition = (props) => {
         return {
             flexDirection: 'row',
             display: 'flex',
-            width: (0, ModalContainer_1.getMaxModalWidth)(950),
-            height: type === 'composition'
-                ? (0, ModalContainer_1.getMaxModalHeight)(490)
-                : (0, ModalContainer_1.getMaxModalHeight)(340),
-            overflow: 'hidden',
+            width: 950,
+            height: type === 'composition' ? 450 : 300,
         };
     }, [type]);
     const [lockedAspectRatio, setLockedAspectRatio] = (0, react_1.useState)((0, aspect_ratio_locked_1.loadAspectRatioOption)() ? Number(size.width) / Number(size.height) : null);
@@ -183,7 +180,7 @@ const NewComposition = (props) => {
             },
         ];
     }, [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", status: "ok", rightAlign: false }), 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)(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", 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.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", 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] })] }) })] }), (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),
@@ -199,6 +196,6 @@ const NewComposition = (props) => {
                                             width: Number(size.width),
                                             name,
                                             raw: true,
-                                        }) })] })] }), ' '] })] }));
+                                        }) })] })] })] })] }));
 };
 exports.default = NewComposition;

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

@@ -1,17 +1,5 @@
-import type { PropsWithChildren } from 'react';
 import React from 'react';
-export declare type RemInputStatus = 'error' | 'warning' | 'ok';
-declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
-    status: RemInputStatus;
-    rightAlign: boolean;
-};
-export declare const INPUT_HORIZONTAL_PADDING = 8;
-export declare const RightAlignInput: React.FC<PropsWithChildren>;
+declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
-    status: 'error' | 'warning' | 'ok';
-    isFocused: boolean;
-    isHovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -1,36 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RemotionInput = exports.getInputBorderColor = exports.inputBaseStyle = exports.RightAlignInput = exports.INPUT_HORIZONTAL_PADDING = void 0;
+exports.RemotionInput = exports.inputBaseStyle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const z_index_1 = require("../../state/z-index");
-exports.INPUT_HORIZONTAL_PADDING = 8;
-const aligner = {
-    marginRight: -exports.INPUT_HORIZONTAL_PADDING,
-};
-const RightAlignInput = ({ children }) => {
-    return (0, jsx_runtime_1.jsx)("div", { style: aligner, children: children });
-};
-exports.RightAlignInput = RightAlignInput;
 exports.inputBaseStyle = {
-    padding: `${exports.INPUT_HORIZONTAL_PADDING}px 10px`,
+    padding: '8px 10px',
     color: 'white',
     borderStyle: 'solid',
     borderWidth: 1,
     fontSize: 14,
 };
-const getInputBorderColor = ({ status, isFocused, isHovered, }) => status === 'warning'
-    ? colors_1.WARNING_COLOR
-    : status === 'error'
-        ? colors_1.FAIL_COLOR
-        : isFocused
-            ? colors_1.SELECTED_BACKGROUND
-            : isHovered
-                ? colors_1.INPUT_BORDER_COLOR_HOVERED
-                : colors_1.INPUT_BORDER_COLOR_UNHOVERED;
-exports.getInputBorderColor = getInputBorderColor;
-const RemInputForwardRef = ({ status, rightAlign, ...props }, ref) => {
+const RemInputForwardRef = (props, ref) => {
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
@@ -41,11 +23,14 @@ const RemInputForwardRef = ({ status, rightAlign, ...props }, ref) => {
             backgroundColor: colors_1.INPUT_BACKGROUND,
             ...exports.inputBaseStyle,
             width: '100%',
-            borderColor: (0, exports.getInputBorderColor)({ isFocused, isHovered, status }),
-            textAlign: rightAlign ? 'right' : 'left',
+            borderColor: isFocused
+                ? colors_1.SELECTED_BACKGROUND
+                : isHovered
+                    ? colors_1.INPUT_BORDER_COLOR_HOVERED
+                    : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
             ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
         };
-    }, [isFocused, isHovered, rightAlign, props.style, status]);
+    }, [isFocused, isHovered, props.style]);
     (0, react_1.useImperativeHandle)(ref, () => {
         return inputRef.current;
     }, []);

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

@@ -1,6 +1,4 @@
 import React from 'react';
 export declare const ValidationMessage: React.FC<{
     message: string;
-    align: 'flex-start' | 'flex-end';
-    type: 'warning' | 'error';
 }>;

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

@@ -2,32 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ValidationMessage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
 const layout_1 = require("../layout");
-const WarningTriangle = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
+const Triangle = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
 };
 const style = {
-    width: 12,
-    height: 12,
-    flexShrink: 0,
+    width: 11,
+    height: 11,
 };
 const container = {
-    maxWidth: 500,
+    marginTop: 5,
 };
 const label = {
     fontSize: 13,
-    color: 'white',
-    fontFamily: 'sans-serif',
+    flex: 1,
 };
-const ValidationMessage = ({ message, align, type }) => {
-    const finalStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...style,
-            fill: type === 'warning' ? colors_1.WARNING_COLOR : colors_1.FAIL_COLOR,
-        };
-    }, [type]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", justify: align, children: [(0, jsx_runtime_1.jsx)(WarningTriangle, { style: finalStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: message })] }) }));
+const ValidationMessage = ({ message }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(Triangle, { style: style, color: "#f1c40f" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: message })] }) }));
 };
 exports.ValidationMessage = ValidationMessage;

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

@@ -9,6 +9,5 @@ declare type TNotificationCenter = {
     addNotification: (notification: TNotification) => void;
 };
 export declare const notificationCenter: React.RefObject<TNotificationCenter>;
-export declare const sendErrorNotification: (content: React.ReactNode) => void;
 export declare const NotificationCenter: React.FC;
 export {};

package/dist/editor/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.notificationCenter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Notification_1 = require("./Notification");
@@ -16,16 +16,6 @@ const container = {
     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({
-        content,
-        duration: 2000,
-        created: Date.now(),
-        id: String(Math.random()).replace('0.', ''),
-    });
-};
-exports.sendErrorNotification = sendErrorNotification;
 const NotificationCenter = () => {
     const [notifications, setNotifications] = (0, react_1.useState)([]);
     const onRemove = (0, react_1.useCallback)((id) => {

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

@@ -1,2 +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

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ServerDisconnected = void 0;
+exports.ServerDisconnected = exports.serverDisconnectedRef = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const client_id_1 = require("../../helpers/client-id");
 const container = {
     position: 'fixed',
     justifyContent: 'flex-end',
@@ -32,13 +31,24 @@ const inlineCode = {
     fontSize: 16,
     fontFamily: 'monospace',
 };
+exports.serverDisconnectedRef = (0, react_1.createRef)();
 let pageIsGoingToReload = false;
 window.addEventListener('beforeunload', () => {
     pageIsGoingToReload = true;
 });
 const ServerDisconnected = () => {
-    const ctx = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
-    if (ctx.type !== 'disconnected') {
+    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) {

package/dist/editor/components/PlayPause.js

@@ -125,7 +125,6 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: onArrowLeft,
             commandCtrlKey: false,
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
         });
         const arrowRight = keybindings.registerKeybinding({
             event: 'keydown',
@@ -133,7 +132,6 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: onArrowRight,
             commandCtrlKey: false,
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
         });
         const space = keybindings.registerKeybinding({
             event: 'keydown',
@@ -141,7 +139,6 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: onSpace,
             commandCtrlKey: false,
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
         });
         const enter = keybindings.registerKeybinding({
             event: 'keydown',
@@ -149,7 +146,6 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: onEnter,
             commandCtrlKey: false,
             preventDefault: false,
-            triggerIfInputFieldFocused: false,
         });
         const a = keybindings.registerKeybinding({
             event: 'keydown',
@@ -157,7 +153,6 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: jumpToStart,
             commandCtrlKey: false,
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
         });
         const e = keybindings.registerKeybinding({
             event: 'keydown',
@@ -165,7 +160,6 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: jumpToEnd,
             commandCtrlKey: false,
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
         });
         return () => {
             arrowLeft.unregister();

package/dist/editor/components/PlaybackKeyboardShortcutsManager.js

@@ -48,7 +48,6 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             callback: onJKey,
             commandCtrlKey: false,
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
         });
         const kKey = keybindings.registerKeybinding({
             event: 'keydown',
@@ -56,7 +55,6 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             callback: onKKey,
             commandCtrlKey: false,
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
         });
         const lKey = keybindings.registerKeybinding({
             event: 'keydown',
@@ -64,7 +62,6 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             callback: onLKey,
             commandCtrlKey: false,
             preventDefault: true,
-            triggerIfInputFieldFocused: false,
         });
         return () => {
             jKey.unregister();

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

@@ -1,4 +1,6 @@
 import React from 'react';
+export declare const commonPlaybackRates: number[];
+export declare const getPlaybackRateLabel: (playbackRate: number) => string;
 export declare const PlaybackRateSelector: React.FC<{
     playbackRate: number;
     setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;