@remotion/studio 4.0.493 → 4.0.494

package/dist/components/import-assets.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertElement = exports.insertComposition = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = exports.getCompositionPositionForDrop = exports.getElementPositionForDrop = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
+exports.insertElement = exports.insertComposition = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = exports.getAssetPositionForDrop = exports.getCompositionPositionForDrop = exports.getElementPositionForDrop = exports.getAssetElementForDroppedFile = 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");
@@ -11,6 +11,16 @@ const install_required_package_1 = require("../helpers/install-required-package"
 const call_api_1 = require("./call-api");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const getAssetElement = ({ fileType, src, }) => {
+    if (fileType.type === 'webp' && fileType.animated) {
+        return {
+            type: 'asset',
+            assetType: 'animated-image',
+            src,
+            srcType: 'static',
+            dimensions: fileType.dimensions,
+            position: null,
+        };
+    }
     if (fileType.type === 'png' ||
         fileType.type === 'jpeg' ||
         fileType.type === 'webp' ||
@@ -82,7 +92,7 @@ const getAssetElementFromPath = (assetPath) => {
     if (!extension || extension === assetPath.toLowerCase()) {
         return null;
     }
-    if (['png', 'jpg', 'jpeg', 'webp', 'bmp'].includes(extension)) {
+    if (['png', 'jpg', 'jpeg', 'webp', 'bmp', 'svg'].includes(extension)) {
         return {
             type: 'asset',
             assetType: 'image',
@@ -135,6 +145,17 @@ const getAssetElementFromPath = (assetPath) => {
     return null;
 };
 exports.getAssetElementFromPath = getAssetElementFromPath;
+const getAssetElementForDroppedFile = ({ fileType, src, }) => {
+    const detectedElement = (0, exports.getAssetElement)({ fileType, src });
+    if (detectedElement !== null) {
+        return detectedElement;
+    }
+    if (fileType.type !== 'unknown' || !src.toLowerCase().endsWith('.svg')) {
+        return null;
+    }
+    return (0, exports.getAssetElementFromPath)(src);
+};
+exports.getAssetElementForDroppedFile = getAssetElementForDroppedFile;
 const getAssetLabel = (element) => {
     if (element.type !== 'asset') {
         throw new Error('Expected asset element');
@@ -194,6 +215,16 @@ const getCompositionPositionForDrop = ({ compositionDimensions, destinationDimen
     });
 };
 exports.getCompositionPositionForDrop = getCompositionPositionForDrop;
+const getAssetPositionForDrop = ({ assetDimensions, destinationDimensions, dropPosition, }) => {
+    if (assetDimensions !== null &&
+        destinationDimensions !== null &&
+        assetDimensions.width === destinationDimensions.width &&
+        assetDimensions.height === destinationDimensions.height) {
+        return null;
+    }
+    return getCenteredPosition({ dimensions: assetDimensions, dropPosition });
+};
+exports.getAssetPositionForDrop = getAssetPositionForDrop;
 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;
@@ -237,6 +268,10 @@ const getVideoDimensions = async (src) => {
     return { width: metadata.width, height: metadata.height };
 };
 const getFileDimensions = async ({ file, fileType, }) => {
+    if (fileType.type === 'unknown' && file.name.toLowerCase().endsWith('.svg')) {
+        const objectUrl = URL.createObjectURL(file);
+        return getImageDimensions({ revokeObjectUrl: true, src: objectUrl });
+    }
     if (fileType.type === 'wav' ||
         fileType.type === 'mp3' ||
         fileType.type === 'aac' ||
@@ -274,7 +309,7 @@ const getStaticAssetDimensions = (assetPath) => {
     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)) {
+        ['png', 'jpg', 'jpeg', 'webp', 'bmp', 'gif', 'apng', 'svg'].includes(extension)) {
         return getImageDimensions({ revokeObjectUrl: false, src });
     }
     if (extension &&
@@ -302,7 +337,7 @@ const getStaticAssetDimensionsOrNull = async (assetPath) => {
 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') {
+    if (extension !== 'png' && extension !== 'apng' && extension !== 'webp') {
         return null;
     }
     try {
@@ -388,7 +423,7 @@ const insertAssetElement = async ({ compositionFile, compositionId, element, })
 const downloadRemoteAsset = (url) => {
     return (0, call_api_1.callApi)('/api/download-remote-asset', { url });
 };
-const importAssets = async ({ compositionFile, compositionId, dropPosition, files, }) => {
+const importAssets = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, }) => {
     var _a;
     if (files.length === 0) {
         return;
@@ -418,7 +453,7 @@ const importAssets = async ({ compositionFile, compositionId, dropPosition, file
         for (const file of files) {
             const contents = await file.arrayBuffer();
             const fileType = (0, studio_shared_1.detectFileType)(new Uint8Array(contents));
-            const element = (0, exports.getAssetElement)({
+            const element = (0, exports.getAssetElementForDroppedFile)({
                 fileType,
                 src: file.name,
             });
@@ -436,14 +471,16 @@ const importAssets = async ({ compositionFile, compositionId, dropPosition, file
                 addedStaticFiles.push(file.name);
             }
             const dimensions = await getFileDimensionsOrNull({ file, fileType });
+            const resolvedDimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : dimensions;
             const inserted = await insertAssetElement({
                 compositionFile,
                 compositionId,
                 element: {
                     ...element,
-                    dimensions: (_a = element.dimensions) !== null && _a !== void 0 ? _a : dimensions,
-                    position: getCenteredPosition({
-                        dimensions,
+                    dimensions: resolvedDimensions,
+                    position: (0, exports.getAssetPositionForDrop)({
+                        assetDimensions: resolvedDimensions,
+                        destinationDimensions,
                         dropPosition,
                     }),
                 },
@@ -463,7 +500,7 @@ const importAssets = async ({ compositionFile, compositionId, dropPosition, file
     }
 };
 exports.importAssets = importAssets;
-const importRemoteAsset = async ({ compositionFile, compositionId, dropPosition, url, }) => {
+const importRemoteAsset = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, url, }) => {
     try {
         const { assetPath, created, element } = await downloadRemoteAsset(url);
         if (created) {
@@ -478,8 +515,9 @@ const importRemoteAsset = async ({ compositionFile, compositionId, dropPosition,
             compositionId,
             element: {
                 ...element,
-                position: getCenteredPosition({
-                    dimensions: element.dimensions,
+                position: (0, exports.getAssetPositionForDrop)({
+                    assetDimensions: element.dimensions,
+                    destinationDimensions,
                     dropPosition,
                 }),
             },
@@ -523,7 +561,7 @@ const insertRemoteAudio = async ({ compositionFile, compositionId, url, }) => {
     }
 };
 exports.insertRemoteAudio = insertRemoteAudio;
-const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId, dropPosition, }) => {
+const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId, destinationDimensions, dropPosition, }) => {
     var _a;
     if (assetPaths.length === 0) {
         return;
@@ -544,8 +582,9 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
                 element: {
                     ...element,
                     dimensions,
-                    position: getCenteredPosition({
-                        dimensions,
+                    position: (0, exports.getAssetPositionForDrop)({
+                        assetDimensions: dimensions,
+                        destinationDimensions,
                         dropPosition,
                     }),
                 },