@remotion/cli 3.2.14 → 3.2.16

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

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

package/dist/editor/components/Button.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const layout_1 = require("./layout");
+const container = {
+    padding: 10,
+    cursor: 'pointer',
+    fontSize: 14,
+};
+const button = {
+    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
+    borderRadius: 4,
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    appearance: 'none',
+    fontFamily: 'inherit',
+    fontSize: 14,
+    color: 'white',
+};
+const Button = ({ children, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("button", { ...props, style: button, type: "button", children: (0, jsx_runtime_1.jsx)(layout_1.Row, { style: container, children: children }) }));
+};
+exports.Button = Button;

package/dist/editor/components/Canvas.js

@@ -4,8 +4,15 @@ exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const smooth_zoom_1 = require("../../smooth-zoom");
 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 preview_size_1 = require("../state/preview-size");
+const layout_1 = require("./layout");
 const Preview_1 = require("./Preview");
+const ResetZoomButton_1 = require("./ResetZoomButton");
 const container = {
     flex: 1,
     display: 'flex',
@@ -13,12 +20,193 @@ const container = {
     position: 'relative',
     backgroundColor: colors_1.BACKGROUND,
 };
+const resetZoom = {
+    position: 'absolute',
+    top: layout_1.SPACING_UNIT * 2,
+    right: layout_1.SPACING_UNIT * 2,
+};
+const ZOOM_PX_FACTOR = 0.003;
 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 keybindings = (0, use_keybinding_1.useKeybinding)();
     const size = player_1.PlayerInternals.useElementSize(ref, {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: container, children: size ? (0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasSize: size }) : null }));
+    const isFit = previewSize.size === 'auto' ||
+        (previewSize.size === 1 &&
+            previewSize.translation.x === 0 &&
+            previewSize.translation.y === 0);
+    const onWheel = (0, react_1.useCallback)((e) => {
+        if (!size) {
+            return;
+        }
+        if (!dimensions) {
+            return;
+        }
+        const wantsToZoom = e.ctrlKey || e.metaKey;
+        if (!wantsToZoom && isFit) {
+            return;
+        }
+        e.preventDefault();
+        setSize((prevSize) => {
+            const scale = player_1.PlayerInternals.calculateScale({
+                canvasSize: size,
+                compositionHeight: dimensions.height,
+                compositionWidth: dimensions.width,
+                previewSize: prevSize.size,
+            });
+            // Zoom in/out
+            if (wantsToZoom) {
+                const oldSize = prevSize.size === 'auto' ? scale : prevSize.size;
+                const smoothened = (0, smooth_zoom_1.smoothenZoom)(oldSize);
+                const added = smoothened + e.deltaY * ZOOM_PX_FACTOR;
+                const unsmoothened = (0, smooth_zoom_1.unsmoothenZoom)(added);
+                const { centerX, centerY } = (0, get_effective_translation_1.getCenterPointWhileScrolling)({
+                    size,
+                    clientX: e.clientX,
+                    clientY: e.clientY,
+                    compositionWidth: dimensions.width,
+                    compositionHeight: dimensions.height,
+                    scale,
+                    translation: prevSize.translation,
+                });
+                const zoomDifference = unsmoothened - oldSize;
+                const uvCoordinatesX = centerX / dimensions.width;
+                const uvCoordinatesY = centerY / dimensions.height;
+                const correctionLeft = -uvCoordinatesX * (zoomDifference * dimensions.width) +
+                    (1 - uvCoordinatesX) * zoomDifference * dimensions.width;
+                const correctionTop = -uvCoordinatesY * (zoomDifference * dimensions.height) +
+                    (1 - uvCoordinatesY) * zoomDifference * dimensions.height;
+                return {
+                    translation: (0, get_effective_translation_1.getEffectiveTranslation)({
+                        translation: {
+                            x: prevSize.translation.x - correctionLeft / 2,
+                            y: prevSize.translation.y - correctionTop / 2,
+                        },
+                        canvasSize: size,
+                        compositionHeight: dimensions.height,
+                        compositionWidth: dimensions.width,
+                        scale,
+                    }),
+                    size: unsmoothened,
+                };
+            }
+            const effectiveTranslation = (0, get_effective_translation_1.getEffectiveTranslation)({
+                translation: prevSize.translation,
+                canvasSize: size,
+                compositionHeight: dimensions.height,
+                compositionWidth: dimensions.width,
+                scale,
+            });
+            // Pan
+            return {
+                ...prevSize,
+                translation: (0, get_effective_translation_1.getEffectiveTranslation)({
+                    translation: {
+                        x: effectiveTranslation.x + e.deltaX,
+                        y: effectiveTranslation.y + e.deltaY,
+                    },
+                    canvasSize: size,
+                    compositionHeight: dimensions.height,
+                    compositionWidth: dimensions.width,
+                    scale,
+                }),
+            };
+        });
+    }, [dimensions, isFit, setSize, size]);
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        current.addEventListener('wheel', onWheel);
+        return () => current.removeEventListener('wheel', onWheel);
+    }, [onWheel]);
+    const onReset = (0, react_1.useCallback)(() => {
+        setSize(() => {
+            return {
+                translation: {
+                    x: 0,
+                    y: 0,
+                },
+                size: 'auto',
+            };
+        });
+    }, [setSize]);
+    const onZoomIn = (0, react_1.useCallback)(() => {
+        if (!dimensions) {
+            return;
+        }
+        if (!size) {
+            return;
+        }
+        setSize((prevSize) => {
+            const scale = player_1.PlayerInternals.calculateScale({
+                canvasSize: size,
+                compositionHeight: dimensions.height,
+                compositionWidth: dimensions.width,
+                previewSize: prevSize.size,
+            });
+            return {
+                translation: {
+                    x: 0,
+                    y: 0,
+                },
+                size: Math.min(smooth_zoom_1.MAX_ZOOM, scale * 2),
+            };
+        });
+    }, [dimensions, setSize, size]);
+    const onZoomOut = (0, react_1.useCallback)(() => {
+        if (!dimensions) {
+            return;
+        }
+        if (!size) {
+            return;
+        }
+        setSize((prevSize) => {
+            const scale = player_1.PlayerInternals.calculateScale({
+                canvasSize: size,
+                compositionHeight: dimensions.height,
+                compositionWidth: dimensions.width,
+                previewSize: prevSize.size,
+            });
+            return {
+                translation: {
+                    x: 0,
+                    y: 0,
+                },
+                size: Math.max(smooth_zoom_1.MIN_ZOOM, scale / 2),
+            };
+        });
+    }, [dimensions, setSize, size]);
+    (0, react_1.useEffect)(() => {
+        const resetBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: '0',
+            commandCtrlKey: false,
+            callback: onReset,
+        });
+        const zoomIn = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: '+',
+            commandCtrlKey: false,
+            callback: onZoomIn,
+        });
+        const zoomOut = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: '-',
+            commandCtrlKey: false,
+            callback: onZoomOut,
+        });
+        return () => {
+            resetBinding.unregister();
+            zoomIn.unregister();
+            zoomOut.unregister();
+        };
+    }, [keybindings, onReset, onZoomIn, onZoomOut]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: container, children: [size ? (0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasSize: size }) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) }))] }));
 };
 exports.Canvas = Canvas;

package/dist/editor/components/CopyButton.js

@@ -3,29 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopyButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
+const Button_1 = require("../../preview-server/error-overlay/remotion-overlay/Button");
 const copy_text_1 = require("../helpers/copy-text");
 const layout_1 = require("./layout");
 const iconStyle = {
     width: 16,
     height: 16,
     color: 'white',
+    verticalAlign: 'sub',
 };
 const copyIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: iconStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
-const container = {
-    padding: 10,
-    cursor: 'pointer',
-    fontSize: 14,
-};
-const button = {
-    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
-    borderRadius: 4,
-    backgroundColor: colors_1.INPUT_BACKGROUND,
-    appearance: 'none',
-    fontFamily: 'inherit',
-    fontSize: 14,
-    color: 'white',
-};
 const labelStyle = {
     fontSize: 14,
 };
@@ -42,6 +29,6 @@ const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
         const to = setTimeout(() => setCopied(false), 2000);
         return () => clearTimeout(to);
     }, [copied]);
-    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, style: button, type: "button", children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: onClick, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label })] }));
 };
 exports.CopyButton = CopyButton;

package/dist/editor/components/EditorContexts.js

@@ -24,7 +24,6 @@ const EditorContexts = ({ children }) => {
         return inAndOutFrames;
     }, [inAndOutFrames]);
     const [emitter] = (0, react_1.useState)(() => new player_1.PlayerInternals.PlayerEmitter());
-    const [size, setSizeState] = (0, react_1.useState)(() => (0, preview_size_1.loadPreviewSizeOption)());
     const setTimelineInOutContextValue = (0, react_1.useMemo)(() => {
         return {
             setInAndOutFrames,
@@ -46,22 +45,9 @@ const EditorContexts = ({ children }) => {
             return newVal;
         });
     }, []);
-    const setSize = (0, react_1.useCallback)((newValue) => {
-        setSizeState((prevState) => {
-            const newVal = newValue(prevState);
-            (0, preview_size_1.persistPreviewSizeOption)(newVal);
-            return newVal;
-        });
-    }, []);
     const [mediaMuted, setMediaMuted] = (0, react_1.useState)(() => (0, mute_1.loadMuteOption)());
     const [mediaVolume, setMediaVolume] = (0, react_1.useState)(1);
     const [modalContextType, setModalContextType] = (0, react_1.useState)(null);
-    const previewSizeCtx = (0, react_1.useMemo)(() => {
-        return {
-            size,
-            setSize,
-        };
-    }, [setSize, size]);
     const checkerboardCtx = (0, react_1.useMemo)(() => {
         return {
             checkerboard,
@@ -92,6 +78,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.PreviewSizeContext.Provider, { value: previewSizeCtx, 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)(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/KeyboardShortcutsModal.js

@@ -62,6 +62,6 @@ const KeyboardShortcuts = () => {
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onEscape: onQuit, onOutsideClick: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Keyboard shortcuts" }), (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.Preview.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onEscape: onQuit, onOutsideClick: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Keyboard shortcuts" }), (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.Preview.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Zoom" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "+" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom in" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "-" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom out" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "0" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reset zoom" })] })] })] })] }));
 };
 exports.KeyboardShortcuts = KeyboardShortcuts;

package/dist/editor/components/MenuToolbar.js

@@ -59,6 +59,7 @@ const MenuToolbar = () => {
     const close = (0, react_1.useCallback)(() => {
         setSelected(null);
     }, []);
+    const sizes = (0, SizeSelector_1.getUniqueSizes)(size);
     const structure = (0, react_1.useMemo)(() => {
         const struct = [
             {
@@ -161,19 +162,19 @@ const MenuToolbar = () => {
                         leftItem: null,
                         subMenu: {
                             leaveLeftSpace: true,
-                            preselectIndex: SizeSelector_1.commonPreviewSizes.findIndex((s) => String(size) === String(s)),
-                            items: SizeSelector_1.commonPreviewSizes.map((newSize) => ({
-                                id: String(newSize),
-                                keyHint: null,
+                            preselectIndex: sizes.findIndex((s) => String(size.size) === String(s.size)),
+                            items: sizes.map((newSize) => ({
+                                id: String(newSize.size),
+                                keyHint: newSize.size === 1 ? '0' : null,
                                 label: (0, SizeSelector_1.getPreviewSizeLabel)(newSize),
-                                leftItem: String(newSize) === String(size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                                leftItem: String(newSize.size) === String(size.size) ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
                                 onClick: () => {
                                     close();
                                     setSize(() => newSize);
                                 },
                                 subMenu: null,
                                 type: 'item',
-                                value: newSize,
+                                value: newSize.size,
                             })),
                         },
                     },
@@ -479,7 +480,8 @@ const MenuToolbar = () => {
         setSidebarCollapsedState,
         setSize,
         sidebarCollapsedState,
-        size,
+        size.size,
+        sizes,
     ]);
     const menus = (0, react_1.useMemo)(() => {
         return structure.map((s) => s.id);

package/dist/editor/components/PlaybackRateSelector.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlaybackRateSelector = exports.getPlaybackRateLabel = exports.commonPlaybackRates = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const Checkmark_1 = require("../icons/Checkmark");
 const playbackrate_1 = require("../state/playbackrate");
 const ControlButton_1 = require("./ControlButton");
@@ -17,6 +18,7 @@ exports.getPlaybackRateLabel = getPlaybackRateLabel;
 const accessibilityLabel = 'Change the playback rate';
 const comboStyle = { width: 80 };
 const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
     const style = (0, react_1.useMemo)(() => {
         return {
             padding: ControlButton_1.CONTROL_BUTTON_PADDING,
@@ -47,6 +49,9 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
         const middle = Math.floor(exports.commonPlaybackRates.length / 2);
         return [...values.slice(0, middle), divider, ...values.slice(middle)];
     }, [playbackRate, setPlaybackRate]);
+    if (isStill) {
+        return null;
+    }
     return ((0, jsx_runtime_1.jsx)("div", { style: style, "aria-label": accessibilityLabel, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(playbackRate), values: items }) }));
 };
 exports.PlaybackRateSelector = PlaybackRateSelector;

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

@@ -1,5 +1,6 @@
 import type { Size } from '@remotion/player';
 import React from 'react';
+export declare const checkerboardSize = 49;
 export declare const VideoPreview: React.FC<{
     canvasSize: Size;
 }>;

package/dist/editor/components/Preview.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoPreview = void 0;
+exports.VideoPreview = exports.checkerboardSize = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
@@ -8,7 +8,7 @@ const remotion_1 = require("remotion");
 const checkerboard_background_1 = require("../helpers/checkerboard-background");
 const checkerboard_1 = require("../state/checkerboard");
 const preview_size_1 = require("../state/preview-size");
-const checkerboardSize = 49;
+exports.checkerboardSize = 49;
 const containerStyle = (options) => {
     return {
         transform: `scale(${options.scale})`,
@@ -20,8 +20,8 @@ const containerStyle = (options) => {
         position: 'absolute',
         backgroundColor: (0, checkerboard_background_1.checkerboardBackgroundColor)(options.checkerboard),
         backgroundImage: (0, checkerboard_background_1.checkerboardBackgroundImage)(options.checkerboard),
-        backgroundSize: (0, checkerboard_background_1.getCheckerboardBackgroundSize)(checkerboardSize) /* Must be a square */,
-        backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(checkerboardSize) /* Must be half of one side of the square */,
+        backgroundSize: (0, checkerboard_background_1.getCheckerboardBackgroundSize)(exports.checkerboardSize) /* Must be a square */,
+        backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(exports.checkerboardSize) /* Must be half of one side of the square */,
     };
 };
 const Inner = ({ canvasSize }) => {
@@ -29,11 +29,11 @@ const Inner = ({ canvasSize }) => {
     const portalContainer = (0, react_1.useRef)(null);
     const config = (0, remotion_1.useVideoConfig)();
     const { checkerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
-    const { centerX, centerY, yCorrection, xCorrection, scale } = player_1.PlayerInternals.calculateScale({
+    const { centerX, centerY, yCorrection, xCorrection, scale } = player_1.PlayerInternals.calculateCanvasTransformation({
         canvasSize,
         compositionHeight: config.height,
         compositionWidth: config.width,
-        previewSize,
+        previewSize: previewSize.size,
     });
     const outer = (0, react_1.useMemo)(() => {
         return {
@@ -42,11 +42,19 @@ const Inner = ({ canvasSize }) => {
             display: 'flex',
             flexDirection: 'column',
             position: 'absolute',
-            left: centerX,
-            top: centerY,
+            left: centerX - previewSize.translation.x,
+            top: centerY - previewSize.translation.y,
             overflow: 'hidden',
         };
-    }, [centerX, centerY, config.height, config.width, scale]);
+    }, [
+        centerX,
+        centerY,
+        config.height,
+        config.width,
+        previewSize.translation.x,
+        previewSize.translation.y,
+        scale,
+    ]);
     const style = (0, react_1.useMemo)(() => {
         return containerStyle({
             checkerboard,

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PreviewZoomControls: React.FC;

package/dist/editor/components/PreviewZoomControls.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewZoomControls = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const minus_1 = require("../icons/minus");
+const plus_1 = require("../icons/plus");
+const preview_size_1 = require("../state/preview-size");
+const ControlButton_1 = require("./ControlButton");
+const layout_1 = require("./layout");
+const container = {
+    color: 'black',
+    flexDirection: 'row',
+    display: 'flex',
+};
+const buttonStyle = {
+    fontSize: 24,
+};
+const iconStyle = {
+    color: 'white',
+    width: 14,
+};
+const slider = {
+    width: 120,
+    accentColor: 'var(--blue)',
+};
+const PreviewZoomControls = () => {
+    const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const onZoomOutClicked = (0, react_1.useCallback)(() => {
+        setSize((z) => {
+            if (z === 'auto')
+                return 1 - preview_size_1.ZOOM_BUTTON_STEP;
+            const newSize = Number((Number(z) - preview_size_1.ZOOM_BUTTON_STEP).toFixed(2));
+            return Math.max(preview_size_1.PREVIEW_MIN_ZOOM, newSize);
+        });
+    }, [setSize]);
+    const onZoomInClicked = (0, react_1.useCallback)(() => {
+        setSize((z) => {
+            if (z === 'auto')
+                return 1 + preview_size_1.ZOOM_BUTTON_STEP;
+            const newSize = Number((Number(z) + preview_size_1.ZOOM_BUTTON_STEP).toFixed(2));
+            return Math.min(preview_size_1.PREVIEW_MAX_ZOOM, newSize);
+        });
+    }, [setSize]);
+    const onChange = (0, react_1.useCallback)((e) => {
+        setSize(() => Number(e.target.value));
+    }, [setSize]);
+    const onWheel = (0, react_1.useCallback)((e) => {
+        setSize((z) => {
+            if (e.deltaY > 0) {
+                if (z === 'auto')
+                    return 1 - preview_size_1.ZOOM_SLIDER_STEP;
+                const newSize = Number((Number(z) - preview_size_1.ZOOM_SLIDER_STEP).toFixed(2));
+                return Math.max(preview_size_1.PREVIEW_MIN_ZOOM, newSize);
+            }
+            if (e.deltaY < 0) {
+                if (z === 'auto')
+                    return 1 + preview_size_1.ZOOM_SLIDER_STEP;
+                const newSize = Number((Number(z) + preview_size_1.ZOOM_SLIDER_STEP).toFixed(2));
+                return Math.min(preview_size_1.PREVIEW_MAX_ZOOM, newSize);
+            }
+            return z;
+        });
+    }, [setSize]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onZoomOutClicked, style: buttonStyle, title: "Zoom out preview", role: 'ControlButton', type: "button", disabled: preview_size_1.PREVIEW_MIN_ZOOM === size, children: (0, jsx_runtime_1.jsx)(minus_1.Minus, { style: iconStyle }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("input", { title: `Preview size (${size}x)`, alt: `Preview size (${size}x)`, type: 'range', min: preview_size_1.PREVIEW_MIN_ZOOM, step: preview_size_1.ZOOM_SLIDER_STEP, value: size, max: preview_size_1.PREVIEW_MAX_ZOOM, onChange: onChange, onWheel: onWheel, style: slider }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onZoomInClicked, style: buttonStyle, title: "Zoom in preview", role: 'button', type: "button", disabled: preview_size_1.PREVIEW_MAX_ZOOM === size, children: (0, jsx_runtime_1.jsx)(plus_1.Plus, { style: iconStyle }) })] }));
+};
+exports.PreviewZoomControls = PreviewZoomControls;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ResetZoomButton: React.FC<{
+    onClick: () => void;
+}>;

package/dist/editor/components/ResetZoomButton.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResetZoomButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../../preview-server/error-overlay/remotion-overlay/Button");
+const ResetZoomButton = ({ onClick }) => {
+    return (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClick, children: "Reset zoom" });
+};
+exports.ResetZoomButton = ResetZoomButton;

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

@@ -1,5 +1,6 @@
 import type { PreviewSize } from '@remotion/player';
 import React from 'react';
 export declare const commonPreviewSizes: PreviewSize[];
-export declare const getPreviewSizeLabel: (previewSize: PreviewSize) => "100%" | "50%" | "25%" | "Fit" | undefined;
+export declare const getPreviewSizeLabel: (previewSize: PreviewSize) => string;
+export declare const getUniqueSizes: (size: PreviewSize) => PreviewSize[];
 export declare const SizeSelector: React.FC;

package/dist/editor/components/SizeSelector.js

@@ -1,30 +1,70 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SizeSelector = exports.getPreviewSizeLabel = exports.commonPreviewSizes = void 0;
+exports.SizeSelector = exports.getUniqueSizes = exports.getPreviewSizeLabel = exports.commonPreviewSizes = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkmark_1 = require("../icons/Checkmark");
 const preview_size_1 = require("../state/preview-size");
 const ControlButton_1 = require("./ControlButton");
 const ComboBox_1 = require("./NewComposition/ComboBox");
-exports.commonPreviewSizes = ['auto', 0.25, 0.5, 1];
+exports.commonPreviewSizes = [
+    {
+        size: 'auto',
+        translation: {
+            x: 0,
+            y: 0,
+        },
+    },
+    {
+        size: 0.25,
+        translation: {
+            x: 0,
+            y: 0,
+        },
+    },
+    {
+        size: 0.5,
+        translation: {
+            x: 0,
+            y: 0,
+        },
+    },
+    {
+        size: 1,
+        translation: {
+            x: 0,
+            y: 0,
+        },
+    },
+];
 const getPreviewSizeLabel = (previewSize) => {
-    if (previewSize === 1) {
-        return '100%';
-    }
-    if (previewSize === 0.5) {
-        return '50%';
-    }
-    if (previewSize === 0.25) {
-        return '25%';
-    }
-    if (previewSize === 'auto') {
+    if (previewSize.size === 'auto') {
         return 'Fit';
     }
+    return `${(previewSize.size * 100).toFixed(0)}%`;
 };
 exports.getPreviewSizeLabel = getPreviewSizeLabel;
 const accessibilityLabel = 'Preview Size';
 const comboStyle = { width: 80 };
+const getUniqueSizes = (size) => {
+    const customPreviewSizes = [size, ...exports.commonPreviewSizes];
+    const uniqueSizes = [];
+    customPreviewSizes.forEach((p) => {
+        if (!uniqueSizes.find((s) => s.size === p.size)) {
+            uniqueSizes.push(p);
+        }
+    });
+    return uniqueSizes.sort((a, b) => {
+        if (a.size === 'auto') {
+            return -1;
+        }
+        if (b.size === 'auto') {
+            return 1;
+        }
+        return a.size - b.size;
+    });
+};
+exports.getUniqueSizes = getUniqueSizes;
 const SizeSelector = () => {
     const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
     const style = (0, react_1.useMemo)(() => {
@@ -33,9 +73,9 @@ const SizeSelector = () => {
         };
     }, []);
     const items = (0, react_1.useMemo)(() => {
-        return exports.commonPreviewSizes.map((newSize) => {
+        return (0, exports.getUniqueSizes)(size).map((newSize) => {
             return {
-                id: String(newSize),
+                id: String(newSize.size),
                 label: (0, exports.getPreviewSizeLabel)(newSize),
                 onClick: () => {
                     return setSize(() => {
@@ -43,13 +83,13 @@ const SizeSelector = () => {
                     });
                 },
                 type: 'item',
-                value: newSize,
-                keyHint: null,
-                leftItem: String(size) === String(newSize) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                value: newSize.size,
+                keyHint: newSize.size ? '0' : null,
+                leftItem: String(size.size) === String(newSize.size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
             };
         });
     }, [setSize, size]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, "aria-label": accessibilityLabel, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size), values: items }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, "aria-label": accessibilityLabel, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size.size), values: items }) }));
 };
 exports.SizeSelector = SizeSelector;

package/dist/editor/helpers/get-effective-translation.d.ts

@@ -0,0 +1,26 @@
+import type { Size, Translation } from '@remotion/player';
+export declare const getEffectiveTranslation: ({ canvasSize, scale, compositionHeight, compositionWidth, translation, }: {
+    canvasSize: Size;
+    scale: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    translation: {
+        x: number;
+        y: number;
+    };
+}) => {
+    x: number;
+    y: number;
+};
+export declare const getCenterPointWhileScrolling: ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }: {
+    size: Size;
+    clientX: number;
+    clientY: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    scale: number;
+    translation: Translation;
+}) => {
+    centerX: number;
+    centerY: number;
+};

package/dist/editor/helpers/get-effective-translation.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
+const getEffectiveXTranslation = ({ canvasSize, scale, compositionWidth, translation, }) => {
+    const maxTranslation = Math.abs(canvasSize.width / 2 +
+        (scale * compositionWidth) / 2 -
+        MUST_BE_INSIDE_CANVAS);
+    return Math.max(-maxTranslation, Math.min(translation.x, maxTranslation));
+};
+const MUST_BE_INSIDE_CANVAS = 50;
+const getEffectiveYTranslation = ({ canvasSize, scale, compositionHeight, translation, }) => {
+    const maxTranslation = Math.abs(canvasSize.height / 2 + (scale * compositionHeight) / 2) -
+        MUST_BE_INSIDE_CANVAS;
+    return Math.max(-maxTranslation, Math.min(translation.y, maxTranslation));
+};
+const getEffectiveTranslation = ({ canvasSize, scale, compositionHeight, compositionWidth, translation, }) => {
+    return {
+        x: getEffectiveXTranslation({
+            canvasSize,
+            compositionWidth,
+            scale,
+            translation,
+        }),
+        y: getEffectiveYTranslation({
+            canvasSize,
+            compositionHeight,
+            scale,
+            translation,
+        }),
+    };
+};
+exports.getEffectiveTranslation = getEffectiveTranslation;
+const getCenterPointWhileScrolling = ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }) => {
+    const mouseLeft = clientX - size.left;
+    const mouseTop = clientY - size.top;
+    const contentLeftPoint = size.width / 2 - (compositionWidth * scale) / 2 - translation.x;
+    const contentTopPoint = size.height / 2 - (compositionHeight * scale) / 2 - translation.y;
+    const offsetFromVideoLeft = Math.min(compositionWidth, Math.max(0, (mouseLeft - contentLeftPoint) / scale));
+    const offsetFromVideoTop = Math.min(compositionHeight, Math.max(0, (mouseTop - contentTopPoint) / scale));
+    return {
+        centerX: offsetFromVideoLeft,
+        centerY: offsetFromVideoTop,
+    };
+};
+exports.getCenterPointWhileScrolling = getCenterPointWhileScrolling;

package/dist/editor/helpers/is-current-selected-still.d.ts

@@ -1 +1,5 @@
 export declare const useIsStill: () => boolean;
+export declare const useDimensions: () => {
+    width: number;
+    height: number;
+} | null;

package/dist/editor/helpers/is-current-selected-still.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsStill = void 0;
+exports.useDimensions = exports.useIsStill = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const is_composition_still_1 = require("./is-composition-still");
@@ -13,3 +13,17 @@ const useIsStill = () => {
     return (0, is_composition_still_1.isCompositionStill)(selected);
 };
 exports.useIsStill = useIsStill;
+const useDimensions = () => {
+    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selected = (0, react_1.useMemo)(() => compositions.find((c) => c.id === currentComposition), [compositions, currentComposition]);
+    return (0, react_1.useMemo)(() => {
+        if (!selected) {
+            return null;
+        }
+        return {
+            width: selected.width,
+            height: selected.height,
+        };
+    }, [selected]);
+};
+exports.useDimensions = useDimensions;

package/dist/editor/helpers/normalize-wheel.d.ts

@@ -0,0 +1,5 @@
+export declare function normalizeWheel(event: WheelEvent): {
+    deltaX: number;
+    deltaY: number;
+    deltaZ: number;
+};

package/dist/editor/helpers/normalize-wheel.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeWheel = void 0;
+// Taken from https://github.com/tldraw/tldraw/blob/254dfdfd77c4abde53240f7d8ca3558e08688493/packages/core/src/hooks/useZoomEvents.ts which is adapted from https://stackoverflow.com/a/13650579
+const MAX_ZOOM_STEP = 10;
+function normalizeWheel(event) {
+    const { deltaY, deltaX } = event;
+    let deltaZ = 0;
+    if (event.ctrlKey || event.metaKey) {
+        const signY = Math.sign(event.deltaY);
+        const absDeltaY = Math.abs(event.deltaY);
+        let dy = deltaY;
+        if (absDeltaY > MAX_ZOOM_STEP) {
+            dy = MAX_ZOOM_STEP * signY;
+        }
+        deltaZ = dy;
+    }
+    return { deltaX, deltaY, deltaZ };
+}
+exports.normalizeWheel = normalizeWheel;

package/dist/editor/helpers/normalize-zoom.d.ts

@@ -0,0 +1 @@
+declare function normalizeWheel(event: WheelEvent): number[];

package/dist/editor/helpers/normalize-zoom.js

@@ -0,0 +1,16 @@
+"use strict";
+// Adapted from https://stackoverflow.com/a/13650579
+function normalizeWheel(event) {
+    const { deltaY, deltaX } = event;
+    let deltaZ = 0;
+    if (event.ctrlKey || event.metaKey) {
+        const signY = Math.sign(event.deltaY);
+        const absDeltaY = Math.abs(event.deltaY);
+        let dy = deltaY;
+        if (absDeltaY > MAX_ZOOM_STEP) {
+            dy = MAX_ZOOM_STEP * signY;
+        }
+        deltaZ = dy;
+    }
+    return [deltaX, deltaY, deltaZ];
+}

package/dist/editor/state/preview-size.d.ts

@@ -1,10 +1,13 @@
-/// <reference types="react" />
 import type { PreviewSize } from '@remotion/player';
+import React from 'react';
 declare type PreviewSizeCtx = {
     size: PreviewSize;
     setSize: (cb: (oldSize: PreviewSize) => PreviewSize) => void;
 };
 export declare const persistPreviewSizeOption: (option: PreviewSize) => void;
 export declare const loadPreviewSizeOption: () => PreviewSize;
-export declare const PreviewSizeContext: import("react").Context<PreviewSizeCtx>;
+export declare const PreviewSizeContext: React.Context<PreviewSizeCtx>;
+export declare const PreviewSizeProvider: React.FC<{
+    children: React.ReactNode;
+}>;
 export {};

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

@@ -1,20 +1,54 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreviewSizeContext = exports.loadPreviewSizeOption = exports.persistPreviewSizeOption = void 0;
+exports.PreviewSizeProvider = exports.PreviewSizeContext = exports.loadPreviewSizeOption = exports.persistPreviewSizeOption = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const key = 'remotion.previewSize';
 const persistPreviewSizeOption = (option) => {
-    localStorage.setItem('previewSize', String(option));
+    localStorage.setItem(key, JSON.stringify(option));
 };
 exports.persistPreviewSizeOption = persistPreviewSizeOption;
 const loadPreviewSizeOption = () => {
-    const item = localStorage.getItem('previewSize');
+    const item = localStorage.getItem(key);
     if (item === null) {
-        return 'auto';
+        return {
+            size: 'auto',
+            translation: {
+                x: 0,
+                y: 0,
+            },
+        };
     }
-    return item;
+    return JSON.parse(item);
 };
 exports.loadPreviewSizeOption = loadPreviewSizeOption;
 exports.PreviewSizeContext = (0, react_1.createContext)({
     setSize: () => undefined,
     size: (0, exports.loadPreviewSizeOption)(),
 });
+const PreviewSizeProvider = ({ children }) => {
+    const [size, setSizeState] = (0, react_1.useState)(() => (0, exports.loadPreviewSizeOption)());
+    const [translation, setTranslation] = (0, react_1.useState)(() => {
+        return {
+            x: 0,
+            y: 0,
+        };
+    });
+    const setSize = (0, react_1.useCallback)((newValue) => {
+        setSizeState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, exports.persistPreviewSizeOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const previewSizeCtx = (0, react_1.useMemo)(() => {
+        return {
+            size,
+            setSize,
+            translation,
+            setTranslation,
+        };
+    }, [setSize, size, translation, setTranslation]);
+    return ((0, jsx_runtime_1.jsx)(exports.PreviewSizeContext.Provider, { value: previewSizeCtx, children: children }));
+};
+exports.PreviewSizeProvider = PreviewSizeProvider;

package/dist/smooth-zoom.d.ts

@@ -0,0 +1,4 @@
+export declare const MIN_ZOOM = 0.05;
+export declare const MAX_ZOOM = 10;
+export declare const smoothenZoom: (input: number) => number;
+export declare const unsmoothenZoom: (input: number) => number;

package/dist/smooth-zoom.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unsmoothenZoom = exports.smoothenZoom = exports.MAX_ZOOM = exports.MIN_ZOOM = void 0;
+const BASE = Math.E / 4;
+exports.MIN_ZOOM = 0.05;
+exports.MAX_ZOOM = 10;
+function logN(val) {
+    return Math.log(val) / Math.log(BASE);
+}
+const smoothenZoom = (input) => {
+    return BASE ** (input - 1);
+};
+exports.smoothenZoom = smoothenZoom;
+const unsmoothenZoom = (input) => {
+    if (input < 0) {
+        return exports.MAX_ZOOM;
+    }
+    return Math.min(exports.MAX_ZOOM, Math.max(exports.MIN_ZOOM, logN(input) + 1));
+};
+exports.unsmoothenZoom = unsmoothenZoom;

package/package.json

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