@remotion/studio 4.0.493 → 4.0.495

package/dist/components/import-assets.js

@@ -1,16 +1,27 @@
 "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.insertSvgMarkup = exports.importFigmaClipboard = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = exports.getAssetPositionForDrop = exports.getCompositionPositionForDrop = exports.getElementPositionForDrop = exports.hasSvgFile = 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");
 const no_react_1 = require("remotion/no-react");
 const get_static_files_1 = require("../api/get-static-files");
 const write_static_file_1 = require("../api/write-static-file");
+const clipboard_figma_1 = require("../helpers/clipboard-figma");
 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 +93,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,12 +146,26 @@ 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 isSvgFile = (file) => file.name.toLowerCase().endsWith('.svg');
+const hasSvgFile = (files) => files.some(isSvgFile);
+exports.hasSvgFile = hasSvgFile;
 const getAssetLabel = (element) => {
     if (element.type !== 'asset') {
         throw new Error('Expected asset element');
     }
     if (element.assetType === 'image') {
-        return '<Img>';
+        return '<CanvasImage>';
     }
     if (element.assetType === 'video') {
         return '<Video>';
@@ -194,6 +219,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 +272,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 +313,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 +341,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 {
@@ -371,7 +410,7 @@ const notifyUnsupportedFiles = (unsupportedFiles) => {
         (0, NotificationCenter_1.showNotification)(`Skipped ${unsupportedFiles.length} unsupported files`, 3000);
     }
 };
-const insertAssetElement = async ({ compositionFile, compositionId, element, }) => {
+const insertCompositionElement = async ({ compositionFile, compositionId, element, }) => {
     const requiredPackage = (0, studio_shared_1.getRequiredPackageForInsertableElement)(element);
     await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [requiredPackage] : []);
     const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
@@ -388,13 +427,16 @@ 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, svgImportMode, }) => {
     var _a;
     if (files.length === 0) {
         return;
     }
     const staticFiles = (0, get_static_files_1.getStaticFiles)();
     const differentExistingFile = files.find((file) => {
+        if (isSvgFile(file) && svgImportMode === 'inline') {
+            return false;
+        }
         return staticFiles.some((existingStaticFile) => existingStaticFile.name === file.name &&
             existingStaticFile.sizeInBytes !== file.size);
     });
@@ -418,7 +460,29 @@ 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 dimensions = await getFileDimensionsOrNull({ file, fileType });
+            if (isSvgFile(file) && svgImportMode === 'inline') {
+                const svgInserted = await insertCompositionElement({
+                    compositionFile,
+                    compositionId,
+                    element: {
+                        type: 'svg',
+                        markup: new TextDecoder().decode(contents),
+                        position: (0, exports.getAssetPositionForDrop)({
+                            assetDimensions: dimensions,
+                            destinationDimensions,
+                            dropPosition,
+                        }),
+                    },
+                });
+                if (!svgInserted) {
+                    notifyAddedStaticFiles();
+                    return;
+                }
+                insertedLabels.push('<Interactive.Svg>');
+                continue;
+            }
+            const element = (0, exports.getAssetElementForDroppedFile)({
                 fileType,
                 src: file.name,
             });
@@ -435,15 +499,16 @@ const importAssets = async ({ compositionFile, compositionId, dropPosition, file
                 });
                 addedStaticFiles.push(file.name);
             }
-            const dimensions = await getFileDimensionsOrNull({ file, fileType });
-            const inserted = await insertAssetElement({
+            const resolvedDimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : dimensions;
+            const inserted = await insertCompositionElement({
                 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 +528,64 @@ const importAssets = async ({ compositionFile, compositionId, dropPosition, file
     }
 };
 exports.importAssets = importAssets;
-const importRemoteAsset = async ({ compositionFile, compositionId, dropPosition, url, }) => {
+const importFigmaClipboard = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, html, }) => {
+    try {
+        const converted = await (0, call_api_1.callApi)('/api/convert-figma-clipboard-to-svg', {
+            html,
+        });
+        if (!converted.success) {
+            (0, NotificationCenter_1.showNotification)((0, clipboard_figma_1.formatFigmaClipboardErrorNotification)(converted.reason), 8000);
+            return;
+        }
+        await (0, exports.insertSvgMarkup)({
+            compositionFile,
+            compositionId,
+            destinationDimensions,
+            dropPosition,
+            markup: converted.svg,
+        });
+    }
+    catch (error) {
+        (0, NotificationCenter_1.showNotification)((0, clipboard_figma_1.formatFigmaClipboardErrorNotification)(error instanceof Error ? error.message : String(error)), 8000);
+    }
+};
+exports.importFigmaClipboard = importFigmaClipboard;
+const insertSvgMarkup = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, markup, }) => {
+    try {
+        const objectUrl = URL.createObjectURL(new Blob([markup], { type: 'image/svg+xml' }));
+        let dimensions = null;
+        try {
+            dimensions = await getImageDimensions({
+                revokeObjectUrl: true,
+                src: objectUrl,
+            });
+        }
+        catch (_a) {
+            dimensions = null;
+        }
+        const inserted = await insertCompositionElement({
+            compositionFile,
+            compositionId,
+            element: {
+                type: 'svg',
+                markup,
+                position: (0, exports.getAssetPositionForDrop)({
+                    assetDimensions: dimensions,
+                    destinationDimensions,
+                    dropPosition,
+                }),
+            },
+        });
+        if (inserted) {
+            notifyInsertedAssets(['<Interactive.Svg>']);
+        }
+    }
+    catch (error) {
+        (0, NotificationCenter_1.showNotification)(`Could not add SVG: ${error instanceof Error ? error.message : String(error)}`, 4000);
+    }
+};
+exports.insertSvgMarkup = insertSvgMarkup;
+const importRemoteAsset = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, url, }) => {
     try {
         const { assetPath, created, element } = await downloadRemoteAsset(url);
         if (created) {
@@ -473,13 +595,14 @@ const importRemoteAsset = async ({ compositionFile, compositionId, dropPosition,
             (0, NotificationCenter_1.showNotification)('Cannot add remote asset: Unsupported asset type', 3000);
             return;
         }
-        const inserted = await insertAssetElement({
+        const inserted = await insertCompositionElement({
             compositionFile,
             compositionId,
             element: {
                 ...element,
-                position: getCenteredPosition({
-                    dimensions: element.dimensions,
+                position: (0, exports.getAssetPositionForDrop)({
+                    assetDimensions: element.dimensions,
+                    destinationDimensions,
                     dropPosition,
                 }),
             },
@@ -508,7 +631,7 @@ const insertRemoteAudio = async ({ compositionFile, compositionId, url, }) => {
         position: null,
     };
     try {
-        const inserted = await insertAssetElement({
+        const inserted = await insertCompositionElement({
             compositionFile,
             compositionId,
             element,
@@ -523,7 +646,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;
@@ -538,14 +661,15 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
                 continue;
             }
             const dimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : (await getStaticAssetDimensionsOrNull(assetPath));
-            const inserted = await insertAssetElement({
+            const inserted = await insertCompositionElement({
                 compositionFile,
                 compositionId,
                 element: {
                     ...element,
                     dimensions,
-                    position: getCenteredPosition({
-                        dimensions,
+                    position: (0, exports.getAssetPositionForDrop)({
+                        assetDimensions: dimensions,
+                        destinationDimensions,
                         dropPosition,
                     }),
                 },
@@ -565,7 +689,7 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
 exports.insertExistingAssets = insertExistingAssets;
 const insertComponent = async ({ component, compositionFile, compositionId, dropPosition, }) => {
     try {
-        const inserted = await insertAssetElement({
+        const inserted = await insertCompositionElement({
             compositionFile,
             compositionId,
             element: {
@@ -616,7 +740,7 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
             width: calculated.width,
             height: calculated.height,
         };
-        const inserted = await insertAssetElement({
+        const inserted = await insertCompositionElement({
             compositionFile,
             compositionId,
             element: {

package/dist/components/layout.d.ts

@@ -1,6 +1,7 @@
 import type { HTMLAttributes } from 'react';
 import React from 'react';
 export declare const SPACING_UNIT = 8;
+export declare const COMPACT_CONTROL_ROW_HEIGHT = 28;
 export declare const Spacing: React.FC<{
     readonly x?: number;
     readonly y?: number;

package/dist/components/layout.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Column = exports.Row = exports.Flex = exports.Spacing = exports.SPACING_UNIT = void 0;
+exports.Column = exports.Row = exports.Flex = exports.Spacing = exports.COMPACT_CONTROL_ROW_HEIGHT = exports.SPACING_UNIT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 exports.SPACING_UNIT = 8;
+exports.COMPACT_CONTROL_ROW_HEIGHT = 28;
 const Spacing = ({ x = 0, y = 0, block = false }) => {
     const style = (0, react_1.useMemo)(() => {
         return {

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

@@ -58,10 +58,11 @@ type SelectedTransformOriginInfo = {
     readonly displayFrame: number | null;
 };
 export declare const getSelectedTransformOriginInfo: (selectedItems: readonly TimelineSelection[]) => SelectedTransformOriginInfo | null;
-export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, compositions, }: {
+export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, compositions, timelinePosition, }: {
     readonly sequences: readonly TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly compositions?: readonly import("remotion").AnyComposition[] | undefined;
+    readonly timelinePosition: number;
 }) => SequenceWithSelectedOutline[];
 export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineTarget[]) => SelectedOutline[];
 export declare const outlinesAreEqual: (a: readonly SelectedOutline[], b: readonly SelectedOutline[]) => boolean;

package/dist/components/selected-outline-measurement.js

@@ -306,7 +306,7 @@ const getSelectedTransformOriginInfo = (selectedItems) => {
     };
 };
 exports.getSelectedTransformOriginInfo = getSelectedTransformOriginInfo;
-const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths, compositions = [], }) => {
+const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths, compositions = [], timelinePosition, }) => {
     return (0, calculate_timeline_1.calculateTimeline)({
         sequences: [...sequences],
         overrideIdsToNodePaths,
@@ -317,6 +317,8 @@ const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths,
             return false;
         }
         return (track.sequence.showInTimeline &&
+            timelinePosition >= track.sequence.from &&
+            timelinePosition < track.sequence.from + track.sequence.duration &&
             track.nodePathInfo.auxiliaryKeys.length === 0);
     })
         .filter((track) => track.sequence.refForOutline !== null)