@remotion/cli 4.0.111 → 4.0.113

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

@@ -0,0 +1,91 @@
+"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

@@ -0,0 +1,10 @@
+/// <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

@@ -0,0 +1,32 @@
+"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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,107 @@
+"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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,167 @@
+"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

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

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

@@ -0,0 +1,12 @@
+"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

@@ -0,0 +1,8 @@
+/// <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

@@ -0,0 +1,54 @@
+"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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,40 @@
+"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

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

package/dist/editor/components/FpsCounter.js

@@ -0,0 +1,74 @@
+"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

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