@remotion/cli 4.0.111 → 4.0.113

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

@@ -0,0 +1,5 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+export declare const CancelButton: React.FC<SVGProps<SVGSVGElement> & {
+    onPress: () => void;
+}>;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CancelButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const z_index_1 = require("../../state/z-index");
+const style = {
+    appearance: 'none',
+    border: 'none',
+    backgroundColor: 'transparent',
+    color: 'white',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+const CancelButton = ({ onPress, ...props }) => {
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 320 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }) }) }));
+};
+exports.CancelButton = CancelButton;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+type DividerItem = {
+    type: 'divider';
+    id: string;
+};
+export type SubMenu = {
+    preselectIndex: number | false;
+    leaveLeftSpace: boolean;
+    items: ComboboxValue[];
+};
+export type SelectionItem = {
+    type: 'item';
+    id: string;
+    label: React.ReactNode;
+    value: string | number;
+    onClick: (id: string, e: React.PointerEvent | null) => void;
+    keyHint: string | null;
+    leftItem: React.ReactNode;
+    subMenu: SubMenu | null;
+    quickSwitcherLabel: string | null;
+};
+export type ComboboxValue = DividerItem | SelectionItem;
+export declare const Combobox: React.FC<{
+    values: ComboboxValue[];
+    selectedId: string | number;
+    style?: React.CSSProperties;
+    title: string;
+}>;
+export {};

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

@@ -0,0 +1,159 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combobox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
+const colors_1 = require("../../helpers/colors");
+const noop_1 = require("../../helpers/noop");
+const caret_1 = require("../../icons/caret");
+const z_index_1 = require("../../state/z-index");
+const layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const portals_1 = require("../Menu/portals");
+const styles_1 = require("../Menu/styles");
+const MenuContent_1 = require("./MenuContent");
+const container = {
+    padding: '8px 10px',
+    display: 'inline-block',
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    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);
+    const [opened, setOpened] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const refresh = size === null || size === void 0 ? void 0 : size.refresh;
+    const onHide = (0, react_1.useCallback)(() => {
+        setOpened(false);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        const onPointerDown = () => {
+            return setOpened((o) => {
+                if (!o) {
+                    refresh === null || refresh === void 0 ? void 0 : refresh();
+                }
+                return !o;
+            });
+        };
+        const onClick = (e) => {
+            e.stopPropagation();
+            const isKeyboardInitiated = e.detail === 0;
+            if (!isKeyboardInitiated) {
+                return;
+            }
+            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;
+            });
+        };
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        current.addEventListener('pointerdown', onPointerDown);
+        current.addEventListener('click', onClick);
+        return () => {
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+            current.removeEventListener('pointerdown', onPointerDown);
+            current.removeEventListener('click', onClick);
+        };
+    }, [refresh]);
+    const spaceToBottom = (0, react_1.useMemo)(() => {
+        const margin = 10;
+        if (size && opened) {
+            return size.windowSize.height - (size.top + size.height) - margin;
+        }
+        return 0;
+    }, [opened, size]);
+    const spaceToTop = (0, react_1.useMemo)(() => {
+        const margin = 10;
+        if (size && opened) {
+            return size.top - margin;
+        }
+        return 0;
+    }, [opened, size]);
+    const derivedMaxHeight = (0, react_1.useMemo)(() => {
+        return spaceToTop > spaceToBottom ? spaceToTop : spaceToBottom;
+    }, [spaceToBottom, spaceToTop]);
+    const portalStyle = (0, react_1.useMemo)(() => {
+        if (!opened || !size) {
+            return null;
+        }
+        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';
+        return {
+            ...(verticalLayout === 'top'
+                ? {
+                    ...styles_1.menuContainerTowardsBottom,
+                    top: size.top + size.height,
+                }
+                : {
+                    ...styles_1.menuContainerTowardsTop,
+                    bottom: size.windowSize.height - size.top,
+                }),
+            ...(horizontalLayout === 'left'
+                ? {
+                    left: size.left,
+                }
+                : {
+                    right: size.windowSize.width - size.left - size.width,
+                }),
+        };
+    }, [opened, size, spaceToBottom, spaceToTop]);
+    const selected = values.find((v) => v.id === selectedId);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            ...(customStyle !== null && customStyle !== void 0 ? customStyle : {}),
+            userSelect: 'none',
+            color: 'white',
+            display: 'inline-flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderColor: opened
+                ? colors_1.SELECTED_BACKGROUND
+                : hovered
+                    ? colors_1.INPUT_BORDER_COLOR_HOVERED
+                    : 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: [selected ? ((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 })) : null, (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) => selected && v.id === selected.id), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
+};
+exports.Combobox = Combobox;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CopyHint: React.FC;

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyHint = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const style = {
+    fontSize: 12,
+    color: colors_1.LIGHT_TEXT,
+};
+const CopyHint = () => {
+    const [projectInfo, setProjectInfo] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        fetch(`/api/project-info`)
+            .then((res) => res.json())
+            .then((res) => {
+            setProjectInfo(res);
+        })
+            .catch((err) => {
+            // eslint-disable-next-line no-console
+            console.log('Error fetching info about the project', err);
+            setProjectInfo(null);
+        });
+    }, []);
+    if (!(projectInfo === null || projectInfo === void 0 ? void 0 : projectInfo.videoFile)) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, children: ["Copy this into ", (0, jsx_runtime_1.jsx)("br", {}), " your", ' ', (0, jsx_runtime_1.jsx)("span", { style: style, title: projectInfo.videoFile, children: projectInfo.relativeVideoFile }), ' ', "file."] }));
+};
+exports.CopyHint = CopyHint;

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

@@ -0,0 +1,12 @@
+import type { InputHTMLAttributes } from 'react';
+import React from 'react';
+import type { RemInputStatus } from './RemInput';
+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

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputDragger = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+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 isInt = (num) => {
+    return num % 1 === 0;
+};
+const InputDragger = ({ onValueChange, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, ...props }) => {
+    const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
+    const fallbackRef = (0, react_1.useRef)(null);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...RemInput_1.inputBaseStyle,
+            backgroundColor: 'transparent',
+            borderColor: 'transparent',
+        };
+    }, []);
+    const span = (0, react_1.useMemo)(() => ({
+        borderBottom: '1px dotted ' + colors_1.BLUE,
+        paddingBottom: 1,
+        color: colors_1.BLUE,
+        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)()) {
+            e.stopPropagation();
+        }
+        if ((0, input_dragger_click_lock_1.getClickLock)()) {
+            return;
+        }
+        setInputFallback(true);
+    }, []);
+    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') {
+            (_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, button } = e;
+        if (button !== 0) {
+            return;
+        }
+        const moveListener = (ev) => {
+            const xDistance = ev.pageX - pageX;
+            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);
+        };
+        window.addEventListener('mousemove', moveListener);
+        window.addEventListener('pointerup', () => {
+            window.removeEventListener('mousemove', moveListener);
+            setTimeout(() => {
+                (0, input_dragger_click_lock_1.setClickLock)(false);
+            }, 2);
+        }, {
+            once: true,
+        });
+    }, [_step, _min, _max, value, onValueChange]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (inputFallback) {
+            (_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.select();
+        }
+    }, [inputFallback]);
+    const deriveStep = (0, react_1.useMemo)(() => {
+        if (_step !== undefined) {
+            return _step;
+        }
+        if (typeof _min === 'number' && isInt(_min)) {
+            return 1;
+        }
+        return 0.0001;
+    }, [_min, _step]);
+    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, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...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) }) }));
+};
+exports.InputDragger = InputDragger;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ComboboxValue } from './ComboBox';
+export declare const MenuContent: React.FC<{
+    values: ComboboxValue[];
+    onHide: () => void;
+    onNextMenu: () => void;
+    onPreviousMenu: () => void;
+    leaveLeftSpace: boolean;
+    preselectIndex: false | number;
+    topItemCanBeUnselected: boolean;
+    fixedHeight: number | null;
+}>;

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

@@ -0,0 +1,245 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuContent = void 0;
+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");
+const BORDER_SIZE = 1;
+const container = {
+    paddingTop: styles_1.MENU_VERTICAL_PADDING,
+    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,
+};
+const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMenu, leaveLeftSpace, topItemCanBeUnselected, fixedHeight, }) => {
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const containerRef = (0, react_1.useRef)(null);
+    const [subMenuActivated, setSubMenuActivated] = (0, react_1.useState)(false);
+    if (values[0].type === 'divider') {
+        throw new Error('first value cant be divide');
+    }
+    const [selectedItem, setSelectedItem] = (0, react_1.useState)(typeof preselectIndex === 'number' && preselectIndex >= 0
+        ? values[preselectIndex].id
+        : null);
+    const onEscape = (0, react_1.useCallback)(() => {
+        onHide();
+    }, [onHide]);
+    const onItemSelected = (0, react_1.useCallback)((id) => {
+        setSelectedItem(id);
+    }, []);
+    const onArrowUp = (0, react_1.useCallback)(() => {
+        setSelectedItem((prevItem) => {
+            if (prevItem === null) {
+                return null;
+            }
+            const index = values.findIndex((val) => val.id === prevItem);
+            if ((topItemCanBeUnselected && index === 0) || prevItem === null) {
+                return null;
+            }
+            const previousItems = values.filter((v, i) => i < index && v.type !== 'divider');
+            if (previousItems.length > 0) {
+                return previousItems[previousItems.length - 1].id;
+            }
+            const firstNonDivider = values.find((v) => v.type !== 'divider');
+            if (firstNonDivider) {
+                return firstNonDivider.id;
+            }
+            throw new Error('could not find previous item');
+        });
+    }, [topItemCanBeUnselected, values]);
+    const onArrowDown = (0, react_1.useCallback)(() => {
+        setSelectedItem((prevItem) => {
+            const index = values.findIndex((val) => val.id === prevItem);
+            const nextItem = values.find((v, i) => i > index && v.type !== 'divider');
+            if (nextItem) {
+                return nextItem.id;
+            }
+            const lastNonDivider = values
+                .slice()
+                .reverse()
+                .find((v) => v.type !== 'divider');
+            if (lastNonDivider) {
+                return lastNonDivider.id;
+            }
+            throw new Error('could not find next item');
+        });
+    }, [values]);
+    const onEnter = (0, react_1.useCallback)(() => {
+        if (selectedItem === null) {
+            return onHide();
+        }
+        const item = values.find((i) => i.id === selectedItem);
+        if (!item) {
+            throw new Error('cannot find item');
+        }
+        if (item.type === 'divider') {
+            throw new Error('cannot find divider');
+        }
+        if (item.subMenu) {
+            return setSubMenuActivated('without-mouse');
+        }
+        onHide();
+        item.onClick(item.id, null);
+    }, [onHide, selectedItem, values]);
+    const onArrowRight = (0, react_1.useCallback)(() => {
+        if (selectedItem === null) {
+            return onNextMenu();
+        }
+        const item = values.find((i) => i.id === selectedItem);
+        if (!item) {
+            throw new Error('cannot find item');
+        }
+        if (item.type === 'divider') {
+            throw new Error('cannot find divider');
+        }
+        if (!item.subMenu) {
+            return onNextMenu();
+        }
+        setSubMenuActivated('without-mouse');
+    }, [onNextMenu, selectedItem, values]);
+    const containerWithHeight = (0, react_1.useMemo)(() => {
+        if (fixedHeight === null) {
+            return { ...container, maxHeight: 600 };
+        }
+        return {
+            ...container,
+            maxHeight: fixedHeight,
+        };
+    }, [fixedHeight]);
+    (0, react_1.useEffect)(() => {
+        const escapeBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'Escape',
+            callback: onEscape,
+            commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const rightBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowRight',
+            commandCtrlKey: false,
+            callback: onArrowRight,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const leftBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            commandCtrlKey: false,
+            key: 'ArrowLeft',
+            callback: onPreviousMenu,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const downBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowDown',
+            commandCtrlKey: false,
+            callback: onArrowDown,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const upBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowUp',
+            callback: onArrowUp,
+            commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const enterBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'Enter',
+            callback: onEnter,
+            commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        const spaceBinding = keybindings.registerKeybinding({
+            event: 'keyup',
+            key: ' ',
+            callback: onEnter,
+            commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
+        return () => {
+            escapeBinding.unregister();
+            leftBinding.unregister();
+            rightBinding.unregister();
+            downBinding.unregister();
+            upBinding.unregister();
+            enterBinding.unregister();
+            spaceBinding.unregister();
+        };
+    }, [
+        keybindings,
+        onEscape,
+        onNextMenu,
+        onPreviousMenu,
+        onArrowDown,
+        onArrowUp,
+        onEnter,
+        onArrowRight,
+    ]);
+    // Disable submenu if not selected
+    (0, react_1.useEffect)(() => {
+        if (!subMenuActivated) {
+            return;
+        }
+        if (selectedItem === null) {
+            return setSubMenuActivated(false);
+        }
+        const item = values.find((i) => i.id === selectedItem);
+        if (!item) {
+            throw new Error('cannot find item');
+        }
+        if (item.type === 'divider') {
+            throw new Error('should not select divider');
+        }
+        if (!item.subMenu && subMenuActivated) {
+            setSubMenuActivated(false);
+        }
+    }, [selectedItem, subMenuActivated, values]);
+    (0, react_1.useEffect)(() => {
+        const { current } = containerRef;
+        if (!current) {
+            return;
+        }
+        const onPointerLeave = () => {
+            if (subMenuActivated) {
+                return;
+            }
+            setSelectedItem(null);
+        };
+        current.addEventListener('pointerleave', onPointerLeave);
+        return () => current.removeEventListener('pointerleave', onPointerLeave);
+    }, [onHide, subMenuActivated]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: containerWithHeight, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: values.map((item) => {
+            if (item.type === 'divider') {
+                return (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}, item.id);
+            }
+            const onClick = (id, e) => {
+                onHide();
+                item.onClick(id, e);
+            };
+            return ((0, jsx_runtime_1.jsx)(MenuSubItem_1.MenuSubItem, { selected: item.id === selectedItem, onActionChosen: onClick, onItemSelected: onItemSelected, label: item.label, id: item.id, keyHint: item.keyHint, leaveLeftSpace: leaveLeftSpace, leftItem: item.leftItem, subMenu: item.subMenu, onQuitMenu: onHide, onNextMenu: onNextMenu, subMenuActivated: subMenuActivated, setSubMenuActivated: setSubMenuActivated }, item.id));
+        }) }));
+};
+exports.MenuContent = MenuContent;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const NewCompAspectRatio: React.FC<{
+    width: number;
+    height: number;
+    aspectRatioLocked: number | null;
+    setAspectRatioLocked: (newOption: boolean) => void;
+}>;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewCompAspectRatio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const new_comp_layout_1 = require("./new-comp-layout");
+const render_aspect_ratio_1 = require("./render-aspect-ratio");
+const ToggleAspectRatio_1 = require("./ToggleAspectRatio");
+const GUIDE_HEIGHT = 55;
+const GUIDE_WIDTH = 10;
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    marginLeft: 10,
+    alignItems: 'center',
+};
+const NewCompAspectRatio = ({ width, height, aspectRatioLocked, setAspectRatioLocked }) => {
+    const pixels = Number(width) * Number(height);
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("svg", { width: GUIDE_WIDTH, height: GUIDE_HEIGHT, children: (0, jsx_runtime_1.jsx)("path", { d: `M 0 0 L ${GUIDE_WIDTH} 0 L ${GUIDE_WIDTH} ${GUIDE_HEIGHT} L 0 ${GUIDE_HEIGHT}`, fill: "transparent", strokeWidth: "2", stroke: "rgba(255, 255, 255, 0.2)" }) }), (0, jsx_runtime_1.jsx)(ToggleAspectRatio_1.ToggleAspectRatio, { aspectRatioLocked: Boolean(aspectRatioLocked), setAspectRatioLocked: setAspectRatioLocked }), pixels > 0 ? ((0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.rightLabel, children: ["Aspect ratio ", (0, render_aspect_ratio_1.aspectRatio)(Number(width), Number(height))] })) : null] }) }));
+};
+exports.NewCompAspectRatio = NewCompAspectRatio;