@remotion/cli 3.3.54 → 3.3.56

package/dist/config/log.d.ts

@@ -1,3 +1,3 @@
 import type { LogLevel } from '@remotion/renderer';
-export declare const getLogLevel: () => "verbose" | "info" | "warn" | "error";
+export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn";
 export declare const setLogLevel: (newLogLevel: LogLevel) => void;

package/dist/editor/components/Canvas.js

@@ -9,6 +9,7 @@ const colors_1 = require("../helpers/colors");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const preview_size_1 = require("../state/preview-size");
 const layout_1 = require("./layout");
 const Preview_1 = require("./Preview");
@@ -30,6 +31,7 @@ const Canvas = () => {
     const dimensions = (0, is_current_selected_still_1.useDimensions)();
     const ref = (0, react_1.useRef)(null);
     const { setSize, size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const size = player_1.PlayerInternals.useElementSize(ref, {
         triggerOnWindowResize: false,
@@ -40,6 +42,9 @@ const Canvas = () => {
             previewSize.translation.x === 0 &&
             previewSize.translation.y === 0);
     const onWheel = (0, react_1.useCallback)((e) => {
+        if (!editorZoomGestures) {
+            return;
+        }
         if (!size) {
             return;
         }
@@ -116,7 +121,7 @@ const Canvas = () => {
                 }),
             };
         });
-    }, [dimensions, isFit, setSize, size]);
+    }, [editorZoomGestures, dimensions, isFit, setSize, size]);
     (0, react_1.useEffect)(() => {
         const { current } = ref;
         if (!current) {

package/dist/editor/components/EditorContexts.js

@@ -6,6 +6,7 @@ const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const checkerboard_1 = require("../state/checkerboard");
+const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const folders_1 = require("../state/folders");
 const highest_z_index_1 = require("../state/highest-z-index");
 const in_out_1 = require("../state/in-out");
@@ -37,6 +38,14 @@ const EditorContexts = ({ children }) => {
             return newVal;
         });
     }, []);
+    const [editorZoomGestures, setEditorZoomGesturesState] = (0, react_1.useState)(() => (0, editor_zoom_gestures_1.loadEditorZoomGesturesOption)());
+    const setEditorZoomGestures = (0, react_1.useCallback)((newValue) => {
+        setEditorZoomGesturesState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, editor_zoom_gestures_1.persistEditorZoomGesturesOption)(newVal);
+            return newVal;
+        });
+    }, []);
     const [richTimeline, setRichTimelineState] = (0, react_1.useState)(() => (0, rich_timeline_1.loadRichTimelineOption)());
     const setRichTimeline = (0, react_1.useCallback)((newValue) => {
         setRichTimelineState((prevState) => {
@@ -54,6 +63,12 @@ const EditorContexts = ({ children }) => {
             setCheckerboard,
         };
     }, [checkerboard, setCheckerboard]);
+    const editorZoomGesturesCtx = (0, react_1.useMemo)(() => {
+        return {
+            editorZoomGestures,
+            setEditorZoomGestures,
+        };
+    }, [editorZoomGestures, setEditorZoomGestures]);
     const richTimelineCtx = (0, react_1.useMemo)(() => {
         return {
             richTimeline,
@@ -78,6 +93,6 @@ const EditorContexts = ({ children }) => {
             setSelectedModal: setModalContextType,
         };
     }, [modalContextType]);
-    return ((0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(rich_timeline_1.RichTimelineContext.Provider, { value: richTimelineCtx, children: (0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsx)(in_out_1.TimelineInOutContext.Provider, { value: timelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(in_out_1.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: children }) }) }) }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(rich_timeline_1.RichTimelineContext.Provider, { value: richTimelineCtx, children: (0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: (0, jsx_runtime_1.jsx)(editor_zoom_gestures_1.EditorZoomGesturesContext.Provider, { value: editorZoomGesturesCtx, children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsx)(in_out_1.TimelineInOutContext.Provider, { value: timelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(in_out_1.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.EditorContexts = EditorContexts;

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

@@ -1,3 +1,4 @@
+import type { SetStateAction } from 'react';
 import React from 'react';
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 export declare type MenuId = 'remotion' | 'file' | 'view' | 'tools' | 'help';
@@ -11,7 +12,7 @@ export declare const MenuItem: React.FC<{
     label: React.ReactNode;
     id: MenuId;
     selected: boolean;
-    onItemSelected: (id: MenuId) => void;
+    onItemSelected: (s: SetStateAction<string | null>) => void;
     onItemHovered: (id: MenuId) => void;
     onItemQuit: () => void;
     onPreviousMenu: () => void;

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

@@ -11,6 +11,7 @@ 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 = {
@@ -58,9 +59,25 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
-    const onClick = (0, react_1.useCallback)(() => {
+    const onPointerDown = (0, react_1.useCallback)(() => {
         onItemSelected(id);
-        document.activeElement.blur();
+        window.addEventListener('pointerup', (e) => {
+            if (!(0, is_menu_item_1.isMenuItem)(e.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;
@@ -69,7 +86,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             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, onClick: onClick, style: containerStyle, type: "button", children: itemName }), portalStyle
+    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 }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

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

@@ -13,6 +13,7 @@ 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");
@@ -53,7 +54,7 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
             backgroundColor: selected ? colors_1.CLEAR_HOVER : 'transparent',
         };
     }, [selected]);
-    const onClick = (0, react_1.useCallback)(() => {
+    const onItemTriggered = (0, react_1.useCallback)(() => {
         onActionChosen(id);
     }, [id, onActionChosen]);
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -85,7 +86,7 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
         }, 100);
         return () => clearTimeout(hi);
     }, [hovered, selected, setSubMenuActivated, subMenu]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onClick: onClick, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { 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, children: label }), " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (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: onItemTriggered, role: "button", className: is_menu_item_1.MENU_ITEM_CLASSNAME, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { 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, children: label }), " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (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/editor/components/Menu/is-menu-item.d.ts

@@ -0,0 +1,3 @@
+export declare const MENU_INITIATOR_CLASSNAME = "__remotion-preview-menu-initiator";
+export declare const MENU_ITEM_CLASSNAME = "__remotion-preview-menu-item";
+export declare const isMenuItem: (el: HTMLElement) => boolean;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMenuItem = exports.MENU_ITEM_CLASSNAME = exports.MENU_INITIATOR_CLASSNAME = void 0;
+exports.MENU_INITIATOR_CLASSNAME = '__remotion-preview-menu-initiator';
+exports.MENU_ITEM_CLASSNAME = '__remotion-preview-menu-item';
+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/styles.js

@@ -21,6 +21,4 @@ exports.menuContainerTowardsTop = {
 };
 exports.outerPortal = {
     position: 'fixed',
-    height: '100%',
-    width: '100%',
 };

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

@@ -13,6 +13,7 @@ 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");
@@ -44,21 +45,50 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
         }
         const onMouseEnter = () => setIsHovered(true);
         const onMouseLeave = () => setIsHovered(false);
+        const onPointerDown = (e) => {
+            e.stopPropagation();
+            return setOpened((o) => {
+                if (!o) {
+                    refresh === null || refresh === void 0 ? void 0 : refresh();
+                    window.addEventListener('pointerup', (evt) => {
+                        if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
+                            setOpened(false);
+                        }
+                    }, {
+                        once: true,
+                    });
+                }
+                return !o;
+            });
+        };
         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]);
@@ -99,7 +129,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
                     : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
         };
     }, [customStyle, hovered, opened]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, children: [selected.label, " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), portalStyle
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected.label, " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), portalStyle
                 ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => v.id === selected.id), topItemCanBeUnselected: false }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

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

@@ -22,7 +22,9 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
     if (values[0].type === 'divider') {
         throw new Error('first value cant be divide');
     }
-    const [selectedItem, setSelectedItem] = (0, react_1.useState)(typeof preselectIndex === 'number' ? values[preselectIndex].id : null);
+    const [selectedItem, setSelectedItem] = (0, react_1.useState)(typeof preselectIndex === 'number'
+        ? values[preselectIndex].id
+        : null);
     const onEscape = (0, react_1.useCallback)(() => {
         onHide();
     }, [onHide]);
@@ -80,6 +82,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         if (item.subMenu) {
             return setSubMenuActivated('without-mouse');
         }
+        onHide();
         item.onClick(item.id);
     }, [onHide, selectedItem, values]);
     const onArrowRight = (0, react_1.useCallback)(() => {

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

@@ -12,6 +12,7 @@ const SizeSelector_1 = require("../components/SizeSelector");
 const TimelineInOutToggle_1 = require("../components/TimelineInOutToggle");
 const Checkmark_1 = require("../icons/Checkmark");
 const checkerboard_1 = require("../state/checkerboard");
+const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const modals_1 = require("../state/modals");
 const preview_size_1 = require("../state/preview-size");
 const rich_timeline_1 = require("../state/rich-timeline");
@@ -30,6 +31,7 @@ const ICON_SIZE = 16;
 const useMenuStructure = (closeMenu) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
+    const { editorZoomGestures, setEditorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const { richTimeline, setRichTimeline } = (0, react_1.useContext)(rich_timeline_1.RichTimelineContext);
     const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
     const { setSidebarCollapsedState, sidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
@@ -205,6 +207,22 @@ const useMenuStructure = (closeMenu) => {
                         },
                         quickSwitcherLabel: null,
                     },
+                    {
+                        id: 'editor-zoom-gestures',
+                        keyHint: null,
+                        label: 'Zoom and Pan Gestures',
+                        onClick: () => {
+                            closeMenu();
+                            setEditorZoomGestures((c) => !c);
+                        },
+                        type: 'item',
+                        value: 'editor-zoom-gestures',
+                        leftItem: editorZoomGestures ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                        subMenu: null,
+                        quickSwitcherLabel: editorZoomGestures
+                            ? 'Disable Zoom and Pan Gestures'
+                            : 'Enable Zoom and Pan Gestures',
+                    },
                     {
                         id: 'timeline-divider-1',
                         type: 'divider',
@@ -227,6 +245,7 @@ const useMenuStructure = (closeMenu) => {
                                     label: 'Responsive',
                                     leftItem: sidebarCollapsedState === 'responsive' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
                                     onClick: () => {
+                                        closeMenu();
                                         setSidebarCollapsedState('responsive');
                                     },
                                     subMenu: null,
@@ -240,6 +259,7 @@ const useMenuStructure = (closeMenu) => {
                                     label: 'Expanded',
                                     leftItem: sidebarCollapsedState === 'expanded' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                                     onClick: () => {
+                                        closeMenu();
                                         setSidebarCollapsedState('expanded');
                                     },
                                     subMenu: null,
@@ -253,6 +273,7 @@ const useMenuStructure = (closeMenu) => {
                                     label: 'Collapsed',
                                     leftItem: sidebarCollapsedState === 'collapsed' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
                                     onClick: () => {
+                                        closeMenu();
                                         setSidebarCollapsedState('collapsed');
                                     },
                                     subMenu: null,
@@ -567,8 +588,10 @@ const useMenuStructure = (closeMenu) => {
     }, [
         checkerboard,
         closeMenu,
+        editorZoomGestures,
         richTimeline,
         setCheckerboard,
+        setEditorZoomGestures,
         setRichTimeline,
         setSelectedModal,
         setSidebarCollapsedState,

package/dist/editor/state/editor-zoom-gestures.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type State = {
+    editorZoomGestures: boolean;
+    setEditorZoomGestures: (cb: (prevState: boolean) => boolean) => void;
+};
+export declare const persistEditorZoomGesturesOption: (option: boolean) => void;
+export declare const loadEditorZoomGesturesOption: () => boolean;
+export declare const EditorZoomGesturesContext: import("react").Context<State>;
+export {};

package/dist/editor/state/editor-zoom-gestures.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorZoomGesturesContext = exports.loadEditorZoomGesturesOption = exports.persistEditorZoomGesturesOption = void 0;
+const react_1 = require("react");
+const persistEditorZoomGesturesOption = (option) => {
+    localStorage.setItem('remotion.editorZoomGestures', String(option));
+};
+exports.persistEditorZoomGesturesOption = persistEditorZoomGesturesOption;
+const loadEditorZoomGesturesOption = () => {
+    const item = localStorage.getItem('remotion.editorZoomGestures');
+    return item !== 'false';
+};
+exports.loadEditorZoomGesturesOption = loadEditorZoomGesturesOption;
+exports.EditorZoomGesturesContext = (0, react_1.createContext)({
+    editorZoomGestures: (0, exports.loadEditorZoomGesturesOption)(),
+    setEditorZoomGestures: () => undefined,
+});

package/dist/editor/state/preview-size.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PreviewSizeProvider = exports.PreviewSizeContext = exports.loadPreviewSizeOption = exports.persistPreviewSizeOption = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const editor_zoom_gestures_1 = require("./editor-zoom-gestures");
 const key = 'remotion.previewSize';
 const persistPreviewSizeOption = (option) => {
     localStorage.setItem(key, JSON.stringify(option));
@@ -34,6 +35,7 @@ const PreviewSizeProvider = ({ children }) => {
             y: 0,
         };
     });
+    const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
     const setSize = (0, react_1.useCallback)((newValue) => {
         setSizeState((prevState) => {
             const newVal = newValue(prevState);
@@ -43,12 +45,20 @@ const PreviewSizeProvider = ({ children }) => {
     }, []);
     const previewSizeCtx = (0, react_1.useMemo)(() => {
         return {
-            size,
+            size: editorZoomGestures
+                ? size
+                : {
+                    size: size.size,
+                    translation: {
+                        x: 0,
+                        y: 0,
+                    },
+                },
             setSize,
             translation,
             setTranslation,
         };
-    }, [setSize, size, translation, setTranslation]);
+    }, [editorZoomGestures, size, setSize, translation]);
     return ((0, jsx_runtime_1.jsx)(exports.PreviewSizeContext.Provider, { value: previewSizeCtx, children: children }));
 };
 exports.PreviewSizeProvider = PreviewSizeProvider;

package/dist/get-cli-options.d.ts

@@ -30,7 +30,7 @@ export declare const getCliOptions: (options: {
     browserExecutable: BrowserExecutable;
     ffmpegExecutable: import("@remotion/renderer").FfmpegExecutable;
     ffprobeExecutable: import("@remotion/renderer").FfmpegExecutable;
-    logLevel: "verbose" | "info" | "warn" | "error";
+    logLevel: "error" | "verbose" | "info" | "warn";
     scale: number;
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;

package/dist/get-input-props.d.ts

@@ -1 +1,5 @@
+/**
+ * @description You can retrieve inputs that you pass in, from the command line using --props, or the inputProps parameter if you're using the Node.js API
+ * @see [Documentation](https://www.remotion.dev/docs/get-input-props)
+ */
 export declare const getInputProps: (onUpdate: (newProps: object) => void) => object;

package/dist/get-input-props.js

@@ -9,6 +9,10 @@ const os_1 = __importDefault(require("os"));
 const path_1 = __importDefault(require("path"));
 const log_1 = require("./log");
 const parse_command_line_1 = require("./parse-command-line");
+/**
+ * @description You can retrieve inputs that you pass in, from the command line using --props, or the inputProps parameter if you're using the Node.js API
+ * @see [Documentation](https://www.remotion.dev/docs/get-input-props)
+ */
 const getInputProps = (onUpdate) => {
     if (!parse_command_line_1.parsedCli.props) {
         return {};

package/dist/index.d.ts

@@ -88,7 +88,7 @@ export declare const CliInternals: {
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
         ffmpegExecutable: import("@remotion/renderer").FfmpegExecutable;
         ffprobeExecutable: import("@remotion/renderer").FfmpegExecutable;
-        logLevel: "verbose" | "info" | "warn" | "error";
+        logLevel: "error" | "verbose" | "info" | "warn";
         scale: number;
         chromiumOptions: import("@remotion/renderer").ChromiumOptions;
         overwrite: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "3.3.54",
+	"version": "3.3.56",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -22,16 +22,16 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "3.3.54",
-		"@remotion/media-utils": "3.3.54",
-		"@remotion/player": "3.3.54",
-		"@remotion/renderer": "3.3.54",
+		"@remotion/bundler": "3.3.56",
+		"@remotion/media-utils": "3.3.56",
+		"@remotion/player": "3.3.56",
+		"@remotion/renderer": "3.3.56",
 		"better-opn": "2.1.1",
 		"dotenv": "9.0.2",
 		"memfs": "3.4.3",
 		"minimist": "1.2.6",
 		"prompts": "2.4.1",
-		"remotion": "3.3.54",
+		"remotion": "3.3.56",
 		"semver": "7.3.5",
 		"source-map": "0.6.1"
 	},
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "3a004e0b0e2a805fb276c35dd5922e3389c9f53c"
+	"gitHead": "40e96323b08717213c20fffcce8a985f0310f6e5"
 }

package/dist/gcp-command.d.ts

@@ -1 +0,0 @@
-export declare const gcpCommand: (remotionRoot: string, args: string[]) => Promise<never>;

package/dist/gcp-command.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.gcpCommand = void 0;
-const log_1 = require("./log");
-const get_package_manager_1 = require("./preview-server/get-package-manager");
-const update_available_1 = require("./preview-server/update-available");
-const gcpCommand = async (remotionRoot, args) => {
-    try {
-        const path = require.resolve('@remotion/gcp', {
-            paths: [remotionRoot],
-        });
-        const { GCPInternals } = require(path);
-        await GCPInternals.executeCommand(args, remotionRoot);
-        process.exit(0);
-    }
-    catch (err) {
-        const manager = (0, get_package_manager_1.getPackageManager)(remotionRoot, undefined);
-        const installCommand = manager === 'unknown' ? 'npm i' : manager.installCommand;
-        log_1.Log.error(err);
-        log_1.Log.error('Remotion GCP is not installed.');
-        log_1.Log.info('');
-        log_1.Log.info('You can install it using:');
-        log_1.Log.info(`${installCommand} @remotion/gcp@${(0, update_available_1.getRemotionVersion)()}`);
-        process.exit(1);
-    }
-};
-exports.gcpCommand = gcpCommand;