@remotion/cli 4.0.113 → 4.0.115

package/dist/editor/components/FramePersistor.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FramePersistor = void 0;
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const FramePersistor = () => {
-    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
-    const config = (0, remotion_1.useVideoConfig)();
-    const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    (0, react_1.useEffect)(() => {
-        if (!playing) {
-            remotion_1.Internals.persistCurrentFrame(frame, config.id);
-        }
-    }, [config.id, frame, playing]);
-    return null;
-};
-exports.FramePersistor = FramePersistor;

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

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

package/dist/editor/components/FullscreenToggle.js

@@ -1,48 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FullScreenToggle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const truthy_1 = require("../../truthy");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const canvas_ref_1 = require("../state/canvas-ref");
-const preview_size_1 = require("../state/preview-size");
-const ControlButton_1 = require("./ControlButton");
-const accessibilityLabel = [
-    'Enter fullscreen preview',
-    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(F)',
-]
-    .filter(truthy_1.truthy)
-    .join(' ');
-const FullScreenToggle = () => {
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const { setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
-    const onClick = (0, react_1.useCallback)(() => {
-        var _a;
-        (_a = canvas_ref_1.canvasRef.current) === null || _a === void 0 ? void 0 : _a.requestFullscreen();
-        if (document.fullscreenElement)
-            setSize(() => ({
-                size: 'auto',
-                translation: {
-                    x: 0,
-                    y: 0,
-                },
-            }));
-    }, [setSize]);
-    (0, react_1.useEffect)(() => {
-        const f = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'f',
-            callback: onClick,
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => {
-            f.unregister();
-        };
-    }, [keybindings, onClick]);
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 448 512", fill: "#fff", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z" }) }) }));
-};
-exports.FullScreenToggle = FullScreenToggle;

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

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

package/dist/editor/components/GlobalKeybindings.js

@@ -1,77 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GlobalKeybindings = void 0;
-const react_1 = require("react");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const checkerboard_1 = require("../state/checkerboard");
-const modals_1 = require("../state/modals");
-const GlobalKeybindings = () => {
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const { setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
-    (0, react_1.useEffect)(() => {
-        const nKey = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: 'n',
-            callback: () => {
-                setSelectedModal({
-                    type: 'new-comp',
-                    compType: 'composition',
-                });
-            },
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const cmdKKey = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'k',
-            callback: () => {
-                setSelectedModal({
-                    type: 'quick-switcher',
-                    mode: 'compositions',
-                    invocationTimestamp: Date.now(),
-                });
-            },
-            triggerIfInputFieldFocused: true,
-            keepRegisteredWhenNotHighestContext: false,
-            commandCtrlKey: true,
-            preventDefault: true,
-        });
-        const cKey = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: 't',
-            callback: () => {
-                setCheckerboard((c) => !c);
-            },
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const questionMark = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: '?',
-            callback: () => {
-                setSelectedModal({
-                    type: 'quick-switcher',
-                    mode: 'docs',
-                    invocationTimestamp: Date.now(),
-                });
-            },
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => {
-            nKey.unregister();
-            cKey.unregister();
-            questionMark.unregister();
-            cmdKKey.unregister();
-        };
-    }, [keybindings, setCheckerboard, setSelectedModal]);
-    return null;
-};
-exports.GlobalKeybindings = GlobalKeybindings;

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

@@ -1,4 +0,0 @@
-import type React from 'react';
-import type { AnyComposition } from 'remotion';
-export declare const useSelectComposition: () => (c: AnyComposition, push: boolean) => void;
-export declare const InitialCompositionLoader: React.FC;

package/dist/editor/components/InitialCompositionLoader.js

@@ -1,115 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InitialCompositionLoader = exports.useSelectComposition = void 0;
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const folders_1 = require("../state/folders");
-const CompositionSelector_1 = require("./CompositionSelector");
-const ZoomPersistor_1 = require("./ZoomPersistor");
-const useSelectAsset = () => {
-    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const { setAssetFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
-    return (asset) => {
-        setCanvasContent({ type: 'asset', asset });
-        setAssetFoldersExpanded((ex) => {
-            const split = asset.split('/');
-            const keysToExpand = split.map((_, i) => {
-                return split.slice(0, i).join('/');
-            });
-            const newState = {
-                ...ex,
-            };
-            for (const key of keysToExpand) {
-                newState[key] = true;
-            }
-            return newState;
-        });
-    };
-};
-const useSelectComposition = () => {
-    const { setCompositionFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
-    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    return (c, push) => {
-        if (push) {
-            window.history.pushState({}, 'Studio', `/${c.id}`);
-        }
-        setCanvasContent({ type: 'composition', compositionId: c.id });
-        const { folderName, parentFolderName } = c;
-        if (folderName !== null) {
-            setCompositionFoldersExpanded((ex) => {
-                const keysToExpand = (0, CompositionSelector_1.getKeysToExpand)(folderName, parentFolderName);
-                const newState = {
-                    ...ex,
-                };
-                for (const key of keysToExpand) {
-                    newState[key] = true;
-                }
-                return newState;
-            });
-        }
-    };
-};
-exports.useSelectComposition = useSelectComposition;
-const InitialCompositionLoader = () => {
-    const { compositions, canvasContent, setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const selectComposition = (0, exports.useSelectComposition)();
-    const selectAsset = useSelectAsset();
-    (0, react_1.useEffect)(() => {
-        if (canvasContent) {
-            return;
-        }
-        const canvasContentFromUrl = (0, ZoomPersistor_1.deriveCanvasContentFromUrl)();
-        if (canvasContentFromUrl && canvasContentFromUrl.type === 'composition') {
-            const exists = compositions.find((c) => c.id === canvasContentFromUrl.compositionId);
-            if (exists) {
-                selectComposition(exists, false);
-            }
-            return;
-        }
-        if (canvasContentFromUrl && canvasContentFromUrl.type === 'asset') {
-            selectAsset(canvasContentFromUrl.asset);
-            return;
-        }
-        if (canvasContentFromUrl && canvasContentFromUrl.type === 'output') {
-            setCanvasContent(canvasContentFromUrl);
-            return;
-        }
-        if (compositions.length > 0) {
-            selectComposition(compositions[0], true);
-        }
-    }, [
-        compositions,
-        canvasContent,
-        selectComposition,
-        setCanvasContent,
-        selectAsset,
-    ]);
-    (0, react_1.useEffect)(() => {
-        const onchange = () => {
-            const newCanvas = (0, ZoomPersistor_1.deriveCanvasContentFromUrl)();
-            if (newCanvas && newCanvas.type === 'composition') {
-                const newComp = window.location.pathname.substring(1);
-                const exists = compositions.find((c) => c.id === newComp);
-                if (exists) {
-                    selectComposition(exists, false);
-                }
-                return;
-            }
-            if (newCanvas && newCanvas.type === 'asset') {
-                const staticFiles = (0, remotion_1.getStaticFiles)();
-                const exists = staticFiles.find((file) => {
-                    return file.name === newCanvas.asset;
-                });
-                if (exists) {
-                    setCanvasContent(newCanvas);
-                }
-                return;
-            }
-            setCanvasContent(newCanvas);
-        };
-        window.addEventListener('popstate', onchange);
-        return () => window.removeEventListener('popstate', onchange);
-    }, [compositions, selectComposition, setCanvasContent]);
-    return null;
-};
-exports.InitialCompositionLoader = InitialCompositionLoader;

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

@@ -1,8 +0,0 @@
-import React from 'react';
-export type RenderInlineAction = (color: string) => React.ReactNode;
-export declare const InlineAction: React.FC<{
-    onClick: React.MouseEventHandler<HTMLButtonElement>;
-    disabled?: boolean;
-    renderAction: RenderInlineAction;
-    title?: string;
-}>;

package/dist/editor/components/InlineAction.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InlineAction = 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 InlineAction = ({ renderAction, onClick, disabled, title }) => {
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            border: 'none',
-            background: disabled
-                ? 'transparent'
-                : (0, colors_1.getBackgroundFromHoverState)({ hovered, selected: false }),
-            height: 24,
-            width: 24,
-            display: 'inline-flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            borderRadius: 3,
-            pointerEvents: disabled ? 'none' : 'auto',
-        };
-    }, [disabled, hovered]);
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, children: renderAction(hovered ? 'white' : colors_1.LIGHT_TEXT) }));
-};
-exports.InlineAction = InlineAction;

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

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const JSONViewer: React.FC<{
-    src: string;
-}>;

package/dist/editor/components/JSONViewer.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.JSONViewer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const RemTextarea_1 = require("./NewComposition/RemTextarea");
-const jsonStyle = {
-    marginTop: 14,
-    marginBottom: 14,
-    fontFamily: 'monospace',
-    flex: 1,
-};
-const JSONViewer = ({ src }) => {
-    const [json, setJson] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        fetch(src)
-            .then((res) => res.json())
-            .then((jsonRes) => {
-            setJson(JSON.stringify(jsonRes, null, 2));
-        });
-    }, [src]);
-    return ((0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { value: json !== null && json !== void 0 ? json : undefined, status: "ok", onChange: () => {
-            return null;
-        }, style: jsonStyle }));
-};
-exports.JSONViewer = JSONViewer;

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

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

package/dist/editor/components/KeyboardShortcutsExplainer.js

@@ -1,57 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyboardShortcutsExplainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
-const colors_1 = require("../helpers/colors");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const keys_1 = require("../icons/keys");
-const layout_1 = require("./layout");
-const left = {
-    width: 85,
-    paddingTop: 8,
-    paddingBottom: 8,
-};
-const key = {
-    background: colors_1.INPUT_BACKGROUND,
-    padding: '3px 6px',
-    color: 'white',
-    borderRadius: 3,
-    border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
-    borderBottomWidth: 3,
-    fontSize: 14,
-    fontFamily: 'monospace',
-};
-const right = {
-    fontSize: 14,
-    color: '#eee',
-};
-const container = {
-    paddingLeft: 20,
-    paddingRight: 40,
-    paddingTop: 10,
-    paddingBottom: 10,
-};
-const title = {
-    fontWeight: 'bold',
-    color: 'white',
-    fontSize: 14,
-    marginBottom: 10,
-};
-const keyboardShortcutsDisabled = {
-    padding: 12,
-    width: '100%',
-    fontSize: 14,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-};
-const ul = {
-    marginTop: 0,
-    marginBottom: 0,
-};
-const li = {
-    fontSize: 14,
-};
-const KeyboardShortcutsExplainer = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Sidebar" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "B" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle left sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle right sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "G" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle both sidebars" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "View" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "F" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Enter fullscreen" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "esc" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Exit fullscreen" })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "R" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Render composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Quick Switcher" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Zoom" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "+" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom in" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "-" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom out" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "0" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reset zoom" })] }), ' ', (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Props Editor" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "S" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Save" })] })] })] })] }));
-};
-exports.KeyboardShortcutsExplainer = KeyboardShortcutsExplainer;

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type { Bug } from './UpdateCheck';
-export declare const KnownBugs: React.FC<{
-    bugs: Bug[];
-}>;

package/dist/editor/components/KnownBugs.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KnownBugs = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const OpenIssueButton_1 = require("./UpdateModal/OpenIssueButton");
-const container = {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-};
-const text = {
-    fontSize: 14,
-    flex: 1,
-};
-const KnownBugs = ({ bugs }) => {
-    const bugElements = bugs.map((bug) => {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsxs)("div", { style: text, children: ["\uD83E\uDEB2 ", bug.title] }), (0, jsx_runtime_1.jsx)(OpenIssueButton_1.OpenIssueButton, { link: bug.link })] }, bug.description + bug.link));
-    });
-    return (0, jsx_runtime_1.jsx)("div", { children: bugElements });
-};
-exports.KnownBugs = KnownBugs;

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const LoopToggle: React.FC<{
-    loop: boolean;
-    setLoop: React.Dispatch<React.SetStateAction<boolean>>;
-}>;

package/dist/editor/components/LoopToggle.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoopToggle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const loop_1 = require("../state/loop");
-const ControlButton_1 = require("./ControlButton");
-const accessibilityLabel = 'Loop video';
-const LoopToggle = ({ loop, setLoop }) => {
-    const onClick = (0, react_1.useCallback)(() => {
-        setLoop((c) => {
-            (0, loop_1.persistLoopOption)(!c);
-            return !c;
-        });
-    }, [setLoop]);
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: (0, jsx_runtime_1.jsx)("path", { fill: loop ? colors_1.BLUE : 'white', d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }) }) }));
-};
-exports.LoopToggle = LoopToggle;

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

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

package/dist/editor/components/MediaVolumeProvider.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediaVolumeProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const mute_1 = require("../state/mute");
-const MediaVolumeProvider = ({ children }) => {
-    const [mediaMuted, setMediaMuted] = (0, react_1.useState)(() => (0, mute_1.loadMuteOption)());
-    const [mediaVolume, setMediaVolume] = (0, react_1.useState)(1);
-    const mediaVolumeContextValue = (0, react_1.useMemo)(() => {
-        return {
-            mediaMuted,
-            mediaVolume,
-        };
-    }, [mediaMuted, mediaVolume]);
-    const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
-        return {
-            setMediaMuted,
-            setMediaVolume,
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: children }) }));
-};
-exports.MediaVolumeProvider = MediaVolumeProvider;

package/dist/editor/components/Menu/MenuDivider.d.ts

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

package/dist/editor/components/Menu/MenuDivider.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuDivider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const colors_1 = require("../../helpers/colors");
-const menuDivider = {
-    marginTop: 4,
-    marginBottom: 4,
-    height: 1,
-    backgroundColor: colors_1.INPUT_BORDER_COLOR_HOVERED,
-};
-const MenuDivider = () => {
-    return (0, jsx_runtime_1.jsx)("div", { style: menuDivider });
-};
-exports.MenuDivider = MenuDivider;

package/dist/editor/components/Menu/MenuItem.d.ts

@@ -1,22 +0,0 @@
-import type { SetStateAction } from 'react';
-import React from 'react';
-import type { ComboboxValue } from '../NewComposition/ComboBox';
-export type MenuId = 'remotion' | 'file' | 'view' | 'tools' | 'help';
-export type Menu = {
-    id: MenuId;
-    label: React.ReactNode;
-    items: ComboboxValue[];
-    leaveLeftPadding: boolean;
-};
-export declare const MenuItem: React.FC<{
-    label: React.ReactNode;
-    id: MenuId;
-    selected: boolean;
-    onItemSelected: (s: SetStateAction<string | null>) => void;
-    onItemHovered: (id: MenuId) => void;
-    onItemQuit: () => void;
-    onPreviousMenu: () => void;
-    onNextMenu: () => void;
-    menu: Menu;
-    leaveLeftPadding: boolean;
-}>;