@remotion/cli 4.0.0-offthread.9 → 4.0.0-prefetch.7

package/dist/editor/components/PlayPause.js

@@ -4,7 +4,6 @@ exports.PlayPause = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const jump_to_start_1 = require("../icons/jump-to-start");
@@ -12,20 +11,24 @@ const pause_1 = require("../icons/pause");
 const play_1 = require("../icons/play");
 const step_back_1 = require("../icons/step-back");
 const step_forward_1 = require("../icons/step-forward");
+const in_out_1 = require("../state/in-out");
 const ControlButton_1 = require("./ControlButton");
+const imperative_state_1 = require("./Timeline/imperative-state");
+const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
 const forwardBackStyle = {
     height: 16,
     color: 'white',
 };
 const PlayPause = ({ playbackRate, loop }) => {
-    var _a;
-    const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const video = remotion_1.Internals.useVideo();
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     player_1.PlayerInternals.usePlayback({
         loop,
         playbackRate,
+        moveToBeginningWhenEnded: true,
+        inFrame,
+        outFrame,
     });
-    const { playing, play, pause, frameBack, seek, frameForward, isLastFrame } = player_1.PlayerInternals.usePlayer();
+    const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, isLastFrame, isFirstFrame, } = player_1.PlayerInternals.usePlayer();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     (0, react_1.useEffect)(() => {
         if (isStill) {
@@ -41,37 +44,66 @@ const PlayPause = ({ playbackRate, loop }) => {
         }
         e.preventDefault();
     }, [pause, play, playing]);
-    const videoFps = (_a = video === null || video === void 0 ? void 0 : video.fps) !== null && _a !== void 0 ? _a : null;
-    const onArrowLeft = (0, react_1.useCallback)((e) => {
-        if (!videoFps) {
-            return null;
+    const onEnter = (0, react_1.useCallback)((e) => {
+        if (playing) {
+            pauseAndReturnToPlayStart();
         }
         e.preventDefault();
+    }, [pauseAndReturnToPlayStart, playing]);
+    const onArrowLeft = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
         if (e.altKey) {
             seek(0);
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-left',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: 0,
+            });
         }
         else if (e.shiftKey) {
-            frameBack(videoFps);
+            frameBack((0, imperative_state_1.getCurrentFps)());
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-left',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: Math.max(0, (0, imperative_state_1.getCurrentFrame)() - (0, imperative_state_1.getCurrentFps)()),
+            });
         }
         else {
             frameBack(1);
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-left',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: Math.max(0, (0, imperative_state_1.getCurrentFrame)() - 1),
+            });
         }
-    }, [frameBack, seek, videoFps]);
+    }, [frameBack, seek]);
     const onArrowRight = (0, react_1.useCallback)((e) => {
-        if (!video) {
-            return null;
-        }
         if (e.altKey) {
-            seek(video.durationInFrames - 1);
+            seek((0, imperative_state_1.getCurrentDuration)() - 1);
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-right',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)() - 1,
+                frame: (0, imperative_state_1.getCurrentDuration)() - 1,
+            });
         }
         else if (e.shiftKey) {
-            frameForward(video.fps);
+            frameForward((0, imperative_state_1.getCurrentFps)());
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-right',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, (0, imperative_state_1.getCurrentFrame)() + (0, imperative_state_1.getCurrentFps)()),
+            });
         }
         else {
             frameForward(1);
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-right',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: (0, imperative_state_1.getCurrentFrame)() + 1,
+            });
         }
         e.preventDefault();
-    }, [frameForward, seek, video]);
+    }, [frameForward, seek]);
     const oneFrameBack = (0, react_1.useCallback)(() => {
         frameBack(1);
     }, [frameBack]);
@@ -82,30 +114,67 @@ const PlayPause = ({ playbackRate, loop }) => {
         seek(0);
     }, [seek]);
     const jumpToEnd = (0, react_1.useCallback)(() => {
-        if (!video) {
-            return;
-        }
-        seek(video.durationInFrames - 1);
-    }, [seek, video]);
+        seek((0, imperative_state_1.getCurrentDuration)() - 1);
+    }, [seek]);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
-        const arrowLeft = keybindings.registerKeybinding('keydown', 'ArrowLeft', onArrowLeft);
-        const arrowRight = keybindings.registerKeybinding('keydown', 'ArrowRight', onArrowRight);
-        const space = keybindings.registerKeybinding('keydown', ' ', onSpace);
-        const a = keybindings.registerKeybinding('keydown', 'a', jumpToStart);
-        const e = keybindings.registerKeybinding('keydown', 'e', jumpToEnd);
+        const arrowLeft = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowLeft',
+            callback: onArrowLeft,
+            commandCtrlKey: false,
+        });
+        const arrowRight = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowRight',
+            callback: onArrowRight,
+            commandCtrlKey: false,
+        });
+        const space = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: ' ',
+            callback: onSpace,
+            commandCtrlKey: false,
+        });
+        const enter = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'enter',
+            callback: onEnter,
+            commandCtrlKey: false,
+        });
+        const a = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'a',
+            callback: jumpToStart,
+            commandCtrlKey: false,
+        });
+        const e = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'e',
+            callback: jumpToEnd,
+            commandCtrlKey: false,
+        });
         return () => {
             arrowLeft.unregister();
             arrowRight.unregister();
             space.unregister();
+            enter.unregister();
             a.unregister();
             e.unregister();
         };
-    }, [jumpToEnd, jumpToStart, keybindings, onArrowLeft, onArrowRight, onSpace]);
+    }, [
+        jumpToEnd,
+        jumpToStart,
+        keybindings,
+        onArrowLeft,
+        onArrowRight,
+        onEnter,
+        onSpace,
+    ]);
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: frame === 0, onClick: jumpToStart, children: (0, jsx_runtime_1.jsx)(jump_to_start_1.JumpToStart, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: frame === 0, onClick: oneFrameBack, children: (0, jsx_runtime_1.jsx)(step_back_1.StepBack, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', disabled: !video, onClick: playing ? pause : play, children: playing ? ((0, jsx_runtime_1.jsx)(pause_1.Pause, { style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: isFirstFrame, onClick: jumpToStart, children: (0, jsx_runtime_1.jsx)(jump_to_start_1.JumpToStart, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: isFirstFrame, onClick: oneFrameBack, children: (0, jsx_runtime_1.jsx)(step_back_1.StepBack, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, children: playing ? ((0, jsx_runtime_1.jsx)(pause_1.Pause, { style: {
                         height: 14,
                         width: 14,
                         color: 'white',

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export declare const PlaybackKeyboardShortcutsManager: React.FC<{
     setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;
 }>;

package/dist/editor/components/PlaybackKeyboardShortcutsManager.js

@@ -12,19 +12,13 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             if (!playing) {
                 return -1;
             }
-            if (prevPlaybackRate > 0) {
+            if (prevPlaybackRate > -1) {
                 return -1;
             }
-            if (prevPlaybackRate === -1) {
+            if (prevPlaybackRate > -2) {
                 return -2;
             }
-            if (prevPlaybackRate === -2) {
-                return -4;
-            }
-            if (prevPlaybackRate === -4) {
-                return -4;
-            }
-            throw new Error('unexpected previous playrate when pressing J: ' + prevPlaybackRate);
+            return -4;
         });
         play();
     }, [play, playing, setPlaybackRate]);
@@ -37,26 +31,35 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             if (!playing) {
                 return 1;
             }
-            if (prevPlaybackRate < 0) {
+            if (prevPlaybackRate < 1) {
                 return 1;
             }
-            if (prevPlaybackRate === 1) {
+            if (prevPlaybackRate < 2) {
                 return 2;
             }
-            if (prevPlaybackRate === 2) {
-                return 4;
-            }
-            if (prevPlaybackRate === 4) {
-                return 4;
-            }
-            throw new Error('unexpected previous playrate when pressing L: ' + prevPlaybackRate);
+            return 4;
         });
         play();
     }, [play, playing, setPlaybackRate]);
     (0, react_1.useEffect)(() => {
-        const jKey = keybindings.registerKeybinding('keydown', 'j', onJKey);
-        const kKey = keybindings.registerKeybinding('keydown', 'k', onKKey);
-        const lKey = keybindings.registerKeybinding('keydown', 'l', onLKey);
+        const jKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'j',
+            callback: onJKey,
+            commandCtrlKey: false,
+        });
+        const kKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'k',
+            callback: onKKey,
+            commandCtrlKey: false,
+        });
+        const lKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'l',
+            callback: onLKey,
+            commandCtrlKey: false,
+        });
         return () => {
             jKey.unregister();
             kKey.unregister();

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

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

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 { Size } from '@remotion/player';
+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,8 +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 LoadingIndicator_1 = require("./LoadingIndicator");
-const checkerboardSize = 49;
+exports.checkerboardSize = 49;
 const containerStyle = (options) => {
     return {
         transform: `scale(${options.scale})`,
@@ -21,21 +20,20 @@ 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 }) => {
-    var _a;
     const { size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
-    const video = remotion_1.Internals.useVideo();
+    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 {
@@ -44,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,
@@ -66,9 +72,14 @@ const Inner = ({ canvasSize }) => {
         xCorrection,
         yCorrection,
     ]);
-    const Component = video ? video.component : null;
-    const inputProps = (0, remotion_1.getInputProps)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(LoadingIndicator_1.Loading, {}), children: (0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: style, children: Component ? ((0, jsx_runtime_1.jsx)(Component, { ...((_a = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _a !== void 0 ? _a : {}), ...inputProps })) : null }) }) }));
+    (0, react_1.useEffect)(() => {
+        const { current } = portalContainer;
+        current === null || current === void 0 ? void 0 : current.appendChild(remotion_1.Internals.portalNode());
+        return () => {
+            current === null || current === void 0 ? void 0 : current.removeChild(remotion_1.Internals.portalNode());
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { ref: portalContainer, style: style }) }));
 };
 const VideoPreview = ({ canvasSize }) => {
     const config = remotion_1.Internals.useUnsafeVideoConfig();

package/dist/editor/components/PreviewToolbar.js

@@ -4,6 +4,7 @@ exports.PreviewToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const loop_1 = require("../state/loop");
 const CheckboardToggle_1 = require("./CheckboardToggle");
@@ -17,8 +18,8 @@ const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
 const PlayPause_1 = require("./PlayPause");
 const RichTimelineToggle_1 = require("./RichTimelineToggle");
 const SizeSelector_1 = require("./SizeSelector");
+const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
-const TimeValue_1 = require("./TimeValue");
 const container = {
     display: 'flex',
     justifyContent: 'center',
@@ -27,6 +28,7 @@ const container = {
     paddingBottom: 2,
     alignItems: 'center',
     flexDirection: 'row',
+    background: colors_1.BACKGROUND,
 };
 const sideContainer = {
     width: 300,
@@ -43,6 +45,6 @@ const PreviewToolbar = () => {
     const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     const { setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const [loop, setLoop] = (0, react_1.useState)((0, loop_1.loadLoopOption)());
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimeValue_1.TimeValue, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), (0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(RichTimelineToggle_1.RichTimelineToggle, {}), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)("div", { style: padding })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), (0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(RichTimelineToggle_1.RichTimelineToggle, {}), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)("div", { style: padding })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

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 { PreviewSize } from '@remotion/player';
+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/components/Splitter/SplitterContainer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SplitterOrientation } from './SplitterContext';
+import type { SplitterOrientation } from './SplitterContext';
 export declare const SplitterContainer: React.FC<{
     orientation: SplitterOrientation;
     maxFlex: number;