@remotion/cli 4.0.0-alpha.4 → 4.0.0-alpha4

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

@@ -22,7 +22,9 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
     if (values[0].type === 'divider') {
         throw new Error('first value cant be divide');
     }
-    const [selectedItem, setSelectedItem] = (0, react_1.useState)(typeof preselectIndex === 'number' ? values[preselectIndex].id : null);
+    const [selectedItem, setSelectedItem] = (0, react_1.useState)(typeof preselectIndex === 'number'
+        ? values[preselectIndex].id
+        : null);
     const onEscape = (0, react_1.useCallback)(() => {
         onHide();
     }, [onHide]);
@@ -80,6 +82,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         if (item.subMenu) {
             return setSubMenuActivated('without-mouse');
         }
+        onHide();
         item.onClick(item.id);
     }, [onHide, selectedItem, values]);
     const onArrowRight = (0, react_1.useCallback)(() => {
@@ -104,42 +107,49 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             key: 'Escape',
             callback: onEscape,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const rightBinding = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowRight',
             commandCtrlKey: false,
             callback: onArrowRight,
+            preventDefault: true,
         });
         const leftBinding = keybindings.registerKeybinding({
             event: 'keydown',
             commandCtrlKey: false,
             key: 'ArrowLeft',
             callback: onPreviousMenu,
+            preventDefault: true,
         });
         const downBinding = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowDown',
             commandCtrlKey: false,
             callback: onArrowDown,
+            preventDefault: true,
         });
         const upBinding = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowUp',
             callback: onArrowUp,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const enterBinding = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'Enter',
             callback: onEnter,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const spaceBinding = keybindings.registerKeybinding({
             event: 'keyup',
             key: ' ',
             callback: onEnter,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         return () => {
             escapeBinding.unregister();

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

@@ -9,13 +9,15 @@ const InputDragger_1 = require("./InputDragger");
 const new_comp_layout_1 = require("./new-comp-layout");
 const ValidationMessage_1 = require("./ValidationMessage");
 const NewCompDuration = ({ durationInFrames, setDurationInFrames, fps }) => {
-    const onDurationInFramesChanged = (0, react_1.useCallback)((e) => {
-        setDurationInFrames(String(Number(e.target.value)));
+    const onDurationInFramesChanged = (0, react_1.useCallback)((newValue) => {
+        setDurationInFrames(String(Number(newValue)));
     }, [setDurationInFrames]);
     const onDurationChangedDirectly = (0, react_1.useCallback)((newVal) => {
         setDurationInFrames(String(newVal));
     }, [setDurationInFrames]);
     const compDurationErrMessage = (0, validate_new_comp_data_1.validateCompositionDuration)(durationInFrames);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: " Duration in frames" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, max: 100000000, onValueChange: onDurationChangedDirectly }), compDurationErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compDurationErrMessage })) : null] }), (0, jsx_runtime_1.jsxs)("span", { style: new_comp_layout_1.rightLabel, children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: " Duration in frames" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, 
+                                // Hitting Promise.all() limit in Chrome
+                                max: 300000, onValueChange: onDurationChangedDirectly }), compDurationErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compDurationErrMessage })) : null] }), (0, jsx_runtime_1.jsxs)("span", { style: new_comp_layout_1.rightLabel, children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] })] }) }) }));
 };
 exports.NewCompDuration = NewCompDuration;

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

@@ -84,10 +84,10 @@ const NewComposition = (props) => {
     const onTypeChanged = (0, react_1.useCallback)((newType) => {
         setType(newType);
     }, []);
-    const onWidthChanged = (0, react_1.useCallback)((e) => {
+    const onWidthChanged = (0, react_1.useCallback)((newValue) => {
         setSize((s) => {
             const { height } = s;
-            const newWidth = Number(e.target.value);
+            const newWidth = Number(newValue);
             return {
                 height: lockedAspectRatio === null
                     ? height
@@ -118,10 +118,10 @@ const NewComposition = (props) => {
             };
         });
     }, [lockedAspectRatio]);
-    const onHeightChanged = (0, react_1.useCallback)((e) => {
+    const onHeightChanged = (0, react_1.useCallback)((newValue) => {
         setSize((s) => {
             const { width } = s;
-            const newHeight = Number(e.target.value);
+            const newHeight = Number(newValue);
             return {
                 width: lockedAspectRatio === null
                     ? width
@@ -147,6 +147,7 @@ const NewComposition = (props) => {
                 keyHint: null,
                 leftItem: String(frameRate) === selectedFrameRate ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
+                quickSwitcherLabel: null,
             };
         });
     }, [onFpsChange, selectedFrameRate]);
@@ -164,6 +165,7 @@ const NewComposition = (props) => {
                 subMenu: null,
                 type: 'item',
                 value: 'composition',
+                quickSwitcherLabel: null,
             },
             {
                 id: 'still',
@@ -174,10 +176,11 @@ const NewComposition = (props) => {
                 subMenu: null,
                 type: 'item',
                 value: 'still',
+                quickSwitcherLabel: null,
             },
         ];
     }, [onTypeChanged]);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "New composition" }), (0, jsx_runtime_1.jsxs)("div", { style: panelContent, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.inputArea, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Name" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name" }), compNameErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compNameErrMessage })) : null] })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width (px)", onChange: onWidthChanged, name: "width", step: 2, min: 2, max: 100000000, onValueChange: onWidthDirectlyChanged }), compWidthErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compWidthErrMessage })) : null] })] }) }) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onChange: onHeightChanged, placeholder: "Height (px)", name: "height", step: 2, min: 2, max: 100000000, onValueChange: onHeightDirectlyChanged }), compHeightErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compHeightErrMessage })) : null] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(size.width), height: Number(size.height), aspectRatioLocked: lockedAspectRatio, setAspectRatioLocked: setAspectRatioLocked }) })] }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames })) : null, (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", {}), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Framerate" }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Framerate", style: comboBoxStyle, values: items, selectedId: selectedFrameRate })] })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: panelRight, children: [(0, jsx_runtime_1.jsx)("pre", { style: pre, children: (0, NewCompCode_1.getNewCompositionCode)({
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "New composition" }), (0, jsx_runtime_1.jsxs)("div", { style: panelContent, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.inputArea, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Name" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name" }), compNameErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compNameErrMessage })) : null] })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width (px)", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, max: 100000000, onValueChange: onWidthDirectlyChanged }), compWidthErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compWidthErrMessage })) : null] })] }) }) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height (px)", name: "height", step: 2, required: true, min: 2, max: 100000000, onValueChange: onHeightDirectlyChanged }), compHeightErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compHeightErrMessage })) : null] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(size.width), height: Number(size.height), aspectRatioLocked: lockedAspectRatio, setAspectRatioLocked: setAspectRatioLocked }) })] }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames })) : null, (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", {}), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Framerate" }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Framerate", style: comboBoxStyle, values: items, selectedId: selectedFrameRate })] })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: panelRight, children: [(0, jsx_runtime_1.jsx)("pre", { style: pre, children: (0, NewCompCode_1.getNewCompositionCode)({
                                     type,
                                     durationInFrames: Number(durationInFrames),
                                     fps: Number(selectedFrameRate),

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

@@ -1,3 +1,5 @@
 import React from 'react';
+declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemotionInput: (props: React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -33,7 +33,7 @@ const RemInputForwardRef = (props, ref) => {
     }, [isFocused, isHovered, props.style]);
     (0, react_1.useImperativeHandle)(ref, () => {
         return inputRef.current;
-    });
+    }, []);
     (0, react_1.useEffect)(() => {
         if (!inputRef.current) {
             return;

package/dist/editor/components/Notifications/NotificationCenter.js

@@ -32,7 +32,7 @@ const NotificationCenter = () => {
         return {
             addNotification,
         };
-    });
+    }, [addNotification]);
     return ((0, jsx_runtime_1.jsx)("div", { style: container, children: notifications.map((n) => {
             return ((0, jsx_runtime_1.jsx)(Notification_1.Notification, { created: n.created, duration: n.duration, id: n.id, onRemove: onRemove, children: n.content }, n.id));
         }) }));

package/dist/editor/components/Notifications/ServerDisconnected.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const serverDisconnectedRef: React.RefObject<{
+    setServerDisconnected: () => void;
+    setServerConnected: () => void;
+}>;
+export declare const ServerDisconnected: React.FC;

package/dist/editor/components/Notifications/ServerDisconnected.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServerDisconnected = exports.serverDisconnectedRef = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const container = {
+    position: 'fixed',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-start',
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    flexDirection: 'column',
+    padding: 30,
+    pointerEvents: 'none',
+    backgroundColor: 'transparent',
+    fontFamily: 'SF Pro, Arial, Helvetica, sans-serif',
+};
+const message = {
+    backgroundColor: '#e74c3c',
+    color: 'white',
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingTop: 12,
+    paddingBottom: 12,
+    borderRadius: 4,
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.4)',
+    lineHeight: 1.5,
+};
+const inlineCode = {
+    fontSize: 16,
+    fontFamily: 'monospace',
+};
+exports.serverDisconnectedRef = (0, react_1.createRef)();
+let pageIsGoingToReload = false;
+window.addEventListener('beforeunload', () => {
+    pageIsGoingToReload = true;
+});
+const ServerDisconnected = () => {
+    const [serverDisconnected, setServerDisconnected] = (0, react_1.useState)(false);
+    (0, react_1.useImperativeHandle)(exports.serverDisconnectedRef, () => {
+        return {
+            setServerDisconnected: () => {
+                setServerDisconnected(true);
+            },
+            setServerConnected: () => {
+                setServerDisconnected(false);
+            },
+        };
+    }, []);
+    if (!serverDisconnected) {
+        return null;
+    }
+    if (pageIsGoingToReload) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsxs)("div", { style: message, children: ["The preview server has disconnected. ", (0, jsx_runtime_1.jsx)("br", {}), window.remotion_previewServerCommand ? ((0, jsx_runtime_1.jsxs)("span", { children: ["Run", ' ', (0, jsx_runtime_1.jsx)("code", { style: inlineCode, children: window.remotion_previewServerCommand }), ' ', "to run it again."] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Fast refresh will not work." }))] }) }));
+};
+exports.ServerDisconnected = ServerDisconnected;

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");
@@ -14,15 +13,14 @@ 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 { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
-    const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const video = remotion_1.Internals.useVideo();
     player_1.PlayerInternals.usePlayback({
         loop,
         playbackRate,
@@ -30,7 +28,7 @@ const PlayPause = ({ playbackRate, loop }) => {
         inFrame,
         outFrame,
     });
-    const { playing, play, pause, pauseAndReturnToPlayStart, 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) {
@@ -48,41 +46,65 @@ const PlayPause = ({ playbackRate, loop }) => {
     }, [pause, play, playing]);
     const onEnter = (0, react_1.useCallback)((e) => {
         if (playing) {
+            // Don't prevent keyboard navigation
+            e.preventDefault();
             pauseAndReturnToPlayStart();
         }
-        e.preventDefault();
     }, [pauseAndReturnToPlayStart, 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;
-        }
         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: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, (0, imperative_state_1.getCurrentFrame)() + 1),
+            });
         }
         e.preventDefault();
-    }, [frameForward, seek, video]);
+    }, [frameForward, seek]);
     const oneFrameBack = (0, react_1.useCallback)(() => {
         frameBack(1);
     }, [frameBack]);
@@ -93,11 +115,8 @@ 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({
@@ -105,36 +124,42 @@ const PlayPause = ({ playbackRate, loop }) => {
             key: 'ArrowLeft',
             callback: onArrowLeft,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const arrowRight = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowRight',
             callback: onArrowRight,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const space = keybindings.registerKeybinding({
             event: 'keydown',
             key: ' ',
             callback: onSpace,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const enter = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'enter',
             callback: onEnter,
             commandCtrlKey: false,
+            preventDefault: false,
         });
         const a = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'a',
             callback: jumpToStart,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const e = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'e',
             callback: jumpToEnd,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         return () => {
             arrowLeft.unregister();
@@ -156,7 +181,7 @@ const PlayPause = ({ playbackRate, loop }) => {
     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.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,19 +31,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 L: ' + prevPlaybackRate);
+            return 4;
         });
         play();
     }, [play, playing, setPlaybackRate]);
@@ -59,18 +47,21 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             key: 'j',
             callback: onJKey,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const kKey = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'k',
             callback: onKKey,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         const lKey = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'l',
             callback: onLKey,
             commandCtrlKey: false,
+            preventDefault: true,
         });
         return () => {
             jKey.unregister();

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,
@@ -42,11 +44,15 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
                 keyHint: null,
                 leftItem: String(playbackRate) === String(newPlaybackRate) ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
                 subMenu: null,
+                quickSwitcherLabel: null,
             };
         });
         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;
 }>;