@remotion/cli 4.0.113 → 4.0.115

package/dist/editor/components/Canvas.js

@@ -1,260 +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.Canvas = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const smooth_zoom_1 = require("../../smooth-zoom");
-const colors_1 = require("../helpers/colors");
-const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
-const get_effective_translation_1 = require("../helpers/get-effective-translation");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const canvas_ref_1 = require("../state/canvas-ref");
-const editor_guides_1 = require("../state/editor-guides");
-const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
-const preview_size_1 = require("../state/preview-size");
-const EditorGuides_1 = __importDefault(require("./EditorGuides"));
-const EditorRuler_1 = require("./EditorRuler");
-const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
-const layout_1 = require("./layout");
-const Preview_1 = require("./Preview");
-const ResetZoomButton_1 = require("./ResetZoomButton");
-const container = {
-    flex: 1,
-    display: 'flex',
-    overflow: 'hidden',
-    position: 'relative',
-    backgroundColor: colors_1.BACKGROUND,
-};
-const resetZoom = {
-    position: 'absolute',
-    top: layout_1.SPACING_UNIT * 2,
-    right: layout_1.SPACING_UNIT * 2,
-};
-const ZOOM_PX_FACTOR = 0.003;
-const Canvas = ({ canvasContent }) => {
-    const { setSize, size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
-    const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const config = remotion_1.Internals.useUnsafeVideoConfig();
-    const areRulersVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
-    const { editorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
-    const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
-    const contentDimensions = (0, react_1.useMemo)(() => {
-        if ((canvasContent.type === 'asset' || canvasContent.type === 'output') &&
-            assetResolution &&
-            assetResolution.type === 'found') {
-            return assetResolution.dimensions;
-        }
-        if (config) {
-            return { width: config.width, height: config.height };
-        }
-        return null;
-    }, [assetResolution, config, canvasContent]);
-    const size = player_1.PlayerInternals.useElementSize(canvas_ref_1.canvasRef, {
-        triggerOnWindowResize: false,
-        shouldApplyCssTransforms: true,
-    });
-    const isFit = previewSize.size === 'auto';
-    const onWheel = (0, react_1.useCallback)((e) => {
-        if (!editorZoomGestures) {
-            return;
-        }
-        if (!size) {
-            return;
-        }
-        if (!contentDimensions || contentDimensions === 'none') {
-            return;
-        }
-        const wantsToZoom = e.ctrlKey || e.metaKey;
-        if (!wantsToZoom && isFit) {
-            return;
-        }
-        e.preventDefault();
-        setSize((prevSize) => {
-            const scale = player_1.PlayerInternals.calculateScale({
-                canvasSize: size,
-                compositionHeight: contentDimensions.height,
-                compositionWidth: contentDimensions.width,
-                previewSize: prevSize.size,
-            });
-            // Zoom in/out
-            if (wantsToZoom) {
-                const oldSize = prevSize.size === 'auto' ? scale : prevSize.size;
-                const smoothened = (0, smooth_zoom_1.smoothenZoom)(oldSize);
-                const added = smoothened + e.deltaY * ZOOM_PX_FACTOR;
-                const unsmoothened = (0, smooth_zoom_1.unsmoothenZoom)(added);
-                const { centerX, centerY } = (0, get_effective_translation_1.getCenterPointWhileScrolling)({
-                    size,
-                    clientX: e.clientX,
-                    clientY: e.clientY,
-                    compositionWidth: contentDimensions.width,
-                    compositionHeight: contentDimensions.height,
-                    scale,
-                    translation: prevSize.translation,
-                });
-                const zoomDifference = unsmoothened - oldSize;
-                const uvCoordinatesX = centerX / contentDimensions.width;
-                const uvCoordinatesY = centerY / contentDimensions.height;
-                const correctionLeft = -uvCoordinatesX * (zoomDifference * contentDimensions.width) +
-                    (1 - uvCoordinatesX) * zoomDifference * contentDimensions.width;
-                const correctionTop = -uvCoordinatesY * (zoomDifference * contentDimensions.height) +
-                    (1 - uvCoordinatesY) * zoomDifference * contentDimensions.height;
-                return {
-                    translation: (0, get_effective_translation_1.getEffectiveTranslation)({
-                        translation: {
-                            x: prevSize.translation.x - correctionLeft / 2,
-                            y: prevSize.translation.y - correctionTop / 2,
-                        },
-                        canvasSize: size,
-                        compositionHeight: contentDimensions.height,
-                        compositionWidth: contentDimensions.width,
-                        scale,
-                    }),
-                    size: unsmoothened,
-                };
-            }
-            const effectiveTranslation = (0, get_effective_translation_1.getEffectiveTranslation)({
-                translation: prevSize.translation,
-                canvasSize: size,
-                compositionHeight: contentDimensions.height,
-                compositionWidth: contentDimensions.width,
-                scale,
-            });
-            // Pan
-            return {
-                ...prevSize,
-                translation: (0, get_effective_translation_1.getEffectiveTranslation)({
-                    translation: {
-                        x: effectiveTranslation.x + e.deltaX,
-                        y: effectiveTranslation.y + e.deltaY,
-                    },
-                    canvasSize: size,
-                    compositionHeight: contentDimensions.height,
-                    compositionWidth: contentDimensions.width,
-                    scale,
-                }),
-            };
-        });
-    }, [editorZoomGestures, contentDimensions, isFit, setSize, size]);
-    (0, react_1.useEffect)(() => {
-        const { current } = canvas_ref_1.canvasRef;
-        if (!current) {
-            return;
-        }
-        current.addEventListener('wheel', onWheel, { passive: false });
-        return () => 
-        // @ts-expect-error
-        current.removeEventListener('wheel', onWheel, {
-            passive: false,
-        });
-    }, [onWheel]);
-    const onReset = (0, react_1.useCallback)(() => {
-        setSize(() => {
-            return {
-                translation: {
-                    x: 0,
-                    y: 0,
-                },
-                size: 'auto',
-            };
-        });
-    }, [setSize]);
-    const onZoomIn = (0, react_1.useCallback)(() => {
-        if (!contentDimensions || contentDimensions === 'none') {
-            return;
-        }
-        if (!size) {
-            return;
-        }
-        setSize((prevSize) => {
-            const scale = player_1.PlayerInternals.calculateScale({
-                canvasSize: size,
-                compositionHeight: contentDimensions.height,
-                compositionWidth: contentDimensions.width,
-                previewSize: prevSize.size,
-            });
-            return {
-                translation: {
-                    x: 0,
-                    y: 0,
-                },
-                size: Math.min(smooth_zoom_1.MAX_ZOOM, scale * 2),
-            };
-        });
-    }, [contentDimensions, setSize, size]);
-    const onZoomOut = (0, react_1.useCallback)(() => {
-        if (!contentDimensions || contentDimensions === 'none') {
-            return;
-        }
-        if (!size) {
-            return;
-        }
-        setSize((prevSize) => {
-            const scale = player_1.PlayerInternals.calculateScale({
-                canvasSize: size,
-                compositionHeight: contentDimensions.height,
-                compositionWidth: contentDimensions.width,
-                previewSize: prevSize.size,
-            });
-            return {
-                translation: {
-                    x: 0,
-                    y: 0,
-                },
-                size: Math.max(smooth_zoom_1.MIN_ZOOM, scale / 2),
-            };
-        });
-    }, [contentDimensions, setSize, size]);
-    (0, react_1.useEffect)(() => {
-        const resetBinding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: '0',
-            commandCtrlKey: false,
-            callback: onReset,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const zoomIn = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: '+',
-            commandCtrlKey: false,
-            callback: onZoomIn,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        const zoomOut = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: '-',
-            commandCtrlKey: false,
-            callback: onZoomOut,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => {
-            resetBinding.unregister();
-            zoomIn.unregister();
-            zoomOut.unregister();
-        };
-    }, [keybindings, onReset, onZoomIn, onZoomOut]);
-    const fetchMetadata = (0, react_1.useCallback)(async () => {
-        setAssetResolution(null);
-        if (canvasContent.type === 'composition') {
-            return;
-        }
-        const metadata = await (0, get_asset_metadata_1.getAssetMetadata)(canvasContent);
-        setAssetResolution(metadata);
-    }, [canvasContent]);
-    (0, react_1.useEffect)(() => {
-        fetchMetadata();
-    }, [fetchMetadata]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ref: canvas_ref_1.canvasRef, style: container, children: [size ? ((0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution })) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && ((0, jsx_runtime_1.jsx)(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && ((0, jsx_runtime_1.jsx)(EditorRuler_1.EditorRulers, { contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
-};
-exports.Canvas = Canvas;

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const CanvasOrLoading: React.FC;
-export declare const ErrorLoading: React.FC<{
-    error: Error;
-}>;

package/dist/editor/components/CanvasOrLoading.js

@@ -1,96 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorLoading = exports.CanvasOrLoading = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const ErrorLoader_1 = require("../../preview-server/error-overlay/remotion-overlay/ErrorLoader");
-const colors_1 = require("../helpers/colors");
-const timeline_zoom_1 = require("../state/timeline-zoom");
-const Canvas_1 = require("./Canvas");
-const FramePersistor_1 = require("./FramePersistor");
-const layout_1 = require("./layout");
-const styles_1 = require("./Menu/styles");
-const Spinner_1 = require("./Spinner");
-const imperative_state_1 = require("./Timeline/imperative-state");
-const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
-const ZoomPersistor_1 = require("./ZoomPersistor");
-const container = {
-    color: 'white',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    display: 'flex',
-    backgroundColor: colors_1.BACKGROUND,
-    flexDirection: 'column',
-};
-const CanvasOrLoading = () => {
-    const resolved = remotion_1.Internals.useResolvedVideoConfig(null);
-    const [takesALongTime, setTakesALongTime] = (0, react_1.useState)(false);
-    const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    (0, react_1.useEffect)(() => {
-        const timeout = setTimeout(() => {
-            setTakesALongTime(true);
-        }, 500);
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if ((resolved === null || resolved === void 0 ? void 0 : resolved.type) !== 'success') {
-            return;
-        }
-        const c = resolved.result;
-        setTimeout(() => {
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'center',
-                frame: (0, imperative_state_1.getCurrentFrame)(),
-                durationInFrames: c.durationInFrames,
-            });
-        });
-    }, [resolved, setZoom]);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...loaderLabel,
-            opacity: takesALongTime ? 1 : 0,
-            transition: 'opacity 0.3s',
-        };
-    }, [takesALongTime]);
-    if (!canvasContent) {
-        return null;
-    }
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, { canvasContent: canvasContent })] }));
-    if (canvasContent.type === 'asset' || canvasContent.type === 'output') {
-        return content;
-    }
-    if (!resolved) {
-        return null;
-    }
-    if (resolved.type === 'loading') {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: 30, duration: 1 }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2 }), (0, jsx_runtime_1.jsxs)("div", { style: style, children: ["Running ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "calculateMetadata()" }), "..."] })] }));
-    }
-    if (resolved.type === 'error') {
-        return (0, jsx_runtime_1.jsx)(exports.ErrorLoading, { error: resolved.error });
-    }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), " ", content] }));
-};
-exports.CanvasOrLoading = CanvasOrLoading;
-const loaderLabel = {
-    fontSize: 14,
-    color: colors_1.LIGHT_TEXT,
-    fontFamily: 'sans-serif',
-    lineHeight: 1.5,
-};
-const loaderContainer = {
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    width: '100%',
-    position: 'absolute',
-    height: '100%',
-    overflowY: 'auto',
-};
-const ErrorLoading = ({ error }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: loaderContainer, children: (0, jsx_runtime_1.jsx)(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: false, error: error, onRetry: () => { var _a; return (_a = remotion_1.Internals.resolveCompositionsRef.current) === null || _a === void 0 ? void 0 : _a.reloadCurrentlySelectedComposition(); }, calculateMetadata: true }, error.stack) }));
-};
-exports.ErrorLoading = ErrorLoading;

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

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

package/dist/editor/components/CheckboardToggle.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboardToggle = void 0;
-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 use_keybinding_1 = require("../helpers/use-keybinding");
-const checkerboard_1 = require("../state/checkerboard");
-const ControlButton_1 = require("./ControlButton");
-const accessibilityLabel = [
-    'Show transparency as checkerboard',
-    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(T)',
-]
-    .filter(truthy_1.truthy)
-    .join(' ');
-const CheckboardToggle = () => {
-    const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
-    const onClick = (0, react_1.useCallback)(() => {
-        setCheckerboard((c) => {
-            return !c;
-        });
-    }, [setCheckerboard]);
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "game-board-alt", className: "svg-inline--fa fa-game-board-alt fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { fill: checkerboard ? colors_1.BLUE : 'white', d: "M480 0H32A32 32 0 0 0 0 32v448a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zm-32 256H256v192H64V256h192V64h192z" }) }) }));
-};
-exports.CheckboardToggle = CheckboardToggle;

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

@@ -1,7 +0,0 @@
-import React from 'react';
-export declare const Checkbox: React.FC<{
-    checked: boolean;
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
-    name: string;
-    disabled?: boolean;
-}>;

package/dist/editor/components/Checkbox.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const Checkmark_1 = require("../icons/Checkmark");
-const size = 20;
-const background = {
-    height: size,
-    width: size,
-    position: 'relative',
-};
-const box = {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'absolute',
-    height: size,
-    width: size,
-    top: 0,
-    left: 0,
-    pointerEvents: 'none',
-    color: 'white',
-};
-const Checkbox = ({ checked, onChange, disabled, name }) => {
-    const input = (0, react_1.useMemo)(() => {
-        return {
-            appearance: 'none',
-            background: disabled ? 'transparent' : colors_1.INPUT_BACKGROUND,
-            border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
-            height: size,
-            width: size,
-            top: 0,
-            left: 0,
-            position: 'absolute',
-            margin: 0,
-        };
-    }, [disabled]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)("input", { style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), (0, jsx_runtime_1.jsx)("div", { style: box, children: checked ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null })] }));
-};
-exports.Checkbox = Checkbox;

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

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

package/dist/editor/components/CheckerboardProvider.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckerboardProvider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const checkerboard_1 = require("../state/checkerboard");
-const CheckerboardProvider = ({ children }) => {
-    const [checkerboard, setCheckerboardState] = (0, react_1.useState)(() => (0, checkerboard_1.loadCheckerboardOption)());
-    const setCheckerboard = (0, react_1.useCallback)((newValue) => {
-        setCheckerboardState((prevState) => {
-            const newVal = newValue(prevState);
-            (0, checkerboard_1.persistCheckerboardOption)(newVal);
-            return newVal;
-        });
-    }, []);
-    const checkerboardCtx = (0, react_1.useMemo)(() => {
-        return {
-            checkerboard,
-            setCheckerboard,
-        };
-    }, [checkerboard, setCheckerboard]);
-    return ((0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: children }));
-};
-exports.CheckerboardProvider = CheckerboardProvider;

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

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const getKeysToExpand: (initialFolderName: string, parentFolderName: string | null, initial?: string[]) => string[];
-export declare const compositionSelectorRef: React.RefObject<{
-    expandComposition: (compName: string) => void;
-}>;
-export declare const CompositionSelector: React.FC;

package/dist/editor/components/CompositionSelector.js

@@ -1,102 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionSelector = exports.compositionSelectorRef = exports.getKeysToExpand = 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 create_folder_tree_1 = require("../helpers/create-folder-tree");
-const persist_open_folders_1 = require("../helpers/persist-open-folders");
-const z_index_1 = require("../state/z-index");
-const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
-const CurrentComposition_1 = require("./CurrentComposition");
-const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
-const container = {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    overflow: 'hidden',
-    backgroundColor: colors_1.BACKGROUND,
-};
-const getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
-    initial.push((0, persist_open_folders_1.openFolderKey)(initialFolderName, parentFolderName));
-    const { name, parent } = (0, create_folder_tree_1.splitParentIntoNameAndParent)(parentFolderName);
-    if (!name) {
-        return initial;
-    }
-    return (0, exports.getKeysToExpand)(name, parent, initial);
-};
-exports.getKeysToExpand = getKeysToExpand;
-exports.compositionSelectorRef = (0, react_1.createRef)();
-const CompositionSelector = () => {
-    const { compositions, canvasContent, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const [foldersExpanded, setFoldersExpanded] = (0, react_1.useState)((0, persist_open_folders_1.loadExpandedFolders)('compositions'));
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
-    const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
-        setFoldersExpanded((p) => {
-            var _a;
-            const key = (0, persist_open_folders_1.openFolderKey)(folderName, parentName);
-            const prev = (_a = p[key]) !== null && _a !== void 0 ? _a : false;
-            const foldersExpandedState = {
-                ...p,
-                [key]: !prev,
-            };
-            (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
-            return foldersExpandedState;
-        });
-    }, []);
-    (0, react_1.useImperativeHandle)(exports.compositionSelectorRef, () => {
-        return {
-            expandComposition: (compName) => {
-                const compositionToExpand = compositions.find((c) => c.id === compName);
-                if (!compositionToExpand) {
-                    return;
-                }
-                const { folderName, parentFolderName } = compositionToExpand;
-                if (folderName === null) {
-                    return;
-                }
-                setFoldersExpanded((previousState) => {
-                    var _a, _b, _c;
-                    const foldersExpandedState = {
-                        ...previousState,
-                    };
-                    let currentFolder = folderName;
-                    let currentParentName = parentFolderName;
-                    while (currentFolder) {
-                        if (currentParentName === null || currentParentName === void 0 ? void 0 : currentParentName.includes('/')) {
-                            const splittedParentName = currentParentName.split('/');
-                            currentParentName = (_a = splittedParentName.pop()) !== null && _a !== void 0 ? _a : null;
-                        }
-                        const key = (0, persist_open_folders_1.openFolderKey)(currentFolder, currentParentName);
-                        foldersExpandedState[key] = true;
-                        const parentFolder = folders.find((f) => {
-                            return f.name === currentParentName && currentParentName;
-                        });
-                        currentFolder = (_b = parentFolder === null || parentFolder === void 0 ? void 0 : parentFolder.name) !== null && _b !== void 0 ? _b : null;
-                        currentParentName = (_c = parentFolder === null || parentFolder === void 0 ? void 0 : parentFolder.parent) !== null && _c !== void 0 ? _c : null;
-                    }
-                    (0, persist_open_folders_1.persistExpandedFolders)('compositions', foldersExpandedState);
-                    return foldersExpandedState;
-                });
-            },
-        };
-    }, [compositions, folders]);
-    const items = (0, react_1.useMemo)(() => {
-        return (0, create_folder_tree_1.createFolderTree)(compositions, folders, foldersExpanded);
-    }, [compositions, folders, foldersExpanded]);
-    const showCurrentComposition = canvasContent && canvasContent.type === 'composition';
-    const list = (0, react_1.useMemo)(() => {
-        return {
-            height: showCurrentComposition
-                ? `calc(100% - ${CurrentComposition_1.CURRENT_COMPOSITION_HEIGHT}px)`
-                : '100%',
-            overflowY: 'auto',
-        };
-    }, [showCurrentComposition]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [showCurrentComposition ? (0, jsx_runtime_1.jsx)(CurrentComposition_1.CurrentComposition, {}) : null, (0, jsx_runtime_1.jsx)("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
-                    return ((0, jsx_runtime_1.jsx)(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: showCurrentComposition ? canvasContent.compositionId : null, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));
-                }) })] }));
-};
-exports.CompositionSelector = CompositionSelector;

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

@@ -1,22 +0,0 @@
-import React from 'react';
-import { type AnyComposition } from 'remotion';
-export type CompositionSelectorItemType = {
-    key: string;
-    type: 'composition';
-    composition: AnyComposition;
-} | {
-    key: string;
-    type: 'folder';
-    folderName: string;
-    parentName: string | null;
-    items: CompositionSelectorItemType[];
-    expanded: boolean;
-};
-export declare const CompositionSelectorItem: React.FC<{
-    item: CompositionSelectorItemType;
-    currentComposition: string | null;
-    tabIndex: number;
-    selectComposition: (c: AnyComposition, push: boolean) => void;
-    toggleFolder: (folderName: string, parentName: string | null) => void;
-    level: number;
-}>;