@remotion/studio 4.0.493 → 4.0.495

package/dist/api/get-static-files.d.ts

@@ -1,7 +1,7 @@
 export declare const getStaticFiles: () => StaticFile[];
 export type StaticFile = {
     /**
-     * A string that you can pass to the `src` attribute of an `<Audio>`, `<Img>`, `<Video>`, `<Html5Audio>`, `<Html5Video>` or `<OffthreadVideo>` element.
+     * A string that you can pass to the `src` attribute of an `<Audio>`, `<CanvasImage>`, `<Img>`, `<Video>`, `<Html5Audio>`, `<Html5Video>` or `<OffthreadVideo>` element.
      */
     src: string;
     /**

package/dist/components/AssetFileIcon.d.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react';
+import type { AssetFileType } from '../helpers/get-preview-file-type';
+export declare const AssetFileIcon: ({ fileType, ...props }: SVGProps<SVGSVGElement> & {
+    readonly color: string;
+} & {
+    readonly fileType: AssetFileType;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AssetFileIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetFileIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const audio_1 = require("../icons/audio");
+const file_1 = require("../icons/file");
+const font_1 = require("../icons/font");
+const frame_1 = require("../icons/frame");
+const json_1 = require("../icons/json");
+const video_1 = require("../icons/video");
+const iconByFileType = {
+    audio: audio_1.AudioFileIcon,
+    font: font_1.FontFileIcon,
+    image: frame_1.PicIcon,
+    json: json_1.JsonFileIcon,
+    other: file_1.FileIcon,
+    txt: file_1.FileIcon,
+    video: video_1.VideoFileIcon,
+};
+const AssetFileIcon = ({ fileType, ...props }) => {
+    const Icon = iconByFileType[fileType];
+    return jsx_runtime_1.jsx(Icon, { ...props });
+};
+exports.AssetFileIcon = AssetFileIcon;

package/dist/components/AssetSelectorItem.js

@@ -44,15 +44,16 @@ const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
 const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const url_state_1 = require("../helpers/url-state");
 const use_asset_drag_events_1 = __importStar(require("../helpers/use-asset-drag-events"));
 const clipboard_1 = require("../icons/clipboard");
-const file_1 = require("../icons/file");
 const folder_1 = require("../icons/folder");
 const modals_1 = require("../state/modals");
 const sidebar_1 = require("../state/sidebar");
+const AssetFileIcon_1 = require("./AssetFileIcon");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const ContextMenu_1 = require("./ContextMenu");
 const import_assets_1 = require("./import-assets");
@@ -61,7 +62,6 @@ const layout_1 = require("./layout");
 const styles_1 = require("./Menu/styles");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const actions_1 = require("./RenderQueue/actions");
-const ASSET_ITEM_HEIGHT = 32;
 const iconStyle = {
     width: 18,
     height: 18,
@@ -69,20 +69,23 @@ const iconStyle = {
 };
 const itemStyle = {
     paddingRight: 10,
-    paddingTop: 6,
-    paddingBottom: 6,
+    paddingTop: 5,
+    paddingBottom: 5,
     fontSize: 13,
     display: 'flex',
     textDecoration: 'none',
     cursor: 'default',
     alignItems: 'center',
     marginBottom: 1,
+    marginLeft: 4,
+    marginRight: 4,
     appearance: 'none',
     border: 'none',
-    width: '100%',
+    borderRadius: 4,
+    width: 'calc(100% - 8px)',
     textAlign: 'left',
     backgroundColor: colors_1.BACKGROUND,
-    height: ASSET_ITEM_HEIGHT,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
@@ -183,6 +186,9 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     const relativePath = (0, react_1.useMemo)(() => {
         return parentFolder ? parentFolder + '/' + item.name : item.name;
     }, [parentFolder, item.name]);
+    const previewFileType = (0, react_1.useMemo)(() => {
+        return (0, get_preview_file_type_1.getPreviewFileType)(relativePath);
+    }, [relativePath]);
     const selected = (0, react_1.useMemo)(() => {
         if (canvasContent && canvasContent.type === 'asset') {
             return canvasContent.asset === relativePath;
@@ -398,7 +404,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         copyStaticFilePath();
     }, [copyStaticFilePath]);
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { ref: rowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, draggable: canDragAsset, onDragStart: onDragStart, onDragEnd: onDragEnd, tabIndex: tabIndex, title: item.name, children: [
-                    jsx_runtime_1.jsx(file_1.FileIcon, { style: iconStyle, color: colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name }), hovered && !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: previewFileType, style: iconStyle, color: colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name }), hovered && !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy staticFile() path", renderAction: renderCopyAction, onClick: copyToClipboard }), serverActionDisabled ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: `Show in ${fileManagerName}`, renderAction: renderFileExplorerAction, onClick: revealInExplorer })
                                 ] }))] })) : null] }) }) }));

package/dist/components/Canvas.js

@@ -8,7 +8,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const get_static_files_1 = require("../api/get-static-files");
 const client_id_1 = require("../helpers/client-id");
+const clipboard_figma_1 = require("../helpers/clipboard-figma");
+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_effective_translation_1 = require("../helpers/get-effective-translation");
@@ -16,6 +20,7 @@ const install_required_package_1 = require("../helpers/install-required-package"
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
 const smooth_zoom_1 = require("../helpers/smooth-zoom");
+const studio_fit_padding_1 = require("../helpers/studio-fit-padding");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const canvas_ref_1 = require("../state/canvas-ref");
 const editor_guides_1 = require("../state/editor-guides");
@@ -29,8 +34,10 @@ const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
 const element_drag_and_drop_1 = require("./element-drag-and-drop");
 const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const Preview_1 = require("./Preview");
 const ResetZoomButton_1 = require("./ResetZoomButton");
+const SvgImportDialog_1 = require("./SvgImportDialog");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const elementInstallCompositionIdStyle = {
     fontFamily: 'monospace',
@@ -83,6 +90,17 @@ const resetZoom = {
     right: layout_1.SPACING_UNIT * 2,
 };
 const ZOOM_PX_FACTOR = 0.003;
+const calculateCanvasScale = ({ addFitPadding, canvasSize, compositionHeight, compositionWidth, previewSize, }) => {
+    const options = {
+        canvasSize,
+        compositionHeight,
+        compositionWidth,
+        previewSize,
+    };
+    return addFitPadding
+        ? (0, studio_fit_padding_1.calculateStudioScale)(options)
+        : remotion_1.Internals.calculateScale(options);
+};
 const isFileDragEvent = (event) => {
     var _a;
     var _b;
@@ -174,11 +192,12 @@ const getSfxDragUrl = (event) => {
     }
     return null;
 };
-const getDropPosition = ({ clientX, clientY, contentDimensions, previewSize, size, }) => {
+const getDropPosition = ({ addFitPadding, clientX, clientY, contentDimensions, previewSize, size, }) => {
     if (contentDimensions === null || contentDimensions === 'none') {
         return null;
     }
-    const scale = remotion_1.Internals.calculateScale({
+    const scale = calculateCanvasScale({
+        addFitPadding,
         canvasSize: size,
         compositionHeight: contentDimensions.height,
         compositionWidth: contentDimensions.width,
@@ -224,6 +243,7 @@ const Canvas = ({ canvasContent, size }) => {
     const touchPinchRef = (0, react_1.useRef)(null);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
+    const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
     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);
@@ -258,6 +278,7 @@ const Canvas = ({ canvasContent, size }) => {
         currentCompositionId !== null &&
         compositionFile !== null;
     const canDropAssets = canInstallElements && !isAddingAsset;
+    const cannotAddSequence = (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false;
     const contentDimensions = (0, react_1.useMemo)(() => {
         if ((canvasContent.type === 'asset' ||
             canvasContent.type === 'output' ||
@@ -272,6 +293,7 @@ const Canvas = ({ canvasContent, size }) => {
         return null;
     }, [assetResolution, config, canvasContent]);
     const isFit = previewSize.size === 'auto';
+    const addFitPadding = canvasContent.type === 'composition';
     previewSnapshotRef.current = {
         previewSize,
         canvasSize: size,
@@ -298,7 +320,8 @@ const Canvas = ({ canvasContent, size }) => {
         }
         ev.preventDefault();
         setSize((prevSize) => {
-            const scale = remotion_1.Internals.calculateScale({
+            const scale = calculateCanvasScale({
+                addFitPadding,
                 canvasSize: size,
                 compositionHeight: contentDimensions.height,
                 compositionWidth: contentDimensions.width,
@@ -310,6 +333,7 @@ const Canvas = ({ canvasContent, size }) => {
                 const added = smoothened + ev.deltaY * ZOOM_PX_FACTOR;
                 const unsmoothened = (0, smooth_zoom_1.unsmoothenZoom)(added);
                 return (0, get_effective_translation_1.applyZoomAroundFocalPoint)({
+                    addFitPadding,
                     canvasSize: size,
                     contentDimensions,
                     previewSizeBefore: prevSize,
@@ -340,7 +364,14 @@ const Canvas = ({ canvasContent, size }) => {
                 }),
             };
         });
-    }, [editorZoomGestures, contentDimensions, isFit, setSize, size]);
+    }, [
+        addFitPadding,
+        editorZoomGestures,
+        contentDimensions,
+        isFit,
+        setSize,
+        size,
+    ]);
     (0, react_1.useEffect)(() => {
         const { current } = canvas_ref_1.canvasRef;
         if (!current) {
@@ -371,7 +402,8 @@ const Canvas = ({ canvasContent, size }) => {
             }
             e.preventDefault();
             suppressWheelFromWebKitPinchRef.current = true;
-            const fitted = remotion_1.Internals.calculateScale({
+            const fitted = calculateCanvasScale({
+                addFitPadding,
                 canvasSize: canvasSz,
                 compositionHeight: cdim.height,
                 compositionWidth: cdim.width,
@@ -392,7 +424,8 @@ const Canvas = ({ canvasContent, size }) => {
             const dimensions = cdim;
             e.preventDefault();
             setSize((prevSize) => {
-                const scale = remotion_1.Internals.calculateScale({
+                const scale = calculateCanvasScale({
+                    addFitPadding,
                     canvasSize: canvasSz,
                     compositionHeight: dimensions.height,
                     compositionWidth: dimensions.width,
@@ -400,6 +433,7 @@ const Canvas = ({ canvasContent, size }) => {
                 });
                 const oldNumeric = prevSize.size === 'auto' ? scale : prevSize.size;
                 return (0, get_effective_translation_1.applyZoomAroundFocalPoint)({
+                    addFitPadding,
                     canvasSize: canvasSz,
                     contentDimensions: dimensions,
                     previewSizeBefore: prevSize,
@@ -427,7 +461,7 @@ const Canvas = ({ canvasContent, size }) => {
             current.removeEventListener('gestureend', onGestureEnd);
             current.removeEventListener('gesturecancel', onGestureEnd);
         };
-    }, [editorZoomGestures, setSize, supportsWebKitPinch]);
+    }, [addFitPadding, editorZoomGestures, setSize, supportsWebKitPinch]);
     (0, react_1.useEffect)(() => {
         const { current } = canvas_ref_1.canvasRef;
         if (!current || !editorZoomGestures) {
@@ -449,7 +483,8 @@ const Canvas = ({ canvasContent, size }) => {
             if (initialDistance < 1e-6) {
                 return;
             }
-            const fitted = remotion_1.Internals.calculateScale({
+            const fitted = calculateCanvasScale({
+                addFitPadding,
                 canvasSize: snap.canvasSize,
                 compositionHeight: snap.contentDimensions.height,
                 compositionWidth: snap.contentDimensions.width,
@@ -477,7 +512,8 @@ const Canvas = ({ canvasContent, size }) => {
             setSize((prevSize) => {
                 const canvasSz = snap.canvasSize;
                 const cdim = snap.contentDimensions;
-                const scale = remotion_1.Internals.calculateScale({
+                const scale = calculateCanvasScale({
+                    addFitPadding,
                     canvasSize: canvasSz,
                     compositionHeight: cdim.height,
                     compositionWidth: cdim.width,
@@ -485,6 +521,7 @@ const Canvas = ({ canvasContent, size }) => {
                 });
                 const oldNumeric = prevSize.size === 'auto' ? scale : prevSize.size;
                 return (0, get_effective_translation_1.applyZoomAroundFocalPoint)({
+                    addFitPadding,
                     canvasSize: canvasSz,
                     contentDimensions: cdim,
                     previewSizeBefore: prevSize,
@@ -510,7 +547,7 @@ const Canvas = ({ canvasContent, size }) => {
             current.removeEventListener('touchend', onTouchEnd);
             current.removeEventListener('touchcancel', onTouchEnd);
         };
-    }, [editorZoomGestures, setSize]);
+    }, [addFitPadding, editorZoomGestures, setSize]);
     const onReset = (0, react_1.useCallback)(() => {
         setSize(() => {
             return {
@@ -530,7 +567,8 @@ const Canvas = ({ canvasContent, size }) => {
             return;
         }
         setSize((prevSize) => {
-            const scale = remotion_1.Internals.calculateScale({
+            const scale = calculateCanvasScale({
+                addFitPadding,
                 canvasSize: size,
                 compositionHeight: contentDimensions.height,
                 compositionWidth: contentDimensions.width,
@@ -544,7 +582,7 @@ const Canvas = ({ canvasContent, size }) => {
                 size: Math.min(smooth_zoom_1.MAX_ZOOM, scale * 2),
             };
         });
-    }, [contentDimensions, setSize, size]);
+    }, [addFitPadding, contentDimensions, setSize, size]);
     const onZoomOut = (0, react_1.useCallback)(() => {
         if (!contentDimensions || contentDimensions === 'none') {
             return;
@@ -553,7 +591,8 @@ const Canvas = ({ canvasContent, size }) => {
             return;
         }
         setSize((prevSize) => {
-            const scale = remotion_1.Internals.calculateScale({
+            const scale = calculateCanvasScale({
+                addFitPadding,
                 canvasSize: size,
                 compositionHeight: contentDimensions.height,
                 compositionWidth: contentDimensions.width,
@@ -567,7 +606,7 @@ const Canvas = ({ canvasContent, size }) => {
                 size: Math.max(smooth_zoom_1.MIN_ZOOM, scale / 2),
             };
         });
-    }, [contentDimensions, setSize, size]);
+    }, [addFitPadding, contentDimensions, setSize, size]);
     (0, react_1.useEffect)(() => {
         const resetBinding = keybindings.registerKeybinding({
             event: 'keydown',
@@ -748,36 +787,46 @@ const Canvas = ({ canvasContent, size }) => {
         };
     }, [activeElementInstallRequest, confirm]);
     const onDragOver = (0, react_1.useCallback)((event) => {
-        if (!canDropAssets ||
-            (!isFileDragEvent(event) &&
-                !isAssetDragEvent(event) &&
-                !isCompositionDragEvent(event) &&
-                !isComponentDragEvent(event) &&
-                !isElementDragEvent(event) &&
-                !isSfxDragEvent(event) &&
-                !isRemoteAssetDragEvent(event)) ||
+        if ((!isFileDragEvent(event) &&
+            !isAssetDragEvent(event) &&
+            !isCompositionDragEvent(event) &&
+            !isComponentDragEvent(event) &&
+            !isElementDragEvent(event) &&
+            !isSfxDragEvent(event) &&
+            !isRemoteAssetDragEvent(event)) ||
             !isDragEventInsideCanvas(event)) {
             return;
         }
+        if (!canDropAssets && !cannotAddSequence) {
+            return;
+        }
         event.preventDefault();
         if (event.dataTransfer) {
-            event.dataTransfer.dropEffect = 'copy';
+            event.dataTransfer.dropEffect = canDropAssets ? 'copy' : 'none';
         }
-    }, [canDropAssets]);
+    }, [canDropAssets, cannotAddSequence]);
     const onDrop = (0, react_1.useCallback)(async (event) => {
         var _a;
         var _b;
+        if ((!isFileDragEvent(event) &&
+            !isAssetDragEvent(event) &&
+            !isCompositionDragEvent(event) &&
+            !isComponentDragEvent(event) &&
+            !isElementDragEvent(event) &&
+            !isSfxDragEvent(event) &&
+            !isRemoteAssetDragEvent(event)) ||
+            !isDragEventInsideCanvas(event)) {
+            return;
+        }
+        if (cannotAddSequence) {
+            event.preventDefault();
+            event.stopPropagation();
+            (0, NotificationCenter_1.showNotification)('Cannot insert items into this composition component', 3000);
+            return;
+        }
         if (!canDropAssets ||
             compositionFile === null ||
-            currentCompositionId === null ||
-            (!isFileDragEvent(event) &&
-                !isAssetDragEvent(event) &&
-                !isCompositionDragEvent(event) &&
-                !isComponentDragEvent(event) &&
-                !isElementDragEvent(event) &&
-                !isSfxDragEvent(event) &&
-                !isRemoteAssetDragEvent(event)) ||
-            !isDragEventInsideCanvas(event)) {
+            currentCompositionId === null) {
             return;
         }
         if (event.dataTransfer &&
@@ -790,6 +839,7 @@ const Canvas = ({ canvasContent, size }) => {
         setIsAddingAsset(true);
         try {
             const dropPosition = getDropPosition({
+                addFitPadding,
                 clientX: event.clientX,
                 clientY: event.clientY,
                 contentDimensions,
@@ -801,11 +851,19 @@ const Canvas = ({ canvasContent, size }) => {
                 if (files.length === 0) {
                     return;
                 }
+                const svgImportMode = (0, import_assets_1.hasSvgFile)(files)
+                    ? await chooseSvgImportMode()
+                    : 'image';
+                if (svgImportMode === null) {
+                    return;
+                }
                 await (0, import_assets_1.importAssets)({
                     files,
                     compositionFile,
                     compositionId: currentCompositionId,
+                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
                     dropPosition,
+                    svgImportMode,
                 });
             }
             else if (isAssetDragEvent(event)) {
@@ -817,6 +875,7 @@ const Canvas = ({ canvasContent, size }) => {
                     assetPaths: [assetPath],
                     compositionFile,
                     compositionId: currentCompositionId,
+                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
                     dropPosition,
                 });
             }
@@ -873,6 +932,7 @@ const Canvas = ({ canvasContent, size }) => {
                     url,
                     compositionFile,
                     compositionId: currentCompositionId,
+                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
                     dropPosition,
                 });
             }
@@ -881,24 +941,122 @@ const Canvas = ({ canvasContent, size }) => {
             setIsAddingAsset(false);
         }
     }, [
+        addFitPadding,
         canDropAssets,
+        cannotAddSequence,
+        chooseSvgImportMode,
         compositionFile,
         contentDimensions,
         currentCompositionId,
         previewSize,
         size,
     ]);
-    (0, react_1.useEffect)(() => {
-        if (!canDropAssets) {
+    const onPaste = (0, react_1.useCallback)(async (event) => {
+        const { activeElement } = document;
+        if (!canDropAssets ||
+            compositionFile === null ||
+            currentCompositionId === null ||
+            event.clipboardData === null ||
+            activeElement instanceof HTMLInputElement ||
+            activeElement instanceof HTMLTextAreaElement ||
+            (activeElement instanceof HTMLElement &&
+                activeElement.isContentEditable)) {
+            return;
+        }
+        const dropPosition = contentDimensions === null || contentDimensions === 'none'
+            ? null
+            : {
+                centerX: contentDimensions.width / 2,
+                centerY: contentDimensions.height / 2,
+            };
+        const figmaHtml = (0, clipboard_figma_1.getClipboardFigmaHtml)(event.clipboardData);
+        if (figmaHtml !== null) {
+            event.preventDefault();
+            setIsAddingAsset(true);
+            try {
+                await (0, import_assets_1.importFigmaClipboard)({
+                    compositionFile,
+                    compositionId: currentCompositionId,
+                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
+                    dropPosition,
+                    html: figmaHtml,
+                });
+            }
+            finally {
+                setIsAddingAsset(false);
+            }
+            return;
+        }
+        const svgMarkup = (0, clipboard_svg_1.getClipboardSvgMarkup)(event.clipboardData);
+        if (svgMarkup !== null) {
+            event.preventDefault();
+            setIsAddingAsset(true);
+            try {
+                await (0, import_assets_1.insertSvgMarkup)({
+                    compositionFile,
+                    compositionId: currentCompositionId,
+                    destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
+                    dropPosition,
+                    markup: svgMarkup,
+                });
+            }
+            finally {
+                setIsAddingAsset(false);
+            }
+            return;
+        }
+        const files = (0, clipboard_images_1.getClipboardImageFiles)({
+            clipboardData: event.clipboardData,
+            existingFileNames: (0, get_static_files_1.getStaticFiles)().map((file) => file.name),
+        });
+        if (files.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        const svgImportMode = (0, import_assets_1.hasSvgFile)(files)
+            ? await chooseSvgImportMode()
+            : 'image';
+        if (svgImportMode === null) {
             return;
         }
+        setIsAddingAsset(true);
+        try {
+            await (0, import_assets_1.importAssets)({
+                files,
+                compositionFile,
+                compositionId: currentCompositionId,
+                destinationDimensions: contentDimensions === 'none' ? null : contentDimensions,
+                dropPosition,
+                svgImportMode,
+            });
+        }
+        finally {
+            setIsAddingAsset(false);
+        }
+    }, [
+        canDropAssets,
+        chooseSvgImportMode,
+        compositionFile,
+        contentDimensions,
+        currentCompositionId,
+    ]);
+    (0, react_1.useEffect)(() => {
         document.addEventListener('dragover', onDragOver, { capture: true });
         document.addEventListener('drop', onDrop, { capture: true });
         return () => {
             document.removeEventListener('dragover', onDragOver, { capture: true });
             document.removeEventListener('drop', onDrop, { capture: true });
         };
-    }, [canDropAssets, onDragOver, onDrop]);
+    }, [onDragOver, onDrop]);
+    (0, react_1.useEffect)(() => {
+        if (!canDropAssets ||
+            !keybindings.isHighestContext ||
+            (0, use_keybinding_1.areKeyboardShortcutsDisabled)()) {
+            return;
+        }
+        document.addEventListener('paste', onPaste);
+        return () => document.removeEventListener('paste', onPaste);
+    }, [canDropAssets, keybindings.isHighestContext, onPaste]);
     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, 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 }))] }));
 };

package/dist/components/CompositionSelectorItem.js

@@ -22,23 +22,25 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const actions_1 = require("./RenderQueue/actions");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
-const COMPOSITION_ITEM_HEIGHT = 32;
 const itemStyle = {
     paddingRight: 10,
-    paddingTop: 6,
-    paddingBottom: 6,
+    paddingTop: 5,
+    paddingBottom: 5,
     fontSize: 13,
     display: 'flex',
     textDecoration: 'none',
     cursor: 'default',
     alignItems: 'center',
     marginBottom: 1,
+    marginLeft: 4,
+    marginRight: 4,
     appearance: 'none',
     border: 'none',
-    width: '100%',
+    borderRadius: 4,
+    width: 'calc(100% - 8px)',
     textAlign: 'left',
     backgroundColor: colors_1.BACKGROUND,
-    height: COMPOSITION_ITEM_HEIGHT,
+    height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     userSelect: 'none',
 };
 const labelStyle = {
@@ -69,6 +71,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
     const [dragHovered, setDragHovered] = (0, react_1.useState)(false);
     const compositionRowRef = (0, react_1.useRef)(null);
     const compositionId = item.type === 'composition' ? item.composition.id : null;
@@ -170,12 +173,16 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
             event.preventDefault();
             return;
         }
+        setIsDragging(true);
         event.dataTransfer.effectAllowed = 'copyMove';
         event.dataTransfer.setData(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE, JSON.stringify((0, studio_shared_1.makeCompositionDragData)({
             compositionFile: (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : null,
             compositionId: item.composition.id,
         })));
     }, [item, resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source]);
+    const onCompositionDragEnd = (0, react_1.useCallback)(() => {
+        setIsDragging(false);
+    }, []);
     const onFolderDragOver = (0, react_1.useCallback)((event) => {
         if (item.type !== 'folder' ||
             window.remotion_isReadOnlyStudio ||
@@ -253,13 +260,13 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     }, [clearRootDragHover, item, toggleFolder]);
     if (item.type === 'folder') {
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, onDragOver: onFolderDragOver, onDragLeave: onFolderDragLeave, onDrop: onFolderDrop, title: item.folderName, role: "button", children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered })
+                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: "__remotion-composition-selector-item", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, onDragOver: onFolderDragOver, onDragLeave: onFolderDragLeave, onDrop: onFolderDrop, title: item.folderName, role: "button", children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered })
                             ] }) }) }), item.expanded ? (jsx_runtime_1.jsx("div", { onDragOver: onFolderChildListDragOver, onDrop: onFolderDrop, children: item.items.map((childItem) => {
                         return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover }, childItem.key + childItem.type));
                     }) })) : null] }));
     }
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onCompositionDragStart, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [
-                    jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition })
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onCompositionDragStart, onDragEnd: onCompositionDragEnd, type: "button", title: item.composition.id, className: "__remotion-composition __remotion-composition-selector-item", "data-compname": item.composition.id, children: [
+                    jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered && !isDragging }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered && !isDragging, composition: item.composition })
                 ] }) }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

package/dist/components/CurrentAsset.d.ts

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