@remotion/studio 4.0.476 → 4.0.478

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;
+exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = 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,17 @@ const getAssetElement = ({ fileType, src, }) => {
             src,
             srcType: 'static',
             dimensions: fileType.dimensions,
+            position: null,
+        };
+    }
+    if (fileType.type === 'apng') {
+        return {
+            type: 'asset',
+            assetType: 'animated-image',
+            src,
+            srcType: 'static',
+            dimensions: fileType.dimensions,
+            position: null,
         };
     }
     if (fileType.type === 'gif') {
@@ -27,6 +40,7 @@ const getAssetElement = ({ fileType, src, }) => {
             src,
             srcType: 'static',
             dimensions: fileType.dimensions,
+            position: null,
         };
     }
     if (fileType.type === 'riff' ||
@@ -39,6 +53,7 @@ const getAssetElement = ({ fileType, src, }) => {
             src,
             srcType: 'static',
             dimensions: null,
+            position: null,
         };
     }
     if (fileType.type === 'wav' ||
@@ -51,6 +66,7 @@ const getAssetElement = ({ fileType, src, }) => {
             src,
             srcType: 'static',
             dimensions: null,
+            position: null,
         };
     }
     return null;
@@ -72,6 +88,17 @@ const getAssetElementFromPath = (assetPath) => {
             src: assetPath,
             srcType: 'static',
             dimensions: null,
+            position: null,
+        };
+    }
+    if (extension === 'apng') {
+        return {
+            type: 'asset',
+            assetType: 'animated-image',
+            src: assetPath,
+            srcType: 'static',
+            dimensions: null,
+            position: null,
         };
     }
     if (extension === 'gif') {
@@ -81,6 +108,7 @@ const getAssetElementFromPath = (assetPath) => {
             src: assetPath,
             srcType: 'static',
             dimensions: null,
+            position: null,
         };
     }
     if (['mp4', 'm4v', 'mov', 'avi', 'webm', 'ts', 'm2ts'].includes(extension)) {
@@ -90,6 +118,7 @@ const getAssetElementFromPath = (assetPath) => {
             src: assetPath,
             srcType: 'static',
             dimensions: null,
+            position: null,
         };
     }
     if (['wav', 'mp3', 'aac', 'flac'].includes(extension)) {
@@ -99,6 +128,7 @@ const getAssetElementFromPath = (assetPath) => {
             src: assetPath,
             srcType: 'static',
             dimensions: null,
+            position: null,
         };
     }
     return null;
@@ -117,6 +147,9 @@ const getAssetLabel = (element) => {
     if (element.assetType === 'gif') {
         return '<Gif>';
     }
+    if (element.assetType === 'animated-image') {
+        return '<AnimatedImage>';
+    }
     if (element.assetType === 'audio') {
         return '<Audio>';
     }
@@ -125,6 +158,153 @@ 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) => {
+    if (component.dimensions) {
+        return component.dimensions;
+    }
+    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;
+};
+exports.getComponentDimensions = getComponentDimensions;
+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 === 'apng' ||
+        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', 'apng'].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 getStaticAssetFileType = async (assetPath) => {
+    var _a;
+    const extension = (_a = assetPath.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    if (extension !== 'png' && extension !== 'apng') {
+        return null;
+    }
+    try {
+        const response = await fetch((0, remotion_1.staticFile)(assetPath));
+        if (!response.ok) {
+            return null;
+        }
+        return (0, studio_shared_1.detectFileType)(new Uint8Array(await response.arrayBuffer()));
+    }
+    catch (_b) {
+        return null;
+    }
+};
+const getAssetElementFromStaticAsset = async (assetPath) => {
+    const fileType = await getStaticAssetFileType(assetPath);
+    if (fileType) {
+        const element = (0, exports.getAssetElement)({ fileType, src: assetPath });
+        if (element) {
+            return element;
+        }
+    }
+    return (0, exports.getAssetElementFromPath)(assetPath);
+};
 const pickFilesToImport = () => {
     return new Promise((resolve) => {
         const input = document.createElement('input');
@@ -184,16 +364,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 +405,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 +414,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 +442,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 +484,7 @@ const insertRemoteAudio = async ({ compositionFile, compositionId, url, }) => {
         src: url,
         srcType: 'remote',
         dimensions: null,
+        position: null,
     };
     try {
         const inserted = await insertAssetElement({
@@ -300,7 +502,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;
     }
@@ -308,15 +511,23 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
     const unsupportedFiles = [];
     try {
         for (const assetPath of assetPaths) {
-            const element = (0, exports.getAssetElementFromPath)(assetPath);
+            const element = await getAssetElementFromStaticAsset(assetPath);
             if (element === null) {
                 unsupportedFiles.push(assetPath);
                 continue;
             }
+            const dimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : (await getStaticAssetDimensionsOrNull(assetPath));
             const inserted = await insertAssetElement({
                 compositionFile,
                 compositionId,
-                element,
+                element: {
+                    ...element,
+                    dimensions,
+                    position: getCenteredPosition({
+                        dimensions,
+                        dropPosition,
+                    }),
+                },
             });
             if (!inserted) {
                 return;
@@ -331,7 +542,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 +553,10 @@ const insertComponent = async ({ component, compositionFile, compositionId, }) =
                 importName: component.importName,
                 importPath: component.importPath,
                 props: component.props,
+                position: getCenteredPosition({
+                    dimensions: (0, exports.getComponentDimensions)(component),
+                    dropPosition,
+                }),
             },
         });
         if (!inserted) {

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

@@ -0,0 +1,140 @@
+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 UvCoordinate } from './selected-outline-uv';
+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 type SelectedOutlineTransformOriginLockedAxis = 'x' | 'y' | null;
+export declare const getSelectedOutlineTransformOriginLockedAxis: ({ axisLocked, dimensions, startUv, uv, }: {
+    readonly axisLocked: boolean;
+    readonly dimensions: {
+        readonly width: number;
+        readonly height: number;
+    };
+    readonly startUv: UvCoordinate;
+    readonly uv: UvCoordinate;
+}) => SelectedOutlineTransformOriginLockedAxis;
+export declare const applySelectedOutlineTransformOriginAxisLock: ({ lockedAxis, startUv, uv, }: {
+    readonly lockedAxis: SelectedOutlineTransformOriginLockedAxis;
+    readonly startUv: UvCoordinate;
+    readonly uv: UvCoordinate;
+}) => UvCoordinate;
+export declare const selectedOutlineTransformOriginSnapThresholdPx = 10;
+export declare const snapSelectedOutlineTransformOriginUv: ({ point, points, thresholdPx, uv, }: {
+    readonly point: OutlinePoint;
+    readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
+    readonly thresholdPx?: number | undefined;
+    readonly uv: UvCoordinate;
+}) => UvCoordinate;
+export {};