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

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemInputTypeColor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+const RemInput_1 = require("./RemInput");
+const inputBaseStyle = {
+    padding: 0,
+    borderStyle: 'solid',
+    borderWidth: 1,
+};
+const RemInputTypeColorForwardRef = ({ status, ...props }, ref) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const style = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            backgroundColor: colors_1.INPUT_BACKGROUND,
+            ...inputBaseStyle,
+            borderColor: (0, RemInput_1.getInputBorderColor)({ isFocused, isHovered, status }),
+            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
+        };
+    }, [isFocused, isHovered, props.style, status]);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return inputRef.current;
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!inputRef.current) {
+            return;
+        }
+        const { current } = inputRef;
+        const onFocus = () => setIsFocused(true);
+        const onBlur = () => setIsFocused(false);
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        current.addEventListener('focus', onFocus);
+        current.addEventListener('blur', onBlur);
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            current.removeEventListener('focus', onFocus);
+            current.removeEventListener('blur', onBlur);
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [inputRef]);
+    return ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "color", tabIndex: tabIndex, ...props, style: style }));
+};
+exports.RemInputTypeColor = (0, react_1.forwardRef)(RemInputTypeColorForwardRef);

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

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
+    status: 'error' | 'warning' | 'ok';
+};
+export declare const inputBaseStyle: React.CSSProperties;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

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

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemTextarea = exports.inputBaseStyle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const RemInput_1 = require("../NewComposition/RemInput");
+exports.inputBaseStyle = {
+    padding: `${RemInput_1.INPUT_HORIZONTAL_PADDING}px 10px`,
+    color: 'white',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    fontSize: 14,
+    resize: 'none',
+    overflowX: 'hidden',
+};
+const RemTextareaFRFunction = ({ status, ...props }, ref) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return inputRef.current;
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            backgroundColor: colors_1.INPUT_BACKGROUND,
+            ...exports.inputBaseStyle,
+            width: '100%',
+            borderColor: (0, RemInput_1.getInputBorderColor)({ isFocused, isHovered, status }),
+            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
+        };
+    }, [isFocused, isHovered, props.style, status]);
+    (0, react_1.useEffect)(() => {
+        if (!inputRef.current) {
+            return;
+        }
+        const { current } = inputRef;
+        const onFocus = () => setIsFocused(true);
+        const onBlur = () => setIsFocused(false);
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        const onKeyDown = (e) => {
+            if (!inputRef.current) {
+                return;
+            }
+            if (inputRef.current !== document.activeElement) {
+                return;
+            }
+            if (e.code === 'Tab') {
+                e.preventDefault();
+                // Always match up with value in JSON.stringify(content, null, 2)
+                document.execCommand('insertText', false, ' '.repeat(2));
+            }
+            if (e.code === 'Enter') {
+                e.preventDefault();
+                const { selectionStart, selectionEnd, value } = inputRef.current;
+                if (selectionStart !== selectionEnd) {
+                    return;
+                }
+                let prevNewline = selectionStart;
+                for (let i = selectionStart - 1; i >= 0; i--) {
+                    if (value[i] === '\n') {
+                        break;
+                    }
+                    prevNewline = i;
+                }
+                const currentLine = value.substring(prevNewline, selectionStart);
+                const trimmed = currentLine.trim();
+                const difference = currentLine.length - trimmed.length;
+                document.execCommand('insertText', false, '\n' + ' '.repeat(difference));
+            }
+        };
+        current.addEventListener('focus', onFocus);
+        current.addEventListener('blur', onBlur);
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        current.addEventListener('keydown', onKeyDown);
+        return () => {
+            current.removeEventListener('focus', onFocus);
+            current.removeEventListener('blur', onBlur);
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+            current.removeEventListener('keydown', onKeyDown);
+        };
+    }, [inputRef]);
+    return ((0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, tabIndex: tabIndex, ...props, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, style: style }));
+};
+exports.RemTextarea = (0, react_1.forwardRef)(RemTextareaFRFunction);

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

@@ -1,4 +1,8 @@
+import type { SVGProps } from 'react';
 import React from 'react';
+export declare const WarningTriangle: React.FC<SVGProps<SVGSVGElement>>;
 export declare const ValidationMessage: React.FC<{
     message: string;
+    align: 'flex-start' | 'flex-end';
+    type: 'warning' | 'error';
 }>;

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

@@ -1,23 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ValidationMessage = void 0;
+exports.ValidationMessage = exports.WarningTriangle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const layout_1 = require("../layout");
-const Triangle = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
+const WarningTriangle = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
 };
+exports.WarningTriangle = WarningTriangle;
 const style = {
-    width: 11,
-    height: 11,
+    width: 12,
+    height: 12,
+    flexShrink: 0,
 };
 const container = {
-    marginTop: 5,
+    maxWidth: 500,
 };
 const label = {
     fontSize: 13,
-    flex: 1,
+    color: 'white',
+    fontFamily: 'sans-serif',
 };
-const ValidationMessage = ({ message }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(Triangle, { style: style, color: "#f1c40f" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: message })] }) }));
+const ValidationMessage = ({ message, align, type }) => {
+    const finalStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...style,
+            fill: type === 'warning' ? colors_1.WARNING_COLOR : colors_1.FAIL_COLOR,
+        };
+    }, [type]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", justify: align, children: [(0, jsx_runtime_1.jsx)(exports.WarningTriangle, { style: finalStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: message })] }) }));
 };
 exports.ValidationMessage = ValidationMessage;

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

@@ -9,5 +9,6 @@ declare type TNotificationCenter = {
     addNotification: (notification: TNotification) => void;
 };
 export declare const notificationCenter: React.RefObject<TNotificationCenter>;
+export declare const sendErrorNotification: (content: React.ReactNode) => void;
 export declare const NotificationCenter: React.FC;
 export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NotificationCenter = exports.notificationCenter = void 0;
+exports.NotificationCenter = exports.sendErrorNotification = exports.notificationCenter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Notification_1 = require("./Notification");
@@ -16,6 +16,16 @@ const container = {
     backgroundColor: 'transparent',
 };
 exports.notificationCenter = (0, react_1.createRef)();
+const sendErrorNotification = (content) => {
+    var _a;
+    (_a = exports.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+        content,
+        duration: 2000,
+        created: Date.now(),
+        id: String(Math.random()).replace('0.', ''),
+    });
+};
+exports.sendErrorNotification = sendErrorNotification;
 const NotificationCenter = () => {
     const [notifications, setNotifications] = (0, react_1.useState)([]);
     const onRemove = (0, react_1.useCallback)((id) => {
@@ -32,7 +42,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,2 @@
+import React from 'react';
+export declare const ServerDisconnected: React.FC;

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServerDisconnected = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
+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',
+};
+let pageIsGoingToReload = false;
+window.addEventListener('beforeunload', () => {
+    pageIsGoingToReload = true;
+});
+const ServerDisconnected = () => {
+    const ctx = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    if (ctx.type !== 'disconnected') {
+        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 studio server has disconnected. ", (0, jsx_runtime_1.jsx)("br", {}), window.remotion_studioServerCommand ? ((0, jsx_runtime_1.jsxs)("span", { children: ["Run", ' ', (0, jsx_runtime_1.jsx)("code", { style: inlineCode, children: window.remotion_studioServerCommand }), ' ', "to run it again."] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Fast refresh will not work." }))] }) }));
+};
+exports.ServerDisconnected = ServerDisconnected;

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

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

package/dist/editor/components/OpenEditorButton.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenEditorButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const svgStyle = {
+    width: '11px',
+    height: '11px',
+};
+const buttonStyle = {
+    border: 'none',
+    width: '25px',
+    height: '25px',
+};
+const OpenEditorButton = () => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const svgFillColor = (0, react_1.useMemo)(() => {
+        return hovered ? 'white' : colors_1.LIGHT_TEXT;
+    }, [hovered]);
+    const handleClick = async () => {
+        await (0, open_in_editor_1.openInEditor)({
+            originalFileName: `${window.remotion_cwd}`,
+            originalLineNumber: 1,
+            originalColumnNumber: 1,
+            originalFunctionName: null,
+            originalScriptCode: null,
+        })
+            .then((res) => res.json())
+            .then(({ success }) => {
+            if (!success) {
+                (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
+            }
+        })
+            .catch((err) => {
+            console.error(err);
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
+        });
+    };
+    const buttonTooltip = `Open in ${window.remotion_editorName}`;
+    const openInEditorSvg = ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: svgStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: svgFillColor, d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" }) }));
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("button", { title: buttonTooltip, type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: handleClick, children: openInEditorSvg }));
+};
+exports.OpenEditorButton = OpenEditorButton;

package/dist/editor/components/PlayPause.js

@@ -14,15 +14,15 @@ 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();
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     player_1.PlayerInternals.usePlayback({
         loop,
         playbackRate,
@@ -30,7 +30,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 +48,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 +117,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 +126,48 @@ const PlayPause = ({ playbackRate, loop }) => {
             key: 'ArrowLeft',
             callback: onArrowLeft,
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const arrowRight = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowRight',
             callback: onArrowRight,
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const space = keybindings.registerKeybinding({
             event: 'keydown',
             key: ' ',
             callback: onSpace,
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const enter = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'enter',
             callback: onEnter,
             commandCtrlKey: false,
+            preventDefault: false,
+            triggerIfInputFieldFocused: false,
         });
         const a = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'a',
             callback: jumpToStart,
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const e = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'e',
             callback: jumpToEnd,
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             arrowLeft.unregister();
@@ -156,7 +189,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: !videoConfig || 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: !videoConfig || 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, disabled: !videoConfig, children: playing ? ((0, jsx_runtime_1.jsx)(pause_1.Pause, { style: {
                         height: 14,
                         width: 14,
                         color: 'white',
@@ -164,6 +197,6 @@ const PlayPause = ({ playbackRate, loop }) => {
                         height: 14,
                         width: 14,
                         color: 'white',
-                    } })) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: isLastFrame, onClick: oneFrameForward, children: (0, jsx_runtime_1.jsx)(step_forward_1.StepForward, { style: forwardBackStyle }) })] }));
+                    } })) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig || isLastFrame, onClick: oneFrameForward, children: (0, jsx_runtime_1.jsx)(step_forward_1.StepForward, { style: forwardBackStyle }) })] }));
 };
 exports.PlayPause = PlayPause;

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,24 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             key: 'j',
             callback: onJKey,
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const kKey = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'k',
             callback: onKKey,
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const lKey = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'l',
             callback: onLKey,
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             jKey.unregister();