@remotion/studio 4.0.472 → 4.0.474

package/dist/components/import-assets.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.importAssets = exports.pickFilesToImport = void 0;
+exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const get_static_files_1 = require("../api/get-static-files");
 const write_static_file_1 = require("../api/write-static-file");
-const detect_file_type_1 = require("../helpers/detect-file-type");
+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, }) => {
@@ -15,6 +16,7 @@ const getAssetElement = ({ fileType, src, }) => {
             type: 'asset',
             assetType: 'image',
             src,
+            srcType: 'static',
             dimensions: fileType.dimensions,
         };
     }
@@ -23,6 +25,7 @@ const getAssetElement = ({ fileType, src, }) => {
             type: 'asset',
             assetType: 'gif',
             src,
+            srcType: 'static',
             dimensions: fileType.dimensions,
         };
     }
@@ -34,11 +37,73 @@ const getAssetElement = ({ fileType, src, }) => {
             type: 'asset',
             assetType: 'video',
             src,
+            srcType: 'static',
+            dimensions: null,
+        };
+    }
+    if (fileType.type === 'wav' ||
+        fileType.type === 'mp3' ||
+        fileType.type === 'aac' ||
+        fileType.type === 'flac') {
+        return {
+            type: 'asset',
+            assetType: 'audio',
+            src,
+            srcType: 'static',
+            dimensions: null,
+        };
+    }
+    return null;
+};
+exports.getAssetElement = getAssetElement;
+const getAssetElementFromPath = (assetPath) => {
+    var _a;
+    if (!assetPath || assetPath.includes('\\')) {
+        return null;
+    }
+    const extension = (_a = assetPath.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    if (!extension || extension === assetPath.toLowerCase()) {
+        return null;
+    }
+    if (['png', 'jpg', 'jpeg', 'webp', 'bmp'].includes(extension)) {
+        return {
+            type: 'asset',
+            assetType: 'image',
+            src: assetPath,
+            srcType: 'static',
+            dimensions: null,
+        };
+    }
+    if (extension === 'gif') {
+        return {
+            type: 'asset',
+            assetType: 'gif',
+            src: assetPath,
+            srcType: 'static',
+            dimensions: null,
+        };
+    }
+    if (['mp4', 'm4v', 'mov', 'avi', 'webm', 'ts', 'm2ts'].includes(extension)) {
+        return {
+            type: 'asset',
+            assetType: 'video',
+            src: assetPath,
+            srcType: 'static',
+            dimensions: null,
+        };
+    }
+    if (['wav', 'mp3', 'aac', 'flac'].includes(extension)) {
+        return {
+            type: 'asset',
+            assetType: 'audio',
+            src: assetPath,
+            srcType: 'static',
             dimensions: null,
         };
     }
     return null;
 };
+exports.getAssetElementFromPath = getAssetElementFromPath;
 const getAssetLabel = (element) => {
     if (element.type !== 'asset') {
         throw new Error('Expected asset element');
@@ -49,7 +114,16 @@ const getAssetLabel = (element) => {
     if (element.assetType === 'video') {
         return '<Video>';
     }
-    return '<Gif>';
+    if (element.assetType === 'gif') {
+        return '<Gif>';
+    }
+    if (element.assetType === 'audio') {
+        return '<Audio>';
+    }
+    throw new Error('Unsupported asset type');
+};
+const getComponentLabel = (component) => {
+    return `<${component.componentName}>`;
 };
 const pickFilesToImport = () => {
     return new Promise((resolve) => {
@@ -80,6 +154,39 @@ const pickFilesToImport = () => {
     });
 };
 exports.pickFilesToImport = pickFilesToImport;
+const notifyInsertedAssets = (insertedLabels) => {
+    if (insertedLabels.length === 1) {
+        (0, NotificationCenter_1.showNotification)(`Added ${insertedLabels[0]} to source file`, 2000);
+    }
+    else if (insertedLabels.length > 1) {
+        (0, NotificationCenter_1.showNotification)(`Added ${insertedLabels.length} assets to source file`, 2000);
+    }
+};
+const notifyUnsupportedFiles = (unsupportedFiles) => {
+    if (unsupportedFiles.length === 1) {
+        (0, NotificationCenter_1.showNotification)(`Cannot add ${unsupportedFiles[0]}: Unsupported file type`, 3000);
+    }
+    else if (unsupportedFiles.length > 1) {
+        (0, NotificationCenter_1.showNotification)(`Skipped ${unsupportedFiles.length} unsupported files`, 3000);
+    }
+};
+const insertAssetElement = 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', {
+        compositionFile,
+        compositionId,
+        element,
+    });
+    if (!result.success) {
+        (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+        return false;
+    }
+    return true;
+};
+const downloadRemoteAsset = async (url) => {
+    return (0, call_api_1.callApi)('/api/download-remote-asset', { url });
+};
 const importAssets = async ({ compositionFile, compositionId, files, }) => {
     if (files.length === 0) {
         return;
@@ -107,8 +214,8 @@ const importAssets = async ({ compositionFile, compositionId, files, }) => {
     try {
         for (const file of files) {
             const contents = await file.arrayBuffer();
-            const fileType = (0, detect_file_type_1.detectFileType)(new Uint8Array(contents));
-            const element = getAssetElement({
+            const fileType = (0, studio_shared_1.detectFileType)(new Uint8Array(contents));
+            const element = (0, exports.getAssetElement)({
                 fileType,
                 src: file.name,
             });
@@ -124,34 +231,126 @@ const importAssets = async ({ compositionFile, compositionId, files, }) => {
                 });
                 addedStaticFiles.push(file.name);
             }
-            const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
+            const inserted = await insertAssetElement({
                 compositionFile,
                 compositionId,
                 element,
             });
-            if (!result.success) {
+            if (!inserted) {
                 notifyAddedStaticFiles();
-                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
                 return;
             }
             insertedLabels.push(getAssetLabel(element));
         }
         notifyAddedStaticFiles();
-        if (insertedLabels.length === 1) {
-            (0, NotificationCenter_1.showNotification)(`Added ${insertedLabels[0]} to source file`, 2000);
+        notifyInsertedAssets(insertedLabels);
+        notifyUnsupportedFiles(unsupportedFiles);
+    }
+    catch (error) {
+        (0, NotificationCenter_1.showNotification)(`Could not add asset: ${error instanceof Error ? error.message : String(error)}`, 4000);
+    }
+};
+exports.importAssets = importAssets;
+const importRemoteAsset = async ({ compositionFile, compositionId, url, }) => {
+    try {
+        const { assetPath, created, element } = await downloadRemoteAsset(url);
+        if (created) {
+            (0, NotificationCenter_1.showNotification)(`Created ${assetPath} in public folder`, 3000);
         }
-        else if (insertedLabels.length > 1) {
-            (0, NotificationCenter_1.showNotification)(`Added ${insertedLabels.length} assets to source file`, 2000);
+        const inserted = await insertAssetElement({
+            compositionFile,
+            compositionId,
+            element,
+        });
+        if (!inserted) {
+            return;
         }
-        if (unsupportedFiles.length === 1) {
-            (0, NotificationCenter_1.showNotification)(`Cannot add ${unsupportedFiles[0]}: Unsupported file type`, 3000);
+        notifyInsertedAssets([getAssetLabel(element)]);
+    }
+    catch (error) {
+        (0, NotificationCenter_1.showNotification)(`Could not add remote asset: ${error instanceof Error ? error.message : String(error)}`, 4000);
+    }
+};
+exports.importRemoteAsset = importRemoteAsset;
+const insertRemoteAudio = async ({ compositionFile, compositionId, url, }) => {
+    if (!(0, studio_shared_1.isUrl)(url)) {
+        (0, NotificationCenter_1.showNotification)('Cannot add sound effect: Unsupported URL', 3000);
+        return;
+    }
+    const element = {
+        type: 'asset',
+        assetType: 'audio',
+        src: url,
+        srcType: 'remote',
+        dimensions: null,
+    };
+    try {
+        const inserted = await insertAssetElement({
+            compositionFile,
+            compositionId,
+            element,
+        });
+        if (!inserted) {
+            return;
         }
-        else if (unsupportedFiles.length > 1) {
-            (0, NotificationCenter_1.showNotification)(`Skipped ${unsupportedFiles.length} unsupported files`, 3000);
+        notifyInsertedAssets([getAssetLabel(element)]);
+    }
+    catch (error) {
+        (0, NotificationCenter_1.showNotification)(`Could not add sound effect: ${error instanceof Error ? error.message : String(error)}`, 4000);
+    }
+};
+exports.insertRemoteAudio = insertRemoteAudio;
+const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId, }) => {
+    if (assetPaths.length === 0) {
+        return;
+    }
+    const insertedLabels = [];
+    const unsupportedFiles = [];
+    try {
+        for (const assetPath of assetPaths) {
+            const element = (0, exports.getAssetElementFromPath)(assetPath);
+            if (element === null) {
+                unsupportedFiles.push(assetPath);
+                continue;
+            }
+            const inserted = await insertAssetElement({
+                compositionFile,
+                compositionId,
+                element,
+            });
+            if (!inserted) {
+                return;
+            }
+            insertedLabels.push(getAssetLabel(element));
         }
+        notifyInsertedAssets(insertedLabels);
+        notifyUnsupportedFiles(unsupportedFiles);
     }
     catch (error) {
         (0, NotificationCenter_1.showNotification)(`Could not add asset: ${error instanceof Error ? error.message : String(error)}`, 4000);
     }
 };
-exports.importAssets = importAssets;
+exports.insertExistingAssets = insertExistingAssets;
+const insertComponent = async ({ component, compositionFile, compositionId, }) => {
+    try {
+        const inserted = await insertAssetElement({
+            compositionFile,
+            compositionId,
+            element: {
+                type: 'component',
+                componentName: component.componentName,
+                importName: component.importName,
+                importPath: component.importPath,
+                props: component.props,
+            },
+        });
+        if (!inserted) {
+            return;
+        }
+        (0, NotificationCenter_1.showNotification)(`Added ${getComponentLabel(component)} to source file`, 2000);
+    }
+    catch (error) {
+        (0, NotificationCenter_1.showNotification)(`Could not add component: ${error instanceof Error ? error.message : String(error)}`, 4000);
+    }
+};
+exports.insertComponent = insertComponent;

package/dist/components/load-canvas-content-from-url.d.ts

@@ -1,2 +1,3 @@
 import type { CanvasContent } from 'remotion';
+export declare const deriveCanvasContentFromRoute: (route: string) => CanvasContent | null;
 export declare const deriveCanvasContentFromUrl: () => CanvasContent | null;

package/dist/components/load-canvas-content-from-url.js

@@ -1,13 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deriveCanvasContentFromUrl = void 0;
+exports.deriveCanvasContentFromUrl = exports.deriveCanvasContentFromRoute = void 0;
 const url_state_1 = require("../helpers/url-state");
-const deriveCanvasContentFromUrl = () => {
-    const route = (0, url_state_1.getRoute)();
+const deriveCanvasContentFromRoute = (route) => {
     const substrings = route.split('/').filter(Boolean);
     // CJK-named composition IDs are not automatically reselected after page refresh
     const lastPart = substrings[substrings.length - 1];
     if (substrings[0] === 'assets') {
+        if (!lastPart || substrings.length === 1) {
+            return null;
+        }
         return {
             type: 'asset',
             asset: decodeURIComponent(route.substring('/assets/'.length)),
@@ -27,4 +29,8 @@ const deriveCanvasContentFromUrl = () => {
     }
     return null;
 };
+exports.deriveCanvasContentFromRoute = deriveCanvasContentFromRoute;
+const deriveCanvasContentFromUrl = () => {
+    return (0, exports.deriveCanvasContentFromRoute)((0, url_state_1.getRoute)());
+};
 exports.deriveCanvasContentFromUrl = deriveCanvasContentFromUrl;

package/dist/components/use-select-asset.d.ts

@@ -0,0 +1 @@
+export declare const useSelectAsset: () => (asset: string) => void;

package/dist/components/use-select-asset.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectAsset = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const folders_1 = require("../state/folders");
+const ExplorerPanelRef_1 = require("./ExplorerPanelRef");
+const useSelectAsset = () => {
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const { setAssetFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
+    return (0, react_1.useCallback)((asset) => {
+        var _a;
+        setCanvasContent({ type: 'asset', asset });
+        (_a = ExplorerPanelRef_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectAssetsPanel();
+        setAssetFoldersExpanded((ex) => {
+            const split = asset.split('/');
+            const keysToExpand = split.map((_, i) => {
+                return split.slice(0, i).join('/');
+            });
+            const newState = {
+                ...ex,
+            };
+            for (const key of keysToExpand) {
+                newState[key] = true;
+            }
+            return newState;
+        });
+    }, [setAssetFoldersExpanded, setCanvasContent]);
+};
+exports.useSelectAsset = useSelectAsset;

package/dist/error-overlay/error-origin.d.ts

@@ -0,0 +1,3 @@
+export declare const markErrorAsLoggedByServer: (error: object) => void;
+export declare const markErrorMessageAsLoggedByServer: (message: string) => void;
+export declare const wasErrorLoggedByServer: (error: Error) => boolean;

package/dist/error-overlay/error-origin.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wasErrorLoggedByServer = exports.markErrorMessageAsLoggedByServer = exports.markErrorAsLoggedByServer = void 0;
+const errorsLoggedByServer = new WeakSet();
+const errorMessagesLoggedByServer = new Set();
+const maxLoggedErrorMessages = 100;
+const rememberServerLoggedMessage = (message) => {
+    if (errorMessagesLoggedByServer.size >= maxLoggedErrorMessages) {
+        errorMessagesLoggedByServer.clear();
+    }
+    errorMessagesLoggedByServer.add(message);
+};
+const markErrorAsLoggedByServer = (error) => {
+    errorsLoggedByServer.add(error);
+};
+exports.markErrorAsLoggedByServer = markErrorAsLoggedByServer;
+const markErrorMessageAsLoggedByServer = (message) => {
+    if (message.trim() === '') {
+        return;
+    }
+    rememberServerLoggedMessage(message);
+};
+exports.markErrorMessageAsLoggedByServer = markErrorMessageAsLoggedByServer;
+const wasErrorLoggedByServer = (error) => {
+    if (errorsLoggedByServer.has(error)) {
+        return true;
+    }
+    const message = typeof error.message === 'string' ? error.message : null;
+    const stack = typeof error.stack === 'string' ? error.stack : null;
+    if (message && errorMessagesLoggedByServer.has(message)) {
+        return true;
+    }
+    if (stack) {
+        for (const serverLoggedMessage of errorMessagesLoggedByServer) {
+            if (stack.includes(serverLoggedMessage)) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+exports.wasErrorLoggedByServer = wasErrorLoggedByServer;

package/dist/error-overlay/react-overlay/listen-to-runtime-errors.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getErrorRecord = void 0;
 exports.listenToRuntimeErrors = listenToRuntimeErrors;
 const url_state_1 = require("../../helpers/url-state");
+const error_origin_1 = require("../error-origin");
 const Overlay_1 = require("../remotion-overlay/Overlay");
 const format_warning_1 = require("./effects/format-warning");
 const proxy_console_1 = require("./effects/proxy-console");
@@ -60,13 +61,16 @@ function listenToRuntimeErrors(crash) {
         if (d.type === 'webpack-error') {
             const { message, frames } = d;
             const data = (0, format_warning_1.massageWarning)(message, frames);
-            crashWithFramesRunTime({
+            const error = {
                 message: data.message,
                 stack: data.stack,
                 name: '',
-            });
+            };
+            (0, error_origin_1.markErrorAsLoggedByServer)(error);
+            crashWithFramesRunTime(error);
         }
         if (d.type === 'build-error') {
+            (0, error_origin_1.markErrorAsLoggedByServer)(d.error);
             crashWithFramesRunTime(d.error);
         }
     });

package/dist/error-overlay/remotion-overlay/ErrorLoader.js

@@ -2,10 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorLoader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
+const error_origin_1 = require("../error-origin");
 const listen_to_runtime_errors_1 = require("../react-overlay/listen-to-runtime-errors");
 const ErrorDisplay_1 = require("./ErrorDisplay");
 const ErrorTitle_1 = require("./ErrorTitle");
+const log_studio_error_1 = require("./log-studio-error");
 const container = {
     width: '100%',
     maxWidth: 1000,
@@ -21,6 +24,32 @@ const errorWhileErrorStyle = {
     lineHeight: 1.5,
     whiteSpace: 'pre',
 };
+const shouldLogError = (error) => {
+    return (!(0, error_origin_1.wasErrorLoggedByServer)(error) && (0, studio_shared_1.getLocationFromBuildError)(error) === null);
+};
+const shouldIncludeFrameInServerLog = (frame) => {
+    var _a, _b, _c, _d;
+    return !(((_a = frame.originalFileName) === null || _a === void 0 ? void 0 : _a.includes('node_modules')) ||
+        ((_b = frame.originalFileName) === null || _b === void 0 ? void 0 : _b.startsWith('webpack/')) ||
+        ((_c = frame.originalFileName) === null || _c === void 0 ? void 0 : _c.includes('/bundler/dist/fast-refresh/')) ||
+        ((_d = frame.originalFileName) === null || _d === void 0 ? void 0 : _d.includes('bundler/dist/fast-refresh/')));
+};
+const logSymbolicatedStudioError = (record) => {
+    const name = typeof record.error.name === 'string' ? record.error.name : null;
+    const message = typeof record.error.message === 'string' ? record.error.message : '';
+    const filteredStackFrames = record.stackFrames.filter(shouldIncludeFrameInServerLog);
+    const stackFrames = filteredStackFrames.length > 0
+        ? filteredStackFrames
+        : record.stackFrames[0]
+            ? [record.stackFrames[0]]
+            : [];
+    (0, log_studio_error_1.logStudioErrorData)({
+        name,
+        message,
+        stack: typeof record.error.stack === 'string' ? record.error.stack : null,
+        symbolicatedStackFrames: stackFrames.length > 0 ? stackFrames : null,
+    });
+};
 const ErrorLoader = ({ error, keyboardShortcuts, onRetry, canHaveDismissButton, calculateMetadata, }) => {
     const [state, setState] = (0, react_1.useState)({
         type: 'loading',
@@ -29,18 +58,27 @@ const ErrorLoader = ({ error, keyboardShortcuts, onRetry, canHaveDismissButton,
         (0, listen_to_runtime_errors_1.getErrorRecord)(error)
             .then((record) => {
             if (record) {
+                if (shouldLogError(error)) {
+                    logSymbolicatedStudioError(record);
+                }
                 setState({
                     type: 'symbolicated',
                     record,
                 });
             }
             else {
+                if (shouldLogError(error)) {
+                    (0, log_studio_error_1.logStudioError)(error);
+                }
                 setState({
                     type: 'no-record',
                 });
             }
         })
             .catch((err) => {
+            if (shouldLogError(error)) {
+                (0, log_studio_error_1.logStudioError)(error);
+            }
             setState({
                 err,
                 type: 'error',

package/dist/error-overlay/remotion-overlay/ShortcutHint.js

@@ -4,7 +4,7 @@ exports.ShortcutHint = exports.cmdOrCtrlCharacter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
-exports.cmdOrCtrlCharacter = window.navigator.platform.startsWith('Mac')
+exports.cmdOrCtrlCharacter = typeof window !== 'undefined' && window.navigator.platform.startsWith('Mac')
     ? '⌘'
     : 'Ctrl';
 const container = {

package/dist/error-overlay/remotion-overlay/log-studio-error.d.ts

@@ -0,0 +1,3 @@
+import type { LogStudioErrorRequest } from '@remotion/studio-shared';
+export declare const logStudioErrorData: (data: LogStudioErrorRequest) => void;
+export declare const logStudioError: (error: Error) => void;

package/dist/error-overlay/remotion-overlay/log-studio-error.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logStudioError = exports.logStudioErrorData = void 0;
+const call_api_1 = require("../../components/call-api");
+const loggedErrors = new Set();
+const maxLoggedErrors = 100;
+const logStudioErrorData = (data) => {
+    const key = JSON.stringify([data.name, data.message, data.stack]);
+    if (loggedErrors.has(key)) {
+        return;
+    }
+    if (loggedErrors.size >= maxLoggedErrors) {
+        loggedErrors.clear();
+    }
+    loggedErrors.add(key);
+    (0, call_api_1.callApi)('/api/log-studio-error', data).catch(() => undefined);
+};
+exports.logStudioErrorData = logStudioErrorData;
+const logStudioError = (error) => {
+    (0, exports.logStudioErrorData)({
+        name: typeof error.name === 'string' ? error.name : null,
+        message: typeof error.message === 'string' ? error.message : '',
+        stack: typeof error.stack === 'string' ? error.stack : null,
+        symbolicatedStackFrames: null,
+    });
+};
+exports.logStudioError = logStudioError;