@remotion/studio 4.0.526 → 4.0.527

package/dist/components/Canvas.js

@@ -45,6 +45,7 @@ const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const Preview_1 = require("./Preview");
 const ResetZoomButton_1 = require("./ResetZoomButton");
+const SelectedOutlineSnapIndicators_1 = require("./SelectedOutlineSnapIndicators");
 const SvgImportDialog_1 = require("./SvgImportDialog");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
@@ -143,7 +144,7 @@ const Canvas = ({ canvasContent, size }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const areRulersVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
-    const { editorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { editorShowGuides, guidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setCurrentAssetMetadata } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
@@ -873,36 +874,46 @@ const Canvas = ({ canvasContent, size }) => {
         }
         const metadata = getCanvasDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
         if (((metadata === null || metadata === void 0 ? void 0 : metadata.type) !== 'composition' && (metadata === null || metadata === void 0 ? void 0 : metadata.type) !== 'element') ||
-            metadata.width === undefined ||
-            metadata.height === undefined) {
+            (metadata.type === 'composition' &&
+                (metadata.width === undefined || metadata.height === undefined))) {
             setCompositionDropPreview(null);
             return;
         }
-        let dropPosition = getDropPosition({
-            addFitPadding,
-            clientX: event.clientX,
-            clientY: event.clientY,
-            contentDimensions,
-            unbounded: metadata.type === 'composition',
-            previewSize,
-            size,
-        });
+        const isFullscreenElement = metadata.type === 'element' &&
+            (metadata.width === undefined || metadata.height === undefined);
+        let dropPosition = isFullscreenElement
+            ? {
+                centerX: contentDimensions.width / 2,
+                centerY: contentDimensions.height / 2,
+            }
+            : getDropPosition({
+                addFitPadding,
+                clientX: event.clientX,
+                clientY: event.clientY,
+                contentDimensions,
+                unbounded: metadata.type === 'composition',
+                previewSize,
+                size,
+            });
         if (dropPosition === null) {
             setCompositionDropPreview(null);
             return;
         }
-        const compositionDimensions = {
-            width: metadata.width,
-            height: metadata.height,
-        };
-        if (metadata.type === 'composition' &&
+        const compositionDimensions = metadata.width === undefined || metadata.height === undefined
+            ? contentDimensions
+            : { width: metadata.width, height: metadata.height };
+        let snapPoints = [];
+        if (!isFullscreenElement &&
             editorSnapping &&
             !event.metaKey &&
             !event.ctrlKey) {
-            dropPosition = (0, composition_drop_preview_1.snapCompositionDropPosition)({
+            const snapped = (0, composition_drop_preview_1.snapCompositionDropPosition)({
                 compositionDimensions,
                 destinationDimensions: contentDimensions,
                 dropPosition,
+                guides: editorShowGuides
+                    ? guidesList.filter((guide) => guide.compositionId === currentCompositionId)
+                    : [],
                 scale: calculateCanvasScale({
                     addFitPadding,
                     canvasSize: size,
@@ -911,6 +922,8 @@ const Canvas = ({ canvasContent, size }) => {
                     previewSize: previewSize.size,
                 }),
             });
+            dropPosition = snapped.dropPosition;
+            snapPoints = snapped.snapPoints;
         }
         setCompositionDropPreview((currentPreview) => {
             if ((currentPreview === null || currentPreview === void 0 ? void 0 : currentPreview.compositionDimensions.width) ===
@@ -918,13 +931,17 @@ const Canvas = ({ canvasContent, size }) => {
                 currentPreview.compositionDimensions.height ===
                     compositionDimensions.height &&
                 currentPreview.dropPosition.centerX === dropPosition.centerX &&
-                currentPreview.dropPosition.centerY === dropPosition.centerY) {
+                currentPreview.dropPosition.centerY === dropPosition.centerY &&
+                currentPreview.snapPoints.length === snapPoints.length &&
+                snapPoints.every((snapPoint, index) => {
+                    const currentPoint = currentPreview.snapPoints[index];
+                    return (currentPoint.edge === snapPoint.edge &&
+                        currentPoint.target.type === snapPoint.target.type &&
+                        currentPoint.target.position === snapPoint.target.position);
+                })) {
                 return currentPreview;
             }
-            return {
-                compositionDimensions,
-                dropPosition,
-            };
+            return { compositionDimensions, dropPosition, snapPoints };
         });
     }, [
         addFitPadding,
@@ -932,7 +949,10 @@ const Canvas = ({ canvasContent, size }) => {
         cannotAddSequence,
         canReceiveElementInstallRequest,
         contentDimensions,
+        currentCompositionId,
+        editorShowGuides,
         editorSnapping,
+        guidesList,
         isAddingAsset,
         previewSize,
         size,
@@ -1020,7 +1040,7 @@ const Canvas = ({ canvasContent, size }) => {
                 size,
             });
             if (dropPosition !== null &&
-                isComposition &&
+                ((metadata === null || metadata === void 0 ? void 0 : metadata.type) === 'composition' || (metadata === null || metadata === void 0 ? void 0 : metadata.type) === 'element') &&
                 metadata.width !== undefined &&
                 metadata.height !== undefined &&
                 contentDimensions !== null &&
@@ -1035,6 +1055,9 @@ const Canvas = ({ canvasContent, size }) => {
                     },
                     destinationDimensions: contentDimensions,
                     dropPosition,
+                    guides: editorShowGuides
+                        ? guidesList.filter((guide) => guide.compositionId === currentCompositionId)
+                        : [],
                     scale: calculateCanvasScale({
                         addFitPadding,
                         canvasSize: size,
@@ -1042,7 +1065,7 @@ const Canvas = ({ canvasContent, size }) => {
                         compositionWidth: contentDimensions.width,
                         previewSize: previewSize.size,
                     }),
-                });
+                }).dropPosition;
             }
             await (0, handle_drop_1.handleDrop)({
                 chooseSvgImportMode,
@@ -1070,7 +1093,9 @@ const Canvas = ({ canvasContent, size }) => {
         config,
         contentDimensions,
         currentCompositionId,
+        editorShowGuides,
         editorSnapping,
+        guidesList,
         isAddingAsset,
         previewSize,
         size,
@@ -1213,7 +1238,44 @@ const Canvas = ({ canvasContent, size }) => {
             zIndex: 1,
         };
     }, [compositionDropPreview, contentDimensions, previewSize, size]);
+    const compositionDropSnapLines = (0, react_1.useMemo)(() => {
+        if (compositionDropPreview === null ||
+            compositionDropPreview.snapPoints.length === 0 ||
+            contentDimensions === null ||
+            contentDimensions === 'none') {
+            return null;
+        }
+        const scale = calculateCanvasScale({
+            addFitPadding,
+            canvasSize: size,
+            compositionHeight: contentDimensions.height,
+            compositionWidth: contentDimensions.width,
+            previewSize: previewSize.size,
+        });
+        const left = size.width / 2 -
+            (contentDimensions.width * scale) / 2 -
+            previewSize.translation.x;
+        const top = size.height / 2 -
+            (contentDimensions.height * scale) / 2 -
+            previewSize.translation.y;
+        return (jsx_runtime_1.jsx("svg", { "aria-hidden": "true", "data-testid": "canvas-drop-snap-lines", style: {
+                position: 'absolute',
+                left,
+                top,
+                width: contentDimensions.width * scale,
+                height: contentDimensions.height * scale,
+                pointerEvents: 'none',
+                overflow: 'visible',
+                zIndex: 2,
+            }, children: jsx_runtime_1.jsx(SelectedOutlineSnapIndicators_1.SelectedOutlineSnapLines, { compositionHeight: contentDimensions.height, compositionWidth: contentDimensions.width, scale: scale, snapPoints: compositionDropPreview.snapPoints }) }));
+    }, [
+        addFitPadding,
+        compositionDropPreview,
+        contentDimensions,
+        previewSize,
+        size,
+    ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, compositionDropPreviewStyle === null ? null : (jsx_runtime_1.jsx("div", { className: "css-reset", "data-testid": "composition-drop-preview", style: compositionDropPreviewStyle })), isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { canCreateGuides: canvasContent.type === 'composition', contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
+            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, compositionDropPreviewStyle === null ? null : (jsx_runtime_1.jsx("div", { className: "css-reset", "data-testid": "composition-drop-preview", style: compositionDropPreviewStyle })), compositionDropSnapLines, isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { canCreateGuides: canvasContent.type === 'composition', contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
 };
 exports.Canvas = Canvas;

package/dist/components/CanvasCaptureDropHandler.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const modals_1 = require("../state/modals");
 const canvas_capture_drop_1 = require("./canvas-capture-drop");
 const drop_handler_data_1 = require("./drop-handler-data");
+const canvasCaptureMessagePrefix = 'remotion-canvas-capture';
 const CanvasCaptureDropHandler = ({ readOnlyStudio }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const onDragOver = (0, react_1.useCallback)((event) => {
@@ -37,6 +38,68 @@ const CanvasCaptureDropHandler = ({ readOnlyStudio }) => {
             document.removeEventListener('drop', onDrop);
         };
     }, [onDragOver, onDrop]);
+    (0, react_1.useEffect)(() => {
+        if (readOnlyStudio) {
+            return;
+        }
+        const handoffWindow = window.remotion_browserStudio && window.parent !== window
+            ? window.parent
+            : window;
+        const captureId = new URL(handoffWindow.location.href).searchParams.get('canvas-capture');
+        if (!captureId) {
+            return;
+        }
+        let incoming = null;
+        const onMessage = async (event) => {
+            if (event.source !== handoffWindow ||
+                event.origin !== handoffWindow.location.origin ||
+                typeof event.data !== 'object' ||
+                event.data === null ||
+                event.data.captureId !== captureId) {
+                return;
+            }
+            if (event.data.type === `${canvasCaptureMessagePrefix}-start` &&
+                typeof event.data.filename === 'string' &&
+                typeof event.data.mimeType === 'string' &&
+                Number.isSafeInteger(event.data.chunks) &&
+                event.data.chunks >= 0) {
+                incoming = {
+                    captureId,
+                    filename: event.data.filename,
+                    mimeType: event.data.mimeType,
+                    chunks: Array.from({ length: event.data.chunks }, () => null),
+                };
+                return;
+            }
+            if (event.data.type === `${canvasCaptureMessagePrefix}-chunk` &&
+                incoming &&
+                Number.isSafeInteger(event.data.index) &&
+                event.data.index >= 0 &&
+                event.data.index < incoming.chunks.length &&
+                typeof event.data.data === 'string') {
+                const binary = atob(event.data.data);
+                const buffer = new ArrayBuffer(binary.length);
+                const bytes = new Uint8Array(buffer);
+                for (let index = 0; index < binary.length; index++) {
+                    bytes[index] = binary.charCodeAt(index);
+                }
+                incoming.chunks[event.data.index] = buffer;
+                return;
+            }
+            if (event.data.type === `${canvasCaptureMessagePrefix}-complete` &&
+                incoming &&
+                incoming.chunks.every((chunk) => chunk !== null)) {
+                const file = new File(incoming.chunks, incoming.filename, {
+                    type: incoming.mimeType,
+                });
+                incoming = null;
+                await (0, canvas_capture_drop_1.handleCanvasCaptureDrop)({ files: [file], setSelectedModal });
+            }
+        };
+        handoffWindow.addEventListener('message', onMessage);
+        handoffWindow.postMessage({ type: `${canvasCaptureMessagePrefix}-ready`, captureId }, handoffWindow.location.origin);
+        return () => handoffWindow.removeEventListener('message', onMessage);
+    }, [readOnlyStudio, setSelectedModal]);
     return null;
 };
 exports.CanvasCaptureDropHandler = CanvasCaptureDropHandler;

package/dist/components/CanvasOrLoading.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const ErrorLoader_1 = require("../error-overlay/remotion-overlay/ErrorLoader");
 const colors_1 = require("../helpers/colors");
+const url_state_1 = require("../helpers/url-state");
 const composition_list_1 = require("../state/composition-list");
 const timeline_zoom_1 = require("../state/timeline-zoom");
 const Canvas_1 = require("./Canvas");
@@ -26,6 +27,10 @@ const container = {
     backgroundColor: colors_1.BACKGROUND,
     flexDirection: 'column',
 };
+const welcomeLabel = {
+    ...RunningCalculateMetadata_1.loaderLabel,
+    textAlign: 'center',
+};
 const CanvasOrLoading = ({ size }) => {
     const resolved = remotion_1.Internals.useResolvedVideoConfig(null);
     const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
@@ -53,8 +58,11 @@ const CanvasOrLoading = ({ size }) => {
         if (compositionListState !== 'ready') {
             return null;
         }
-        const compname = window.location.pathname.replace('/', '');
-        return (jsx_runtime_1.jsx("div", { style: container, className: "css-reset", children: jsx_runtime_1.jsxs("div", { style: RunningCalculateMetadata_1.loaderLabel, children: ["Composition with ID ", compname, " not found."] }) }));
+        const route = (0, url_state_1.getRoute)();
+        if (route === '') {
+            return (jsx_runtime_1.jsx("div", { style: container, className: "css-reset", children: jsx_runtime_1.jsx("div", { style: welcomeLabel, children: "Select a composition to get started." }) }));
+        }
+        return (jsx_runtime_1.jsx("div", { style: container, className: "css-reset", children: jsx_runtime_1.jsxs("div", { style: RunningCalculateMetadata_1.loaderLabel, children: ["Composition with ID ", decodeURIComponent(route.substring(1)), " not found."] }) }));
     }
     const content = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(ZoomPersistor_1.ZoomPersistor, {}), jsx_runtime_1.jsx(Canvas_1.Canvas, { size: size, canvasContent: canvasContent }), (resolved === null || resolved === void 0 ? void 0 : resolved.type) === 'success-and-refreshing' ? (jsx_runtime_1.jsx(RefreshCompositionOverlay_1.RefreshCompositionOverlay, {})) : null] }));

package/dist/components/CompositionSelectorItem.js

@@ -42,6 +42,7 @@ const itemStyle = {
     textAlign: 'left',
     height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const labelStyle = {
     textAlign: 'left',

package/dist/components/CurrentAsset.js

@@ -183,6 +183,7 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
             displayName: fileName,
             audioStreamIndex: null,
             requestInit: null,
+            target: null,
         });
     }, [fileName, mutationsDisabled, setSelectedModal, src]);
     const onTrackMatting = (0, react_1.useCallback)(() => {
@@ -250,7 +251,7 @@ const AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStud
                     : '4px 0', children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: fileName, canRename: canRename, getInitialSelection: use_rename_static_file_1.getStaticFileRenameSelection, onClick: onAssetClick, onCommit: onRename, size: contentSized ? 'default' : 'inspector', title: assetName }) }), fileDetails.length > 0 ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "File", sectionId: "asset-file", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: fileDetails.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.video ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Video", sectionId: "asset-video", children: jsx_runtime_1.jsx("div", { style: assetMetadataStyle, children: mediaSections.video.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))) }) })) : null, mediaSections && mediaSections.audio !== null ? (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: mediaSections.audio.length > 0, label: "Audio", sectionId: "asset-audio", children: mediaSections.audio.length === 0 ? (jsx_runtime_1.jsx("div", { style: assetEmptyStateStyle, children: "None" })) : (jsx_runtime_1.jsxs("div", { style: assetMetadataStyle, children: [mediaSections.audio.map((detail) => (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: detail.label, children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: detail.value }) }, detail.label))), src ? (jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Average volume", children: jsx_runtime_1.jsx("span", { style: assetMetadataValueStyle, children: jsx_runtime_1.jsx(AssetAudioVolume_1.AssetAudioVolume, { src: (_d = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _d !== void 0 ? _d : null, waveformSampleRate: volumeMetadata
                                         ? Math.ceil(volumeMetadata.fps *
                                             get_timeline_max_zoom_1.TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM)
-                                        : null }, (_e = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _e !== void 0 ? _e : src) }) })) : null] })) })) : null, jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "asset-actions", children: jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, src ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTranscribe, renderIcon: (color) => (jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: quickActionIconStyle })), children: "Transcribe" })) : null, fileType === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTrackMatting, renderIcon: (color) => (jsx_runtime_1.jsx(separation_1.SeparationIcon, { color: color, style: quickActionIconStyle })), children: "Separate foreground" })) : null, src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
+                                        : null }, (_e = volumeMetadata === null || volumeMetadata === void 0 ? void 0 : volumeMetadata.src) !== null && _e !== void 0 ? _e : src) }) })) : null] })) })) : null, jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "asset-actions", children: jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [fileManagerAvailable ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: fileManagerDisabled, onClick: onShowInFileManager, renderIcon: (color) => (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: color, style: quickActionIconStyle })), children: ["Show in ", fileManagerName] })) : null, src && (mediaMetadata === null || mediaMetadata === void 0 ? void 0 : mediaMetadata.hasAudioTrack) !== false ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTranscribe, renderIcon: (color) => (jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: quickActionIconStyle })), children: "Transcribe" })) : null, fileType === 'video' ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onTrackMatting, renderIcon: (color) => (jsx_runtime_1.jsx(separation_1.SeparationIcon, { color: color, style: quickActionIconStyle })), children: "Separate foreground" })) : null, src ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, onClick: onOpenConvert, renderIcon: (color) => (jsx_runtime_1.jsx(remotion_convert_1.RemotionConvertIcon, { color: color, style: quickActionIconStyle })), children: ["Convert",
                                 jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: convertArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
                             ] })) : null, jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: mutationsDisabled, onClick: onDelete, renderIcon: (color) => (jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: quickActionIconStyle })), children: "Delete" })] }) })
         ] }));

package/dist/components/InitialCompositionLoader.js

@@ -95,7 +95,7 @@ const InitialCompositionLoader = () => {
         if (!compositionListIsReady) {
             return;
         }
-        if (compositions.length > 0) {
+        if (compositions.length > 0 && !window.remotion_isReadOnlyStudio) {
             selectComposition(compositions[0], true);
         }
         else {

package/dist/components/InlineDropdown.js

@@ -13,6 +13,7 @@ const mobile_layout_1 = require("../helpers/mobile-layout");
 const noop_1 = require("../helpers/noop");
 const z_index_1 = require("../state/z-index");
 const InlineAction_1 = require("./InlineAction");
+const menu_tree_context_1 = require("./Menu/menu-tree-context");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
@@ -23,6 +24,7 @@ const container = {
 const InlineDropdown = ({ values, getItems, onOpenChange, unhoveredColor, ...props }) => {
     var _a, _b;
     const ref = (0, react_1.useRef)(null);
+    const [menuTreeId] = (0, react_1.useState)(menu_tree_context_1.getNextMenuTreeId);
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     const size = player_1.PlayerInternals.useElementSize(ref, {
@@ -96,9 +98,31 @@ const InlineDropdown = ({ values, getItems, onOpenChange, unhoveredColor, ...pro
         setOpened({ type: 'not-open' });
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
     }, [onOpenChange]);
+    (0, react_1.useEffect)(() => {
+        if (opened.type === 'not-open') {
+            return;
+        }
+        const dismissWithoutClickThrough = (event) => {
+            if (event.button !== 0) {
+                return;
+            }
+            const target = event.target;
+            if ((0, menu_tree_context_1.isNodeInMenuTree)(target, menuTreeId)) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+            onHide();
+        };
+        window.addEventListener('pointerdown', dismissWithoutClickThrough, true);
+        return () => {
+            window.removeEventListener('pointerdown', dismissWithoutClickThrough, true);
+        };
+    }, [menuTreeId, onHide, opened.type]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { ref: ref, style: container, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, unhoveredColor: opened.type === 'open' ? colors_1.WHITE : unhoveredColor, ...props }) }), portalStyle && opened.type === 'open'
-                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: (_b = (_a = opened.values) !== null && _a !== void 0 ? _a : values) !== null && _b !== void 0 ? _b : [], onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+            jsx_runtime_1.jsx("div", { ref: ref, style: container, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, unhoveredColor: opened.type === 'open' ? colors_1.WHITE : unhoveredColor, ...props, "aria-expanded": opened.type === 'open' }) }), portalStyle && opened.type === 'open'
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { "data-remotion-menu-tree-id": menuTreeId, style: portalStyle, onPointerDown: (event) => event.stopPropagation(), children: jsx_runtime_1.jsx(menu_tree_context_1.MenuTreeContext.Provider, { value: menuTreeId, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: (_b = (_a = opened.values) !== null && _a !== void 0 ? _a : values) !== null && _b !== void 0 ? _b : [], onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.InlineDropdown = InlineDropdown;

package/dist/components/InlineEditableTitle.js

@@ -36,6 +36,7 @@ const titleGridItem = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const titleInput = {

package/dist/components/InspectorPanel/CollapsibleInspectorSectionHeader.js

@@ -19,6 +19,7 @@ const sectionTitle = {
     textAlign: 'left',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const staticSectionTitle = {

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -163,14 +163,14 @@ const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, read
         defaultProps: currentDefaultProps,
         mode: defaultPropsMode,
         propsEditType: 'default-props',
-        showCannotSaveDefaultPropsWarning: canShowDefaultPropsSection,
+        showCannotSaveDefaultPropsWarning: canShowDefaultPropsSection && !readOnlyStudio,
     });
-    if (readOnlyStudio || !canShowDefaultPropsSection) {
+    if (!canShowDefaultPropsSection) {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.compositionDefaultPropsSection, children: [
             jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: expanded ? (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
-                            jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: defaultPropsModeItems, needsWrapping: false, size: "compact" }), defaultPropsWarnings.length > 0 ? (jsx_runtime_1.jsx(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: defaultPropsWarnings.length, size: "compact" })) : null] })) : null, expanded: expanded, label: "Default Props", onToggle: () => setExpanded(!expanded) }) }), jsx_runtime_1.jsxs(common_1.InspectorSectionBody, { expanded: expanded, children: [defaultPropsWarnings.length > 0 && showWarning ? (jsx_runtime_1.jsx("div", { style: styles_1.defaultPropsWarningContainer, children: jsx_runtime_1.jsx(common_1.InspectorDefaultPropsWarnings, { warnings: defaultPropsWarnings }) })) : null, jsx_runtime_1.jsx(DefaultPropsEditor_1.DefaultPropsEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, propsEditType: "default-props", schemaErrorMode: "compact", layout: "inspector", mode: defaultPropsMode, onModeChange: setDefaultPropsMode, hideModeControls: canShowDefaultPropsSection, warnings: defaultPropsWarnings, showWarning: false, setShowWarning: setShowWarning, hideWarningButton: true }, composition.id)
+                            jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: defaultPropsModeItems, needsWrapping: false, size: "compact" }), defaultPropsWarnings.length > 0 ? (jsx_runtime_1.jsx(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: defaultPropsWarnings.length, size: "compact" })) : null] })) : null, expanded: expanded, label: readOnlyStudio ? 'Props' : 'Default Props', onToggle: () => setExpanded(!expanded) }) }), jsx_runtime_1.jsxs(common_1.InspectorSectionBody, { expanded: expanded, children: [defaultPropsWarnings.length > 0 && showWarning ? (jsx_runtime_1.jsx("div", { style: styles_1.defaultPropsWarningContainer, children: jsx_runtime_1.jsx(common_1.InspectorDefaultPropsWarnings, { warnings: defaultPropsWarnings }) })) : null, jsx_runtime_1.jsx(DefaultPropsEditor_1.DefaultPropsEditor, { unresolvedComposition: composition, defaultProps: currentDefaultProps, setDefaultProps: setDefaultProps, propsEditType: "default-props", schemaErrorMode: "compact", layout: "inspector", mode: defaultPropsMode, onModeChange: setDefaultPropsMode, hideModeControls: canShowDefaultPropsSection, warnings: defaultPropsWarnings, showWarning: false, setShowWarning: setShowWarning, hideWarningButton: true }, composition.id)
                 ] })
         ] }));
 };

package/dist/components/InspectorPanel/CompositionMetadata.js

@@ -31,6 +31,7 @@ const computedContainerStyle = {
     ...InputDragger_1.inputDraggerContainerStyle,
     textAlign: 'right',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const computedValueStyle = {
     color: colors_1.WHITE_ALPHA_40,
@@ -39,10 +40,12 @@ const computedValueStyle = {
     fontStyle: 'italic',
     lineHeight: '20px',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const metadataFormatterStyle = {
     fontSize: 13,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const metadataDraggerStyles = {
     durationInFrames: {
@@ -113,6 +116,7 @@ const metadataLabelText = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const dimensionPresets = [

package/dist/components/InspectorPanel/ElementLibraryButton.js

@@ -45,6 +45,7 @@ const elementLibraryDropdownLabelStyle = {
     textAlign: 'left',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const elementLibraryDropdownCaretStyle = {

package/dist/components/InspectorPanel/MultiSequenceInspector.js

@@ -7,11 +7,14 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const colors_1 = require("../../helpers/colors");
+const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const scissors_1 = require("../../icons/scissors");
 const InspectorInfoHeader_1 = require("../InspectorInfoHeader");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const split_selected_timeline_item_1 = require("../Timeline/split-selected-timeline-item");
 const TimelineRowLayoutContext_1 = require("../Timeline/TimelineRowLayoutContext");
 const CollapsibleInspectorSection_1 = require("./CollapsibleInspectorSection");
 const common_1 = require("./common");
@@ -28,8 +31,14 @@ const selectionCountStyle = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
+const actionIconStyle = {
+    display: 'block',
+    height: 16,
+    width: 16,
+};
 const MultiSequenceInspector = ({ selections, readOnlyStudio }) => {
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -93,11 +102,33 @@ const MultiSequenceInspector = ({ selections, readOnlyStudio }) => {
         });
         return ((_a = allFields[0]) !== null && _a !== void 0 ? _a : []).filter((field) => allFields.every((candidate) => candidate.some((other) => other.key === field.key && other.fieldSchema === field.fieldSchema)));
     }, [getDragOverrides, propStatuses, runtimeValues, targets]);
+    const canSplit = !readOnlyStudio && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+    const onSplit = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!canSplit) {
+            return;
+        }
+        (_a = (0, split_selected_timeline_item_1.splitSelectedTimelineItems)({
+            selections,
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            propStatuses,
+            splitFrame: timelinePosition,
+        })) === null || _a === void 0 ? void 0 : _a.catch(() => undefined);
+    }, [
+        canSplit,
+        overrideIdToNodePathMappings,
+        propStatuses,
+        selections,
+        sequences,
+        timelinePosition,
+    ]);
     return (jsx_runtime_1.jsxs("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
             jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { padding: "4px 0", children: jsx_runtime_1.jsxs("div", { style: selectionCountStyle, children: [selections.length, " sequences selected"] }) }), jsx_runtime_1.jsx("div", { role: "separator", style: styles_1.sequenceHeaderDivider }), targets === null ? (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence controls unavailable" })) : fields.length === 0 ? (jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "No shared controls" })) : (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: timeline_layout_1.SCHEMA_FIELD_GROUPS.map((group) => {
                     const groupedFields = fields.filter((field) => field.group === group.id);
                     return groupedFields.length === 0 ? null : (jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: group.label, sectionId: `multi-sequence-${group.id}`, children: groupedFields.map((field) => (jsx_runtime_1.jsx(MultiSequenceField_1.MultiSequenceField, { field: field, targets: targets, readOnlyStudio: readOnlyStudio }, JSON.stringify(targets.map((target) => target.nodePath)) +
                             field.key))) }, group.id));
-                }) }))] }));
+                }) })), jsx_runtime_1.jsx(CollapsibleInspectorSection_1.CollapsibleInspectorSection, { collapsible: true, label: "Actions", sectionId: "multi-sequence-actions", children: jsx_runtime_1.jsx(common_1.InspectorQuickActionsSection, { children: jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canSplit, onClick: onSplit, title: canSplit ? undefined : 'Studio is read-only', renderIcon: (color) => (jsx_runtime_1.jsx(scissors_1.ScissorsIcon, { style: actionIconStyle, color: color })), children: "Split selected" }) }) })
+        ] }));
 };
 exports.MultiSequenceInspector = MultiSequenceInspector;