@remotion/cli 4.0.79 → 4.0.82

package/dist/editor/components/EditorRuler/index.js

@@ -1,167 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditorRulers = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
-const editor_ruler_1 = require("../../helpers/editor-ruler");
-const use_studio_canvas_dimensions_1 = require("../../helpers/use-studio-canvas-dimensions");
-const editor_guides_1 = require("../../state/editor-guides");
-const editor_rulers_1 = require("../../state/editor-rulers");
-const Ruler_1 = __importDefault(require("./Ruler"));
-const originBlockStyles = {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    borderBottom: '1px solid ' + colors_1.RULER_COLOR,
-    borderRight: '1px solid ' + colors_1.RULER_COLOR,
-    width: `${editor_rulers_1.RULER_WIDTH}px`,
-    height: `${editor_rulers_1.RULER_WIDTH}px`,
-    background: colors_1.BACKGROUND,
-};
-const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef }) => {
-    const { scale, canvasDimensions } = (0, use_studio_canvas_dimensions_1.useStudioCanvasDimensions)({
-        canvasSize,
-        contentDimensions,
-        assetMetadata,
-    });
-    const { shouldCreateGuideRef, shouldDeleteGuideRef, setGuidesList, selectedGuideId, setSelectedGuideId, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
-    const rulerMarkingGaps = (0, react_1.useMemo)(() => {
-        const minimumGap = editor_rulers_1.MINIMUM_RULER_MARKING_GAP_PX;
-        const predefinedGap = editor_rulers_1.PREDEFINED_RULER_SCALE_GAPS.find((gap) => gap * scale > minimumGap);
-        return predefinedGap || editor_rulers_1.MAXIMUM_PREDEFINED_RULER_SCALE_GAP;
-    }, [scale]);
-    const horizontalRulerScaleRange = (0, react_1.useMemo)(() => (0, editor_ruler_1.getRulerScaleRange)({
-        canvasLength: canvasDimensions.width,
-        containerRef,
-        scale,
-    }), [canvasDimensions.width, containerRef, scale]);
-    const verticalRulerScaleRange = (0, react_1.useMemo)(() => (0, editor_ruler_1.getRulerScaleRange)({
-        canvasLength: canvasDimensions.height,
-        containerRef,
-        scale,
-    }), [canvasDimensions.height, containerRef, scale]);
-    const { points: horizontalRulerPoints, startMarking: horizontalRulerStartMarking, } = (0, react_1.useMemo)(() => (0, editor_ruler_1.getRulerPoints)({
-        rulerScaleRange: horizontalRulerScaleRange,
-        rulerMarkingGaps,
-        scale,
-    }), [horizontalRulerScaleRange, rulerMarkingGaps, scale]);
-    const { points: verticalRulerPoints, startMarking: verticalRulerStartMarking } = (0, react_1.useMemo)(() => (0, editor_ruler_1.getRulerPoints)({
-        rulerScaleRange: verticalRulerScaleRange,
-        rulerMarkingGaps,
-        scale,
-    }), [verticalRulerScaleRange, rulerMarkingGaps, scale]);
-    const requestAnimationFrameRef = (0, react_1.useRef)(null);
-    const onMouseMove = (0, react_1.useCallback)((e) => {
-        if (requestAnimationFrameRef.current) {
-            cancelAnimationFrame(requestAnimationFrameRef.current);
-        }
-        requestAnimationFrameRef.current = requestAnimationFrame(() => {
-            var _a;
-            const { clientX: mouseX, clientY: mouseY } = e;
-            const { left: containerLeft = 0, top: containerTop = 0, right: containerRight = 0, bottom: containerBottom = 0, } = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {};
-            if (mouseX < containerLeft ||
-                mouseX > containerRight ||
-                mouseY < containerTop ||
-                mouseY > containerBottom) {
-                if (!shouldDeleteGuideRef.current) {
-                    shouldDeleteGuideRef.current = true;
-                }
-                if (document.body.style.cursor !== 'no-drop') {
-                    document.body.style.cursor = 'no-drop';
-                }
-                setGuidesList((prevState) => {
-                    const newGuides = prevState.map((guide) => {
-                        if (guide.id !== selectedGuideId) {
-                            return guide;
-                        }
-                        return {
-                            ...guide,
-                            show: false,
-                        };
-                    });
-                    (0, editor_guides_1.persistGuidesList)(newGuides);
-                    return newGuides;
-                });
-            }
-            else {
-                if (shouldDeleteGuideRef.current) {
-                    shouldDeleteGuideRef.current = false;
-                }
-                setGuidesList((prevState) => {
-                    // Intentionally no persist, only persist on mouse up
-                    return prevState.map((guide) => {
-                        if (guide.id !== selectedGuideId) {
-                            return guide;
-                        }
-                        const position = guide.orientation === 'vertical'
-                            ? (mouseX - containerLeft) / scale -
-                                canvasDimensions.left / scale
-                            : (mouseY - containerTop) / scale -
-                                canvasDimensions.top / scale;
-                        const desiredCursor = guide.orientation === 'vertical' ? 'ew-resize' : 'ns-resize';
-                        if (document.body.style.cursor !== desiredCursor) {
-                            document.body.style.cursor = desiredCursor;
-                        }
-                        return {
-                            ...guide,
-                            position: Math.floor(position / 1.0),
-                            show: true,
-                        };
-                    });
-                });
-            }
-        });
-    }, [
-        containerRef,
-        shouldDeleteGuideRef,
-        selectedGuideId,
-        scale,
-        setGuidesList,
-        canvasDimensions.left,
-        canvasDimensions.top,
-    ]);
-    const onMouseUp = (0, react_1.useCallback)(() => {
-        setGuidesList((prevState) => {
-            const newGuides = prevState.filter((selected) => {
-                if (!shouldDeleteGuideRef.current) {
-                    return true;
-                }
-                return selected.id !== selectedGuideId;
-            });
-            (0, editor_guides_1.persistGuidesList)(newGuides);
-            return newGuides;
-        });
-        shouldDeleteGuideRef.current = false;
-        document.body.style.cursor = 'auto';
-        shouldCreateGuideRef.current = false;
-        setSelectedGuideId(() => null);
-        document.removeEventListener('pointerup', onMouseUp);
-        document.removeEventListener('pointermove', onMouseMove);
-    }, [
-        selectedGuideId,
-        shouldCreateGuideRef,
-        shouldDeleteGuideRef,
-        setSelectedGuideId,
-        setGuidesList,
-        onMouseMove,
-    ]);
-    (0, react_1.useEffect)(() => {
-        if (selectedGuideId !== null) {
-            document.addEventListener('pointermove', onMouseMove);
-            document.addEventListener('pointerup', onMouseUp);
-        }
-        return () => {
-            document.removeEventListener('pointermove', onMouseMove);
-            document.removeEventListener('pointerup', onMouseUp);
-            if (requestAnimationFrameRef.current) {
-                cancelAnimationFrame(requestAnimationFrameRef.current);
-            }
-        };
-    }, [selectedGuideId, onMouseMove, onMouseUp]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: originBlockStyles }), (0, jsx_runtime_1.jsx)(Ruler_1.default, { orientation: "horizontal", scale: scale, points: horizontalRulerPoints, startMarking: horizontalRulerStartMarking, containerRef: containerRef, markingGaps: rulerMarkingGaps, originOffset: canvasDimensions.left }), (0, jsx_runtime_1.jsx)(Ruler_1.default, { orientation: "vertical", scale: scale, points: verticalRulerPoints, startMarking: verticalRulerStartMarking, containerRef: containerRef, markingGaps: rulerMarkingGaps, originOffset: canvasDimensions.top })] }));
-};
-exports.EditorRulers = EditorRulers;

package/dist/editor/components/EditorRuler/use-is-ruler-visible.d.ts

@@ -1 +0,0 @@
-export declare const useIsRulerVisible: () => boolean | null;

package/dist/editor/components/EditorRuler/use-is-ruler-visible.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsRulerVisible = void 0;
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const editor_rulers_1 = require("../../state/editor-rulers");
-const useIsRulerVisible = () => {
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const { editorShowRulers } = (0, react_1.useContext)(editor_rulers_1.EditorShowRulersContext);
-    return (editorShowRulers && canvasContent && canvasContent.type === 'composition');
-};
-exports.useIsRulerVisible = useIsRulerVisible;

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

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-type OptionsSidebarPanel = 'compositions' | 'assets';
-export declare const persistSelectedOptionsSidebarPanel: (panel: OptionsSidebarPanel) => void;
-export declare const optionsSidebarTabs: import("react").RefObject<{
-    selectRendersPanel: () => void;
-}>;
-export declare const ExplorerPanel: React.FC<{}>;
-export {};

package/dist/editor/components/ExplorerPanel.js

@@ -1,54 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExplorerPanel = exports.optionsSidebarTabs = exports.persistSelectedOptionsSidebarPanel = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const AssetSelector_1 = require("./AssetSelector");
-const CompositionSelector_1 = require("./CompositionSelector");
-const Tabs_1 = require("./Tabs");
-const container = {
-    height: '100%',
-    width: '100%',
-    maxWidth: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-};
-const localStorageKey = 'remotion.sidebarPanel';
-const getSelectedPanel = () => {
-    const panel = localStorage.getItem(localStorageKey);
-    if (panel === 'assets') {
-        return 'assets';
-    }
-    return 'compositions';
-};
-const tabsContainer = {
-    backgroundColor: colors_1.BACKGROUND,
-};
-const persistSelectedOptionsSidebarPanel = (panel) => {
-    localStorage.setItem(localStorageKey, panel);
-};
-exports.persistSelectedOptionsSidebarPanel = persistSelectedOptionsSidebarPanel;
-exports.optionsSidebarTabs = (0, react_1.createRef)();
-const ExplorerPanel = () => {
-    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
-    const onCompositionsSelected = (0, react_1.useCallback)(() => {
-        setPanel('compositions');
-        (0, exports.persistSelectedOptionsSidebarPanel)('compositions');
-    }, []);
-    const onAssetsSelected = (0, react_1.useCallback)(() => {
-        setPanel('assets');
-        (0, exports.persistSelectedOptionsSidebarPanel)('assets');
-    }, []);
-    (0, react_1.useImperativeHandle)(exports.optionsSidebarTabs, () => {
-        return {
-            selectRendersPanel: () => {
-                setPanel('assets');
-                (0, exports.persistSelectedOptionsSidebarPanel)('assets');
-            },
-        };
-    }, []);
-    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: [(0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, children: "Assets" })] }) }), panel === 'compositions' ? (0, jsx_runtime_1.jsx)(CompositionSelector_1.CompositionSelector, {}) : (0, jsx_runtime_1.jsx)(AssetSelector_1.AssetSelector, {})] }));
-};
-exports.ExplorerPanel = ExplorerPanel;

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

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { AssetMetadata } from '../helpers/get-asset-metadata';
-import type { AssetFileType } from './Preview';
-export declare const FilePreview: React.FC<{
-    src: string;
-    fileType: AssetFileType;
-    currentAsset: string;
-    assetMetadata: AssetMetadata | null;
-}>;

package/dist/editor/components/FilePreview.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilePreview = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const format_bytes_1 = require("../../format-bytes");
-const JSONViewer_1 = require("./JSONViewer");
-const layout_1 = require("./layout");
-const TextViewer_1 = require("./TextViewer");
-const msgStyle = {
-    fontSize: 13,
-    color: 'white',
-    fontFamily: 'sans-serif',
-    display: 'flex',
-    justifyContent: 'center',
-};
-const FilePreview = ({ fileType, src, currentAsset, assetMetadata }) => {
-    if (!assetMetadata) {
-        throw new Error('expected to have assetMetadata');
-    }
-    if (assetMetadata.type === 'not-found') {
-        throw new Error('expected to have assetMetadata, got "not-found"');
-    }
-    if (fileType === 'audio') {
-        return (0, jsx_runtime_1.jsx)("audio", { src: src, controls: true });
-    }
-    if (fileType === 'video') {
-        return (0, jsx_runtime_1.jsx)("video", { src: src, controls: true });
-    }
-    if (fileType === 'image') {
-        return (0, jsx_runtime_1.jsx)("img", { src: src });
-    }
-    if (fileType === 'json') {
-        return (0, jsx_runtime_1.jsx)(JSONViewer_1.JSONViewer, { src: src });
-    }
-    if (fileType === 'txt') {
-        return (0, jsx_runtime_1.jsx)(TextViewer_1.TextViewer, { src: src });
-    }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: msgStyle, children: currentAsset }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5 }), (0, jsx_runtime_1.jsxs)("div", { style: msgStyle, children: ["Size: ", (0, format_bytes_1.formatBytes)(assetMetadata.size), " "] })] }));
-};
-exports.FilePreview = FilePreview;

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

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const FpsCounter: React.FC<{
-    playbackSpeed: number;
-}>;

package/dist/editor/components/FpsCounter.js

@@ -1,74 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FpsCounter = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const label = {
-    color: 'white',
-    fontSize: 15,
-    fontFamily: 'Arial, Helvetica, sans-serif',
-};
-const pushWithMaxSize = (arr, value, maxSize) => {
-    arr.push(value);
-    return arr.slice(-maxSize);
-};
-const FpsCounter = ({ playbackSpeed }) => {
-    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
-    const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const [marker, rerender] = (0, react_1.useState)({});
-    const [fps, setFps] = (0, react_1.useState)(0);
-    const previousUpdates = (0, react_1.useRef)([]);
-    const fpsRef = (0, react_1.useRef)(0);
-    const playingRef = (0, react_1.useRef)(playing);
-    (0, react_1.useLayoutEffect)(() => {
-        fpsRef.current = 0;
-        previousUpdates.current = [];
-        playingRef.current = playing;
-    }, [playing]);
-    (0, react_1.useLayoutEffect)(() => {
-        if (playingRef.current === false)
-            return;
-        previousUpdates.current = pushWithMaxSize(previousUpdates.current, performance.now(), 15);
-        if (previousUpdates.current.length < 2)
-            return;
-        const diff = Math.max(...previousUpdates.current) -
-            Math.min(...previousUpdates.current);
-        const averageDistanceBetween = diff / (previousUpdates.current.length - 1);
-        fpsRef.current = 1000 / averageDistanceBetween;
-        if (previousUpdates.current.length === 2)
-            setFps(fpsRef.current);
-        /* This effect should depends only on frame, otherwise it will push extra updates to ref and fps will be wrong */
-    }, [frame]);
-    (0, react_1.useEffect)(() => {
-        if (playing) {
-            const t = setTimeout(() => {
-                rerender({});
-                setFps(fpsRef.current);
-            }, 1000);
-            return () => clearTimeout(t);
-        }
-    }, [marker, playing]);
-    const style = (0, react_1.useMemo)(() => {
-        if (!videoConfig) {
-            return {};
-        }
-        const expectedFps = Math.abs(playbackSpeed) * videoConfig.fps;
-        return {
-            ...label,
-            color: fps < expectedFps * 0.9 ? 'red' : 'white',
-        };
-    }, [fps, playbackSpeed, videoConfig]);
-    if (fps === 0) {
-        return null;
-    }
-    if (playing === false) {
-        return null;
-    }
-    if (videoConfig === null) {
-        return null;
-    }
-    return (0, jsx_runtime_1.jsxs)("div", { style: style, children: [fps.toFixed(1), " FPS"] });
-};
-exports.FpsCounter = FpsCounter;

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

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

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;
-}>;