@remotion/cli 4.0.136 → 4.0.138

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

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorDot = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const container = {
-    height: 16,
-    width: 16,
-    backgroundColor: 'red',
-    border: '1px solid rgba(255, 255, 255, 0.2)',
-    borderRadius: 8,
-};
-const ColorDot = ({ color }) => {
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...container,
-            backgroundColor: color,
-        };
-    }, [color]);
-    return (0, jsx_runtime_1.jsx)("div", { style: style });
-};
-exports.ColorDot = ColorDot;

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

@@ -1,8 +0,0 @@
-import React from 'react';
-export declare const Notification: React.FC<{
-    children: React.ReactNode;
-    created: number;
-    duration: number;
-    id: string;
-    onRemove: (id: string) => void;
-}>;

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

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Notification = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const notification = {
-    backgroundColor: '#111111',
-    color: 'white',
-    fontFamily: 'Arial, Helvetica, sans-serif',
-    display: 'inline-flex',
-    padding: '8px 14px',
-    borderRadius: 4,
-    fontSize: 15,
-    border: '0.25px solid rgba(255, 255, 255, 0.1)',
-    boxShadow: '0 2px 3px rgba(0, 0, 0, 1)',
-    marginTop: 3,
-    marginBottom: 3,
-    alignItems: 'center',
-};
-const Notification = ({ children, id, duration, created, onRemove }) => {
-    (0, react_1.useEffect)(() => {
-        const timeout = setTimeout(() => {
-            onRemove(id);
-        }, duration - (Date.now() - created));
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, [created, duration, id, onRemove]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: notification, children: children }));
-};
-exports.Notification = Notification;

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

@@ -1,14 +0,0 @@
-import React from 'react';
-type TNotification = {
-    id: string;
-    content: React.ReactNode;
-    created: number;
-    duration: number;
-};
-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,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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");
-const container = {
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-    display: 'flex',
-    width: '100%',
-    flexDirection: 'column',
-    paddingTop: 20,
-    pointerEvents: 'none',
-    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) => {
-        setNotifications((not) => {
-            return not.filter((n) => n.id !== id);
-        });
-    }, []);
-    const addNotification = (0, react_1.useCallback)((notification) => {
-        setNotifications((previousNotifications) => {
-            return [...previousNotifications, notification];
-        });
-    }, []);
-    (0, react_1.useImperativeHandle)(exports.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));
-        }) }));
-};
-exports.NotificationCenter = NotificationCenter;

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

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

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

@@ -1,53 +0,0 @@
-"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);
-    const fav = document.getElementById('__remotion_favicon');
-    if (ctx.type !== 'disconnected') {
-        fav.setAttribute('href', '/remotion.png');
-        return null;
-    }
-    if (pageIsGoingToReload) {
-        return null;
-    }
-    const base64Favicon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARiSURBVHgB7d1NThRBFAfw/2tGgru5gXMD8QZ4AmVjAi6kN0TiAm8gnkBcGARNumcx4E48Ae0JaE9gewLHlQSZelaNgyHGL/RVd1X3+y10RQL58+rVx1QBKKWUUkoppZRSSimllFJKKVUjQs32stEiJcktZiwxzKL9Fvqzb6S0/44JVBKbtwa9aj29U6JjagtkJzsYzBEyBi9d5utsQIULCcxvelgo03R5jBarJZCXw/17E+bt82r4Hy4gtuEQekUbK8h7IHvDV5vMZht+VAlRfmYw3EhXKrSA10Ce2X7RIzpGDVzlgM1wPb2bI2JeA9nN99/b/waoV+XCmTAex1g13gLZyUZrdjjJ0CAbTB5bMN4C2ctHxwxaRABiCsZLIG6KmxC/R2BiCCaBBwn4NgJk10B2GOWj3Wz/IQLlpUL28oOjyy4AG1AZppuhVYt4hWRZ1o8gDGc6rL4YHjxCQMQDOcNCEI38bxnmLTc9d30PARAPZAITZP/4A1ctx3bjcw0NEw8koeQ64tRnu25qeggTb+q2/BmRcyv9K7yw3MTOsmiFuLMOtICblJzS5+Mm+opoIBOgFYHMuL5yVHcoooFQuwJxag9FNJCIG/rv1BqKaCDfzshbqbZQxAJxK3SJI9qATUPJstdef0axQGJbof+jwRc6eQ2PxAIx4DZXx3duSrybv3oCTyR7yACdYR762sIXDKQbFfId4ZGPJi8YCA3QLf05YvF+IhYIEV1Dx9hNu8XdbLQFQV6OcDuFaFNyKiwWiJ19DNBN/VN8XoMQrRABDFqCEJ32CiBisT08rRAZAwjRQAKjgcgQO+rVQARMb3gJ0UAkML+DEA1EwAQkdkNMcnOx1Zcxf8V9ol7y88GSm4tdDKRy1xsgSIes/0BM4ndN5HZ7OzZkMePperqSQ5jkkFWhO6r76WrYJ4b2N+YTumF60QeeSG6/d2DI4rHvW1eCPaT9Q9YZw/sVOMlZVoUWM8zpg/Su97dVJGdZFVrKhbFR05MdYoFcwWmF1rF9kbG8UeP7KaI3qBp628QTHrueUccwdZHw/ZDWNHY7tU1u1B2GIxqIYSO2Dd0Ud79wnq/eaOpBgR4EMVDW/oijINu87d7U6hYaJBrInA0k0iu4bvVtZ1KrBRrm4Vr06GNkF3cO7RCVhvK4pmiFOISkjOStk1lVrBQIiPh5SAyN3fWKWeMuEBjxCmEkh3bVvokAzd5idL2iQqDEA1nASXmK+XFIfeTCo5gFAudllvo8G20TUeNVElMQ58QrxLHD1jbB3GumSnhsz7qHE9BhTEGc87aOm16KJHi7rfqj8yfI53E1j/l9eK8L651stJUQeXx/iuzU1QztZLGIsRp+xvtOh3Qo3/qCedumEC6qZetpJztwz7O6UAa4FNsP7ELTfXbWbskUdjgq9M9VCJoFcwvTlfyPDd9t3XNJjA+2IZcGpmxi+7tpjW3OupurJziZhtKWPzWhlFJKKaWUUkoppZRSSiml/uwrgZ/Bfwo/wccAAAAASUVORK5CYII=';
-    fav.setAttribute('href', base64Favicon);
-    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

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

package/dist/editor/components/OpenEditorButton.js

@@ -1,55 +0,0 @@
-"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: 11,
-    height: 11,
-};
-const buttonStyle = {
-    border: 'none',
-    height: '20px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-};
-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) => {
-            // eslint-disable-next-line no-console
-            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/OptionsPanel.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-type OptionsSidebarPanel = 'input-props' | 'renders';
-export declare const persistSelectedOptionsSidebarPanel: (panel: OptionsSidebarPanel) => void;
-export declare const optionsSidebarTabs: React.RefObject<{
-    selectRendersPanel: () => void;
-}>;
-export declare const OptionsPanel: React.FC<{}>;
-export {};

package/dist/editor/components/OptionsPanel.js

@@ -1,112 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OptionsPanel = exports.optionsSidebarTabs = exports.persistSelectedOptionsSidebarPanel = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
-const colors_1 = require("../helpers/colors");
-const DataEditor_1 = require("./RenderModal/DataEditor");
-const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
-const RenderQueue_1 = require("./RenderQueue");
-const RendersTab_1 = require("./RendersTab");
-const Tabs_1 = require("./Tabs");
-const container = {
-    height: '100%',
-    width: '100%',
-    position: 'absolute',
-    display: 'flex',
-    flexDirection: 'column',
-};
-const circle = {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-};
-const localStorageKey = 'remotion.sidebarPanel';
-const getSelectedPanel = () => {
-    const panel = localStorage.getItem(localStorageKey);
-    if (panel === 'renders') {
-        return 'renders';
-    }
-    return 'input-props';
-};
-const tabsContainer = {
-    backgroundColor: colors_1.BACKGROUND,
-};
-const persistSelectedOptionsSidebarPanel = (panel) => {
-    localStorage.setItem(localStorageKey, panel);
-};
-exports.persistSelectedOptionsSidebarPanel = persistSelectedOptionsSidebarPanel;
-exports.optionsSidebarTabs = (0, react_1.createRef)();
-const OptionsPanel = () => {
-    const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const [saving, setSaving] = (0, react_1.useState)(false);
-    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
-    const onPropsSelected = (0, react_1.useCallback)(() => {
-        setPanel('input-props');
-        (0, exports.persistSelectedOptionsSidebarPanel)('input-props');
-    }, []);
-    const onRendersSelected = (0, react_1.useCallback)(() => {
-        setPanel('renders');
-        (0, exports.persistSelectedOptionsSidebarPanel)('renders');
-    }, []);
-    (0, react_1.useImperativeHandle)(exports.optionsSidebarTabs, () => {
-        return {
-            selectRendersPanel: () => {
-                setPanel('renders');
-                (0, exports.persistSelectedOptionsSidebarPanel)('renders');
-            },
-        };
-    }, []);
-    const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const circleStyle = (0, react_1.useMemo)(() => {
-        const onTabColor = saving ? colors_1.LIGHT_TEXT : 'white';
-        return {
-            ...circle,
-            backgroundColor: panel === 'input-props' ? onTabColor : colors_1.LIGHT_TEXT,
-            cursor: 'help',
-        };
-    }, [panel, saving]);
-    const composition = (0, react_1.useMemo)(() => {
-        if (canvasContent === null || canvasContent.type !== 'composition') {
-            return null;
-        }
-        for (const comp of compositions) {
-            if (comp.id === canvasContent.compositionId) {
-                return comp;
-            }
-        }
-        return null;
-    }, [canvasContent, compositions]);
-    const saveToolTip = (0, react_1.useMemo)(() => {
-        return process.env.KEYBOARD_SHORTCUTS_ENABLED
-            ? `Save using ${ShortcutHint_1.cmdOrCtrlCharacter}+S`
-            : 'There are unsaved changes';
-    }, []);
-    const setInputProps = (0, react_1.useCallback)((newProps) => {
-        if (composition === null) {
-            return;
-        }
-        updateProps({
-            id: composition.id,
-            defaultProps: composition.defaultProps,
-            newProps,
-        });
-    }, [composition, updateProps]);
-    const actualProps = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        if (composition === null) {
-            return {};
-        }
-        return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {};
-    }, [composition, props]);
-    const unsavedChangesExist = (0, react_1.useMemo)(() => {
-        if (composition === null || composition.defaultProps === undefined) {
-            return false;
-        }
-        return !(0, deep_equal_1.deepEqual)(composition.defaultProps, actualProps);
-    }, [actualProps, composition]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [composition ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onPropsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? ((0, jsx_runtime_1.jsx)("div", { title: saveToolTip, style: circleStyle })) : null] })) : null, (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === `input-props` && composition ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving }, composition.id)) : ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {}))] }));
-};
-exports.OptionsPanel = OptionsPanel;

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const PlayPause: React.FC<{
-    playbackRate: number;
-    loop: boolean;
-}>;

package/dist/editor/components/PlayPause.js

@@ -1,209 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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");
-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 backStyle = {
-    height: 18,
-    color: 'white',
-};
-const forwardBackStyle = {
-    height: 16,
-    color: 'white',
-};
-const PlayPause = ({ playbackRate, loop }) => {
-    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
-    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    player_1.PlayerInternals.usePlayback({
-        loop,
-        playbackRate,
-        moveToBeginningWhenEnded: true,
-        inFrame,
-        outFrame,
-    });
-    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) {
-            pause();
-        }
-    }, [isStill, pause]);
-    const onSpace = (0, react_1.useCallback)((e) => {
-        if (playing) {
-            pause();
-        }
-        else {
-            play();
-        }
-        e.preventDefault();
-    }, [pause, play, playing]);
-    const onEnter = (0, react_1.useCallback)((e) => {
-        if (playing) {
-            // Don't prevent keyboard navigation
-            e.preventDefault();
-            pauseAndReturnToPlayStart();
-        }
-    }, [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((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]);
-    const onArrowRight = (0, react_1.useCallback)((e) => {
-        if (e.altKey) {
-            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((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]);
-    const oneFrameBack = (0, react_1.useCallback)(() => {
-        frameBack(1);
-    }, [frameBack]);
-    const oneFrameForward = (0, react_1.useCallback)(() => {
-        frameForward(1);
-    }, [frameForward]);
-    const jumpToStart = (0, react_1.useCallback)(() => {
-        seek(inFrame !== null && inFrame !== void 0 ? inFrame : 0);
-    }, [seek, inFrame]);
-    const jumpToEnd = (0, react_1.useCallback)(() => {
-        seek(outFrame !== null && outFrame !== void 0 ? outFrame : (0, imperative_state_1.getCurrentDuration)() - 1);
-    }, [seek, outFrame]);
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    (0, react_1.useEffect)(() => {
-        const arrowLeft = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'ArrowLeft',
-            callback: onArrowLeft,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const arrowRight = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'ArrowRight',
-            callback: onArrowRight,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const space = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: ' ',
-            callback: onSpace,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const enter = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'enter',
-            callback: onEnter,
-            commandCtrlKey: false,
-            preventDefault: false,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const a = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'a',
-            callback: jumpToStart,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const e = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'e',
-            callback: jumpToEnd,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => {
-            arrowLeft.unregister();
-            arrowRight.unregister();
-            space.unregister();
-            enter.unregister();
-            a.unregister();
-            e.unregister();
-        };
-    }, [
-        jumpToEnd,
-        jumpToStart,
-        keybindings,
-        onArrowLeft,
-        onArrowRight,
-        onEnter,
-        onSpace,
-    ]);
-    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: backStyle }) }), (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',
-                    } })) : ((0, jsx_runtime_1.jsx)(play_1.Play, { style: {
-                        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: !videoConfig || isLastFrame, onClick: oneFrameForward, children: (0, jsx_runtime_1.jsx)(step_forward_1.StepForward, { style: forwardBackStyle }) })] }));
-};
-exports.PlayPause = PlayPause;

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

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