@remotion/cli 4.0.111 → 4.0.113

package/dist/editor/components/Menu/MenuItem.js

@@ -0,0 +1,96 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = 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 z_index_1 = require("../../state/z-index");
+const MenuContent_1 = require("../NewComposition/MenuContent");
+const is_menu_item_1 = require("./is-menu-item");
+const portals_1 = require("./portals");
+const styles_1 = require("./styles");
+const container = {
+    fontSize: 13,
+    color: 'white',
+    paddingLeft: 10,
+    paddingRight: 10,
+    cursor: 'default',
+    paddingTop: 8,
+    paddingBottom: 8,
+    userSelect: 'none',
+    border: 'none',
+};
+const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered, onItemQuit, onPreviousMenu, onNextMenu, menu, }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
+    const containerStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
+                hovered,
+                selected,
+            }),
+        };
+    }, [hovered, selected]);
+    const portalStyle = (0, react_1.useMemo)(() => {
+        if (!selected || !size) {
+            return null;
+        }
+        return {
+            ...styles_1.menuContainerTowardsBottom,
+            left: size.left,
+            top: size.top + size.height,
+        };
+    }, [selected, size]);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        onItemHovered(id);
+        setHovered(true);
+    }, [id, onItemHovered]);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        onItemSelected(id);
+        window.addEventListener('pointerup', (evt) => {
+            if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
+                onItemQuit();
+            }
+        }, {
+            once: true,
+        });
+    }, [id, onItemQuit, onItemSelected]);
+    const onClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        const isKeyboardInitiated = e.detail === 0;
+        if (!isKeyboardInitiated) {
+            return;
+        }
+        onItemSelected((p) => {
+            return p === null ? id : null;
+        });
+    }, [id, onItemSelected]);
+    const outerStyle = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return {
+            ...styles_1.outerPortal,
+            top: ((_a = size === null || size === void 0 ? void 0 : size.top) !== null && _a !== void 0 ? _a : 0) + ((_b = size === null || size === void 0 ? void 0 : size.height) !== null && _b !== void 0 ? _b : 0),
+        };
+    }, [size]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { ref: ref, role: "button", tabIndex: tabIndex, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onPointerDown: onPointerDown, onClick: onClick, style: containerStyle, type: "button", className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: itemName }), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: outerStyle, children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onItemQuit, onOutsideClick: onItemQuit, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: onPreviousMenu, onPreviousMenu: onNextMenu, values: menu.items, onHide: onItemQuit, leaveLeftSpace: menu.leaveLeftPadding, preselectIndex: false, topItemCanBeUnselected: true, fixedHeight: null }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
+};
+exports.MenuItem = MenuItem;

package/dist/editor/components/Menu/MenuSubItem.d.ts

@@ -0,0 +1,19 @@
+import type { PointerEvent } from 'react';
+import React from 'react';
+import type { SubMenu } from '../NewComposition/ComboBox';
+export type SubMenuActivated = false | 'with-mouse' | 'without-mouse';
+export declare const MenuSubItem: React.FC<{
+    label: React.ReactNode;
+    id: string;
+    onActionChosen: (id: string, e: PointerEvent<HTMLDivElement>) => void;
+    selected: boolean;
+    onItemSelected: (id: string) => void;
+    keyHint: string | null;
+    leaveLeftSpace: boolean;
+    leftItem: React.ReactNode;
+    subMenu: SubMenu | null;
+    onQuitMenu: () => void;
+    onNextMenu: () => void;
+    subMenuActivated: SubMenuActivated;
+    setSubMenuActivated: React.Dispatch<React.SetStateAction<SubMenuActivated>>;
+}>;

package/dist/editor/components/Menu/MenuSubItem.js

@@ -0,0 +1,105 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuSubItem = 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 use_keybinding_1 = require("../../helpers/use-keybinding");
+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("./is-menu-item");
+const portals_1 = require("./portals");
+const styles_1 = require("./styles");
+const SubMenu_1 = require("./SubMenu");
+const container = {
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 12,
+    paddingRight: 8,
+    cursor: 'default',
+};
+const labelStyle = {
+    fontSize: 13,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    flex: 1,
+};
+const keyHintCss = {
+    flexDirection: 'row',
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 13,
+};
+const leftSpace = {
+    width: 24,
+    marginLeft: -6,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, selected, onItemSelected, keyHint, subMenu, onQuitMenu, subMenuActivated, setSubMenuActivated, }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            backgroundColor: selected ? colors_1.CLEAR_HOVER : 'transparent',
+        };
+    }, [selected]);
+    const onItemTriggered = (0, react_1.useCallback)((e) => {
+        onActionChosen(id, e);
+    }, [id, onActionChosen]);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        onItemSelected(id);
+        setHovered(true);
+    }, [id, onItemSelected]);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const onQuitSubmenu = (0, react_1.useCallback)(() => {
+        setSubMenuActivated(false);
+    }, [setSubMenuActivated]);
+    const portalStyle = (0, react_1.useMemo)(() => {
+        if (!selected || !size || !subMenu || !subMenuActivated) {
+            return null;
+        }
+        return {
+            ...styles_1.menuContainerTowardsBottom,
+            left: size.left + size.width + styles_1.SUBMENU_LEFT_INSET,
+            top: size.top - styles_1.MENU_VERTICAL_PADDING,
+        };
+    }, [selected, size, subMenu, subMenuActivated]);
+    (0, react_1.useEffect)(() => {
+        if (!hovered || !subMenu) {
+            return;
+        }
+        const hi = setTimeout(() => {
+            setSubMenuActivated('with-mouse');
+        }, 100);
+        return () => clearTimeout(hi);
+    }, [hovered, selected, setSubMenuActivated, subMenu]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (selected) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                // block is vertical alignment, inline is horizontal alignment. So we use "block"
+                block: 'nearest',
+            });
+        }
+    }, [selected]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onPointerUp: onItemTriggered, role: "button", className: is_menu_item_1.MENU_ITEM_CLASSNAME, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [leaveLeftSpace ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: leftSpace, children: leftItem }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: labelStyle, ...{ title: typeof label === 'string' ? label : undefined }, children: label }), ' ', (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), subMenu ? (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) : null, keyHint && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsx)("span", { style: keyHintCss, children: keyHint })) : null, portalStyle && subMenu
+                    ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(SubMenu_1.SubMenuComponent, { onQuitFullMenu: onQuitMenu, subMenu: subMenu, onQuitSubMenu: onQuitSubmenu, portalStyle: portalStyle, subMenuActivated: subMenuActivated }), (0, portals_1.getPortal)(currentZIndex))
+                    : null] }) }));
+};
+exports.MenuSubItem = MenuSubItem;

package/dist/editor/components/Menu/SubMenu.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SubMenu } from '../NewComposition/ComboBox';
+import type { SubMenuActivated } from './MenuSubItem';
+export declare const SubMenuComponent: React.FC<{
+    portalStyle: React.CSSProperties;
+    subMenu: SubMenu;
+    onQuitFullMenu: () => void;
+    onQuitSubMenu: () => void;
+    subMenuActivated: SubMenuActivated;
+}>;

package/dist/editor/components/Menu/SubMenu.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubMenuComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const noop_1 = require("../../helpers/noop");
+const z_index_1 = require("../../state/z-index");
+const MenuContent_1 = require("../NewComposition/MenuContent");
+const SubMenuComponent = ({ portalStyle, subMenuActivated, subMenu, onQuitFullMenu, onQuitSubMenu, }) => {
+    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onQuitFullMenu, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, className: "css-reset", children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: onQuitSubMenu, values: subMenu.items, onHide: noop_1.noop, leaveLeftSpace: subMenu.leaveLeftSpace, preselectIndex: subMenuActivated === 'without-mouse' &&
+                    typeof subMenu.preselectIndex === 'number'
+                    ? subMenu.preselectIndex
+                    : false, topItemCanBeUnselected: false, fixedHeight: null }) }) }));
+};
+exports.SubMenuComponent = SubMenuComponent;

package/dist/editor/components/Menu/is-menu-item.d.ts

@@ -0,0 +1,5 @@
+export declare const MENU_INITIATOR_CLASSNAME = "__remotion-studio-menu-initiator";
+export declare const MENU_ITEM_CLASSNAME = "__remotion-studio-menu-item";
+export declare const HORIZONTAL_SCROLLBAR_CLASSNAME = "__remotion-horizontal-scrollbar";
+export declare const VERTICAL_SCROLLBAR_CLASSNAME = "__remotion-vertical-scrollbar";
+export declare const isMenuItem: (el: HTMLElement) => boolean;

package/dist/editor/components/Menu/is-menu-item.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMenuItem = exports.VERTICAL_SCROLLBAR_CLASSNAME = exports.HORIZONTAL_SCROLLBAR_CLASSNAME = exports.MENU_ITEM_CLASSNAME = exports.MENU_INITIATOR_CLASSNAME = void 0;
+exports.MENU_INITIATOR_CLASSNAME = '__remotion-studio-menu-initiator';
+exports.MENU_ITEM_CLASSNAME = '__remotion-studio-menu-item';
+exports.HORIZONTAL_SCROLLBAR_CLASSNAME = '__remotion-horizontal-scrollbar';
+exports.VERTICAL_SCROLLBAR_CLASSNAME = '__remotion-vertical-scrollbar';
+const isMenuItem = (el) => {
+    return Boolean(el.classList.contains(exports.MENU_ITEM_CLASSNAME) ||
+        el.closest(`.${exports.MENU_ITEM_CLASSNAME}`) ||
+        el.classList.contains(exports.MENU_INITIATOR_CLASSNAME) ||
+        el.closest(`.${exports.MENU_INITIATOR_CLASSNAME}`));
+};
+exports.isMenuItem = isMenuItem;

package/dist/editor/components/Menu/portals.d.ts

@@ -0,0 +1 @@
+export declare const getPortal: (i: number) => Element;

package/dist/editor/components/Menu/portals.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPortal = void 0;
+const portals = [
+    document.getElementById('menuportal-0'),
+    document.getElementById('menuportal-1'),
+    document.getElementById('menuportal-2'),
+    document.getElementById('menuportal-3'),
+    document.getElementById('menuportal-4'),
+    document.getElementById('menuportal-5'),
+];
+const getPortal = (i) => {
+    return portals[i];
+};
+exports.getPortal = getPortal;

package/dist/editor/components/Menu/styles.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+export declare const MENU_VERTICAL_PADDING = 4;
+export declare const SUBMENU_LEFT_INSET = -8;
+export declare const MAX_MENU_WIDTH = 400;
+export declare const SHADOW_TOWARDS_BOTTOM = "0 2px 8px rgba(0, 0, 0, 0.5)";
+export declare const SHADOW_TOWARDS_TOP = "0 -2px 8px rgba(0, 0, 0, 0.5)";
+export declare const menuContainerTowardsBottom: React.CSSProperties;
+export declare const menuContainerTowardsTop: React.CSSProperties;
+export declare const fullScreenOverlay: React.CSSProperties;
+export declare const outerPortal: React.CSSProperties;
+export declare const inlineCodeSnippet: React.CSSProperties;

package/dist/editor/components/Menu/styles.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inlineCodeSnippet = exports.outerPortal = exports.fullScreenOverlay = exports.menuContainerTowardsTop = exports.menuContainerTowardsBottom = exports.SHADOW_TOWARDS_TOP = exports.SHADOW_TOWARDS_BOTTOM = exports.MAX_MENU_WIDTH = exports.SUBMENU_LEFT_INSET = exports.MENU_VERTICAL_PADDING = void 0;
+const colors_1 = require("../../helpers/colors");
+exports.MENU_VERTICAL_PADDING = 4;
+exports.SUBMENU_LEFT_INSET = -8;
+exports.MAX_MENU_WIDTH = 400;
+const menuContainer = {
+    backgroundColor: colors_1.BACKGROUND,
+    position: 'fixed',
+    color: 'white',
+    userSelect: 'none',
+};
+exports.SHADOW_TOWARDS_BOTTOM = '0 2px 8px rgba(0, 0, 0, 0.5)';
+exports.SHADOW_TOWARDS_TOP = '0 -2px 8px rgba(0, 0, 0, 0.5)';
+exports.menuContainerTowardsBottom = {
+    ...menuContainer,
+    boxShadow: exports.SHADOW_TOWARDS_BOTTOM,
+};
+exports.menuContainerTowardsTop = {
+    ...menuContainer,
+    boxShadow: exports.SHADOW_TOWARDS_TOP,
+};
+exports.fullScreenOverlay = {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+};
+exports.outerPortal = {
+    position: 'fixed',
+};
+exports.inlineCodeSnippet = {
+    fontSize: 14,
+    color: colors_1.BLUE,
+    fontFamily: 'monospace',
+};

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

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

package/dist/editor/components/MenuBuildIndicator.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuBuildIndicator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
+const layout_1 = require("./layout");
+const OpenEditorButton_1 = require("./OpenEditorButton");
+const Spinner_1 = require("./Spinner");
+const cwd = {
+    fontSize: 13,
+    opacity: 0.8,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+const spinnerSize = 14;
+const spinner = {
+    position: 'relative',
+    width: spinnerSize,
+    marginTop: 4,
+};
+const noSpinner = {
+    position: 'relative',
+    width: spinnerSize,
+};
+const MenuBuildIndicator = () => {
+    const [isBuilding, setIsBuilding] = (0, react_1.useState)(false);
+    const ctx = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const showButton = window.remotion_editorName && ctx.type === 'connected';
+    (0, react_1.useEffect)(() => {
+        window.remotion_isBuilding = () => {
+            setIsBuilding(true);
+        };
+        window.remotion_finishedBuilding = () => {
+            setIsBuilding(false);
+        };
+        return () => {
+            window.remotion_isBuilding = undefined;
+            window.remotion_finishedBuilding = undefined;
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: cwd, title: window.remotion_cwd, children: [showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }) : null, isBuilding ? ((0, jsx_runtime_1.jsx)("div", { style: spinner, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : ((0, jsx_runtime_1.jsx)("div", { style: noSpinner })), showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }) : null, window.remotion_projectName, showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.25 }) : null, showButton ? (0, jsx_runtime_1.jsx)(OpenEditorButton_1.OpenEditorButton, {}) : null] }));
+};
+exports.MenuBuildIndicator = MenuBuildIndicator;

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

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

package/dist/editor/components/MenuToolbar.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuToolbar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const use_menu_structure_1 = require("../helpers/use-menu-structure");
+const layout_1 = require("./layout");
+const MenuItem_1 = require("./Menu/MenuItem");
+const MenuBuildIndicator_1 = require("./MenuBuildIndicator");
+const SidebarCollapserControls_1 = require("./SidebarCollapserControls");
+const UpdateCheck_1 = require("./UpdateCheck");
+const row = {
+    alignItems: 'center',
+    flexDirection: 'row',
+    display: 'flex',
+    color: 'white',
+    borderBottom: '1px solid black',
+    fontSize: 13,
+    paddingLeft: 6,
+    paddingRight: 10,
+    backgroundColor: colors_1.BACKGROUND,
+};
+const fixedWidthRight = {
+    width: '330px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+};
+const fixedWidthLeft = {
+    minWidth: '330px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+};
+const flex = {
+    flex: 1,
+};
+const MenuToolbar = () => {
+    const [selected, setSelected] = (0, react_1.useState)(null);
+    const itemClicked = (0, react_1.useCallback)((itemId) => {
+        setSelected(itemId);
+    }, [setSelected]);
+    const itemHovered = (0, react_1.useCallback)((itemId) => {
+        if (selected) {
+            setSelected(itemId);
+        }
+    }, [selected, setSelected]);
+    const closeMenu = (0, react_1.useCallback)(() => {
+        setSelected(null);
+    }, []);
+    const structure = (0, use_menu_structure_1.useMenuStructure)(closeMenu);
+    const menus = (0, react_1.useMemo)(() => {
+        return structure.map((s) => s.id);
+    }, [structure]);
+    const onPreviousMenu = (0, react_1.useCallback)(() => {
+        setSelected((s) => {
+            if (s === null) {
+                return null;
+            }
+            return menus[(menus.indexOf(s) + 1) % menus.length];
+        });
+    }, [menus]);
+    const onNextMenu = (0, react_1.useCallback)(() => {
+        setSelected((s) => {
+            if (s === null) {
+                return null;
+            }
+            if (menus.indexOf(s) === 0) {
+                return menus[menus.length - 1];
+            }
+            return menus[(menus.indexOf(s) - 1) % menus.length];
+        });
+    }, [menus]);
+    const onItemQuit = (0, react_1.useCallback)(() => {
+        setSelected(null);
+    }, [setSelected]);
+    return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", className: "css-reset", style: row, children: [(0, jsx_runtime_1.jsxs)("div", { style: fixedWidthLeft, children: [structure.map((s) => {
+                        return ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
+                    }), (0, jsx_runtime_1.jsx)(UpdateCheck_1.UpdateCheck, {})] }), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)(MenuBuildIndicator_1.MenuBuildIndicator, {}), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)("div", { style: fixedWidthRight, children: (0, jsx_runtime_1.jsx)(SidebarCollapserControls_1.SidebarCollapserControls, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] }));
+};
+exports.MenuToolbar = MenuToolbar;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const getMaxModalWidth: (width: number) => string;
+export declare const getMaxModalHeight: (height: number) => string;
+export declare const ModalContainer: React.FC<{
+    onEscape: () => void;
+    onOutsideClick: () => void;
+    children: React.ReactNode;
+}>;

package/dist/editor/components/ModalContainer.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalContainer = exports.getMaxModalHeight = exports.getMaxModalWidth = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const z_index_1 = require("../state/z-index");
+const padding = 20;
+const getMaxModalWidth = (width) => {
+    return `min(calc(100vw - ${padding * 2}px), calc(${width}px - ${padding * 2}px))`;
+};
+exports.getMaxModalWidth = getMaxModalWidth;
+const getMaxModalHeight = (height) => {
+    return `min(calc(100vh - ${padding * 2}px), calc(${height}px - ${padding * 2}px))`;
+};
+exports.getMaxModalHeight = getMaxModalHeight;
+const backgroundOverlay = {
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    backdropFilter: `blur(1px)`,
+    position: 'fixed',
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    padding,
+};
+const panel = {
+    backgroundColor: colors_1.BACKGROUND,
+    boxShadow: '0 0 4px black',
+    color: 'white',
+    margin: 'auto',
+};
+const ModalContainer = ({ children, onEscape, onOutsideClick }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onOutsideClick, onEscape: onEscape, children: (0, jsx_runtime_1.jsx)("div", { style: panel, children: children }) }) }));
+};
+exports.ModalContainer = ModalContainer;

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

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

package/dist/editor/components/ModalHeader.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewCompHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../state/modals");
+const layout_1 = require("./layout");
+const CancelButton_1 = require("./NewComposition/CancelButton");
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: '12px 16px',
+    width: '100%',
+    borderBottom: '1px solid black',
+};
+const titleStyle = {
+    fontSize: 14,
+    color: 'white',
+};
+const icon = {
+    height: 20,
+    width: 20,
+};
+const NewCompHeader = ({ title }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    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 })] }));
+};
+exports.NewCompHeader = NewCompHeader;

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

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

package/dist/editor/components/Modals.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modals = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
+const modals_1 = require("../state/modals");
+const NewComposition_1 = __importDefault(require("./NewComposition/NewComposition"));
+const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher"));
+const RenderModal_1 = require("./RenderModal/RenderModal");
+const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
+const UpdateModal_1 = require("./UpdateModal/UpdateModal");
+const Modals = () => {
+    const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type === 'connected';
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec })), modalContextType &&
+                canRender &&
+                modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
+};
+exports.Modals = Modals;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ModalsProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/ModalsProvider.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalsProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../state/modals");
+const ModalsProvider = ({ children }) => {
+    const [modalContextType, setModalContextType] = (0, react_1.useState)(null);
+    const modalsContext = (0, react_1.useMemo)(() => {
+        return {
+            selectedModal: modalContextType,
+            setSelectedModal: setModalContextType,
+        };
+    }, [modalContextType]);
+    return ((0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: children }));
+};
+exports.ModalsProvider = ModalsProvider;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const MuteToggle: React.FC<{
+    muted: boolean;
+    setMuted: React.Dispatch<React.SetStateAction<boolean>>;
+}>;

package/dist/editor/components/MuteToggle.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MuteToggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const media_volume_1 = require("../icons/media-volume");
+const mute_1 = require("../state/mute");
+const ControlButton_1 = require("./ControlButton");
+const MuteToggle = ({ muted, setMuted }) => {
+    const onClick = (0, react_1.useCallback)(() => {
+        setMuted((m) => {
+            (0, mute_1.persistMuteOption)(!m);
+            return !m;
+        });
+    }, [setMuted]);
+    const accessibilityLabel = muted ? 'Unmute video' : 'Mute video';
+    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: muted ? (0, jsx_runtime_1.jsx)(media_volume_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(media_volume_1.VolumeOnIcon, {}) }));
+};
+exports.MuteToggle = MuteToggle;