@remotion/studio 4.0.120 → 4.0.122

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
 
-> @remotion/studio@4.0.118 build /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.121 build /Users/jonathanburger/remotion/packages/studio
 > tsc -d
 

package/dist/components/Menu/MenuSubItem.js

@@ -9,6 +9,7 @@ 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 mobile_layout_1 = require("../../helpers/mobile-layout");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const caret_1 = require("../../icons/caret");
 const z_index_1 = require("../../state/z-index");
@@ -50,6 +51,7 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
+    const mobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     const style = (0, react_1.useMemo)(() => {
         return {
@@ -57,9 +59,14 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
             backgroundColor: selected ? colors_1.CLEAR_HOVER : 'transparent',
         };
     }, [selected]);
-    const onItemTriggered = (0, react_1.useCallback)((e) => {
+    const onPointerUp = (0, react_1.useCallback)((e) => {
+        if (subMenu) {
+            setSubMenuActivated('with-mouse');
+            setHovered(true);
+            return;
+        }
         onActionChosen(id, e);
-    }, [id, onActionChosen]);
+    }, [id, onActionChosen, setSubMenuActivated, subMenu]);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         onItemSelected(id);
         setHovered(true);
@@ -74,12 +81,13 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
         if (!selected || !size || !subMenu || !subMenuActivated) {
             return null;
         }
+        const left = size.left + size.width + styles_1.SUBMENU_LEFT_INSET;
         return {
             ...styles_1.menuContainerTowardsBottom,
-            left: size.left + size.width + styles_1.SUBMENU_LEFT_INSET,
+            left: mobileLayout ? left * 0.7 : left,
             top: size.top - styles_1.MENU_VERTICAL_PADDING,
         };
-    }, [selected, size, subMenu, subMenuActivated]);
+    }, [mobileLayout, selected, size, subMenu, subMenuActivated]);
     (0, react_1.useEffect)(() => {
         if (!hovered || !subMenu) {
             return;
@@ -98,7 +106,7 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
             });
         }
     }, [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
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onPointerUp: onPointerUp, 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] }) }));
 };

package/dist/components/Menu/SubMenu.js

@@ -2,11 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubMenuComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const mobile_layout_1 = require("../../helpers/mobile-layout");
 const noop_1 = require("../../helpers/noop");
 const z_index_1 = require("../../state/z-index");
 const MenuContent_1 = require("../NewComposition/MenuContent");
+const portals_1 = require("./portals");
 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' &&
+    const mobileLayout = (0, mobile_layout_1.useMobileLayout)();
+    const onOutsideClick = (0, react_1.useCallback)((e) => {
+        if (portals_1.portals.find((p) => p.contains(e)) || mobileLayout) {
+            onQuitSubMenu();
+        }
+        else {
+            onQuitFullMenu();
+        }
+    }, [mobileLayout, onQuitFullMenu, onQuitSubMenu]);
+    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onQuitFullMenu, onOutsideClick: onOutsideClick, 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: onQuitFullMenu, leaveLeftSpace: subMenu.leaveLeftSpace, preselectIndex: subMenuActivated === 'without-mouse' &&
                     typeof subMenu.preselectIndex === 'number'
                     ? subMenu.preselectIndex
                     : false, topItemCanBeUnselected: false, fixedHeight: null }) }) }));

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

@@ -1 +1,2 @@
+export declare const portals: Element[];
 export declare const getPortal: (i: number) => Element;

package/dist/components/Menu/portals.js

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

package/dist/components/MenuToolbar.js

@@ -4,6 +4,7 @@ exports.MenuToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const mobile_layout_1 = require("../helpers/mobile-layout");
 const use_menu_structure_1 = require("../helpers/use-menu-structure");
 const layout_1 = require("./layout");
 const MenuItem_1 = require("./Menu/MenuItem");
@@ -21,23 +22,36 @@ const row = {
     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 = ({ readOnlyStudio }) => {
     const [selected, setSelected] = (0, react_1.useState)(null);
+    const mobileLayout = (0, mobile_layout_1.useMobileLayout)();
+    const fixedWidthRight = (0, react_1.useMemo)(() => {
+        return {
+            ...(mobileLayout
+                ? { width: 'fit-content' }
+                : {
+                    width: '330px',
+                }),
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+        };
+    }, [mobileLayout]);
+    const fixedWidthLeft = (0, react_1.useMemo)(() => {
+        return {
+            ...(mobileLayout
+                ? { minWidth: '0px' }
+                : {
+                    minWidth: '330px',
+                }),
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+        };
+    }, [mobileLayout]);
     const itemClicked = (0, react_1.useCallback)((itemId) => {
         setSelected(itemId);
     }, [setSelected]);

package/dist/components/NewComposition/MenuContent.js

@@ -208,7 +208,8 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         }
         const item = values.find((i) => i.id === selectedItem);
         if (!item) {
-            throw new Error('cannot find item');
+            // Can happen if resizing the window
+            return;
         }
         if (item.type === 'divider') {
             throw new Error('should not select divider');
@@ -236,8 +237,11 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
                 return (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}, item.id);
             }
             const onClick = (id, e) => {
-                onHide();
                 item.onClick(id, e);
+                if (item.subMenu) {
+                    return null;
+                }
+                onHide();
             };
             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));
         }) }));

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

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "#f1c40f" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232";
+}) => "hsla(0, 0%, 100%, 0.15)" | "#ff3232" | "#f1c40f" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)";
 export declare const RemotionInput: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/helpers/colors.d.ts

@@ -23,4 +23,4 @@ export declare const TIMELINE_TRACK_SEPARATOR = "rgba(0, 0, 0, 0.3)";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.25)";

package/dist/helpers/mobile-layout.js

@@ -1,10 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMobileLayout = void 0;
-const use_el_size_1 = require("./use-el-size");
+const react_1 = require("react");
+const breakpoint = 900;
+function getIsMobile() {
+    return window.innerWidth < breakpoint;
+}
 const useMobileLayout = () => {
-    var _a;
-    const containerSize = (0, use_el_size_1.useElementSize)(typeof document === 'undefined' ? null : document.body);
-    return ((_a = containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) !== null && _a !== void 0 ? _a : Infinity) < 900;
+    const [isMobile, setIsMobile] = (0, react_1.useState)(getIsMobile());
+    const isMobileRef = (0, react_1.useRef)(isMobile);
+    (0, react_1.useEffect)(() => {
+        function handleResize() {
+            if (getIsMobile() !== isMobileRef.current) {
+                setIsMobile(getIsMobile());
+            }
+            isMobileRef.current = getIsMobile();
+        }
+        window.addEventListener('resize', handleResize);
+        return () => {
+            return window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    return isMobile;
 };
 exports.useMobileLayout = useMobileLayout;

package/dist/helpers/render-modal-sections.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Codec } from '@remotion/renderer';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
 type Section = 'general' | 'picture' | 'advanced' | 'data' | 'gif' | 'audio';

package/dist/helpers/use-menu-structure.js

@@ -21,6 +21,7 @@ const modals_1 = require("../state/modals");
 const sidebar_1 = require("../state/sidebar");
 const client_id_1 = require("./client-id");
 const get_git_menu_item_1 = require("./get-git-menu-item");
+const mobile_layout_1 = require("./mobile-layout");
 const open_in_editor_1 = require("./open-in-editor");
 const pick_color_1 = require("./pick-color");
 const use_keybinding_1 = require("./use-keybinding");
@@ -160,8 +161,9 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
     const { setSidebarCollapsedState, sidebarCollapsedStateLeft, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const sizes = (0, SizeSelector_1.getUniqueSizes)(size);
     const isFullscreenSupported = document.fullscreenEnabled || document.webkitFullscreenEnabled;
+    const mobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const structure = (0, react_1.useMemo)(() => {
-        const struct = [
+        let struct = [
             {
                 id: 'remotion',
                 label: ((0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }) })),
@@ -728,9 +730,36 @@ const useMenuStructure = (closeMenu, readOnlyStudio) => {
                 ],
             },
         ].filter(remotion_1.Internals.truthy);
+        if (mobileLayout) {
+            struct = [
+                {
+                    ...struct[0],
+                    items: [
+                        ...struct.slice(1).map((s) => {
+                            return {
+                                ...s,
+                                keyHint: null,
+                                onClick: () => undefined,
+                                type: 'item',
+                                value: s.id,
+                                leftItem: null,
+                                subMenu: {
+                                    items: s.items,
+                                    leaveLeftSpace: true,
+                                    preselectIndex: 0,
+                                },
+                                quickSwitcherLabel: null,
+                            };
+                        }),
+                        ...struct[0].items,
+                    ],
+                },
+            ];
+        }
         return struct;
     }, [
         readOnlyStudio,
+        mobileLayout,
         sizes,
         editorZoomGestures,
         editorShowRulers,

package/dist/state/z-index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare const HigherZIndex: React.FC<{
     onEscape: () => void;
-    onOutsideClick: () => void;
+    onOutsideClick: (target: Node) => void;
     children: React.ReactNode;
 }>;
 export declare const useZIndex: () => {

package/dist/state/z-index.js

@@ -49,13 +49,12 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick }) => {
                 return;
             }
             onUp = (upEvent) => {
-                if (outsideClick &&
-                    highestContext.highestIndex === currentIndex &&
+                if (highestContext.highestIndex === currentIndex &&
                     !(0, input_dragger_click_lock_1.getClickLock)() &&
                     // Don't trigger if that click removed that node
                     document.contains(upEvent.target)) {
                     upEvent.stopPropagation();
-                    onOutsideClick();
+                    onOutsideClick(upEvent.target);
                 }
             };
             window.addEventListener('pointerup', onUp, { once: true });
@@ -66,11 +65,11 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick }) => {
             window.addEventListener('pointerdown', listener);
         });
         return () => {
-            onUp = null;
             if (onUp) {
                 // @ts-expect-error
                 window.removeEventListener('pointerup', onUp, { once: true });
             }
+            onUp = null;
             return window.removeEventListener('pointerdown', listener);
         };
     }, [currentIndex, highestContext.highestIndex, onOutsideClick]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/studio",
-  "version": "4.0.120",
+  "version": "4.0.122",
   "description": "Remotion Editor",
   "main": "dist",
   "sideEffects": false,
@@ -18,11 +18,11 @@
     "memfs": "3.4.3",
     "source-map": "0.7.3",
     "open": "^8.4.2",
-    "remotion": "4.0.120",
-    "@remotion/player": "4.0.120",
-    "@remotion/media-utils": "4.0.120",
-    "@remotion/renderer": "4.0.120",
-    "@remotion/studio-shared": "4.0.120"
+    "@remotion/player": "4.0.122",
+    "@remotion/media-utils": "4.0.122",
+    "remotion": "4.0.122",
+    "@remotion/renderer": "4.0.122",
+    "@remotion/studio-shared": "4.0.122"
   },
   "devDependencies": {
     "react": "18.2.0",
@@ -40,7 +40,7 @@
     "prettier-plugin-organize-imports": "3.2.4",
     "vitest": "0.31.1",
     "zod": "^3.22.3",
-    "@remotion/zod-types": "4.0.120"
+    "@remotion/zod-types": "4.0.122"
   },
   "publishConfig": {
     "access": "public"