@remotion/studio 4.0.476 → 4.0.477

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

@@ -1,18 +1,44 @@
-import { type FileType, type InsertableCompositionElement } from '@remotion/studio-shared';
+import { type ComponentProp, type FileType, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
+export type InsertElementDropPosition = {
+    readonly centerX: number;
+    readonly centerY: number;
+};
 export declare const getAssetElement: ({ fileType, src, }: {
     fileType: FileType;
     src: string;
-}) => InsertableCompositionElement | null;
-export declare const getAssetElementFromPath: (assetPath: string) => InsertableCompositionElement | null;
+}) => {
+    type: "asset";
+    assetType: "audio" | "gif" | "image" | "video";
+    src: string;
+    srcType: "remote" | "static";
+    dimensions: {
+        width: number;
+        height: number;
+    } | null;
+    position: InsertableCompositionElementPosition | null;
+} | null;
+export declare const getAssetElementFromPath: (assetPath: string) => {
+    type: "asset";
+    assetType: "audio" | "gif" | "image" | "video";
+    src: string;
+    srcType: "remote" | "static";
+    dimensions: {
+        width: number;
+        height: number;
+    } | null;
+    position: InsertableCompositionElementPosition | null;
+} | null;
 export declare const pickFilesToImport: () => Promise<File[]>;
-export declare const importAssets: ({ compositionFile, compositionId, files, }: {
+export declare const importAssets: ({ compositionFile, compositionId, dropPosition, files, }: {
     compositionFile: string;
     compositionId: string;
+    dropPosition: InsertElementDropPosition | null;
     files: File[];
 }) => Promise<void>;
-export declare const importRemoteAsset: ({ compositionFile, compositionId, url, }: {
+export declare const importRemoteAsset: ({ compositionFile, compositionId, dropPosition, url, }: {
     compositionFile: string;
     compositionId: string;
+    dropPosition: InsertElementDropPosition | null;
     url: string;
 }) => Promise<void>;
 export declare const insertRemoteAudio: ({ compositionFile, compositionId, url, }: {
@@ -20,18 +46,20 @@ export declare const insertRemoteAudio: ({ compositionFile, compositionId, url,
     compositionId: string;
     url: string;
 }) => Promise<void>;
-export declare const insertExistingAssets: ({ assetPaths, compositionFile, compositionId, }: {
+export declare const insertExistingAssets: ({ assetPaths, compositionFile, compositionId, dropPosition, }: {
     assetPaths: string[];
     compositionFile: string;
     compositionId: string;
+    dropPosition: InsertElementDropPosition | null;
 }) => Promise<void>;
-export declare const insertComponent: ({ component, compositionFile, compositionId, }: {
+export declare const insertComponent: ({ component, compositionFile, compositionId, dropPosition, }: {
     component: {
         componentName: string;
         importName: string;
         importPath: string;
-        props: import("@remotion/studio-shared").ComponentProp[];
+        props: ComponentProp[];
     };
     compositionFile: string;
     compositionId: string;
+    dropPosition: InsertElementDropPosition | null;
 }) => Promise<void>;

package/dist/components/import-assets.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
+const media_utils_1 = require("@remotion/media-utils");
 const studio_shared_1 = require("@remotion/studio-shared");
+const remotion_1 = require("remotion");
 const get_static_files_1 = require("../api/get-static-files");
 const write_static_file_1 = require("../api/write-static-file");
 const install_required_package_1 = require("../helpers/install-required-package");
@@ -18,6 +20,7 @@ const getAssetElement = ({ fileType, src, }) => {
             src,
             srcType: 'static',
             dimensions: fileType.dimensions,
+            position: null,
         };
     }
     if (fileType.type === 'gif') {
@@ -27,6 +30,7 @@ const getAssetElement = ({ fileType, src, }) => {
             src,
             srcType: 'static',
             dimensions: fileType.dimensions,
+            position: null,
         };
     }
     if (fileType.type === 'riff' ||
@@ -39,6 +43,7 @@ const getAssetElement = ({ fileType, src, }) => {
             src,
             srcType: 'static',
             dimensions: null,
+            position: null,
         };
     }
     if (fileType.type === 'wav' ||
@@ -51,6 +56,7 @@ const getAssetElement = ({ fileType, src, }) => {
             src,
             srcType: 'static',
             dimensions: null,
+            position: null,
         };
     }
     return null;
@@ -72,6 +78,7 @@ const getAssetElementFromPath = (assetPath) => {
             src: assetPath,
             srcType: 'static',
             dimensions: null,
+            position: null,
         };
     }
     if (extension === 'gif') {
@@ -81,6 +88,7 @@ const getAssetElementFromPath = (assetPath) => {
             src: assetPath,
             srcType: 'static',
             dimensions: null,
+            position: null,
         };
     }
     if (['mp4', 'm4v', 'mov', 'avi', 'webm', 'ts', 'm2ts'].includes(extension)) {
@@ -90,6 +98,7 @@ const getAssetElementFromPath = (assetPath) => {
             src: assetPath,
             srcType: 'static',
             dimensions: null,
+            position: null,
         };
     }
     if (['wav', 'mp3', 'aac', 'flac'].includes(extension)) {
@@ -99,6 +108,7 @@ const getAssetElementFromPath = (assetPath) => {
             src: assetPath,
             srcType: 'static',
             dimensions: null,
+            position: null,
         };
     }
     return null;
@@ -125,6 +135,121 @@ const getAssetLabel = (element) => {
 const getComponentLabel = (component) => {
     return `<${component.componentName}>`;
 };
+const getCenteredPosition = ({ dimensions, dropPosition, }) => {
+    if (dropPosition === null) {
+        return null;
+    }
+    if (dimensions === null) {
+        return {
+            x: dropPosition.centerX,
+            y: dropPosition.centerY,
+        };
+    }
+    return {
+        x: dropPosition.centerX - dimensions.width / 2,
+        y: dropPosition.centerY - dimensions.height / 2,
+    };
+};
+const getComponentPropNumber = (props, name) => {
+    const prop = props.find((p) => p.name === name);
+    return typeof (prop === null || prop === void 0 ? void 0 : prop.value) === 'number' ? prop.value : null;
+};
+const getComponentDimensions = (component) => {
+    const width = getComponentPropNumber(component.props, 'width');
+    const height = getComponentPropNumber(component.props, 'height');
+    if (width !== null && height !== null) {
+        return { width, height };
+    }
+    const radius = getComponentPropNumber(component.props, 'radius');
+    if (radius !== null) {
+        return { width: radius * 2, height: radius * 2 };
+    }
+    return null;
+};
+const getImageDimensions = ({ revokeObjectUrl, src, }) => {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.onload = () => {
+            if (revokeObjectUrl) {
+                URL.revokeObjectURL(src);
+            }
+            resolve({ width: image.naturalWidth, height: image.naturalHeight });
+        };
+        image.onerror = () => {
+            if (revokeObjectUrl) {
+                URL.revokeObjectURL(src);
+            }
+            reject(new Error('Failed to load image dimensions'));
+        };
+        image.src = src;
+    });
+};
+const getVideoDimensions = async (src) => {
+    const metadata = await (0, media_utils_1.getVideoMetadata)(src);
+    return { width: metadata.width, height: metadata.height };
+};
+const getFileDimensions = async ({ file, fileType, }) => {
+    if (fileType.type === 'wav' ||
+        fileType.type === 'mp3' ||
+        fileType.type === 'aac' ||
+        fileType.type === 'flac') {
+        return null;
+    }
+    if (fileType.type === 'png' ||
+        fileType.type === 'jpeg' ||
+        fileType.type === 'webp' ||
+        fileType.type === 'bmp' ||
+        fileType.type === 'gif') {
+        if (fileType.dimensions) {
+            return fileType.dimensions;
+        }
+        const objectUrl = URL.createObjectURL(file);
+        return getImageDimensions({ revokeObjectUrl: true, src: objectUrl });
+    }
+    if (fileType.type === 'riff' ||
+        fileType.type === 'webm' ||
+        fileType.type === 'iso-base-media' ||
+        fileType.type === 'transport-stream') {
+        const objectUrl = URL.createObjectURL(file);
+        try {
+            return await getVideoDimensions(objectUrl);
+        }
+        finally {
+            URL.revokeObjectURL(objectUrl);
+        }
+    }
+    return null;
+};
+const getStaticAssetDimensions = (assetPath) => {
+    var _a;
+    const extension = (_a = assetPath.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    const src = (0, remotion_1.staticFile)(assetPath);
+    if (extension &&
+        ['png', 'jpg', 'jpeg', 'webp', 'bmp', 'gif'].includes(extension)) {
+        return getImageDimensions({ revokeObjectUrl: false, src });
+    }
+    if (extension &&
+        ['mp4', 'm4v', 'mov', 'avi', 'webm', 'ts', 'm2ts'].includes(extension)) {
+        return getVideoDimensions(src);
+    }
+    return null;
+};
+const getFileDimensionsOrNull = async ({ file, fileType, }) => {
+    try {
+        return await getFileDimensions({ file, fileType });
+    }
+    catch (_a) {
+        return null;
+    }
+};
+const getStaticAssetDimensionsOrNull = async (assetPath) => {
+    try {
+        return await getStaticAssetDimensions(assetPath);
+    }
+    catch (_a) {
+        return null;
+    }
+};
 const pickFilesToImport = () => {
     return new Promise((resolve) => {
         const input = document.createElement('input');
@@ -184,16 +309,18 @@ const insertAssetElement = async ({ compositionFile, compositionId, element, })
     }
     return true;
 };
-const downloadRemoteAsset = async (url) => {
+const downloadRemoteAsset = (url) => {
     return (0, call_api_1.callApi)('/api/download-remote-asset', { url });
 };
-const importAssets = async ({ compositionFile, compositionId, files, }) => {
+const importAssets = async ({ compositionFile, compositionId, dropPosition, files, }) => {
+    var _a;
     if (files.length === 0) {
         return;
     }
     const staticFiles = (0, get_static_files_1.getStaticFiles)();
     const differentExistingFile = files.find((file) => {
-        return staticFiles.some((staticFile) => staticFile.name === file.name && staticFile.sizeInBytes !== file.size);
+        return staticFiles.some((existingStaticFile) => existingStaticFile.name === file.name &&
+            existingStaticFile.sizeInBytes !== file.size);
     });
     if (differentExistingFile) {
         (0, NotificationCenter_1.showNotification)(`File with name ${differentExistingFile.name} already exists and is different`, 4000);
@@ -223,7 +350,8 @@ const importAssets = async ({ compositionFile, compositionId, files, }) => {
                 unsupportedFiles.push(file.name);
                 continue;
             }
-            const alreadyExists = staticFiles.some((staticFile) => staticFile.name === file.name && staticFile.sizeInBytes === file.size);
+            const alreadyExists = staticFiles.some((existingStaticFile) => existingStaticFile.name === file.name &&
+                existingStaticFile.sizeInBytes === file.size);
             if (!alreadyExists) {
                 await (0, write_static_file_1.writeStaticFile)({
                     contents,
@@ -231,10 +359,18 @@ const importAssets = async ({ compositionFile, compositionId, files, }) => {
                 });
                 addedStaticFiles.push(file.name);
             }
+            const dimensions = await getFileDimensionsOrNull({ file, fileType });
             const inserted = await insertAssetElement({
                 compositionFile,
                 compositionId,
-                element,
+                element: {
+                    ...element,
+                    dimensions: (_a = element.dimensions) !== null && _a !== void 0 ? _a : dimensions,
+                    position: getCenteredPosition({
+                        dimensions,
+                        dropPosition,
+                    }),
+                },
             });
             if (!inserted) {
                 notifyAddedStaticFiles();
@@ -251,16 +387,26 @@ const importAssets = async ({ compositionFile, compositionId, files, }) => {
     }
 };
 exports.importAssets = importAssets;
-const importRemoteAsset = async ({ compositionFile, compositionId, url, }) => {
+const importRemoteAsset = async ({ compositionFile, compositionId, dropPosition, url, }) => {
     try {
         const { assetPath, created, element } = await downloadRemoteAsset(url);
         if (created) {
             (0, NotificationCenter_1.showNotification)(`Created ${assetPath} in public folder`, 3000);
         }
+        if (element.type !== 'asset') {
+            (0, NotificationCenter_1.showNotification)('Cannot add remote asset: Unsupported asset type', 3000);
+            return;
+        }
         const inserted = await insertAssetElement({
             compositionFile,
             compositionId,
-            element,
+            element: {
+                ...element,
+                position: getCenteredPosition({
+                    dimensions: element.dimensions,
+                    dropPosition,
+                }),
+            },
         });
         if (!inserted) {
             return;
@@ -283,6 +429,7 @@ const insertRemoteAudio = async ({ compositionFile, compositionId, url, }) => {
         src: url,
         srcType: 'remote',
         dimensions: null,
+        position: null,
     };
     try {
         const inserted = await insertAssetElement({
@@ -300,7 +447,8 @@ const insertRemoteAudio = async ({ compositionFile, compositionId, url, }) => {
     }
 };
 exports.insertRemoteAudio = insertRemoteAudio;
-const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId, }) => {
+const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId, dropPosition, }) => {
+    var _a;
     if (assetPaths.length === 0) {
         return;
     }
@@ -313,10 +461,18 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
                 unsupportedFiles.push(assetPath);
                 continue;
             }
+            const dimensions = await getStaticAssetDimensionsOrNull(assetPath);
             const inserted = await insertAssetElement({
                 compositionFile,
                 compositionId,
-                element,
+                element: {
+                    ...element,
+                    dimensions: (_a = element.dimensions) !== null && _a !== void 0 ? _a : dimensions,
+                    position: getCenteredPosition({
+                        dimensions,
+                        dropPosition,
+                    }),
+                },
             });
             if (!inserted) {
                 return;
@@ -331,7 +487,7 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
     }
 };
 exports.insertExistingAssets = insertExistingAssets;
-const insertComponent = async ({ component, compositionFile, compositionId, }) => {
+const insertComponent = async ({ component, compositionFile, compositionId, dropPosition, }) => {
     try {
         const inserted = await insertAssetElement({
             compositionFile,
@@ -342,6 +498,10 @@ const insertComponent = async ({ component, compositionFile, compositionId, }) =
                 importName: component.importName,
                 importPath: component.importPath,
                 props: component.props,
+                position: getCenteredPosition({
+                    dimensions: getComponentDimensions(component),
+                    dropPosition,
+                }),
             },
         });
         if (!inserted) {

package/dist/components/selected-outline-drag.d.ts

@@ -0,0 +1,117 @@
+import type { GetDragOverrides, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import { type OutlinePoint } from './selected-outline-geometry';
+import type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineRotationDragTarget, SelectedOutlineScaleDragState, SelectedOutlineScaleDragTarget, SelectedOutlineDragTarget } from './selected-outline-types';
+import type { SaveSequencePropChange } from './Timeline/save-sequence-prop';
+export declare const getSelectedOutlineDragStates: ({ dragTargets, getDragOverrides, timelinePosition, }: {
+    readonly dragTargets: readonly SelectedOutlineDragTarget[];
+    readonly getDragOverrides: GetDragOverrides;
+    readonly timelinePosition: number;
+}) => SelectedOutlineDragState[];
+export declare const getSelectedOutlineDragValues: ({ dragStates, deltaX, deltaY, }: {
+    readonly dragStates: readonly SelectedOutlineDragState[];
+    readonly deltaX: number;
+    readonly deltaY: number;
+}) => Map<string, string>;
+export declare const applySelectedOutlineDragAxisLock: ({ deltaX, deltaY, axisLocked, }: {
+    readonly deltaX: number;
+    readonly deltaY: number;
+    readonly axisLocked: boolean;
+}) => {
+    deltaX: number;
+    deltaY: number;
+};
+export declare const isSelectedOutlineDragPastThreshold: ({ deltaX, deltaY, }: {
+    readonly deltaX: number;
+    readonly deltaY: number;
+}) => boolean;
+export type SelectedOutlineStaticDragChange = SaveSequencePropChange & {
+    readonly type: 'static';
+};
+export type SelectedOutlineKeyframedDragChange = {
+    readonly type: 'keyframed';
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly fieldKey: string;
+    readonly sourceFrame: number;
+    readonly value: unknown;
+    readonly schema: SequenceSchema;
+    readonly clientId: string;
+};
+export type SelectedOutlineDragChange = SelectedOutlineStaticDragChange | SelectedOutlineKeyframedDragChange;
+export declare const getSelectedOutlineDragChanges: ({ dragStates, lastValues, }: {
+    readonly dragStates: readonly SelectedOutlineDragState[];
+    readonly lastValues: ReadonlyMap<string, string>;
+}) => SelectedOutlineDragChange[];
+export type SelectedOutlineKeyboardNudgeDirection = 'left' | 'right' | 'up' | 'down';
+export declare const getSelectedOutlineKeyboardNudgeDelta: ({ direction, shiftKey, }: {
+    readonly direction: SelectedOutlineKeyboardNudgeDirection;
+    readonly shiftKey: boolean;
+}) => number;
+export declare const getSelectedOutlineKeyboardNudgeDeltas: ({ deltaX, deltaY, direction, shiftKey, }: {
+    readonly deltaX: number;
+    readonly deltaY: number;
+    readonly direction: SelectedOutlineKeyboardNudgeDirection;
+    readonly shiftKey: boolean;
+}) => {
+    deltaX: number;
+    deltaY: number;
+};
+export type SelectedOutlineScaleEdge = 'top' | 'right' | 'bottom' | 'left';
+type SelectedOutlineScaleEdgeInfo = {
+    readonly axis: 'x' | 'y';
+    readonly cursor: string;
+    readonly end: OutlinePoint;
+    readonly extent: number;
+    readonly normal: OutlinePoint;
+    readonly start: OutlinePoint;
+};
+export declare const getSelectedOutlineScaleEdgeInfo: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], edge: SelectedOutlineScaleEdge) => SelectedOutlineScaleEdgeInfo | null;
+export declare const getSelectedOutlineScaleDragStates: ({ dragTargets, getDragOverrides, timelinePosition, }: {
+    readonly dragTargets: readonly SelectedOutlineScaleDragTarget[];
+    readonly getDragOverrides: GetDragOverrides;
+    readonly timelinePosition: number;
+}) => SelectedOutlineScaleDragState[];
+export declare const getSelectedOutlineScaleDragValues: ({ axis, dragStates, scaleFactor, }: {
+    readonly axis: "x" | "y";
+    readonly dragStates: readonly SelectedOutlineScaleDragState[];
+    readonly scaleFactor: number;
+}) => Map<string, string | number>;
+export declare const getSelectedOutlineScaleDragChanges: ({ dragStates, lastValues, }: {
+    readonly dragStates: readonly SelectedOutlineScaleDragState[];
+    readonly lastValues: ReadonlyMap<string, string | number>;
+}) => SelectedOutlineDragChange[];
+export declare const getSelectedOutlineRotationDragStates: ({ dragTargets, getDragOverrides, timelinePosition, }: {
+    readonly dragTargets: readonly SelectedOutlineRotationDragTarget[];
+    readonly getDragOverrides: GetDragOverrides;
+    readonly timelinePosition: number;
+}) => SelectedOutlineRotationDragState[];
+export declare const getSelectedOutlineRotationDragValues: ({ dragStates, rotationDeltaDegrees, }: {
+    readonly dragStates: readonly SelectedOutlineRotationDragState[];
+    readonly rotationDeltaDegrees: number;
+}) => Map<string, string>;
+export declare const getSelectedOutlineRotationDragChanges: ({ dragStates, lastValues, }: {
+    readonly dragStates: readonly SelectedOutlineRotationDragState[];
+    readonly lastValues: ReadonlyMap<string, string>;
+}) => SelectedOutlineDragChange[];
+export declare const clearSelectedOutlineDragOverrides: ({ clearDragOverrides, dragStates, }: {
+    readonly clearDragOverrides: (nodePath: SequencePropsSubscriptionKey) => void;
+    readonly dragStates: readonly SelectedOutlineDragState[];
+}) => void;
+export declare const getSelectedOutlineKeyboardNudgeDirection: (key: string) => SelectedOutlineKeyboardNudgeDirection | null;
+export declare const clearSelectedOutlineScaleDragOverrides: ({ clearDragOverrides, dragStates, }: {
+    readonly clearDragOverrides: (nodePath: SequencePropsSubscriptionKey) => void;
+    readonly dragStates: readonly SelectedOutlineScaleDragState[];
+}) => void;
+export declare const clearSelectedOutlineRotationDragOverrides: ({ clearDragOverrides, dragStates, }: {
+    readonly clearDragOverrides: (nodePath: SequencePropsSubscriptionKey) => void;
+    readonly dragStates: readonly SelectedOutlineRotationDragState[];
+}) => void;
+export declare const parseCssRotationToRadians: (value: string) => number | null;
+export declare const compensateTranslateForTransformOrigin: ({ startTranslate, deltaOrigin, rotate, scale, }: {
+    readonly startTranslate: readonly [number, number];
+    readonly deltaOrigin: readonly [number, number];
+    readonly rotate: number;
+    readonly scale: readonly [number, number];
+}) => readonly [number, number];
+export declare const uvsEqual: (left: readonly [number, number], right: readonly [number, number]) => boolean;
+export {};