@remotion/cli 4.0.113 → 4.0.115

package/dist/editor/components/EditorGuides/Guide.js

@@ -1,91 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const truthy_1 = require("../../../truthy");
-const colors_1 = require("../../helpers/colors");
-const editor_guides_1 = require("../../state/editor-guides");
-const editor_rulers_1 = require("../../state/editor-rulers");
-const ContextMenu_1 = require("../ContextMenu");
-const PADDING_FOR_EASY_DRAG = 4;
-const GuideComp = ({ guide, canvasDimensions, scale }) => {
-    const { shouldCreateGuideRef, setGuidesList, setSelectedGuideId, selectedGuideId, setHoveredGuideId, hoveredGuideId, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHoveredGuideId(() => guide.id);
-    }, [guide.id, setHoveredGuideId]);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHoveredGuideId(() => null);
-    }, [setHoveredGuideId]);
-    const isVerticalGuide = guide.orientation === 'vertical';
-    const guideStyle = (0, react_1.useMemo)(() => {
-        const canvasPosition = isVerticalGuide
-            ? canvasDimensions.left
-            : canvasDimensions.top;
-        const guidePosition = guide.position * scale + canvasPosition;
-        return {
-            position: 'absolute',
-            width: `${isVerticalGuide ? '1px' : '100%'}`,
-            height: `${isVerticalGuide ? '100%' : '1px'}`,
-            left: `${isVerticalGuide ? guidePosition - PADDING_FOR_EASY_DRAG : 0}px`,
-            top: `${isVerticalGuide ? 0 : guidePosition - PADDING_FOR_EASY_DRAG}px`,
-            cursor: `${isVerticalGuide ? 'ew-resize' : 'ns-resize'}`,
-            padding: isVerticalGuide
-                ? `0 ${PADDING_FOR_EASY_DRAG}px`
-                : `${PADDING_FOR_EASY_DRAG}px 0`,
-        };
-    }, [guide, scale, canvasDimensions, isVerticalGuide]);
-    const guideContentStyle = (0, react_1.useMemo)(() => {
-        return {
-            position: 'relative',
-            minWidth: `${isVerticalGuide ? '1px' : `calc(100% + ${editor_rulers_1.RULER_WIDTH}px`}`,
-            minHeight: `${isVerticalGuide ? `calc(100% + ${editor_rulers_1.RULER_WIDTH}px` : '1px'}`,
-            top: `${isVerticalGuide ? `-${editor_rulers_1.RULER_WIDTH}px` : '0px'}`,
-            left: `${isVerticalGuide ? '0px' : `-${editor_rulers_1.RULER_WIDTH}px`}`,
-            display: guide.show ? 'block' : 'none',
-            backgroundColor: selectedGuideId === guide.id || hoveredGuideId === guide.id
-                ? colors_1.SELECTED_GUIDE
-                : colors_1.UNSELECTED_GUIDE,
-        };
-    }, [isVerticalGuide, guide.show, guide.id, selectedGuideId, hoveredGuideId]);
-    const onMouseDown = (0, react_1.useCallback)((e) => {
-        e.preventDefault();
-        if (e.button !== 0) {
-            return;
-        }
-        shouldCreateGuideRef.current = true;
-        document.body.style.cursor = 'no-drop';
-        setSelectedGuideId(() => guide.id);
-    }, [shouldCreateGuideRef, setSelectedGuideId, guide.id]);
-    const values = (0, react_1.useMemo)(() => {
-        return [
-            {
-                id: '1',
-                keyHint: null,
-                label: 'Remove guide',
-                leftItem: null,
-                onClick: () => {
-                    setGuidesList((prevState) => {
-                        const newGuides = prevState.filter((selected) => {
-                            return selected.id !== guide.id;
-                        });
-                        (0, editor_guides_1.persistGuidesList)(newGuides);
-                        return newGuides;
-                    });
-                },
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'remove',
-            },
-        ];
-    }, [guide.id, setGuidesList]);
-    return ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: values, children: (0, jsx_runtime_1.jsx)("div", { style: guideStyle, onMouseDown: onMouseDown, className: "__remotion_editor_guide", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: (0, jsx_runtime_1.jsx)("div", { style: guideContentStyle, className: [
-                    '__remotion_editor_guide_content',
-                    selectedGuideId === guide.id || hoveredGuideId === guide.id
-                        ? '__remotion_editor_guide_selected'
-                        : null,
-                ]
-                    .filter(truthy_1.truthy)
-                    .join(' ') }) }) }));
-};
-exports.default = (0, react_1.memo)(GuideComp);

package/dist/editor/components/EditorGuides/index.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { type Size } from '@remotion/player';
-import type { AssetMetadata } from '../../helpers/get-asset-metadata';
-import type { Dimensions } from '../../helpers/is-current-selected-still';
-declare const EditorGuides: React.FC<{
-    canvasSize: Size | null;
-    contentDimensions: Dimensions | 'none' | null;
-    assetMetadata: AssetMetadata | null;
-}>;
-export default EditorGuides;

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

@@ -1,32 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const use_studio_canvas_dimensions_1 = require("../../helpers/use-studio-canvas-dimensions");
-const editor_guides_1 = require("../../state/editor-guides");
-const Guide_1 = __importDefault(require("./Guide"));
-const EditorGuides = ({ canvasSize, contentDimensions, assetMetadata }) => {
-    const { canvasDimensions, scale } = (0, use_studio_canvas_dimensions_1.useStudioCanvasDimensions)({
-        canvasSize,
-        contentDimensions,
-        assetMetadata,
-    });
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    if (canvasContent === null || canvasContent.type !== 'composition') {
-        throw new Error('Expected to be in a composition');
-    }
-    const { guidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
-    const guidesForThisComposition = (0, react_1.useMemo)(() => {
-        return guidesList.filter((guide) => {
-            return guide.compositionId === canvasContent.compositionId;
-        });
-    }, [canvasContent.compositionId, guidesList]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: guidesForThisComposition.map((guide) => {
-            return ((0, jsx_runtime_1.jsx)(Guide_1.default, { guide: guide, canvasDimensions: canvasDimensions, scale: scale }, guide.id));
-        }) }));
-};
-exports.default = EditorGuides;

package/dist/editor/components/EditorRuler/Ruler.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-interface Point {
-    value: number;
-    position: number;
-}
-interface RulerProps {
-    scale: number;
-    points: Point[];
-    originOffset: number;
-    startMarking: number;
-    containerRef: React.RefObject<HTMLDivElement>;
-    markingGaps: number;
-    orientation: 'horizontal' | 'vertical';
-}
-export declare const makeGuideId: () => string;
-declare const Ruler: React.FC<RulerProps>;
-export default Ruler;

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

@@ -1,107 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeGuideId = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const colors_1 = require("../../helpers/colors");
-const editor_ruler_1 = require("../../helpers/editor-ruler");
-const editor_guides_1 = require("../../state/editor-guides");
-const editor_rulers_1 = require("../../state/editor-rulers");
-const makeGuideId = () => {
-    return Math.random().toString(36).substring(7);
-};
-exports.makeGuideId = makeGuideId;
-const Ruler = ({ scale, points, originOffset, startMarking, containerRef, markingGaps, orientation, }) => {
-    var _a;
-    const rulerCanvasRef = (0, react_1.useRef)(null);
-    const isVerticalRuler = orientation === 'vertical';
-    const { shouldCreateGuideRef, setGuidesList, selectedGuideId, hoveredGuideId, setSelectedGuideId, guidesList, setEditorShowGuides, } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
-    const unsafeVideoConfig = remotion_1.Internals.useUnsafeVideoConfig();
-    if (!unsafeVideoConfig) {
-        throw new Error('Video config not set');
-    }
-    const [cursor, setCursor] = (0, react_1.useState)(isVerticalRuler ? 'ew-resize' : 'ns-resize');
-    const selectedOrHoveredGuide = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        return ((_b = (_a = guidesList.find((guide) => guide.id === selectedGuideId)) !== null && _a !== void 0 ? _a : guidesList.find((guide) => guide.id === hoveredGuideId)) !== null && _b !== void 0 ? _b : null);
-    }, [guidesList, hoveredGuideId, selectedGuideId]);
-    (0, react_1.useEffect)(() => {
-        (0, editor_ruler_1.drawMarkingOnRulerCanvas)({
-            scale,
-            points,
-            startMarking,
-            originOffset,
-            markingGaps,
-            orientation,
-            rulerCanvasRef,
-            selectedGuide: selectedOrHoveredGuide,
-        });
-    }, [
-        scale,
-        points,
-        startMarking,
-        originOffset,
-        markingGaps,
-        orientation,
-        selectedOrHoveredGuide,
-    ]);
-    const { width: canvasContainerWidth, height: canvasContainerHeight } = ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || { width: 0, height: 0 };
-    const rulerWidth = isVerticalRuler ? editor_rulers_1.RULER_WIDTH : canvasContainerWidth;
-    const rulerHeight = isVerticalRuler ? canvasContainerHeight : editor_rulers_1.RULER_WIDTH;
-    const rulerStyle = (0, react_1.useMemo)(() => ({
-        position: 'absolute',
-        background: colors_1.BACKGROUND,
-        width: `${rulerWidth}px`,
-        height: `${rulerHeight}px`,
-        left: isVerticalRuler ? 0 : 'unset',
-        top: isVerticalRuler ? 'unset' : 0,
-        borderBottom: isVerticalRuler ? undefined : '1px solid ' + colors_1.RULER_COLOR,
-        borderRight: isVerticalRuler ? '1px solid ' + colors_1.RULER_COLOR : undefined,
-        cursor,
-    }), [rulerWidth, rulerHeight, cursor, isVerticalRuler]);
-    const onMouseDown = (0, react_1.useCallback)((e) => {
-        if (e.button !== 0) {
-            return;
-        }
-        e.preventDefault();
-        shouldCreateGuideRef.current = true;
-        document.body.style.cursor = 'no-drop';
-        const guideId = (0, exports.makeGuideId)();
-        setEditorShowGuides(() => true);
-        setSelectedGuideId(() => guideId);
-        setGuidesList((prevState) => {
-            return [
-                ...prevState,
-                {
-                    orientation,
-                    position: -originOffset,
-                    show: false,
-                    id: guideId,
-                    compositionId: unsafeVideoConfig.id,
-                },
-            ];
-        });
-    }, [
-        shouldCreateGuideRef,
-        setEditorShowGuides,
-        setSelectedGuideId,
-        setGuidesList,
-        orientation,
-        originOffset,
-        unsafeVideoConfig.id,
-    ]);
-    const changeCursor = (0, react_1.useCallback)((e) => {
-        e.preventDefault();
-        if (selectedGuideId !== null) {
-            setCursor('no-drop');
-        }
-    }, [setCursor, selectedGuideId]);
-    (0, react_1.useEffect)(() => {
-        if (selectedGuideId === null) {
-            setCursor(isVerticalRuler ? 'ew-resize' : 'ns-resize');
-        }
-    }, [selectedGuideId, isVerticalRuler]);
-    return ((0, jsx_runtime_1.jsx)("canvas", { ref: rulerCanvasRef, width: rulerWidth * devicePixelRatio, height: rulerHeight * devicePixelRatio, style: rulerStyle, onPointerDown: onMouseDown, onPointerEnter: changeCursor, onPointerLeave: changeCursor }));
-};
-exports.default = Ruler;

package/dist/editor/components/EditorRuler/index.d.ts

@@ -1,10 +0,0 @@
-import { type Size } from '@remotion/player';
-import React from 'react';
-import type { AssetMetadata } from '../../helpers/get-asset-metadata';
-import type { Dimensions } from '../../helpers/is-current-selected-still';
-export declare const EditorRulers: React.FC<{
-    canvasSize: Size | null;
-    contentDimensions: Dimensions | 'none' | null;
-    assetMetadata: AssetMetadata | null;
-    containerRef: React.RefObject<HTMLDivElement>;
-}>;

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;