@remotion/cli 4.0.84 → 4.0.85

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

package/dist/editor/components/CompositionSelectorItem.js

@@ -1,136 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionSelectorItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const is_composition_still_1 = require("../helpers/is-composition-still");
-const folder_1 = require("../icons/folder");
-const still_1 = require("../icons/still");
-const video_1 = require("../icons/video");
-const ContextMenu_1 = require("./ContextMenu");
-const layout_1 = require("./layout");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const SidebarRenderButton_1 = require("./SidebarRenderButton");
-const COMPOSITION_ITEM_HEIGHT = 32;
-const itemStyle = {
-    paddingRight: 10,
-    paddingTop: 6,
-    paddingBottom: 6,
-    fontSize: 13,
-    display: 'flex',
-    textDecoration: 'none',
-    cursor: 'default',
-    alignItems: 'center',
-    marginBottom: 1,
-    appearance: 'none',
-    border: 'none',
-    width: '100%',
-    textAlign: 'left',
-    backgroundColor: colors_1.BACKGROUND,
-    height: COMPOSITION_ITEM_HEIGHT,
-};
-const labelStyle = {
-    textAlign: 'left',
-    textDecoration: 'none',
-    fontSize: 13,
-    flex: 1,
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-};
-const iconStyle = {
-    width: 18,
-    height: 18,
-    flexShrink: 0,
-};
-const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, selectComposition, toggleFolder, }) => {
-    const selected = (0, react_1.useMemo)(() => {
-        if (item.type === 'composition') {
-            return currentComposition === item.composition.id;
-        }
-        return false;
-    }, [item, currentComposition]);
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...itemStyle,
-            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({ hovered, selected }),
-            paddingLeft: 12 + level * 8,
-        };
-    }, [hovered, level, selected]);
-    const label = (0, react_1.useMemo)(() => {
-        return {
-            ...labelStyle,
-            color: selected || hovered ? 'white' : colors_1.LIGHT_TEXT,
-        };
-    }, [hovered, selected]);
-    const onClick = (0, react_1.useCallback)((evt) => {
-        evt.preventDefault();
-        if (item.type === 'composition') {
-            selectComposition(item.composition, true);
-        }
-        else {
-            toggleFolder(item.folderName, item.parentName);
-        }
-    }, [item, selectComposition, toggleFolder]);
-    const onKeyPress = (0, react_1.useCallback)((evt) => {
-        if (evt.key === 'Enter') {
-            onClick(evt);
-        }
-    }, [onClick]);
-    const contextMenu = (0, react_1.useMemo)(() => {
-        if (item.type === 'composition') {
-            return [
-                {
-                    id: '1',
-                    keyHint: null,
-                    label: `Copy ID`,
-                    leftItem: null,
-                    onClick: () => {
-                        navigator.clipboard
-                            .writeText(item.composition.id)
-                            .catch((err) => {
-                            var _a;
-                            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
-                                content: `Could not copy to clipboard: ${err.message}`,
-                                created: Date.now(),
-                                duration: 1000,
-                                id: String(Math.random()),
-                            });
-                        })
-                            .then(() => {
-                            var _a;
-                            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
-                                content: 'Copied to clipboard',
-                                created: Date.now(),
-                                duration: 1000,
-                                id: String(Math.random()),
-                            });
-                        });
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    type: 'item',
-                    value: 'remove',
-                },
-            ];
-        }
-        return [];
-    }, [item]);
-    if (item.type === 'folder') {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.folderName, children: [item.expanded ? ((0, jsx_runtime_1.jsx)(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT })) : ((0, jsx_runtime_1.jsx)(folder_1.CollapsedFolderIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.folderName })] }), item.expanded
-                    ? item.items.map((childItem) => {
-                        return ((0, jsx_runtime_1.jsx)(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder }, childItem.key + childItem.type));
-                    })
-                    : null] }));
-    }
-    return ((0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { values: contextMenu, children: (0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", children: (0, jsx_runtime_1.jsxs)("a", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyPress: onKeyPress, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.composition.id }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition }) })] }) }) }));
-};
-exports.CompositionSelectorItem = CompositionSelectorItem;

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

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const ContextMenu: React.FC<{
-    children: React.ReactNode;
-    values: ComboboxValue[];
-}>;

package/dist/editor/components/ContextMenu.js

@@ -1,91 +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.ContextMenu = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
-const react_1 = require("react");
-const react_dom_1 = __importDefault(require("react-dom"));
-const noop_1 = require("../helpers/noop");
-const z_index_1 = require("../state/z-index");
-const portals_1 = require("./Menu/portals");
-const styles_1 = require("./Menu/styles");
-const MenuContent_1 = require("./NewComposition/MenuContent");
-const ContextMenu = ({ children, values }) => {
-    const ref = (0, react_1.useRef)(null);
-    const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
-    const { currentZIndex } = (0, z_index_1.useZIndex)();
-    const style = (0, react_1.useMemo)(() => {
-        return {};
-    }, []);
-    const size = player_1.PlayerInternals.useElementSize(ref, {
-        triggerOnWindowResize: true,
-        shouldApplyCssTransforms: true,
-    });
-    (0, react_1.useEffect)(() => {
-        const { current } = ref;
-        if (!current) {
-            return;
-        }
-        const onClick = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            setOpened({ type: 'open', left: e.clientX, top: e.clientY });
-            return false;
-        };
-        current.addEventListener('contextmenu', onClick);
-        return () => {
-            current.removeEventListener('contextmenu', onClick);
-        };
-    }, [size]);
-    const spaceToBottom = (0, react_1.useMemo)(() => {
-        if (size && opened.type === 'open') {
-            return size.windowSize.height - opened.top;
-        }
-        return 0;
-    }, [opened, size]);
-    const spaceToTop = (0, react_1.useMemo)(() => {
-        if (size && opened.type === 'open') {
-            return opened.top;
-        }
-        return 0;
-    }, [opened, size]);
-    const portalStyle = (0, react_1.useMemo)(() => {
-        if (opened.type === 'not-open') {
-            return;
-        }
-        if (!size) {
-            return;
-        }
-        const spaceToRight = size.windowSize.width - (opened.left + size.width);
-        const minSpaceToRightRequired = styles_1.MAX_MENU_WIDTH;
-        const verticalLayout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
-        const horizontalLayout = spaceToRight >= minSpaceToRightRequired ? 'left' : 'right';
-        return {
-            ...styles_1.menuContainerTowardsTop,
-            ...(verticalLayout === 'top'
-                ? {
-                    top: opened.top,
-                }
-                : {
-                    bottom: size.windowSize.height - opened.top,
-                }),
-            ...(horizontalLayout === 'left'
-                ? {
-                    left: opened.left,
-                }
-                : {
-                    right: size.windowSize.width - opened.left,
-                }),
-        };
-    }, [opened, spaceToBottom, spaceToTop, size]);
-    const onHide = (0, react_1.useCallback)(() => {
-        setOpened({ type: 'not-open' });
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: ref, onContextMenu: () => false, style: style, children: children }), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
-                : null] }));
-};
-exports.ContextMenu = ContextMenu;

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

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const CONTROL_BUTTON_PADDING = 6;
-export declare const ControlButton: (props: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
-    title: string;
-}) => JSX.Element;

package/dist/editor/components/ControlButton.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ControlButton = exports.CONTROL_BUTTON_PADDING = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const z_index_1 = require("../state/z-index");
-exports.CONTROL_BUTTON_PADDING = 6;
-const ControlButton = (props) => {
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            opacity: props.disabled ? 0.5 : 1,
-            display: 'inline-flex',
-            background: 'none',
-            border: 'none',
-            padding: exports.CONTROL_BUTTON_PADDING,
-        };
-    }, [props.disabled]);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    return ((0, jsx_runtime_1.jsx)("button", { type: 'button', tabIndex: tabIndex, ...props, style: style }));
-};
-exports.ControlButton = ControlButton;

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

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const CopyButton: React.FC<{
-    textToCopy: string;
-    label: string;
-    labelWhenCopied: string;
-}>;

package/dist/editor/components/CopyButton.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CopyButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Button_1 = require("../../preview-server/error-overlay/remotion-overlay/Button");
-const copy_text_1 = require("../helpers/copy-text");
-const layout_1 = require("./layout");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const iconStyle = {
-    width: 16,
-    height: 16,
-    color: 'white',
-};
-const buttonContainerStyle = {
-    display: 'flex',
-    minWidth: '114px',
-};
-const copyIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: iconStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
-const labelStyle = {
-    fontSize: 14,
-};
-const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
-    const [copied, setCopied] = (0, react_1.useState)(false);
-    const onClick = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(textToCopy)
-            .then(() => {
-            setCopied(Date.now());
-        })
-            .catch((err) => {
-            (0, NotificationCenter_1.sendErrorNotification)(`Could not copy: ${err.message}`);
-        });
-    }, [textToCopy]);
-    (0, react_1.useEffect)(() => {
-        if (!copied) {
-            return;
-        }
-        const to = setTimeout(() => setCopied(false), 2000);
-        return () => clearTimeout(to);
-    }, [copied]);
-    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: onClick, buttonContainerStyle: buttonContainerStyle, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label })] }));
-};
-exports.CopyButton = CopyButton;

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

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const CURRENT_COMPOSITION_HEIGHT = 80;
-export declare const CurrentComposition: () => JSX.Element;

package/dist/editor/components/CurrentComposition.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurrentComposition = exports.CURRENT_COMPOSITION_HEIGHT = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const remotion_1 = require("remotion");
-const colors_1 = require("../helpers/colors");
-const is_composition_still_1 = require("../helpers/is-composition-still");
-const render_frame_1 = require("../state/render-frame");
-exports.CURRENT_COMPOSITION_HEIGHT = 80;
-const container = {
-    height: exports.CURRENT_COMPOSITION_HEIGHT,
-    display: 'block',
-    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
-    padding: 12,
-    color: 'white',
-    backgroundColor: colors_1.BACKGROUND,
-};
-const title = {
-    fontWeight: 'bold',
-    fontSize: 12,
-    whiteSpace: 'nowrap',
-    lineHeight: '18px',
-    backgroundColor: colors_1.BACKGROUND,
-};
-const subtitle = {
-    fontSize: 12,
-    opacity: 0.8,
-    whiteSpace: 'nowrap',
-    lineHeight: '18px',
-    backgroundColor: colors_1.BACKGROUND,
-};
-const row = {
-    display: 'flex',
-    flexDirection: 'row',
-    lineHeight: '18px',
-    backgroundColor: colors_1.BACKGROUND,
-};
-const CurrentComposition = () => {
-    const video = remotion_1.Internals.useVideo();
-    if (!video) {
-        return (0, jsx_runtime_1.jsx)("div", { style: container });
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: video.id }), (0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? ((0, jsx_runtime_1.jsx)("div", { style: subtitle, children: "Still" })) : ((0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] }) }) }));
-};
-exports.CurrentComposition = CurrentComposition;

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

@@ -1,3 +0,0 @@
-import type React from 'react';
-export declare const TitleUpdater: React.FC;
-export declare const CurrentCompositionKeybindings: React.FC;

package/dist/editor/components/CurrentCompositionSideEffects.js

@@ -1,67 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurrentCompositionKeybindings = exports.TitleUpdater = void 0;
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const client_id_1 = require("../helpers/client-id");
-const document_title_1 = require("../helpers/document-title");
-const use_keybinding_1 = require("../helpers/use-keybinding");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const context_1 = require("./RenderQueue/context");
-const TitleUpdater = () => {
-    const renderQueue = (0, react_1.useContext)(context_1.RenderQueueContext);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const { jobs } = renderQueue;
-    (0, react_1.useEffect)(() => {
-        if (!canvasContent) {
-            (0, document_title_1.setCurrentCanvasContentId)(null);
-            return;
-        }
-        if (canvasContent.type === 'composition') {
-            (0, document_title_1.setCurrentCanvasContentId)(canvasContent.compositionId);
-            return;
-        }
-        if (canvasContent.type === 'output') {
-            (0, document_title_1.setCurrentCanvasContentId)(canvasContent.path);
-            return;
-        }
-        (0, document_title_1.setCurrentCanvasContentId)(canvasContent.asset);
-    }, [canvasContent]);
-    (0, react_1.useEffect)(() => {
-        (0, document_title_1.setRenderJobs)(jobs);
-    }, [jobs]);
-    return null;
-};
-exports.TitleUpdater = TitleUpdater;
-const CurrentCompositionKeybindings = () => {
-    const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const video = remotion_1.Internals.useVideo();
-    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const openRenderModal = (0, react_1.useCallback)(() => {
-        if (!video) {
-            return;
-        }
-        if (type !== 'connected') {
-            (0, NotificationCenter_1.sendErrorNotification)('Studio server is offline');
-            return;
-        }
-        const renderButton = document.getElementById('render-modal-button');
-        renderButton.click();
-    }, [type, video]);
-    (0, react_1.useEffect)(() => {
-        const binding = keybindings.registerKeybinding({
-            event: 'keydown',
-            key: 'r',
-            commandCtrlKey: false,
-            callback: openRenderModal,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
-        return () => {
-            binding.unregister();
-        };
-    }, [keybindings, openRenderModal]);
-    return null;
-};
-exports.CurrentCompositionKeybindings = CurrentCompositionKeybindings;

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

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

package/dist/editor/components/Editor.js

@@ -1,57 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Editor = 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 noop_1 = require("../helpers/noop");
-const timeline_zoom_1 = require("../state/timeline-zoom");
-const z_index_1 = require("../state/z-index");
-const EditorContent_1 = require("./EditorContent");
-const GlobalKeybindings_1 = require("./GlobalKeybindings");
-const Modals_1 = require("./Modals");
-const NoRegisterRoot_1 = require("./NoRegisterRoot");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const background = {
-    backgroundColor: colors_1.BACKGROUND,
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-    flexDirection: 'column',
-    position: 'absolute',
-};
-const Editor = () => {
-    const [Root, setRoot] = (0, react_1.useState)(() => remotion_1.Internals.getRoot());
-    const [waitForRoot] = (0, react_1.useState)(() => {
-        if (Root) {
-            return 0;
-        }
-        return (0, remotion_1.delayRender)('Waiting for registerRoot()');
-    });
-    (0, react_1.useEffect)(() => {
-        const listenToChanges = (e) => {
-            if (window.remotion_unsavedProps) {
-                e.returnValue = 'Are you sure you want to leave?';
-            }
-        };
-        window.addEventListener('beforeunload', listenToChanges);
-        return () => {
-            window.removeEventListener('beforeunload', listenToChanges);
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (Root) {
-            return;
-        }
-        const cleanup = remotion_1.Internals.waitForRoot((NewRoot) => {
-            setRoot(() => NewRoot);
-            (0, remotion_1.continueRender)(waitForRoot);
-        });
-        return () => {
-            cleanup();
-        };
-    }, [Root, waitForRoot]);
-    return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [Root === null ? (0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {}) : (0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {}), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, {})] }) }));
-};
-exports.Editor = Editor;

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

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

package/dist/editor/components/EditorContent.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditorContent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
-const SplitterContainer_1 = require("./Splitter/SplitterContainer");
-const SplitterElement_1 = require("./Splitter/SplitterElement");
-const SplitterHandle_1 = require("./Splitter/SplitterHandle");
-const Timeline_1 = require("./Timeline/Timeline");
-const TopPanel_1 = require("./TopPanel");
-const noop = () => undefined;
-const EditorContent = () => {
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    if (canvasContent === null ||
-        isStill ||
-        canvasContent.type !== 'composition') {
-        return (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {});
-    }
-    return ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {}) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }));
-};
-exports.EditorContent = EditorContent;