@remotion/cli 4.0.111 → 4.0.113

package/dist/editor/components/AudioWaveformBar.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AudioWaveformBar = exports.WAVEFORM_BAR_MARGIN = exports.WAVEFORM_BAR_LENGTH = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const timeline_layout_1 = require("../helpers/timeline-layout");
+exports.WAVEFORM_BAR_LENGTH = 4;
+exports.WAVEFORM_BAR_MARGIN = 2;
+const container = {
+    width: exports.WAVEFORM_BAR_LENGTH,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    marginLeft: exports.WAVEFORM_BAR_MARGIN,
+    borderRadius: 2,
+};
+const AudioWaveformBar = ({ amplitude }) => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            height: (timeline_layout_1.TIMELINE_LAYER_HEIGHT / 2) * amplitude,
+        };
+    }, [amplitude]);
+    return (0, jsx_runtime_1.jsx)("div", { style: style });
+};
+exports.AudioWaveformBar = AudioWaveformBar;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { CanvasContent } from 'remotion';
+export declare const Canvas: React.FC<{
+    canvasContent: CanvasContent;
+}>;

package/dist/editor/components/Canvas.js

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

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

package/dist/editor/components/CanvasOrLoading.js

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

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

package/dist/editor/components/CheckboardToggle.js

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

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

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

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

package/dist/editor/components/CheckerboardProvider.js

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

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

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

@@ -0,0 +1,22 @@
+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;
+}>;