@remotion/studio 4.0.126 → 4.0.128

package/.turbo/turbo-build.log

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

package/dist/components/AssetSelectorItem.js

@@ -33,11 +33,13 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
+const mobile_layout_1 = require("../helpers/mobile-layout");
 const url_state_1 = require("../helpers/url-state");
 const use_asset_drag_events_1 = __importDefault(require("../helpers/use-asset-drag-events"));
 const clipboard_1 = require("../icons/clipboard");
 const file_1 = require("../icons/file");
 const folder_1 = require("../icons/folder");
+const sidebar_1 = require("../state/sidebar");
 const InlineAction_1 = require("./InlineAction");
 const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -137,7 +139,9 @@ const AssetFolderTree = ({ item, level, name, parentFolder, toggleFolder, tabInd
 };
 exports.AssetFolderTree = AssetFolderTree;
 const AssetSelectorItem = ({ item, tabIndex, level, parentFolder }) => {
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
@@ -158,6 +162,9 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder }) => {
             : item.name;
         setCanvasContent({ type: 'asset', asset: relativePath });
         (0, url_state_1.pushUrl)(`/assets/${relativePath}`);
+        if (isMobileLayout) {
+            setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
+        }
     }, [item.name, parentFolder, setCanvasContent]);
     const style = (0, react_1.useMemo)(() => {
         return {

package/dist/components/ContextMenu.js

@@ -8,6 +8,7 @@ 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 mobile_layout_1 = require("../helpers/mobile-layout");
 const noop_1 = require("../helpers/noop");
 const z_index_1 = require("../state/z-index");
 const portals_1 = require("./Menu/portals");
@@ -24,6 +25,7 @@ const ContextMenu = ({ children, values }) => {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     (0, react_1.useEffect)(() => {
         const { current } = ref;
         if (!current) {
@@ -59,10 +61,15 @@ const ContextMenu = ({ children, values }) => {
         if (!size) {
             return;
         }
-        const spaceToRight = size.windowSize.width - (opened.left + size.width);
-        const minSpaceToRightRequired = styles_1.MAX_MENU_WIDTH;
+        const spaceToRight = size.windowSize.width - size.left;
+        const spaceToLeft = size.left + size.width;
+        const minSpaceRequired = isMobileLayout
+            ? styles_1.MAX_MOBILE_MENU_WIDTH
+            : styles_1.MAX_MENU_WIDTH;
         const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
-        const horizontalLayout = spaceToRight >= minSpaceToRightRequired ? 'left' : 'right';
+        const canOpenOnLeft = spaceToLeft >= minSpaceRequired;
+        const canOpenOnRight = spaceToRight >= minSpaceRequired;
+        const horizontalLayout = canOpenOnRight ? 'left' : 'right';
         return {
             ...styles_1.menuContainerTowardsTop,
             ...(verticalLayout === 'top'
@@ -77,10 +84,10 @@ const ContextMenu = ({ children, values }) => {
                     left: opened.left,
                 }
                 : {
-                    right: size.windowSize.width - opened.left,
+                    right: canOpenOnLeft ? size.windowSize.width - opened.left : 0,
                 }),
         };
-    }, [opened, spaceToBottom, spaceToTop, size]);
+    }, [opened.type, size, isMobileLayout, spaceToTop, spaceToBottom]);
     const onHide = (0, react_1.useCallback)(() => {
         setOpened({ type: 'not-open' });
     }, []);

package/dist/components/InitialCompositionLoader.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InitialCompositionLoader = exports.useSelectComposition = exports.useSelectAsset = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const mobile_layout_1 = require("../helpers/mobile-layout");
 const url_state_1 = require("../helpers/url-state");
 const folders_1 = require("../state/folders");
+const sidebar_1 = require("../state/sidebar");
 const CompositionSelector_1 = require("./CompositionSelector");
 const ExplorerPanel_1 = require("./ExplorerPanel");
 const ZoomPersistor_1 = require("./ZoomPersistor");
@@ -34,6 +36,8 @@ exports.useSelectAsset = useSelectAsset;
 const useSelectComposition = () => {
     const { setCompositionFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
+    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     return (c, push) => {
         var _a;
         if (push) {
@@ -53,6 +57,9 @@ const useSelectComposition = () => {
                 }
                 return newState;
             });
+            if (isMobileLayout) {
+                setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
+            }
         }
     };
 };

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

@@ -2,6 +2,7 @@ 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 MAX_MOBILE_MENU_WIDTH = 300;
 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;

package/dist/components/Menu/styles.js

@@ -1,10 +1,11 @@
 "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;
+exports.inlineCodeSnippet = exports.outerPortal = exports.fullScreenOverlay = exports.menuContainerTowardsTop = exports.menuContainerTowardsBottom = exports.SHADOW_TOWARDS_TOP = exports.SHADOW_TOWARDS_BOTTOM = exports.MAX_MOBILE_MENU_WIDTH = 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;
+exports.MAX_MOBILE_MENU_WIDTH = 300;
 const menuContainer = {
     backgroundColor: colors_1.BACKGROUND,
     position: 'fixed',

package/dist/components/MobilePanel.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function MobilePanel({ children, onClose, }: {
+    children: React.ReactNode;
+    onClose: () => void;
+}): React.ReactPortal;

package/dist/components/MobilePanel.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_dom_1 = __importDefault(require("react-dom"));
+const colors_1 = require("../helpers/colors");
+const z_index_1 = require("../state/z-index");
+const portals_1 = require("./Menu/portals");
+const CancelButton_1 = require("./NewComposition/CancelButton");
+const container = {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    padding: '0 0px 50px 0px',
+    background: colors_1.BACKGROUND,
+};
+const buttonContainer = {
+    height: '40px',
+    width: '100%',
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'flex-end',
+};
+const button = {
+    height: 20,
+    width: 20,
+};
+function MobilePanel({ children, onClose, }) {
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: buttonContainer, children: (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: button, onPress: onClose }) }), children] }), (0, portals_1.getPortal)(currentZIndex));
+}
+exports.default = MobilePanel;

package/dist/components/NewComposition/ComboBox.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 noop_1 = require("../../helpers/noop");
 const caret_1 = require("../../icons/caret");
 const z_index_1 = require("../../state/z-index");
@@ -108,14 +109,20 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
     const derivedMaxHeight = (0, react_1.useMemo)(() => {
         return spaceToTop > spaceToBottom ? spaceToTop : spaceToBottom;
     }, [spaceToBottom, spaceToTop]);
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     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 spaceToRight = size.windowSize.width - size.left;
+        const spaceToLeft = size.left + size.width;
+        const minSpaceRequired = isMobileLayout
+            ? styles_1.MAX_MOBILE_MENU_WIDTH
+            : styles_1.MAX_MENU_WIDTH;
         const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
-        const horizontalLayout = spaceToRight >= minSpaceToRightRequired ? 'left' : 'right';
+        const canOpenOnLeft = spaceToLeft >= minSpaceRequired;
+        const canOpenOnRight = spaceToRight >= minSpaceRequired;
+        const horizontalLayout = canOpenOnRight ? 'left' : 'right';
         return {
             ...(verticalLayout === 'top'
                 ? {
@@ -130,11 +137,13 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
                 ? {
                     left: size.left,
                 }
-                : {
-                    right: size.windowSize.width - size.left - size.width,
-                }),
+                : canOpenOnLeft
+                    ? {
+                        right: size.windowSize.width - size.left - size.width,
+                    }
+                    : { left: 0 }),
         };
-    }, [opened, size, spaceToBottom, spaceToTop]);
+    }, [isMobileLayout, opened, size, spaceToBottom, spaceToTop]);
     const selected = values.find((v) => v.id === selectedId);
     const style = (0, react_1.useMemo)(() => {
         return {

package/dist/components/NewComposition/MenuContent.js

@@ -4,6 +4,7 @@ exports.MenuContent = 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_keybinding_1 = require("../../helpers/use-keybinding");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const MenuDivider_1 = require("../Menu/MenuDivider");
@@ -23,6 +24,7 @@ const container = {
 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 isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const [subMenuActivated, setSubMenuActivated] = (0, react_1.useState)(false);
     if (values[0].type === 'divider') {
         throw new Error('first value cant be divide');
@@ -107,14 +109,18 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         setSubMenuActivated('without-mouse');
     }, [onNextMenu, selectedItem, values]);
     const containerWithHeight = (0, react_1.useMemo)(() => {
+        const containerStyles = { ...container };
         if (fixedHeight === null) {
-            return { ...container, maxHeight: 600 };
+            containerStyles.maxHeight = 600;
         }
-        return {
-            ...container,
-            maxHeight: fixedHeight,
-        };
-    }, [fixedHeight]);
+        else {
+            containerStyles.maxHeight = fixedHeight;
+        }
+        if (isMobileLayout) {
+            containerStyles.maxWidth = styles_1.MAX_MOBILE_MENU_WIDTH;
+        }
+        return containerStyles;
+    }, [fixedHeight, isMobileLayout]);
     (0, react_1.useEffect)(() => {
         const escapeBinding = keybindings.registerKeybinding({
             event: 'keydown',

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)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
+}) => "#ff3232" | "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#f1c40f";
 export declare const RemotionInput: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/OptionsPanel.js

@@ -6,18 +6,12 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const colors_1 = require("../helpers/colors");
+const mobile_layout_1 = require("../helpers/mobile-layout");
 const DataEditor_1 = require("./RenderModal/DataEditor");
 const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
 const RenderQueue_1 = require("./RenderQueue");
 const RendersTab_1 = require("./RendersTab");
 const Tabs_1 = require("./Tabs");
-const container = {
-    height: '100%',
-    width: '100%',
-    position: 'absolute',
-    display: 'flex',
-    flexDirection: 'column',
-};
 const circle = {
     width: 8,
     height: 8,
@@ -45,6 +39,15 @@ exports.optionsSidebarTabs = (0, react_1.createRef)();
 const OptionsPanel = ({ readOnlyStudio }) => {
     const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const [saving, setSaving] = (0, react_1.useState)(false);
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
+    const container = (0, react_1.useMemo)(() => ({
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        position: isMobileLayout ? 'relative' : 'absolute',
+        flexDirection: 'column',
+        flex: 1,
+    }), [isMobileLayout]);
     const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel(readOnlyStudio));
     const onPropsSelected = (0, react_1.useCallback)(() => {
         setPanel('input-props');

package/dist/components/RenderQueue/RenderQueueRepeat.js

@@ -3,15 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueueRepeatItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const mobile_layout_1 = require("../../helpers/mobile-layout");
 const retry_payload_1 = require("../../helpers/retry-payload");
 const modals_1 = require("../../state/modals");
+const sidebar_1 = require("../../state/sidebar");
 const InlineAction_1 = require("../InlineAction");
 const RenderQueueRepeatItem = ({ job }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
+    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         const retryPayload = (0, retry_payload_1.makeRetryPayload)(job);
         setSelectedModal(retryPayload);
+        if (isMobileLayout) {
+            setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
+        }
     }, [job, setSelectedModal]);
     const icon = (0, react_1.useMemo)(() => {
         return {

package/dist/components/SidebarRenderButton.js

@@ -5,11 +5,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
+const mobile_layout_1 = require("../helpers/mobile-layout");
 const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
+const sidebar_1 = require("../state/sidebar");
 const InlineAction_1 = require("./InlineAction");
 const SidebarRenderButton = ({ composition, visible }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
@@ -69,6 +73,9 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialRepro: defaults.repro,
             initialForSeamlessAacConcatenation: defaults.forSeamlessAacConcatenation,
         });
+        if (isMobileLayout) {
+            setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
+        }
     }, [composition.defaultProps, composition.id, props, setSelectedModal]);
     const renderAction = (0, react_1.useCallback)((color) => {
         return (0, jsx_runtime_1.jsx)(render_1.ThinRenderIcon, { fill: color, svgProps: iconStyle });

package/dist/components/TopPanel.js

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const mobile_layout_1 = require("../helpers/mobile-layout");
 const use_breakpoint_1 = require("../helpers/use-breakpoint");
 const editor_rulers_1 = require("../state/editor-rulers");
 const sidebar_1 = require("../state/sidebar");
@@ -10,6 +14,7 @@ const CanvasOrLoading_1 = require("./CanvasOrLoading");
 const CurrentCompositionSideEffects_1 = require("./CurrentCompositionSideEffects");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const ExplorerPanel_1 = require("./ExplorerPanel");
+const MobilePanel_1 = __importDefault(require("./MobilePanel"));
 const OptionsPanel_1 = require("./OptionsPanel");
 const PreviewToolbar_1 = require("./PreviewToolbar");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
@@ -69,6 +74,7 @@ const TopPanel = ({ readOnlyStudio, onMounted, size, drawRef, bufferStateDelayIn
     const onCollapseRight = (0, react_1.useCallback)(() => {
         setSidebarCollapsedState({ left: null, right: 'collapsed' });
     }, [setSidebarCollapsedState]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { ref: drawRef, style: canvasContainerStyle, children: size ? (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, { size: size }) : null }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? ((0, jsx_runtime_1.jsx)(MobilePanel_1.default, { onClose: onCollapseLeft, children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: (0, jsx_runtime_1.jsx)("div", { ref: drawRef, style: canvasContainerStyle, children: size ? (0, jsx_runtime_1.jsx)(CanvasOrLoading_1.CanvasOrLoading, { size: size }) : null }) }), actualStateRight === 'expanded' ? ((0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? ((0, jsx_runtime_1.jsx)(MobilePanel_1.default, { onClose: onCollapseRight, children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : ((0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })] }) }), (0, jsx_runtime_1.jsx)(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), (0, jsx_runtime_1.jsx)(CurrentCompositionSideEffects_1.TitleUpdater, {})] }));
 };
 exports.TopPanel = TopPanel;

package/dist/helpers/checkerboard-background.d.ts

@@ -1,4 +1,4 @@
 export declare const getCheckerboardBackgroundSize: (size: number) => string;
 export declare const getCheckerboardBackgroundPos: (size: number) => string;
-export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "black" | "white";
+export declare const checkerboardBackgroundColor: (checkerboard: boolean) => "white" | "black";
 export declare const checkerboardBackgroundImage: (checkerboard: boolean) => "\n     linear-gradient(\n        45deg,\n        rgba(0, 0, 0, 0.1) 25%,\n        transparent 25%\n      ),\n      linear-gradient(135deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),\n      linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%)\n    " | undefined;

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" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";
+}) => "transparent" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)";

package/dist/helpers/presets-labels.d.ts

@@ -1,2 +1,2 @@
 import type { X264Preset } from '@remotion/renderer';
-export declare const labelx264Preset: (profile: X264Preset) => "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo";
+export declare const labelx264Preset: (profile: X264Preset) => "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow" | "placebo";

package/dist/state/sidebar.js

@@ -3,14 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidebarContextProvider = exports.SidebarContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const mobile_layout_1 = require("../helpers/mobile-layout");
 const storageKey = (sidebar) => {
     if (sidebar === 'right') {
         return 'remotion.sidebarRightCollapsing';
     }
     return 'remotion.sidebarCollapsing';
 };
-const getSavedCollapsedStateLeft = () => {
+const getSavedCollapsedStateLeft = (isMobileLayout = false) => {
     const state = window.localStorage.getItem(storageKey('left'));
+    if (isMobileLayout) {
+        return 'collapsed';
+    }
     if (state === 'collapsed') {
         return 'collapsed';
     }
@@ -19,8 +23,11 @@ const getSavedCollapsedStateLeft = () => {
     }
     return 'responsive';
 };
-const getSavedCollapsedStateRight = () => {
+const getSavedCollapsedStateRight = (isMobileLayout = false) => {
     const state = window.localStorage.getItem(storageKey('right'));
+    if (isMobileLayout) {
+        return 'collapsed';
+    }
     if (state === 'expanded') {
         return 'expanded';
     }
@@ -37,9 +44,10 @@ exports.SidebarContext = (0, react_1.createContext)({
     sidebarCollapsedStateRight: 'collapsed',
 });
 const SidebarContextProvider = ({ children }) => {
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const [sidebarCollapsedState, setSidebarCollapsedState] = (0, react_1.useState)(() => ({
-        left: getSavedCollapsedStateLeft(),
-        right: getSavedCollapsedStateRight(),
+        left: getSavedCollapsedStateLeft(isMobileLayout),
+        right: getSavedCollapsedStateRight(isMobileLayout),
     }));
     const value = (0, react_1.useMemo)(() => {
         return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/studio",
-  "version": "4.0.126",
+  "version": "4.0.128",
   "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/player": "4.0.126",
-    "@remotion/renderer": "4.0.126",
-    "remotion": "4.0.126",
-    "@remotion/media-utils": "4.0.126",
-    "@remotion/studio-shared": "4.0.126"
+    "remotion": "4.0.128",
+    "@remotion/player": "4.0.128",
+    "@remotion/media-utils": "4.0.128",
+    "@remotion/renderer": "4.0.128",
+    "@remotion/studio-shared": "4.0.128"
   },
   "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.126"
+    "@remotion/zod-types": "4.0.128"
   },
   "publishConfig": {
     "access": "public"