@remotion/studio 4.0.496 → 4.0.497

package/dist/components/handle-drop.d.ts

@@ -0,0 +1,13 @@
+import type { Dimensions } from '../helpers/is-current-selected-still';
+import { type InsertElementDropPosition } from './import-assets';
+import type { SvgImportMode } from './SvgImportDialog';
+export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, }: {
+    chooseSvgImportMode: () => Promise<SvgImportMode | null>;
+    compositionFile: string;
+    compositionId: string;
+    destinationDimensions: Dimensions | null;
+    dropPosition: InsertElementDropPosition | null;
+    event: DragEvent;
+    fps: number;
+    from: number | null;
+}) => Promise<void>;

package/dist/components/handle-drop.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleDrop = void 0;
+const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
+const drop_handler_data_1 = require("./drop-handler-data");
+const element_drag_and_drop_1 = require("./element-drag-and-drop");
+const import_assets_1 = require("./import-assets");
+const handleDrop = async ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, }) => {
+    var _a;
+    var _b;
+    if ((0, drop_handler_data_1.isFileDragEvent)(event)) {
+        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;
+        }
+        const svgImportMode = (0, import_assets_1.hasSvgFile)(files)
+            ? await chooseSvgImportMode()
+            : 'image';
+        if (svgImportMode === null) {
+            return;
+        }
+        await (0, import_assets_1.importAssets)({
+            compositionFile,
+            compositionId,
+            destinationDimensions,
+            dropPosition,
+            files,
+            fps,
+            from,
+            svgImportMode,
+        });
+        return;
+    }
+    if ((0, drop_handler_data_1.isAssetDragEvent)(event)) {
+        const assetPath = (0, drop_handler_data_1.getAssetDragPath)(event);
+        if (assetPath === null) {
+            return;
+        }
+        await (0, import_assets_1.insertExistingAssets)({
+            assetPaths: [assetPath],
+            compositionFile,
+            compositionId,
+            destinationDimensions,
+            dropPosition,
+            fps,
+            from,
+        });
+        return;
+    }
+    if ((0, drop_handler_data_1.isSfxDragEvent)(event)) {
+        const sfxUrl = (0, drop_handler_data_1.getSfxDragUrl)(event);
+        if (sfxUrl === null) {
+            return;
+        }
+        await (0, import_assets_1.insertRemoteAudio)({
+            compositionFile,
+            compositionId,
+            fps,
+            from,
+            url: sfxUrl,
+        });
+        return;
+    }
+    if ((0, drop_handler_data_1.isCompositionDragEvent)(event)) {
+        const composition = (0, drop_handler_data_1.getCompositionDragData)(event);
+        if (composition === null) {
+            return;
+        }
+        await (0, import_assets_1.insertComposition)({
+            composition,
+            compositionFile,
+            compositionId,
+            destinationDimensions,
+            dropPosition,
+            from,
+        });
+        return;
+    }
+    const element = (0, element_drag_and_drop_1.getElementDragData)(event.dataTransfer);
+    if (element !== null) {
+        await (0, import_assets_1.insertElement)({
+            compositionFile,
+            compositionId,
+            dropPosition,
+            element: element.element,
+            from,
+        });
+        return;
+    }
+    const component = (0, drop_handler_data_1.getComponentDragData)(event);
+    if (component !== null) {
+        await (0, import_assets_1.insertComponent)({
+            component: component.component,
+            compositionFile,
+            compositionId,
+            dropPosition,
+            from,
+        });
+        return;
+    }
+    const remoteAssetUrl = (0, remote_asset_drag_1.getRemoteAssetUrlFromDataTransfer)(event.dataTransfer);
+    if (remoteAssetUrl === null) {
+        return;
+    }
+    await (0, import_assets_1.importRemoteAsset)({
+        compositionFile,
+        compositionId,
+        destinationDimensions,
+        dropPosition,
+        fps,
+        from,
+        url: remoteAssetUrl,
+    });
+};
+exports.handleDrop = handleDrop;

package/dist/components/import-assets.d.ts

@@ -1,4 +1,4 @@
-import { type CompositionDragData, type ComponentProp, type FileType, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
+import { type ComponentProp, type CompositionDragData, type FileType, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
 import type { Dimensions } from '../helpers/is-current-selected-still';
 export type InsertElementDropPosition = {
     readonly centerX: number;
@@ -16,6 +16,7 @@ export declare const getAssetElement: ({ fileType, src, }: {
         width: number;
         height: number;
     } | null;
+    durationInFrames: number | null;
     position: InsertableCompositionElementPosition | null;
 } | null;
 export declare const getAssetElementFromPath: (assetPath: string) => {
@@ -27,6 +28,7 @@ export declare const getAssetElementFromPath: (assetPath: string) => {
         width: number;
         height: number;
     } | null;
+    durationInFrames: number | null;
     position: InsertableCompositionElementPosition | null;
 } | null;
 export declare const getAssetElementForDroppedFile: ({ fileType, src, }: {
@@ -41,6 +43,7 @@ export declare const getAssetElementForDroppedFile: ({ fileType, src, }: {
         width: number;
         height: number;
     } | null;
+    durationInFrames: number | null;
     position: InsertableCompositionElementPosition | null;
 } | null;
 export declare const hasSvgFile: (files: File[]) => boolean;
@@ -65,15 +68,21 @@ export declare const getComponentDimensions: (component: {
     importPath: string;
     props: ComponentProp[];
 }) => Dimensions | null;
+export declare const getDurationInFrames: ({ durationInSeconds, fps, }: {
+    durationInSeconds: number | null;
+    fps: number;
+}) => number | null;
 export declare const pickFilesToImport: ({ multiple, }?: {
     readonly multiple?: boolean | undefined;
 }) => Promise<File[]>;
-export declare const importAssets: ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, svgImportMode, }: {
+export declare const importAssets: ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, fps, from, svgImportMode, }: {
     compositionFile: string;
     compositionId: string;
     destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
     files: File[];
+    fps: number;
+    from: number | null;
     svgImportMode: "image" | "inline";
 }) => Promise<void>;
 export declare const importFigmaClipboard: ({ compositionFile, compositionId, destinationDimensions, dropPosition, html, }: {
@@ -90,26 +99,32 @@ export declare const insertSvgMarkup: ({ compositionFile, compositionId, destina
     dropPosition: InsertElementDropPosition | null;
     markup: string;
 }) => Promise<void>;
-export declare const importRemoteAsset: ({ compositionFile, compositionId, destinationDimensions, dropPosition, url, }: {
+export declare const importRemoteAsset: ({ compositionFile, compositionId, destinationDimensions, dropPosition, fps, from, url, }: {
     compositionFile: string;
     compositionId: string;
     destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
+    fps: number;
+    from: number | null;
     url: string;
 }) => Promise<void>;
-export declare const insertRemoteAudio: ({ compositionFile, compositionId, url, }: {
+export declare const insertRemoteAudio: ({ compositionFile, compositionId, fps, from, url, }: {
     compositionFile: string;
     compositionId: string;
+    fps: number;
+    from: number | null;
     url: string;
 }) => Promise<void>;
-export declare const insertExistingAssets: ({ assetPaths, compositionFile, compositionId, destinationDimensions, dropPosition, }: {
+export declare const insertExistingAssets: ({ assetPaths, compositionFile, compositionId, destinationDimensions, dropPosition, fps, from, }: {
     assetPaths: string[];
     compositionFile: string;
     compositionId: string;
     destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
+    fps: number;
+    from: number | null;
 }) => Promise<void>;
-export declare const insertComponent: ({ component, compositionFile, compositionId, dropPosition, }: {
+export declare const insertComponent: ({ component, compositionFile, compositionId, dropPosition, from, }: {
     component: {
         componentName: string;
         dimensions?: import("@remotion/studio-shared").ComponentDimensions | undefined;
@@ -120,15 +135,17 @@ export declare const insertComponent: ({ component, compositionFile, composition
     compositionFile: string;
     compositionId: string;
     dropPosition: InsertElementDropPosition | null;
+    from: number | null;
 }) => Promise<void>;
-export declare const insertComposition: ({ composition, compositionFile, compositionId, destinationDimensions, dropPosition, }: {
+export declare const insertComposition: ({ composition, compositionFile, compositionId, destinationDimensions, dropPosition, from, }: {
     composition: CompositionDragData;
     compositionFile: string;
     compositionId: string;
     destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
+    from: number | null;
 }) => Promise<void>;
-export declare const insertElement: ({ compositionFile, compositionId, dropPosition, element, }: {
+export declare const insertElement: ({ compositionFile, compositionId, dropPosition, element, from, }: {
     compositionFile: string;
     compositionId: string;
     dropPosition: InsertElementDropPosition | null;
@@ -139,4 +156,5 @@ export declare const insertElement: ({ compositionFile, compositionId, dropPosit
         sourceCode: string;
         dimensions: import("@remotion/studio-shared").ComponentDimensions | null;
     };
+    from: number | null;
 }) => Promise<void>;