@remotion/studio 4.0.485 → 4.0.487

package/dist/components/CompositionSelector.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelector = exports.useCompositionNavigation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
@@ -14,6 +15,8 @@ const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
 const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const actions_1 = require("./RenderQueue/actions");
 const useCompositionNavigation = () => {
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
@@ -60,10 +63,10 @@ const container = {
 };
 const quickSwitcherArea = {
     padding: '4px 12px',
-    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
+    borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
 };
 const quickSwitcherTrigger = {
-    backgroundColor: 'rgba(255, 255, 255, 0.06)',
+    backgroundColor: colors_1.WHITE_ALPHA_06,
     borderRadius: 5,
     padding: '4px 10px',
     color: colors_1.LIGHT_TEXT,
@@ -80,10 +83,34 @@ const shortcutLabel = {
     fontSize: 11,
     opacity: 0.6,
 };
+const autoScrollThreshold = 70;
+const maxAutoScrollSpeed = 18;
+const getAutoScrollSpeed = ({ clientY, element, }) => {
+    const { top, bottom } = element.getBoundingClientRect();
+    const threshold = Math.min(autoScrollThreshold, element.clientHeight / 2);
+    if (threshold <= 0) {
+        return 0;
+    }
+    const distanceToTop = clientY - top;
+    const distanceToBottom = bottom - clientY;
+    if (distanceToTop < threshold) {
+        const progress = Math.min(1, (threshold - distanceToTop) / threshold);
+        return -Math.ceil(progress * maxAutoScrollSpeed);
+    }
+    if (distanceToBottom < threshold) {
+        const progress = Math.min(1, (threshold - distanceToBottom) / threshold);
+        return Math.ceil(progress * maxAutoScrollSpeed);
+    }
+    return 0;
+};
 const CompositionSelector = () => {
     const { compositions, canvasContent, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { foldersExpanded } = (0, react_1.useContext)(persist_open_folders_1.ExpandedFoldersContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const [rootDragHovered, setRootDragHovered] = (0, react_1.useState)(false);
+    const listRef = (0, react_1.useRef)(null);
+    const autoScrollAnimation = (0, react_1.useRef)(null);
+    const autoScrollSpeed = (0, react_1.useRef)(0);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const sortedCompositions = (0, react_1.useMemo)(() => {
@@ -99,8 +126,9 @@ const CompositionSelector = () => {
         return {
             flex: 1,
             overflowY: 'auto',
+            backgroundColor: rootDragHovered ? colors_1.WHITE_ALPHA_12 : colors_1.BACKGROUND,
         };
-    }, []);
+    }, [rootDragHovered]);
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
         var _a;
         (_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.toggleFolder(folderName, parentName);
@@ -112,11 +140,119 @@ const CompositionSelector = () => {
             invocationTimestamp: Date.now(),
         });
     }, [setSelectedModal]);
+    const clearRootDragHover = (0, react_1.useCallback)(() => {
+        setRootDragHovered(false);
+    }, []);
+    const stopCompositionListAutoScroll = (0, react_1.useCallback)(() => {
+        autoScrollSpeed.current = 0;
+        if (autoScrollAnimation.current !== null) {
+            cancelAnimationFrame(autoScrollAnimation.current);
+            autoScrollAnimation.current = null;
+        }
+    }, []);
+    const runCompositionListAutoScroll = (0, react_1.useCallback)(() => {
+        const listElement = listRef.current;
+        const speed = autoScrollSpeed.current;
+        if (listElement === null || speed === 0) {
+            autoScrollAnimation.current = null;
+            return;
+        }
+        const scrollTopBefore = listElement.scrollTop;
+        listElement.scrollTop += speed;
+        if (listElement.scrollTop === scrollTopBefore) {
+            autoScrollAnimation.current = null;
+            return;
+        }
+        autoScrollAnimation.current = requestAnimationFrame(runCompositionListAutoScroll);
+    }, []);
+    const setCompositionListAutoScrollSpeed = (0, react_1.useCallback)((speed) => {
+        if (speed === 0) {
+            stopCompositionListAutoScroll();
+            return;
+        }
+        autoScrollSpeed.current = speed;
+        if (autoScrollAnimation.current === null) {
+            autoScrollAnimation.current = requestAnimationFrame(runCompositionListAutoScroll);
+        }
+    }, [runCompositionListAutoScroll, stopCompositionListAutoScroll]);
+    const onCompositionListDragOverCapture = (0, react_1.useCallback)((event) => {
+        if (window.remotion_isReadOnlyStudio ||
+            !Array.from(event.dataTransfer.types).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE)) {
+            stopCompositionListAutoScroll();
+            return;
+        }
+        const listElement = listRef.current;
+        if (listElement === null) {
+            stopCompositionListAutoScroll();
+            return;
+        }
+        setCompositionListAutoScrollSpeed(getAutoScrollSpeed({ clientY: event.clientY, element: listElement }));
+    }, [setCompositionListAutoScrollSpeed, stopCompositionListAutoScroll]);
+    (0, react_1.useEffect)(() => {
+        return stopCompositionListAutoScroll;
+    }, [stopCompositionListAutoScroll]);
+    const onRootDragOver = (0, react_1.useCallback)((event) => {
+        if (window.remotion_isReadOnlyStudio ||
+            !Array.from(event.dataTransfer.types).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE)) {
+            return;
+        }
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+        setRootDragHovered(true);
+    }, []);
+    const onRootDragLeave = (0, react_1.useCallback)((event) => {
+        const { relatedTarget } = event;
+        if (relatedTarget instanceof Node &&
+            event.currentTarget.contains(relatedTarget)) {
+            return;
+        }
+        stopCompositionListAutoScroll();
+        setRootDragHovered(false);
+    }, [stopCompositionListAutoScroll]);
+    const onRootDrop = (0, react_1.useCallback)(async (event) => {
+        if (window.remotion_isReadOnlyStudio) {
+            return;
+        }
+        const raw = event.dataTransfer.getData(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE);
+        const parsed = raw ? (0, studio_shared_1.parseCompositionDragData)(raw) : null;
+        if (parsed === null) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        stopCompositionListAutoScroll();
+        setRootDragHovered(false);
+        const composition = compositions.find((c) => c.id === parsed.compositionId);
+        if (!composition || composition.folderName === null) {
+            return;
+        }
+        const notification = (0, NotificationCenter_1.showNotification)(`Moving ${parsed.compositionId}...`, null);
+        const controller = new AbortController();
+        try {
+            const result = await (0, actions_1.applyCodemod)({
+                codemod: {
+                    type: 'move-composition-to-folder',
+                    idToMove: parsed.compositionId,
+                    folderName: null,
+                    parentName: null,
+                },
+                dryRun: false,
+                signal: controller.signal,
+                symbolicatedStack: null,
+            });
+            notification.replaceContent(result.success
+                ? `Moved ${parsed.compositionId} outside of folder`
+                : result.reason, result.success ? 2000 : 4000);
+        }
+        catch (err) {
+            notification.replaceContent(err instanceof Error ? err.message : String(err), 4000);
+        }
+    }, [compositions, stopCompositionListAutoScroll]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: quickSwitcherArea, children: jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, children: ["Search...", (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] }))] }) }), jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
+            jsx_runtime_1.jsx("div", { style: quickSwitcherArea, children: jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, children: ["Search...", (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] }))] }) }), jsx_runtime_1.jsx("div", { ref: listRef, className: "__remotion-vertical-scrollbar", style: list, onDragOverCapture: onCompositionListDragOverCapture, onDragEndCapture: stopCompositionListAutoScroll, onDragOver: onRootDragOver, onDragLeave: onRootDragLeave, onDropCapture: stopCompositionListAutoScroll, onDrop: onRootDrop, children: items.map((c) => {
                     return (jsx_runtime_1.jsx(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: canvasContent && canvasContent.type === 'composition'
                             ? canvasContent.compositionId
-                            : null, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));
+                            : null, selectComposition: selectComposition, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover, tabIndex: tabIndex, item: c }, c.key + c.type));
                 }) })
         ] }));
 };

package/dist/components/CompositionSelectorItem.d.ts

@@ -19,5 +19,6 @@ export declare const CompositionSelectorItem: React.FC<{
     readonly tabIndex: number;
     readonly selectComposition: (c: _InternalTypes['AnyComposition'], push: boolean) => void;
     readonly toggleFolder: (folderName: string, parentName: string | null) => void;
+    readonly clearRootDragHover: () => void;
     readonly level: number;
 }>;

package/dist/components/CompositionSelectorItem.js

@@ -2,9 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelectorItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const get_folder_id_1 = require("../helpers/get-folder-id");
 const is_composition_still_1 = require("../helpers/is-composition-still");
 const noop_1 = require("../helpers/noop");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
@@ -17,6 +19,8 @@ const CompositionContextButton_1 = require("./CompositionContextButton");
 const ContextMenu_1 = require("./ContextMenu");
 const folder_menu_items_1 = require("./folder-menu-items");
 const layout_1 = require("./layout");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const actions_1 = require("./RenderQueue/actions");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const COMPOSITION_ITEM_HEIGHT = 32;
@@ -52,7 +56,7 @@ const iconStyle = {
     height: 18,
     flexShrink: 0,
 };
-const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, selectComposition, toggleFolder, }) => {
+const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, selectComposition, toggleFolder, clearRootDragHover, }) => {
     const selected = (0, react_1.useMemo)(() => {
         if (item.type === 'composition') {
             return currentComposition === item.composition.id;
@@ -66,6 +70,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
+    const [dragHovered, setDragHovered] = (0, react_1.useState)(false);
     const compositionRowRef = (0, react_1.useRef)(null);
     const compositionId = item.type === 'composition' ? item.composition.id : null;
     (0, react_1.useLayoutEffect)(() => {
@@ -81,14 +86,16 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const style = (0, react_1.useMemo)(() => {
         return {
             ...itemStyle,
-            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({ hovered, selected }),
+            backgroundColor: dragHovered
+                ? colors_1.WHITE_ALPHA_12
+                : (0, colors_1.getBackgroundFromHoverState)({ hovered, selected }),
             paddingLeft: 12 + level * 8,
         };
-    }, [hovered, level, selected]);
+    }, [dragHovered, hovered, level, selected]);
     const label = (0, react_1.useMemo)(() => {
         return {
             ...labelStyle,
-            color: selected || hovered ? 'white' : colors_1.LIGHT_TEXT,
+            color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
         };
     }, [hovered, selected]);
     const onClick = (0, react_1.useCallback)((evt) => {
@@ -130,16 +137,101 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
             readOnlyStudio: window.remotion_isReadOnlyStudio,
         });
     }, [connectionStatus, item, resolvedLocation, setSelectedModal]);
+    const onCompositionDragStart = (0, react_1.useCallback)((event) => {
+        var _a;
+        if (item.type !== 'composition' || window.remotion_isReadOnlyStudio) {
+            event.preventDefault();
+            return;
+        }
+        event.dataTransfer.effectAllowed = 'copyMove';
+        event.dataTransfer.setData(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE, JSON.stringify((0, studio_shared_1.makeCompositionDragData)({
+            compositionFile: (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : null,
+            compositionId: item.composition.id,
+        })));
+    }, [item, resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source]);
+    const onFolderDragOver = (0, react_1.useCallback)((event) => {
+        if (item.type !== 'folder' ||
+            window.remotion_isReadOnlyStudio ||
+            !Array.from(event.dataTransfer.types).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        event.dataTransfer.dropEffect = 'move';
+        clearRootDragHover();
+        setDragHovered(true);
+    }, [clearRootDragHover, item]);
+    const onFolderDragLeave = (0, react_1.useCallback)(() => {
+        setDragHovered(false);
+    }, []);
+    const onFolderChildListDragOver = (0, react_1.useCallback)((event) => {
+        if (item.type !== 'folder' ||
+            window.remotion_isReadOnlyStudio ||
+            !Array.from(event.dataTransfer.types).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        event.dataTransfer.dropEffect = 'move';
+        clearRootDragHover();
+    }, [clearRootDragHover, item]);
+    const onFolderDrop = (0, react_1.useCallback)(async (event) => {
+        if (item.type !== 'folder' || window.remotion_isReadOnlyStudio) {
+            return;
+        }
+        const raw = event.dataTransfer.getData(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE);
+        const parsed = raw ? (0, studio_shared_1.parseCompositionDragData)(raw) : null;
+        if (parsed === null) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        clearRootDragHover();
+        setDragHovered(false);
+        const isAlreadyDirectChild = item.items.some((child) => {
+            return (child.type === 'composition' &&
+                child.composition.id === parsed.compositionId);
+        });
+        if (isAlreadyDirectChild) {
+            return;
+        }
+        const folderId = (0, get_folder_id_1.getFolderId)({
+            folderName: item.folderName,
+            parentName: item.parentName,
+        });
+        const notification = (0, NotificationCenter_1.showNotification)(`Moving ${parsed.compositionId}...`, null);
+        const controller = new AbortController();
+        try {
+            const result = await (0, actions_1.applyCodemod)({
+                codemod: {
+                    type: 'move-composition-to-folder',
+                    idToMove: parsed.compositionId,
+                    folderName: item.folderName,
+                    parentName: item.parentName,
+                },
+                dryRun: false,
+                signal: controller.signal,
+                symbolicatedStack: null,
+            });
+            notification.replaceContent(result.success
+                ? `Moved ${parsed.compositionId} to ${folderId}`
+                : result.reason, result.success ? 2000 : 4000);
+            if (result.success && !item.expanded) {
+                toggleFolder(item.folderName, item.parentName);
+            }
+        }
+        catch (err) {
+            notification.replaceContent(err instanceof Error ? err.message : String(err), 4000);
+        }
+    }, [clearRootDragHover, item, toggleFolder]);
     if (item.type === 'folder') {
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, title: item.folderName, role: "button", children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered })
-                            ] }) }) }), item.expanded
-                    ? item.items.map((childItem) => {
-                        return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder }, childItem.key + childItem.type));
-                    })
-                    : null] }));
+                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, onDragOver: onFolderDragOver, onDragLeave: onFolderDragLeave, onDrop: onFolderDrop, title: item.folderName, role: "button", children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered })
+                            ] }) }) }), item.expanded ? (jsx_runtime_1.jsx("div", { onDragOver: onFolderChildListDragOver, onDrop: onFolderDrop, children: item.items.map((childItem) => {
+                        return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover }, childItem.key + childItem.type));
+                    }) })) : null] }));
     }
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition })
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onCompositionDragStart, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition })
                 ] }) }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

package/dist/components/ContextMenu.js

@@ -170,7 +170,8 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
             return;
         }
         if (forwardedRef) {
-            forwardedRef.current = node;
+            forwardedRef.current =
+                node;
         }
     }, [forwardedRef]);
     (0, react_1.useEffect)(() => {

package/dist/components/CopyButton.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopyButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
 const Button_1 = require("./Button");
 const layout_1 = require("./layout");
@@ -10,13 +11,13 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const iconStyle = {
     width: 16,
     height: 16,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const buttonContainerStyle = {
     display: 'flex',
     minWidth: '114px',
 };
-const copyIcon = (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: 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 copyIcon = (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: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, 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,
 };

package/dist/components/CurrentAsset.d.ts

@@ -3,4 +3,6 @@ import type { MediaMetadata } from '../helpers/use-media-metadata';
 export declare const CURRENT_ASSET_HEIGHT = 84;
 export declare const getCurrentAssetMetadataSource: (assetName: string | null) => string | null;
 export declare const getCurrentAssetMediaDetailLines: (mediaMetadata: MediaMetadata) => string[];
-export declare const CurrentAsset: React.FC;
+export declare const CurrentAsset: React.FC<{
+    readonly readOnlyStudio: boolean;
+}>;

package/dist/components/CurrentAsset.js

@@ -5,11 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
 const format_media_duration_1 = require("../helpers/format-media-duration");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const render_codec_label_1 = require("../helpers/render-codec-label");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
+const InlineEditableTitle_1 = require("./InlineEditableTitle");
 const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
+const use_rename_static_file_1 = require("./NewComposition/use-rename-static-file");
 const use_static_files_1 = require("./use-static-files");
 exports.CURRENT_ASSET_HEIGHT = InspectorInfoHeader_1.INSPECTOR_INFO_HEADER_MIN_HEIGHT;
 const getCurrentAssetMetadataSource = (assetName) => {
@@ -52,11 +55,17 @@ const getCurrentAssetMediaDetailLines = (mediaMetadata) => {
     return detailLines;
 };
 exports.getCurrentAssetMediaDetailLines = getCurrentAssetMediaDetailLines;
-const CurrentAsset = () => {
+const CurrentAsset = ({ readOnlyStudio }) => {
     var _a;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
     const assetName = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' ? canvasContent.asset : null;
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
+    const renameFile = (0, use_rename_static_file_1.useRenameStaticFile)({
+        relativePath: assetName !== null && assetName !== void 0 ? assetName : '',
+        staticFiles,
+    });
     const sizeInBytes = (0, react_1.useMemo)(() => {
         var _a;
         if (!assetName) {
@@ -67,6 +76,10 @@ const CurrentAsset = () => {
     }, [assetName, staticFiles]);
     const src = (0, exports.getCurrentAssetMetadataSource)(assetName);
     const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)(src);
+    const canRename = connectionStatus === 'connected' && !readOnlyStudio;
+    const onRename = (0, react_1.useCallback)((newName) => {
+        renameFile(newName).catch(() => undefined);
+    }, [renameFile]);
     if (!assetName) {
         return jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, {});
     }
@@ -87,7 +100,7 @@ const CurrentAsset = () => {
         ? (0, exports.getCurrentAssetMediaDetailLines)(mediaMetadata)
         : [];
     return (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoHeader, { children: [
-            jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoTitle, { children: fileName }), subtitleParts.length > 0 ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: subtitleParts.join(' · ') })) : null, mediaMetadata ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: (0, format_media_duration_1.formatMediaDuration)(mediaMetadata.duration) })) : null, mediaDetailLines.map((line) => {
+            jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onCommit: onRename, title: assetName }), subtitleParts.length > 0 ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: subtitleParts.join(' · ') })) : null, mediaMetadata ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: (0, format_media_duration_1.formatMediaDuration)(mediaMetadata.duration) })) : null, mediaDetailLines.map((line) => {
                 return jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: line }, line);
             })] }));
 };

package/dist/components/CurrentComposition.js

@@ -6,6 +6,9 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const is_composition_still_1 = require("../helpers/is-composition-still");
 const open_in_editor_1 = require("../helpers/open-in-editor");
+const react_2 = require("../icons/react");
+const still_1 = require("../icons/still");
+const video_1 = require("../icons/video");
 const render_frame_1 = require("../state/render-frame");
 const InlineCompositionName_1 = require("./InlineCompositionName");
 const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
@@ -13,8 +16,16 @@ const InspectorSourceLocation_1 = require("./InspectorSourceLocation");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 exports.CURRENT_COMPOSITION_HEIGHT = InspectorInfoHeader_1.INSPECTOR_INFO_HEADER_MIN_HEIGHT;
+const sourceLocationIconStyle = {
+    flexShrink: 0,
+    height: 13,
+    width: 13,
+};
+const renderReactIcon = (color) => {
+    return jsx_runtime_1.jsx(react_2.ReactIcon, { color: color, style: sourceLocationIconStyle });
+};
 const CurrentComposition = () => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     const video = remotion_1.Internals.useVideo();
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const currentComposition = (0, react_1.useMemo)(() => {
@@ -36,6 +47,22 @@ const CurrentComposition = () => {
             source: resolvedCompositionLocation.source,
         };
     }, [resolvedCompositionLocation]);
+    const compositionFile = (_b = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _b !== void 0 ? _b : null;
+    const compositionId = (_c = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.id) !== null && _c !== void 0 ? _c : null;
+    const compositionComponentInfo = (0, open_in_editor_1.useCachedCompositionComponentInfo)({
+        compositionFile,
+        compositionId,
+    });
+    const componentLocation = (_d = compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.location) !== null && _d !== void 0 ? _d : null;
+    (0, react_1.useEffect)(() => {
+        if (compositionFile === null || compositionId === null) {
+            return;
+        }
+        (0, open_in_editor_1.preloadCompositionComponentInfo)({
+            compositionFile,
+            compositionId,
+        });
+    }, [compositionFile, compositionId]);
     const openFileLocation = (0, react_1.useCallback)(() => {
         if (!validatedLocation) {
             return;
@@ -44,7 +71,21 @@ const CurrentComposition = () => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         });
     }, [validatedLocation]);
+    const openComponentLocation = (0, react_1.useCallback)(() => {
+        if (!componentLocation) {
+            return;
+        }
+        (0, open_in_editor_1.openOriginalPositionInEditor)(componentLocation).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        });
+    }, [componentLocation]);
+    const renderCompositionIcon = (0, react_1.useCallback)((color) => {
+        if (!video) {
+            return null;
+        }
+        return (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: color, style: sourceLocationIconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: sourceLocationIconStyle }));
+    }, [video]);
     return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { children: video ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_b = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _b !== void 0 ? _b : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null, onOpen: openFileLocation }), jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: "Still" })) : (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] })) : null }));
+                jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_e = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _e !== void 0 ? _e : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null, onOpen: openFileLocation, renderIcon: renderCompositionIcon }), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: componentLocation, canOpen: componentLocation !== null, onOpen: openComponentLocation, renderIcon: renderReactIcon }), jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: "Still" })) : (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] })) : null }));
 };
 exports.CurrentComposition = CurrentComposition;

package/dist/components/EditorContexts.js

@@ -21,12 +21,13 @@ const SetTimelineInOutProvider_1 = require("./SetTimelineInOutProvider");
 const ShowGuidesProvider_1 = require("./ShowGuidesProvider");
 const ShowOutlinesProvider_1 = require("./ShowOutlinesProvider");
 const ShowRulersProvider_1 = require("./ShowRulersProvider");
+const SnappingProvider_1 = require("./SnappingProvider");
 const VisualControlsUndoSync_1 = require("./VisualControls/VisualControlsUndoSync");
 const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
 const EditorContexts = ({ children, readOnlyStudio }) => {
     return (jsx_runtime_1.jsx(get_zod_if_possible_1.ZodProvider, { children: jsx_runtime_1.jsx(VisualControls_1.VisualControlsProvider, { children: jsx_runtime_1.jsxs(client_id_1.PreviewServerConnection, { readOnlyStudio: readOnlyStudio, children: [
                     jsx_runtime_1.jsx(VisualControlsUndoSync_1.VisualControlsUndoSync, {}), jsx_runtime_1.jsxs(context_1.RenderQueueContextProvider, { children: [
-                            jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(ShowOutlinesProvider_1.ShowOutlinesProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) })
+                            jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(ShowOutlinesProvider_1.ShowOutlinesProvider, { children: jsx_runtime_1.jsx(SnappingProvider_1.SnappingProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) })
                         ] })
                 ] }) }) }));
 };

package/dist/components/EffectPickerModal.js

@@ -69,7 +69,7 @@ const EffectPickerResult = ({ item, selected, onSelected }) => {
     const labelStyle = (0, react_1.useMemo)(() => {
         return {
             ...label,
-            color: selected || hovered ? 'white' : colors_1.LIGHT_TEXT,
+            color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
         };
     }, [hovered, selected]);
     const onClick = (0, react_1.useCallback)(() => {

package/dist/components/FilePreview.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
+const colors_1 = require("../helpers/colors");
 const JSONViewer_1 = require("./JSONViewer");
 const layout_1 = require("./layout");
 const TextViewer_1 = require("./TextViewer");
 const msgStyle = {
     fontSize: 13,
-    color: 'white',
+    color: colors_1.WHITE,
     fontFamily: 'sans-serif',
     display: 'flex',
     justifyContent: 'center',

package/dist/components/FpsCounter.js

@@ -4,8 +4,9 @@ exports.FpsCounter = 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 label = {
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 15,
     fontFamily: 'Arial, Helvetica, sans-serif',
     whiteSpace: 'nowrap',
@@ -58,7 +59,7 @@ const FpsCounter = ({ playbackSpeed }) => {
         const expectedFps = Math.abs(playbackSpeed) * videoConfig.fps;
         return {
             ...label,
-            color: fps < expectedFps * 0.9 ? 'red' : 'white',
+            color: fps < expectedFps * 0.9 ? colors_1.RED : colors_1.WHITE,
         };
     }, [fps, playbackSpeed, videoConfig]);
     if (fps === 0) {

package/dist/components/FullscreenToggle.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
+const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const canvas_ref_1 = require("../state/canvas-ref");
 const ControlButton_1 = require("./ControlButton");
@@ -43,6 +44,6 @@ const FullScreenToggle = () => {
             f.unregister();
         };
     }, [keybindings, onClick]);
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 448 512", fill: "#fff", children: jsx_runtime_1.jsx("path", { d: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z" }) }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 448 512", fill: colors_1.WHITE_HEX, children: jsx_runtime_1.jsx("path", { d: "M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z" }) }) }));
 };
 exports.FullScreenToggle = FullScreenToggle;