@remotion/studio 4.0.490 → 4.0.492

package/dist/components/AssetSelectorItem.js

@@ -43,6 +43,7 @@ const delete_static_file_1 = require("../api/delete-static-file");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
+const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const url_state_1 = require("../helpers/url-state");
@@ -165,6 +166,7 @@ const AssetFolderTree = ({ item, level, name, parentFolder, toggleFolder, tabInd
 };
 exports.AssetFolderTree = AssetFolderTree;
 const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }) => {
+    const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
@@ -338,10 +340,10 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             {
                 id: 'open-asset-in-explorer',
                 keyHint: null,
-                label: 'Open in Explorer',
+                label: `Show in ${fileManagerName}`,
                 leftItem: null,
                 onClick: openAssetInExplorer,
-                quickSwitcherLabel: 'Open asset in Explorer',
+                quickSwitcherLabel: `Show asset in ${fileManagerName}`,
                 subMenu: null,
                 type: 'item',
                 value: 'open-asset-in-explorer',
@@ -380,8 +382,9 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     }, [
         copyFileName,
         copyStaticFilePath,
-        openAssetInExplorer,
         deleteAsset,
+        fileManagerName,
+        openAssetInExplorer,
         relativePath,
         serverActionDisabled,
         setSelectedModal,
@@ -397,6 +400,6 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     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("div", { ref: rowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, draggable: canDragAsset, onDragStart: onDragStart, onDragEnd: onDragEnd, tabIndex: tabIndex, title: item.name, children: [
                     jsx_runtime_1.jsx(file_1.FileIcon, { style: iconStyle, color: colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name }), hovered && !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy staticFile() path", renderAction: renderCopyAction, onClick: copyToClipboard }), serverActionDisabled ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Open in Explorer", renderAction: renderFileExplorerAction, onClick: revealInExplorer })
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: `Show in ${fileManagerName}`, renderAction: renderFileExplorerAction, onClick: revealInExplorer })
                                 ] }))] })) : null] }) }) }));
 };

package/dist/components/Canvas.js

@@ -636,6 +636,7 @@ const Canvas = ({ canvasContent, size }) => {
             canInstall: canInstallElements,
             lastFocusedAt: lastFocusedAtRef.current,
             readOnly: window.remotion_isReadOnlyStudio,
+            studioUrl: window.location.href,
         }).catch(() => undefined);
     }, [
         canInstallElements,
@@ -839,6 +840,7 @@ const Canvas = ({ canvasContent, size }) => {
                     composition: compositionDragData,
                     compositionFile,
                     compositionId: currentCompositionId,
+                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
                     dropPosition,
                 });
             }

package/dist/components/CompositionOrStillIcon.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+import type { _InternalTypes } from 'remotion';
+export declare const CompositionOrStillIcon: React.FC<{
+    readonly color: string;
+    readonly composition: _InternalTypes['AnyComposition'];
+    readonly style: React.CSSProperties;
+}>;

package/dist/components/CompositionOrStillIcon.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionOrStillIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const is_composition_still_1 = require("../helpers/is-composition-still");
+const still_1 = require("../icons/still");
+const video_1 = require("../icons/video");
+const CompositionOrStillIcon = ({ color, composition, style }) => {
+    return (0, is_composition_still_1.isCompositionStill)(composition) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: color, style: style })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: style }));
+};
+exports.CompositionOrStillIcon = CompositionOrStillIcon;

package/dist/components/CompositionSelector.js

@@ -6,6 +6,7 @@ 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");
+const client_id_1 = require("../helpers/client-id");
 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");
@@ -14,9 +15,11 @@ const use_keybinding_1 = require("../helpers/use-keybinding");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
 const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
+const ContextMenu_1 = require("./ContextMenu");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const actions_1 = require("./RenderQueue/actions");
+const root_composition_menu_items_1 = require("./root-composition-menu-items");
 const useCompositionNavigation = () => {
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
@@ -107,6 +110,15 @@ 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 connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
+    const rootContextMenuItems = (0, react_1.useMemo)(() => {
+        return (0, root_composition_menu_items_1.getRootCompositionMenuItems)({
+            connectionStatus,
+            readOnlyStudio: window.remotion_isReadOnlyStudio,
+            setSelectedModal,
+        });
+    }, [connectionStatus, setSelectedModal]);
     const [rootDragHovered, setRootDragHovered] = (0, react_1.useState)(false);
     const listRef = (0, react_1.useRef)(null);
     const autoScrollAnimation = (0, react_1.useRef)(null);
@@ -249,7 +261,7 @@ const CompositionSelector = () => {
         }
     }, [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", { ref: listRef, className: "__remotion-vertical-scrollbar", style: list, onDragOverCapture: onCompositionListDragOverCapture, onDragEndCapture: stopCompositionListAutoScroll, onDragOver: onRootDragOver, onDragLeave: onRootDragLeave, onDropCapture: stopCompositionListAutoScroll, onDrop: onRootDrop, children: items.map((c) => {
+            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: listRef, values: rootContextMenuItems, onOpen: null }), 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, clearRootDragHover: clearRootDragHover, tabIndex: tabIndex, item: c }, c.key + c.type));

package/dist/components/CompositionSelectorItem.js

@@ -7,15 +7,14 @@ 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");
+const url_state_1 = require("../helpers/url-state");
 const folder_1 = require("../icons/folder");
-const still_1 = require("../icons/still");
-const video_1 = require("../icons/video");
 const modals_1 = require("../state/modals");
 const composition_menu_items_1 = require("./composition-menu-items");
 const CompositionContextButton_1 = require("./CompositionContextButton");
+const CompositionOrStillIcon_1 = require("./CompositionOrStillIcon");
 const ContextMenu_1 = require("./ContextMenu");
 const folder_menu_items_1 = require("./folder-menu-items");
 const layout_1 = require("./layout");
@@ -119,7 +118,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(item.type === 'composition' ? item.composition.stack : item.folder.stack);
     const contextMenu = (0, react_1.useMemo)(() => {
         if (item.type === 'composition') {
-            return (0, composition_menu_items_1.getCompositionMenuItems)({
+            const compositionMenuItems = (0, composition_menu_items_1.getCompositionMenuItems)({
                 closeMenu: noop_1.noop,
                 composition: item.composition,
                 connectionStatus,
@@ -127,6 +126,34 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                 setSelectedModal,
                 readOnlyStudio: window.remotion_isReadOnlyStudio,
             });
+            return [
+                {
+                    id: 'open-in-new-window',
+                    keyHint: null,
+                    label: 'Open in new window',
+                    leftItem: null,
+                    onClick: () => {
+                        var _a, _b;
+                        const screen = window.screen;
+                        const width = Math.min(1200, Math.floor(screen.availWidth * 0.8));
+                        const height = Math.min(800, Math.floor(screen.availHeight * 0.8));
+                        const displayLeft = (_a = screen.availLeft) !== null && _a !== void 0 ? _a : 0;
+                        const displayTop = (_b = screen.availTop) !== null && _b !== void 0 ? _b : 0;
+                        const left = Math.round(Math.min(Math.max(window.screenX + (window.outerWidth - width) / 2, displayLeft), displayLeft + screen.availWidth - width));
+                        const top = Math.round(Math.min(Math.max(window.screenY + (window.outerHeight - height) / 2, displayTop), displayTop + screen.availHeight - height));
+                        window.open((0, url_state_1.getUrlForRoute)(`/${item.composition.id}`), '_blank', `popup,width=${width},height=${height},left=${left},top=${top}`);
+                    },
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    type: 'item',
+                    value: 'open-in-new-window',
+                },
+                {
+                    type: 'divider',
+                    id: 'open-in-new-window-divider',
+                },
+                ...compositionMenuItems,
+            ];
         }
         return (0, folder_menu_items_1.getFolderMenuItems)({
             closeMenu: noop_1.noop,
@@ -231,7 +258,8 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                         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, 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 })
+    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: [
+                    jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, 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/CurrentAsset.d.ts

@@ -3,6 +3,12 @@ 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 AssetInfo: React.FC<{
+    readonly assetName: string | null;
+    readonly contentSized?: boolean;
+    readonly onAssetClick?: () => void;
+    readonly readOnlyStudio: boolean;
+}>;
 export declare const CurrentAsset: React.FC<{
     readonly readOnlyStudio: boolean;
 }>;

package/dist/components/CurrentAsset.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurrentAsset = exports.getCurrentAssetMediaDetailLines = exports.getCurrentAssetMetadataSource = exports.CURRENT_ASSET_HEIGHT = void 0;
+exports.CurrentAsset = exports.AssetInfo = exports.getCurrentAssetMediaDetailLines = exports.getCurrentAssetMetadataSource = exports.CURRENT_ASSET_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -55,12 +55,10 @@ const getCurrentAssetMediaDetailLines = (mediaMetadata) => {
     return detailLines;
 };
 exports.getCurrentAssetMediaDetailLines = getCurrentAssetMediaDetailLines;
-const CurrentAsset = ({ readOnlyStudio }) => {
+const AssetInfo = ({ assetName, contentSized = false, onAssetClick, 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 : '',
@@ -76,12 +74,14 @@ const CurrentAsset = ({ readOnlyStudio }) => {
     }, [assetName, staticFiles]);
     const src = (0, exports.getCurrentAssetMetadataSource)(assetName);
     const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)(src);
-    const canRename = connectionStatus === 'connected' && !readOnlyStudio;
+    const canRename = onAssetClick === undefined &&
+        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, {});
+        return jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized });
     }
     const fileName = (_a = assetName.split('/').pop()) !== null && _a !== void 0 ? _a : assetName;
     const subtitleParts = [];
@@ -99,9 +99,15 @@ const CurrentAsset = ({ readOnlyStudio }) => {
     const mediaDetailLines = mediaMetadata
         ? (0, exports.getCurrentAssetMediaDetailLines)(mediaMetadata)
         : [];
-    return (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoHeader, { children: [
-            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.jsxs(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: contentSized, children: [
+            jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, 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);
             })] }));
 };
+exports.AssetInfo = AssetInfo;
+const CurrentAsset = ({ readOnlyStudio }) => {
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const assetName = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' ? canvasContent.asset : null;
+    return jsx_runtime_1.jsx(exports.AssetInfo, { assetName: assetName, readOnlyStudio: readOnlyStudio });
+};
 exports.CurrentAsset = CurrentAsset;

package/dist/components/CurrentComposition.js

@@ -12,6 +12,7 @@ const video_1 = require("../icons/video");
 const render_frame_1 = require("../state/render-frame");
 const InlineCompositionName_1 = require("./InlineCompositionName");
 const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
+const InspectorLocationCopy_1 = require("./InspectorLocationCopy");
 const InspectorSourceLocation_1 = require("./InspectorSourceLocation");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
@@ -86,6 +87,8 @@ const CurrentComposition = () => {
         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: (_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 }));
+                jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: validatedLocation, name: video.id, children: [
+                        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/EditorContent.js

@@ -39,7 +39,7 @@ const EditorContent = ({ readOnlyStudio, children }) => {
             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
         ] }));
     return (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [
-                jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(TimelineKeyframeDragState_1.TimelineKeyframeDragStateProvider, { children: content })
+                jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(GlobalKeybindings_1.GlobalKeybindings, {}), jsx_runtime_1.jsx(TimelineKeyframeDragState_1.TimelineKeyframeDragStateProvider, { children: content })
             ] }) }));
 };
 exports.EditorContent = EditorContent;

package/dist/components/GlobalKeybindings.d.ts

@@ -1,4 +1,2 @@
 import type React from 'react';
-export declare const GlobalKeybindings: React.FC<{
-    readonly readOnlyStudio: boolean;
-}>;
+export declare const GlobalKeybindings: React.FC;

package/dist/components/GlobalKeybindings.js

@@ -4,8 +4,6 @@ exports.GlobalKeybindings = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
-const client_id_1 = require("../helpers/client-id");
-const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const use_keybinding_1 = require("../helpers/use-keybinding");
@@ -23,7 +21,7 @@ const sequencePropShortcuts = {
     t: 'style.opacity',
 };
 const hasOwnProperty = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
-const GlobalKeybindings = ({ readOnlyStudio }) => {
+const GlobalKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
@@ -32,7 +30,6 @@ const GlobalKeybindings = ({ readOnlyStudio }) => {
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
-    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
     const { navigateToNextComposition, navigateToPreviousComposition } = (0, CompositionSelector_1.useCompositionNavigation)();
     const video = remotion_1.Internals.useVideo();
     const timeline = (0, react_1.useMemo)(() => {
@@ -81,13 +78,9 @@ const GlobalKeybindings = ({ readOnlyStudio }) => {
         if (!video) {
             return;
         }
-        if (type !== 'connected' && !show_browser_rendering_1.SHOW_BROWSER_RENDERING && !readOnlyStudio) {
-            (0, NotificationCenter_1.showNotification)('Studio server is offline', 2000);
-            return;
-        }
         const renderButton = document.getElementById('render-modal-button');
         renderButton.click();
-    }, [readOnlyStudio, type, video]);
+    }, [video]);
     (0, react_1.useEffect)(() => {
         const onSequencePropKey = (event) => {
             const key = event.key.toLowerCase();

package/dist/components/InlineEditableTitle.d.ts

@@ -3,6 +3,7 @@ export declare const InlineEditableTitle: React.FC<{
     readonly value: string;
     readonly canRename: boolean;
     readonly getInitialSelection?: (value: string) => [number, number];
+    readonly onClick?: () => void;
     readonly onCommit: (newValue: string) => void;
     readonly title?: string;
 }>;

package/dist/components/InlineEditableTitle.js

@@ -53,7 +53,7 @@ const titleInput = {
     WebkitAppearance: 'none',
     width: '100%',
 };
-const InlineEditableTitle = ({ value, canRename, getInitialSelection, onCommit, title }) => {
+const InlineEditableTitle = ({ value, canRename, getInitialSelection, onClick, onCommit, title }) => {
     const [isEditing, setIsEditing] = (0, react_1.useState)(false);
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const [draftValue, setDraftValue] = (0, react_1.useState)(value);
@@ -84,14 +84,18 @@ const InlineEditableTitle = ({ value, canRename, getInitialSelection, onCommit,
         setIsEditing(false);
         onCommit(newValue);
     }, [onCommit]);
-    const startEditing = (0, react_1.useCallback)(() => {
+    const handleClick = (0, react_1.useCallback)(() => {
+        if (onClick) {
+            onClick();
+            return;
+        }
         if (!canRename) {
             return;
         }
         cancelledRef.current = false;
         setDraftValue(value);
         setIsEditing(true);
-    }, [canRename, value]);
+    }, [canRename, onClick, value]);
     const onChange = (0, react_1.useCallback)((e) => {
         setDraftValue(e.target.value);
     }, []);
@@ -111,21 +115,22 @@ const InlineEditableTitle = ({ value, canRename, getInitialSelection, onCommit,
             setIsEditing(false);
         }
     }, [value]);
+    const isInteractive = canRename || onClick !== undefined;
     const backgroundColor = isEditing
         ? colors_1.INPUT_BACKGROUND
-        : isHovered && canRename
+        : isHovered && isInteractive
             ? colors_1.WHITE_ALPHA_06
             : colors_1.TRANSPARENT;
     const innerStyle = (0, react_1.useMemo)(() => {
         return {
             ...titleInner,
             backgroundColor,
-            cursor: isEditing ? 'text' : canRename ? 'pointer' : 'default',
+            cursor: isEditing ? 'text' : isInteractive ? 'pointer' : 'default',
             userSelect: isEditing ? 'text' : 'none',
             width: isEditing ? '100%' : undefined,
         };
-    }, [backgroundColor, canRename, isEditing]);
-    return (jsx_runtime_1.jsx("div", { style: titleWrapper, title: title !== null && title !== void 0 ? title : value, children: jsx_runtime_1.jsxs("span", { style: innerStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: isEditing || !canRename ? undefined : startEditing, children: [
+    }, [backgroundColor, isEditing, isInteractive]);
+    return (jsx_runtime_1.jsx("div", { style: titleWrapper, title: title !== null && title !== void 0 ? title : value, children: jsx_runtime_1.jsxs("span", { style: innerStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: isEditing || !isInteractive ? undefined : handleClick, children: [
                 jsx_runtime_1.jsx("span", { "aria-hidden": isEditing, style: {
                         ...titleGridItem,
                         visibility: isEditing ? 'hidden' : 'visible',

package/dist/components/InspectorInfoHeader.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export declare const INSPECTOR_INFO_HEADER_MIN_HEIGHT = 84;
 export declare const InspectorInfoHeader: React.FC<{
     readonly children?: React.ReactNode;
+    readonly contentSized?: boolean;
 }>;
 export declare const InspectorInfoTitle: React.FC<{
     readonly children: React.ReactNode;

package/dist/components/InspectorInfoHeader.js

@@ -5,13 +5,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../helpers/colors");
 const InspectorPanelLayout_1 = require("./InspectorPanelLayout");
 exports.INSPECTOR_INFO_HEADER_MIN_HEIGHT = 84;
-const container = {
+const containerBase = {
     backgroundColor: colors_1.BACKGROUND,
     color: colors_1.WHITE,
     display: 'block',
-    minHeight: exports.INSPECTOR_INFO_HEADER_MIN_HEIGHT,
     padding: `6px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
 };
+const container = {
+    ...containerBase,
+    minHeight: exports.INSPECTOR_INFO_HEADER_MIN_HEIGHT,
+};
 const row = {
     backgroundColor: colors_1.BACKGROUND,
     display: 'flex',
@@ -41,8 +44,8 @@ const subtitle = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
-const InspectorInfoHeader = ({ children }) => {
-    return (jsx_runtime_1.jsx("div", { style: container, children: children === undefined || children === null ? null : (jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsx("div", { style: content, children: children }) })) }));
+const InspectorInfoHeader = ({ children, contentSized = false }) => {
+    return (jsx_runtime_1.jsx("div", { style: contentSized ? containerBase : container, children: children === undefined || children === null ? null : (jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsx("div", { style: content, children: children }) })) }));
 };
 exports.InspectorInfoHeader = InspectorInfoHeader;
 const InspectorInfoTitle = ({ children }) => {

package/dist/components/InspectorLocationCopy.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
+export declare const InspectorLocationCopy: React.FC<{
+    readonly children: React.ReactNode;
+    readonly location: OriginalPosition | null;
+    readonly name: string | null;
+}>;

package/dist/components/InspectorLocationCopy.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorLocationCopy = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const format_file_location_1 = require("../helpers/format-file-location");
+const clipboard_1 = require("../icons/clipboard");
+const InlineAction_1 = require("./InlineAction");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const row = {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    minWidth: 0,
+    width: '100%',
+};
+const content = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    minWidth: 0,
+    overflow: 'hidden',
+};
+const action = {
+    flexShrink: 0,
+    height: 24,
+    marginLeft: 4,
+    marginRight: -4,
+};
+const icon = {
+    flexShrink: 0,
+    height: 12,
+    width: 12,
+};
+const InspectorLocationCopy = ({ children, location, name }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const [focusedWithin, setFocusedWithin] = (0, react_1.useState)(false);
+    const textToCopy = (0, react_1.useMemo)(() => {
+        return (0, format_file_location_1.formatLocationForAgents)({
+            location,
+            name,
+            root: window.remotion_cwd,
+        });
+    }, [location, name]);
+    const renderCopyAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { style: icon, color: color });
+    }, []);
+    const onCopy = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        if (!textToCopy) {
+            return;
+        }
+        navigator.clipboard.writeText(textToCopy).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 2000);
+        });
+    }, [textToCopy]);
+    const showAction = hovered || focusedWithin;
+    return (jsx_runtime_1.jsxs("div", { style: row, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), onFocus: () => setFocusedWithin(true), onBlur: () => setFocusedWithin(false), children: [
+            jsx_runtime_1.jsx("div", { style: content, children: children }), textToCopy ? (jsx_runtime_1.jsx("div", { style: {
+                    ...action,
+                    opacity: showAction ? 1 : 0,
+                    pointerEvents: showAction ? 'auto' : 'none',
+                }, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onCopy, renderAction: renderCopyAction, title: "Copy location for agents" }) })) : null] }));
+};
+exports.InspectorLocationCopy = InspectorLocationCopy;

package/dist/components/InspectorPanel/SequenceCompositionsSection.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const SequenceCompositionsSection: React.FC<{
+    readonly track: TrackWithHash;
+}>;

package/dist/components/InspectorPanel/SequenceCompositionsSection.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceCompositionsSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
+const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
+const common_1 = require("./common");
+const get_compositions_matching_single_child_1 = require("./get-compositions-matching-single-child");
+const styles_1 = require("./styles");
+const compositionIconStyle = {
+    height: 13,
+    width: 13,
+};
+const compositionListStyle = {
+    ...styles_1.detailsContainer,
+    display: 'flex',
+    flexDirection: 'column',
+    paddingBottom: 6,
+    paddingTop: 6,
+};
+const SequenceCompositionsSection = ({ track }) => {
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
+    const matchingCompositions = (0, react_1.useMemo)(() => (0, get_compositions_matching_single_child_1.getCompositionsMatchingSingleChild)({
+        compositions,
+        singleChildComponent: track.sequence.singleChildComponent,
+    }), [compositions, track.sequence.singleChildComponent]);
+    if (matchingCompositions.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }), jsx_runtime_1.jsx("div", { style: compositionListStyle, children: matchingCompositions.map((composition) => (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: () => selectComposition(composition, true), renderIcon: (color) => (jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: color, composition: composition, style: compositionIconStyle })), children: composition.id }, composition.id))) })
+        ] }));
+};
+exports.SequenceCompositionsSection = SequenceCompositionsSection;

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -5,9 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
 const InlineEditableTitle_1 = require("../InlineEditableTitle");
+const InspectorLocationCopy_1 = require("../InspectorLocationCopy");
 const InspectorSourceLocation_1 = require("../InspectorSourceLocation");
 const use_open_sequence_in_editor_1 = require("../Timeline/use-open-sequence-in-editor");
 const use_rename_sequence_1 = require("../Timeline/use-rename-sequence");
+const SequenceCompositionsSection_1 = require("./SequenceCompositionsSection");
 const styles_1 = require("./styles");
 const useSequenceInspectorSourceLocation = (sequence) => {
     const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
@@ -66,15 +68,15 @@ const SequenceInspectorHeader = ({ sourceLocation, track }) => {
     const onRename = (0, react_1.useCallback)((newName) => {
         saveName(newName).catch(() => undefined);
     }, [saveName]);
-    return (jsx_runtime_1.jsxs("div", { style: styles_1.sequenceHeader, children: [
-            jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderTitle, children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename }) }), documentationLink ? (jsx_runtime_1.jsx("button", { type: "button", style: subtitleStyle, title: "Open component docs", onClick: openDocumentationLink, children: componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation })
-        ] }));
+    return (jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeader, children: jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: sourceLocation.validatedLocation, name: componentName !== null && componentName !== void 0 ? componentName : null, children: [
+                jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderTitle, children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename }) }), documentationLink ? (jsx_runtime_1.jsx("button", { type: "button", style: subtitleStyle, title: "Open component docs", onClick: openDocumentationLink, children: componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation })
+            ] }) }));
 };
 exports.SequenceInspectorHeader = SequenceInspectorHeader;
 const SequenceInspectorHeaderWithDivider = ({ track }) => {
     const sourceLocation = (0, exports.useSequenceInspectorSourceLocation)(track.sequence);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(exports.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider })
+            jsx_runtime_1.jsx(exports.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), jsx_runtime_1.jsx(SequenceCompositionsSection_1.SequenceCompositionsSection, { track: track }), jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider })
         ] }));
 };
 exports.SequenceInspectorHeaderWithDivider = SequenceInspectorHeaderWithDivider;