@remotion/studio 4.0.525 → 4.0.527

package/dist/components/Canvas.js

@@ -36,6 +36,7 @@ const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
+const element_drag_and_drop_1 = require("./element-drag-and-drop");
 const element_install_api_1 = require("./element-install-api");
 const element_install_request_1 = require("./element-install-request");
 const handle_drop_1 = require("./handle-drop");
@@ -44,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");
@@ -142,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);
@@ -155,7 +157,6 @@ const Canvas = ({ canvasContent, size }) => {
     const [pendingElementInstallRequests, setPendingElementInstallRequests] = (0, react_1.useState)([]);
     const [activeElementInstallRequest, setActiveElementInstallRequest] = (0, react_1.useState)(null);
     const lastFocusedAtRef = (0, react_1.useRef)(typeof document === 'undefined' || document.hasFocus() ? Date.now() : null);
-    const unsupportedDropNotifiedRef = (0, react_1.useRef)(false);
     const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
     const metadataRequestRef = (0, react_1.useRef)(0);
     const currentCompositionId = canvasContent.type === 'composition' ? canvasContent.compositionId : null;
@@ -844,17 +845,14 @@ const Canvas = ({ canvasContent, size }) => {
         var _a;
         var _b;
         if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
-            unsupportedDropNotifiedRef.current = false;
             setCompositionDropPreview(null);
             return;
         }
         const mayBeCanvasCapture = (0, drop_handler_data_1.isFileDragEvent)(event) && !window.remotion_isReadOnlyStudio;
-        const shouldNotifyAboutUnsupportedDrop = cannotAddSequence && !mayBeCanvasCapture;
-        if (shouldNotifyAboutUnsupportedDrop &&
-            !unsupportedDropNotifiedRef.current) {
-            (0, NotificationCenter_1.showCannotAddSequenceDropNotification)();
-        }
-        unsupportedDropNotifiedRef.current = shouldNotifyAboutUnsupportedDrop;
+        const canDropElementIntoNewComposition = cannotAddSequence &&
+            canReceiveElementInstallRequest &&
+            !isAddingAsset &&
+            (0, element_drag_and_drop_1.hasElementDragType)(event.dataTransfer);
         if (!canDropAssets && !cannotAddSequence && !mayBeCanvasCapture) {
             setCompositionDropPreview(null);
             return;
@@ -862,7 +860,11 @@ const Canvas = ({ canvasContent, size }) => {
         event.preventDefault();
         if (event.dataTransfer) {
             event.dataTransfer.dropEffect =
-                canDropAssets || mayBeCanvasCapture ? 'copy' : 'none';
+                canDropAssets ||
+                    canDropElementIntoNewComposition ||
+                    mayBeCanvasCapture
+                    ? 'copy'
+                    : 'none';
         }
         if (!canDropAssets ||
             contentDimensions === null ||
@@ -872,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,
@@ -910,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) ===
@@ -917,20 +931,29 @@ 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,
         canDropAssets,
         cannotAddSequence,
+        canReceiveElementInstallRequest,
         contentDimensions,
+        currentCompositionId,
+        editorShowGuides,
         editorSnapping,
+        guidesList,
+        isAddingAsset,
         previewSize,
         size,
     ]);
@@ -947,18 +970,14 @@ const Canvas = ({ canvasContent, size }) => {
                 return;
             }
         }
-        unsupportedDropNotifiedRef.current = false;
         setCompositionDropPreview(null);
     }, []);
     const onDragEnd = (0, react_1.useCallback)(() => {
-        unsupportedDropNotifiedRef.current = false;
         setCompositionDropPreview(null);
     }, []);
     const onDrop = (0, react_1.useCallback)(async (event) => {
         var _a, _b;
         var _c, _d;
-        const unsupportedDropWasNotified = unsupportedDropNotifiedRef.current;
-        unsupportedDropNotifiedRef.current = false;
         setCompositionDropPreview(null);
         if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
             return;
@@ -984,15 +1003,17 @@ const Canvas = ({ canvasContent, size }) => {
                 }
             }
         }
-        if (cannotAddSequence) {
+        const canDropElementIntoNewComposition = cannotAddSequence &&
+            canReceiveElementInstallRequest &&
+            !isAddingAsset &&
+            (0, element_drag_and_drop_1.getElementDragData)(event.dataTransfer) !== null;
+        if (cannotAddSequence && !canDropElementIntoNewComposition) {
             event.preventDefault();
             event.stopPropagation();
-            if (!unsupportedDropWasNotified) {
-                (0, NotificationCenter_1.showCannotAddSequenceDropNotification)();
-            }
+            (0, NotificationCenter_1.showNotification)('Cannot insert this item: This composition component cannot accept a new <Sequence>.', 3000);
             return;
         }
-        if (!canDropAssets ||
+        if ((!canDropAssets && !canDropElementIntoNewComposition) ||
             compositionFile === null ||
             currentCompositionId === null ||
             config === null) {
@@ -1019,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 &&
@@ -1034,6 +1055,9 @@ const Canvas = ({ canvasContent, size }) => {
                     },
                     destinationDimensions: contentDimensions,
                     dropPosition,
+                    guides: editorShowGuides
+                        ? guidesList.filter((guide) => guide.compositionId === currentCompositionId)
+                        : [],
                     scale: calculateCanvasScale({
                         addFitPadding,
                         canvasSize: size,
@@ -1041,7 +1065,7 @@ const Canvas = ({ canvasContent, size }) => {
                         compositionWidth: contentDimensions.width,
                         previewSize: previewSize.size,
                     }),
-                });
+                }).dropPosition;
             }
             await (0, handle_drop_1.handleDrop)({
                 chooseSvgImportMode,
@@ -1063,12 +1087,16 @@ const Canvas = ({ canvasContent, size }) => {
         addFitPadding,
         canDropAssets,
         cannotAddSequence,
+        canReceiveElementInstallRequest,
         chooseSvgImportMode,
         compositionFile,
         config,
         contentDimensions,
         currentCompositionId,
+        editorShowGuides,
         editorSnapping,
+        guidesList,
+        isAddingAsset,
         previewSize,
         size,
         setSelectedModal,
@@ -1210,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/CaptionInspector.js

@@ -60,6 +60,8 @@ const readOnlyStatus = {
 };
 const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onTextCancel, onReplaceCaptions, onToggle, readOnly, readOnlyTitle, }) => {
     const fileInput = (0, react_1.useRef)(null);
+    const expansionRef = (0, react_1.useRef)({ expanded, onToggle });
+    expansionRef.current = { expanded, onToggle };
     const [isImporting, setIsImporting] = (0, react_1.useState)(false);
     const { setSelectedModal } = react_1.default.useContext(modals_1.SetSelectedModalContext);
     const importCaptions = (0, react_1.useCallback)(async ({ fileName, contents, }) => {
@@ -68,10 +70,14 @@ const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onText
         }
         setIsImporting(true);
         try {
-            onReplaceCaptions((0, parse_caption_file_1.parseCaptionFile)({
+            const imported = (0, parse_caption_file_1.parseCaptionFile)({
                 fileName,
                 contents: await contents,
-            }));
+            });
+            onReplaceCaptions(imported);
+            if (imported.length > 0 && !expansionRef.current.expanded) {
+                expansionRef.current.onToggle();
+            }
         }
         catch (error) {
             (0, NotificationCenter_1.showNotification)(`Could not import ${fileName}: ${error instanceof Error ? error.message : String(error)}`, 5000);
@@ -112,6 +118,6 @@ const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onText
     }, [importCaptions, setSelectedModal]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderEnd, children: [onReplaceCaptions === null ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx("input", { ref: fileInput, accept: ".json", "aria-label": "Import captions file", hidden: true, onChange: onFileSelected, type: "file" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Import captions", className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, disabled: isImporting, onClick: openCaptionSelection, renderAction: (color) => (jsx_runtime_1.jsx(upload_1.UploadIcon, { "aria-hidden": "true", color: color, focusable: "false", style: { height: 14, width: 14 } })), title: importTooltip, variant: null })] })), readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null] }), expanded: expanded, label: "Captions", onToggle: onToggle }) }), expanded ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
+                                    jsx_runtime_1.jsx("input", { ref: fileInput, accept: ".json", "aria-label": "Import captions file", hidden: true, onChange: onFileSelected, type: "file" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Import captions", className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, disabled: isImporting, onClick: openCaptionSelection, renderAction: (color) => (jsx_runtime_1.jsx(upload_1.UploadIcon, { "aria-hidden": "true", color: color, focusable: "false", style: { height: 14, width: 14 } })), title: importTooltip, variant: null })] })), readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null] }), expanded: expanded, label: "Captions", onToggle: captions.length > 0 ? onToggle : null }) }), expanded || captions.length === 0 ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
 };
 exports.CaptionInspector = CaptionInspector;

package/dist/{error-overlay/remotion-overlay → components}/CodeFrame.d.ts

@@ -3,4 +3,6 @@ import React from 'react';
 export declare const CodeFrame: React.FC<{
     readonly source: ScriptLine[];
     readonly lineNumberWidth: number;
+    readonly fontSize: number;
+    readonly horizontalMargin: number;
 }>;

package/dist/components/CodeFrame.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeFrame = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const LazySyntaxHighlightedSource_1 = require("./LazySyntaxHighlightedSource");
+const is_menu_item_1 = require("./Menu/is-menu-item");
+const frame = {
+    backgroundColor: colors_1.ERROR_CODE_FRAME_BACKGROUND,
+    borderRadius: 6,
+    display: 'flex',
+    marginBottom: 20,
+    overflow: 'hidden',
+};
+const sourceContainer = {
+    flex: 1,
+    minWidth: 0,
+    overflowX: 'auto',
+    overscrollBehaviorX: 'none',
+};
+const lineNumberColumn = {
+    flexShrink: 0,
+    width: 60,
+};
+const lineNumber = {
+    whiteSpace: 'pre',
+    paddingRight: 12,
+    color: 'inherit',
+    lineHeight: 1.7,
+    width: 60,
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    fontFamily: 'monospace',
+};
+const CodeFrame = ({ source, lineNumberWidth, fontSize, horizontalMargin }) => {
+    return (jsx_runtime_1.jsxs("div", { style: {
+            ...frame,
+            marginLeft: horizontalMargin,
+            marginRight: horizontalMargin,
+        }, children: [
+            jsx_runtime_1.jsx("div", { style: lineNumberColumn, children: source.map((s, j) => {
+                    return (jsx_runtime_1.jsx("div", { style: {
+                            ...lineNumber,
+                            fontSize,
+                            backgroundColor: s.highlight
+                                ? colors_1.ERROR_CODE_FRAME_BACKGROUND
+                                : colors_1.ERROR_CODE_FRAME_LINE_BACKGROUND,
+                            backgroundImage: s.highlight
+                                ? `linear-gradient(${colors_1.SELECTED_BACKGROUND}, ${colors_1.SELECTED_BACKGROUND})`
+                                : undefined,
+                            color: s.highlight ? colors_1.WHITE : colors_1.WHITE_ALPHA_40,
+                        }, children: String(s.lineNumber).padStart(lineNumberWidth, ' ') }, j));
+                }) }), jsx_runtime_1.jsx("div", { style: sourceContainer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: { minWidth: '100%', width: 'max-content' }, children: source.map((s, j) => {
+                        return (jsx_runtime_1.jsx("div", { style: {
+                                backgroundColor: s.highlight
+                                    ? colors_1.SELECTED_BACKGROUND
+                                    : colors_1.TRANSPARENT,
+                            }, children: jsx_runtime_1.jsx("code", { className: "language-tsx", style: {
+                                    display: 'block',
+                                    fontFamily: 'monospace',
+                                    fontSize,
+                                    color: '#9cdcfe',
+                                    whiteSpace: 'pre',
+                                    tabSize: 2,
+                                    backgroundColor: colors_1.TRANSPARENT,
+                                    lineHeight: 1.7,
+                                    paddingRight: 12,
+                                    paddingLeft: 12,
+                                    paddingTop: 0,
+                                    paddingBottom: 0,
+                                }, children: jsx_runtime_1.jsx(LazySyntaxHighlightedSource_1.LazySyntaxHighlightedSource, { source: s.content }) }) }, j));
+                    }) }) })
+        ] }));
+};
+exports.CodeFrame = CodeFrame;

package/dist/components/CompositionSelectorItem.js

@@ -4,7 +4,6 @@ exports.CompositionSelectorItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
-const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const hoverable_1 = require("../helpers/hoverable");
 const noop_1 = require("../helpers/noop");
@@ -23,7 +22,7 @@ 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 use_default_editor_info_1 = require("./use-default-editor-info");
+const use_open_in_menu_apps_1 = require("./use-open-in-menu-apps");
 const itemStyle = {
     paddingRight: 2,
     paddingTop: 5,
@@ -43,6 +42,7 @@ const itemStyle = {
     textAlign: 'left',
     height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const labelStyle = {
     textAlign: 'left',
@@ -193,9 +193,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         }
     }, [onClick]);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
-        .previewServerState.type;
-    const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(connectionStatus === 'connected');
+    const { connectionStatus, openInApps } = (0, use_open_in_menu_apps_1.useOpenInMenuApps)();
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(item.type === 'composition' ? item.composition.stack : item.folder.stack);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         if (item.type === 'composition') {
@@ -203,9 +201,8 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                 closeMenu: noop_1.noop,
                 composition: item.composition,
                 connectionStatus,
-                editorId: defaultEditorId,
-                editorName: defaultEditorName,
                 includeCompositionManagementItems: true,
+                openInApps,
                 resolvedLocation,
                 setSelectedModal,
                 readOnlyStudio: window.remotion_isReadOnlyStudio,
@@ -214,21 +211,14 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         return (0, folder_menu_items_1.getFolderMenuItems)({
             closeMenu: noop_1.noop,
             connectionStatus,
-            editorId: defaultEditorId,
-            editorName: defaultEditorName,
+            editorId: openInApps.defaultEditorId,
+            editorName: openInApps.defaultEditorName,
             folder: item.folder,
             resolvedLocation,
             setSelectedModal,
             readOnlyStudio: window.remotion_isReadOnlyStudio,
         });
-    }, [
-        connectionStatus,
-        defaultEditorId,
-        defaultEditorName,
-        item,
-        resolvedLocation,
-        setSelectedModal,
-    ]);
+    }, [connectionStatus, item, openInApps, resolvedLocation, setSelectedModal]);
     const onItemDragStart = (0, react_1.useCallback)((event) => {
         var _a, _b, _c, _d, _e;
         if (window.remotion_isReadOnlyStudio) {