@remotion/studio 4.0.516 → 4.0.518

package/dist/components/AssetSelector.js

@@ -48,6 +48,7 @@ const use_asset_drag_events_1 = __importStar(require("../helpers/use-asset-drag-
 const folders_1 = require("../state/folders");
 const z_index_1 = require("../state/z-index");
 const AssetSelectorItem_1 = require("./AssetSelectorItem");
+const import_assets_1 = require("./import-assets");
 const styles_1 = require("./Menu/styles");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const ExplorerQuickSwitcherTrigger_1 = require("./QuickSwitcher/ExplorerQuickSwitcherTrigger");
@@ -97,6 +98,28 @@ const AssetSelector = ({ readOnlyStudio }) => {
     const assetTree = (0, react_1.useMemo)(() => {
         return (0, create_folder_tree_1.buildAssetFolderStructure)(staticFiles, null, assetFoldersExpanded);
     }, [assetFoldersExpanded, staticFiles]);
+    const writeFilesToPublicFolder = (0, react_1.useCallback)(async ({ files, assetPath, }) => {
+        const makePath = (file) => {
+            return [assetPath, file.name].filter(Boolean).join('/');
+        };
+        const differentExistingFile = files.find((file) => {
+            const filePath = makePath(file);
+            return staticFiles.some((staticFile) => staticFile.name === filePath &&
+                staticFile.sizeInBytes !== file.size);
+        });
+        if (differentExistingFile) {
+            (0, NotificationCenter_1.showNotification)(`File with name ${makePath(differentExistingFile)} already exists and is different`, 4000);
+            return false;
+        }
+        for (const file of files) {
+            const body = await file.arrayBuffer();
+            await (0, write_static_file_1.writeStaticFile)({
+                contents: body,
+                filePath: makePath(file),
+            });
+        }
+        return true;
+    }, [staticFiles]);
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
         setAssetFoldersExpanded((p) => {
             const key = [parentName, folderName].filter(Boolean).join('/');
@@ -140,30 +163,12 @@ const AssetSelector = ({ readOnlyStudio }) => {
                 }
                 return;
             }
-            const { files } = e.dataTransfer;
+            const files = Array.from(e.dataTransfer.files);
             if (files.length === 0) {
                 setDropLocation(null);
                 return;
             }
-            const makePath = (file) => {
-                return [assetPath, file.name].filter(Boolean).join('/');
-            };
-            const differentExistingFile = Array.from(files).find((file) => {
-                const filePath = makePath(file);
-                return staticFiles.some((staticFile) => staticFile.name === filePath &&
-                    staticFile.sizeInBytes !== file.size);
-            });
-            if (differentExistingFile) {
-                (0, NotificationCenter_1.showNotification)(`File with name ${makePath(differentExistingFile)} already exists and is different`, 4000);
-                return;
-            }
-            for (const file of files) {
-                const body = await file.arrayBuffer();
-                await (0, write_static_file_1.writeStaticFile)({
-                    contents: body,
-                    filePath: makePath(file),
-                });
-            }
+            await writeFilesToPublicFolder({ files, assetPath });
         }
         catch (error) {
             (0, NotificationCenter_1.showNotification)(`Error during upload: ${error}`, 3000);
@@ -171,9 +176,45 @@ const AssetSelector = ({ readOnlyStudio }) => {
         finally {
             setDropLocation(null);
         }
-    }, [dropLocation, staticFiles]);
+    }, [dropLocation, writeFilesToPublicFolder]);
+    const uploadAssets = (0, react_1.useCallback)(async () => {
+        try {
+            const files = await (0, import_assets_1.pickFilesToImport)();
+            if (files.length === 0) {
+                return;
+            }
+            const wereWritten = await writeFilesToPublicFolder({
+                files,
+                assetPath: null,
+            });
+            if (wereWritten) {
+                (0, NotificationCenter_1.showNotification)(files.length === 1
+                    ? `Uploaded ${files[0].name} to public folder`
+                    : `Uploaded ${files.length} assets to public folder`, 3000);
+            }
+        }
+        catch (error) {
+            (0, NotificationCenter_1.showNotification)(`Error during upload: ${error}`, 3000);
+        }
+    }, [writeFilesToPublicFolder]);
+    const getAssetActions = (0, react_1.useCallback)(() => {
+        return [
+            {
+                id: 'upload-assets',
+                keyHint: null,
+                label: 'Upload...',
+                leftItem: null,
+                onClick: uploadAssets,
+                quickSwitcherLabel: 'Upload assets...',
+                subMenu: null,
+                type: 'item',
+                value: 'upload-assets',
+                disabled: !shouldAllowUpload,
+            },
+        ];
+    }, [shouldAllowUpload, uploadAssets]);
     return (jsx_runtime_1.jsxs("div", { "data-asset-selector": true, style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: [
-            jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "assets", showShortcut: true, tabIndex: tabIndex }), staticFiles.length === 0 ? (publicFolderExists ? (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, place a file in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
+            jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "assets", showShortcut: true, tabIndex: tabIndex, getActions: getAssetActions }), staticFiles.length === 0 ? (publicFolderExists ? (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, place a file in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
                         " folder of your project or drag and drop a file here."] }) })) : (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, create a folder called", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
                         " in the root of your project and place a file in it."] }) }))) : (jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: {
                     ...list,

package/dist/components/AssetSelectorItem.d.ts

@@ -14,11 +14,12 @@ export declare const getCanDragAsset: ({ readOnlyStudio, relativePath, }: {
     readOnlyStudio: boolean;
     relativePath: string;
 }) => boolean;
-export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInConvert, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }: {
+export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, copyAbsolutePath, openAssetInConvert, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }: {
     relativePath: string;
     fileManagerName: string;
     copyFileName: () => void;
     copyStaticFilePath: () => void;
+    copyAbsolutePath: (() => void) | null;
     openAssetInConvert: () => void;
     openAssetInExplorer: () => void;
     renameAsset: () => void;

package/dist/components/AssetSelectorItem.js

@@ -45,19 +45,21 @@ 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 get_preview_file_type_1 = require("../helpers/get-preview-file-type");
+const hoverable_1 = require("../helpers/hoverable");
 const open_in_remotion_convert_1 = require("../helpers/open-in-remotion-convert");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const url_state_1 = require("../helpers/url-state");
 const use_asset_drag_events_1 = __importStar(require("../helpers/use-asset-drag-events"));
 const use_image_metadata_1 = require("../helpers/use-image-metadata");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
-const clipboard_1 = require("../icons/clipboard");
+const ellipsis_1 = require("../icons/ellipsis");
 const folder_1 = require("../icons/folder");
 const modals_1 = require("../state/modals");
 const AssetFileIcon_1 = require("./AssetFileIcon");
 const ContextMenu_1 = require("./ContextMenu");
 const import_assets_1 = require("./import-assets");
 const InlineAction_1 = require("./InlineAction");
+const InlineDropdown_1 = require("./InlineDropdown");
 const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const open_in_new_window_1 = require("./open-in-new-window");
@@ -102,6 +104,11 @@ const revealIconStyle = {
     height: 12,
     color: colors_1.CURRENT_COLOR,
 };
+const ellipsisIconStyle = {
+    style: {
+        height: 12,
+    },
+};
 const getAssetActionAvailability = ({ browserStudioCanMutateAssets, readOnlyStudio, connectionStatus, publicFolderExists, }) => {
     return {
         mutationsDisabled: browserStudioCanMutateAssets !== true &&
@@ -116,7 +123,7 @@ const getCanDragAsset = ({ readOnlyStudio, relativePath, }) => {
     return !readOnlyStudio && (0, import_assets_1.getAssetElementFromPath)(relativePath) !== null;
 };
 exports.getCanDragAsset = getCanDragAsset;
-const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInConvert, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }) => {
+const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, copyAbsolutePath, openAssetInConvert, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }) => {
     const previewFileType = (0, get_preview_file_type_1.getPreviewFileType)(relativePath);
     const canOpenInConvert = previewFileType === 'audio' || previewFileType === 'video';
     const items = [
@@ -160,6 +167,19 @@ const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName,
             type: 'item',
             value: 'copy-asset-static-file-path',
         },
+        copyAbsolutePath
+            ? {
+                id: 'copy-asset-absolute-path',
+                keyHint: null,
+                label: 'Copy absolute path',
+                leftItem: null,
+                onClick: copyAbsolutePath,
+                quickSwitcherLabel: 'Copy asset absolute path',
+                subMenu: null,
+                type: 'item',
+                value: 'copy-asset-absolute-path',
+            }
+            : null,
         {
             type: 'divider',
             id: 'asset-file-actions-divider',
@@ -370,8 +390,8 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     const renderFileExplorerAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: revealIconStyle, color: color });
     }, []);
-    const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
+    const renderContextMenuAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { svgProps: ellipsisIconStyle, fill: color });
     }, []);
     const copyFileName = (0, react_1.useCallback)(() => {
         (0, copy_text_1.copyText)(item.name)
@@ -392,6 +412,19 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
     }, [relativePath]);
+    const copyAbsolutePath = (0, react_1.useCallback)(() => {
+        if (window.remotion_publicFolderExists === null) {
+            return;
+        }
+        const content = `${window.remotion_publicFolderExists}/${relativePath}`;
+        (0, copy_text_1.copyText)(content)
+            .then(() => {
+            (0, NotificationCenter_1.showNotification)(`Copied '${content}' to clipboard`, 1000);
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
+        });
+    }, [relativePath]);
     const openAssetInConvert = (0, react_1.useCallback)(() => {
         (0, open_in_remotion_convert_1.openInRemotionConvert)({ relativePath });
     }, [relativePath]);
@@ -425,6 +458,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             fileManagerName,
             copyFileName,
             copyStaticFilePath,
+            copyAbsolutePath: window.remotion_publicFolderExists === null ? null : copyAbsolutePath,
             openAssetInConvert,
             openAssetInExplorer,
             renameAsset,
@@ -436,6 +470,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     }, [
         copyFileName,
         copyStaticFilePath,
+        copyAbsolutePath,
         deleteAsset,
         fileExplorerDisabled,
         fileManagerName,
@@ -449,13 +484,9 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         e.stopPropagation();
         openAssetInExplorer();
     }, [openAssetInExplorer]);
-    const copyToClipboard = (0, react_1.useCallback)((e) => {
-        e.stopPropagation();
-        copyStaticFilePath();
-    }, [copyStaticFilePath]);
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, 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(AssetFileIcon_1.AssetFileIcon, { fileType: previewFileType, style: iconStyle, color: hovered || selected ? colors_1.WHITE : 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, { variant: null, title: "Copy staticFile() path", renderAction: renderCopyAction, onClick: copyToClipboard }), fileExplorerDisabled ? 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, { variant: null, title: `Show in ${fileManagerName}`, renderAction: renderFileExplorerAction, onClick: revealInExplorer })
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, title: "More actions", renderAction: renderContextMenuAction, getItems: getContextMenuItems, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }), fileExplorerDisabled ? 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, { variant: null, title: `Show in ${fileManagerName}`, renderAction: renderFileExplorerAction, onClick: revealInExplorer, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
                                 ] }))] })) : null] }) }) }));
 };

package/dist/components/Canvas.js

@@ -16,7 +16,6 @@ const clipboard_images_1 = require("../helpers/clipboard-images");
 const clipboard_svg_1 = require("../helpers/clipboard-svg");
 const colors_1 = require("../helpers/colors");
 const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
-const get_canvas_capture_import_1 = require("../helpers/get-canvas-capture-import");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
 const install_required_package_1 = require("../helpers/install-required-package");
 const open_in_editor_1 = require("../helpers/open-in-editor");
@@ -29,6 +28,7 @@ const editor_snapping_1 = require("../state/editor-snapping");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
+const canvas_capture_drop_1 = require("./canvas-capture-drop");
 const composition_drop_preview_1 = require("./composition-drop-preview");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const drop_handler_data_1 = require("./drop-handler-data");
@@ -135,6 +135,7 @@ const Canvas = ({ canvasContent, size }) => {
     const { editorShowGuides } = (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);
     const { previewServerState, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewServerClientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
@@ -146,6 +147,7 @@ const Canvas = ({ canvasContent, size }) => {
     const [activeElementInstallRequest, setActiveElementInstallRequest] = (0, react_1.useState)(null);
     const lastFocusedAtRef = (0, react_1.useRef)(typeof document === 'undefined' || document.hasFocus() ? Date.now() : null);
     const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
+    const metadataRequestRef = (0, react_1.useRef)(0);
     const currentCompositionId = canvasContent.type === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -530,13 +532,19 @@ const Canvas = ({ canvasContent, size }) => {
         };
     }, [keybindings, onReset, onZoomIn, onZoomOut]);
     const fetchMetadata = (0, react_1.useCallback)(async () => {
+        const request = ++metadataRequestRef.current;
         setAssetResolution(null);
         if (canvasContent.type === 'composition') {
+            setCurrentAssetMetadata(null);
             return;
         }
         const metadata = await (0, get_asset_metadata_1.getAssetMetadata)(canvasContent, canvasContent.type === 'asset');
+        if (request !== metadataRequestRef.current) {
+            return;
+        }
         setAssetResolution(metadata);
-    }, [canvasContent]);
+        setCurrentAssetMetadata((0, get_asset_metadata_1.getAssetPreviewMetadata)({ canvasContent, metadata }));
+    }, [canvasContent, setCurrentAssetMetadata]);
     (0, react_1.useEffect)(() => {
         if (canvasContent.type !== 'asset') {
             return;
@@ -855,15 +863,10 @@ const Canvas = ({ canvasContent, size }) => {
             if (localFiles.length === 1) {
                 setIsAddingAsset(true);
                 try {
-                    const canvasCapture = await (0, get_canvas_capture_import_1.getCanvasCaptureImport)(localFiles[0]);
-                    if (canvasCapture !== null) {
-                        setSelectedModal({
-                            type: 'new-comp',
-                            canvasCapture,
-                            folderName: null,
-                            parentName: null,
-                            stack: null,
-                        });
+                    if (await (0, canvas_capture_drop_1.handleCanvasCaptureDrop)({
+                        files: localFiles,
+                        setSelectedModal,
+                    })) {
                         return;
                     }
                 }
@@ -1097,6 +1100,6 @@ const Canvas = ({ canvasContent, size }) => {
         };
     }, [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, { 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 })), 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.d.ts

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

package/dist/components/CanvasCaptureDropHandler.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasCaptureDropHandler = void 0;
+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 CanvasCaptureDropHandler = ({ readOnlyStudio }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const onDragOver = (0, react_1.useCallback)((event) => {
+        if (readOnlyStudio || !(0, drop_handler_data_1.isFileDragEvent)(event)) {
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'copy';
+        }
+    }, [readOnlyStudio]);
+    const onDrop = (0, react_1.useCallback)(async (event) => {
+        var _a;
+        var _b;
+        if (readOnlyStudio || !(0, drop_handler_data_1.isFileDragEvent)(event)) {
+            return;
+        }
+        const files = Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
+        if (files.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        await (0, canvas_capture_drop_1.handleCanvasCaptureDrop)({ files, setSelectedModal });
+    }, [readOnlyStudio, setSelectedModal]);
+    (0, react_1.useEffect)(() => {
+        document.addEventListener('dragover', onDragOver);
+        document.addEventListener('drop', onDrop);
+        return () => {
+            document.removeEventListener('dragover', onDragOver);
+            document.removeEventListener('drop', onDrop);
+        };
+    }, [onDragOver, onDrop]);
+    return null;
+};
+exports.CanvasCaptureDropHandler = CanvasCaptureDropHandler;

package/dist/components/CanvasOrLoading.js

@@ -58,9 +58,10 @@ const CanvasOrLoading = ({ size }) => {
     }
     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] }));
-    if (canvasContent.type === 'asset' ||
-        canvasContent.type === 'output' ||
-        canvasContent.type === 'output-blob') {
+    if (canvasContent.type === 'output' || canvasContent.type === 'output-blob') {
+        return content;
+    }
+    if (canvasContent.type === 'asset' && resolved === null) {
         return content;
     }
     if (!resolved) {

package/dist/components/CaptionInspector.js

@@ -17,6 +17,6 @@ const readOnlyStatus = {
 };
 const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onTextCancel, onToggle, readOnly, readOnlyTitle, }) => {
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderEnd, children: 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(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderEnd, children: 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] }));
 };
 exports.CaptionInspector = CaptionInspector;

package/dist/components/CaptionTextEditor.js

@@ -4,6 +4,9 @@ exports.CaptionTextEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
+const enter_1 = require("../icons/enter");
+const InlineAction_1 = require("./InlineAction");
 const RemInput_1 = require("./NewComposition/RemInput");
 const container = {
     alignSelf: 'stretch',
@@ -21,8 +24,8 @@ const row = {
     alignItems: 'center',
     borderBottom: `1px solid ${colors_1.LINE_COLOR}`,
     display: 'grid',
-    gap: 12,
-    gridTemplateColumns: '100px minmax(0, 1fr)',
+    gap: 8,
+    gridTemplateColumns: '100px minmax(0, 1fr) 24px',
     padding: '5px 12px',
 };
 const timing = {
@@ -77,18 +80,33 @@ const CaptionTextEditor = ({ captions, onChange, onSave, onCancel, readOnly }) =
     (0, react_1.useEffect)(() => {
         return commitPending;
     }, [commitPending]);
-    const updateText = (0, react_1.useCallback)((index, text) => {
-        var _a;
-        if (((_a = latestRef.current.captions[index]) === null || _a === void 0 ? void 0 : _a.text) === text) {
+    const updateCaption = (0, react_1.useCallback)((index, changes) => {
+        const currentCaption = latestRef.current.captions[index];
+        if (!currentCaption) {
             return;
         }
         const nextCaptions = latestRef.current.captions.map((caption, captionIndex) => {
-            return captionIndex === index ? { ...caption, text } : caption;
+            return captionIndex === index ? { ...caption, ...changes } : caption;
         });
         latestRef.current.captions = nextCaptions;
         dirtyRef.current = true;
         onChange(nextCaptions);
     }, [onChange]);
+    const updateText = (0, react_1.useCallback)((index, text) => {
+        var _a;
+        if (((_a = latestRef.current.captions[index]) === null || _a === void 0 ? void 0 : _a.text) === text) {
+            return;
+        }
+        updateCaption(index, { text });
+    }, [updateCaption]);
+    const updatePageBreakAfter = (0, react_1.useCallback)((index, pageBreakAfter) => {
+        var _a;
+        if (Boolean((_a = latestRef.current.captions[index]) === null || _a === void 0 ? void 0 : _a.pageBreakAfter) ===
+            pageBreakAfter) {
+            return;
+        }
+        updateCaption(index, { pageBreakAfter });
+    }, [updateCaption]);
     const focusSibling = (0, react_1.useCallback)((index) => {
         var _a;
         const input = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-caption-index="${index}"]`);
@@ -96,6 +114,10 @@ const CaptionTextEditor = ({ captions, onChange, onSave, onCancel, readOnly }) =
         input === null || input === void 0 ? void 0 : input.scrollIntoView({ block: 'nearest' });
     }, []);
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsxs("div", { ref: listRef, style: list, children: [captions.length === 0 ? jsx_runtime_1.jsx("div", { style: empty, children: "No captions" }) : null, captionRows.map(({ caption, key }, index) => {
+                    const hasPageBreakAfter = Boolean(caption.pageBreakAfter);
+                    const pageBreakTitle = hasPageBreakAfter
+                        ? `Remove page break after caption ${index + 1}`
+                        : `Add page break after caption ${index + 1}`;
                     return (jsx_runtime_1.jsxs("div", { style: row, children: [
                             jsx_runtime_1.jsxs("div", { style: timing, children: [formatMilliseconds(caption.startMs), " \u2192", ' ', formatMilliseconds(caption.endMs), " ms"] }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "data-caption-index": index, disabled: readOnly, onBlur: (event) => {
                                     if (cancelledBlurIndexes.current.delete(index)) {
@@ -125,8 +147,10 @@ const CaptionTextEditor = ({ captions, onChange, onSave, onCancel, readOnly }) =
                                     fontFamily: 'sans-serif',
                                     fontSize: 12,
                                     lineHeight: '16px',
-                                }, value: caption.text })
-                        ] }, key));
+                                }, value: caption.text }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-pressed": hasPageBreakAfter, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, disabled: readOnly, onClick: () => {
+                                    updatePageBreakAfter(index, !hasPageBreakAfter);
+                                    commitPending();
+                                }, renderAction: (color) => (jsx_runtime_1.jsx(enter_1.EnterIcon, { "aria-hidden": "true", color: hasPageBreakAfter ? colors_1.BLUE : color, focusable: "false", style: { height: 16, width: 16 } })), title: pageBreakTitle, variant: null })] }, key));
                 })] }) }));
 };
 exports.CaptionTextEditor = CaptionTextEditor;

package/dist/components/CheckboardToggle.js

@@ -21,7 +21,7 @@ const CheckboardToggle = () => {
             return !c;
         });
     }, [setCheckerboard]);
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 18, height: 18 }, fill: "none", children: [
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": checkerboard, onClick: onClick, children: (color) => (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 18, height: 18 }, fill: "none", children: [
                 jsx_runtime_1.jsx("path", { fill: checkerboard ? colors_1.BLUE : color, d: "M256 48h184c13.3 0 24 10.7 24 24v184H256V48zM48 256h208v208H72c-13.3 0-24-10.7-24-24V256z" }), jsx_runtime_1.jsx("rect", { x: "48", y: "48", width: "416", height: "416", rx: "24", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" }), jsx_runtime_1.jsx("path", { d: "M256 48v416M48 256h416", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" })
             ] })) }));
 };

package/dist/components/Checkbox.d.ts

@@ -8,7 +8,6 @@ export declare const Checkbox: React.FC<{
     readonly checked: boolean;
     readonly onChange: React.ChangeEventHandler<HTMLInputElement>;
     readonly name: string;
-    readonly rounded?: boolean;
     readonly disabled?: boolean;
     readonly variant?: CheckboxVariant;
 }>;

package/dist/components/Checkbox.js

@@ -9,30 +9,18 @@ const SIZES = {
     default: 20,
     small: 18,
 };
-const BULLET_SIZES = {
-    default: 10,
-    small: 9,
-};
 const CHECKMARK_SIZES = {
     default: 14,
     small: 13,
 };
-const Checkbox = ({ checked, onChange, disabled, name, rounded, variant = 'default' }) => {
-    const ref = (0, react_1.useRef)(null);
+const Checkbox = ({ checked, onChange, disabled, name, variant = 'default' }) => {
     const size = SIZES[variant];
-    const bulletSize = BULLET_SIZES[variant];
     const checkmarkSize = CHECKMARK_SIZES[variant];
     const background = (0, react_1.useMemo)(() => ({
         height: size,
         width: size,
         position: 'relative',
     }), [size]);
-    const bullet = (0, react_1.useMemo)(() => ({
-        width: bulletSize,
-        height: bulletSize,
-        backgroundColor: colors_1.WHITE,
-        borderRadius: '50%',
-    }), [bulletSize]);
     const box = (0, react_1.useMemo)(() => ({
         display: 'flex',
         justifyContent: 'center',
@@ -58,13 +46,8 @@ const Checkbox = ({ checked, onChange, disabled, name, rounded, variant = 'defau
             margin: 0,
         };
     }, [disabled, size]);
-    (0, react_1.useEffect)(() => {
-        if (ref.current) {
-            ref.current.style.setProperty('border-radius', rounded ? '50%' : '0%', 'important');
-        }
-    }, [rounded]);
     return (jsx_runtime_1.jsxs("div", { style: background, children: [
-            jsx_runtime_1.jsx("input", { ref: ref, style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), jsx_runtime_1.jsx("div", { style: box, children: checked ? (rounded ? (jsx_runtime_1.jsx("div", { style: bullet })) : (jsx_runtime_1.jsx(Checkmark_1.Checkmark, { size: checkmarkSize }))) : null })
+            jsx_runtime_1.jsx("input", { style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), jsx_runtime_1.jsx("div", { style: box, children: checked ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, { size: checkmarkSize }) : null })
         ] }));
 };
 exports.Checkbox = Checkbox;

package/dist/components/CompositionContextButton.js

@@ -4,6 +4,7 @@ exports.CompositionContextButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
+const hoverable_1 = require("../helpers/hoverable");
 const ellipsis_1 = require("../icons/ellipsis");
 const InlineDropdown_1 = require("./InlineDropdown");
 const CompositionContextButton = ({ visible, getItems }) => {
@@ -22,6 +23,6 @@ const CompositionContextButton = ({ visible, getItems }) => {
     if (!visible || connectionStatus !== 'connected') {
         return null;
     }
-    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, getItems: getItems, variant: null }));
+    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, getItems: getItems, variant: null, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }));
 };
 exports.CompositionContextButton = CompositionContextButton;

package/dist/components/CompositionSelector.js

@@ -239,7 +239,7 @@ const CompositionSelector = () => {
         }
     }, [compositions, stopCompositionListAutoScroll]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: listRef, getItems: getRootContextMenuItems }), jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "compositions", showShortcut: true, tabIndex: tabIndex }), 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, getItems: getRootContextMenuItems }), jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "compositions", showShortcut: true, tabIndex: tabIndex, getActions: getRootContextMenuItems }), 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));