@remotion/studio 4.0.517 → 4.0.519

package/dist/components/AppLaunchButton.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const AppLaunchButton: React.FC<{
+    readonly actionButtonId: string | null;
+    readonly ariaLabel: string;
+    readonly children: React.ReactNode;
+    readonly disabled: boolean;
+    readonly menuAriaLabel: string;
+    readonly menuButtonId: string | null;
+    readonly menuItems: ComboboxValue[];
+    readonly onConfigureApps: (() => void) | null;
+    readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
+    readonly size: 'compact' | 'default';
+    readonly style: React.CSSProperties | null;
+    readonly title: string;
+}>;

package/dist/components/AppLaunchButton.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppLaunchButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const caret_1 = require("../icons/caret");
+const get_open_in_menu_items_1 = require("./get-open-in-menu-items");
+const SegmentedButton_1 = require("./SegmentedButton");
+const compactMainSegmentStyle = {
+    fontFamily: 'inherit',
+    gap: 6,
+    padding: '0 9px',
+};
+const defaultMainSegmentStyle = {
+    ...compactMainSegmentStyle,
+    fontSize: 14,
+    lineHeight: '21px',
+};
+const dropdownSegmentStyle = {
+    fontFamily: 'inherit',
+    padding: 0,
+    width: 20,
+};
+const dropdownIconStyle = {
+    display: 'flex',
+    transform: 'translateY(-1px)',
+};
+const AppLaunchButton = ({ actionButtonId, ariaLabel, children, disabled, menuAriaLabel, menuButtonId, menuItems, onConfigureApps, onClick, size, style, title, }) => {
+    const items = (0, react_1.useMemo)(() => {
+        return [
+            ...menuItems,
+            ...(0, get_open_in_menu_items_1.getConfigureDefaultAppsMenuItems)({
+                hasPreviousItems: menuItems.length > 0,
+                onConfigureApps,
+            }),
+        ];
+    }, [menuItems, onConfigureApps]);
+    const segments = (0, react_1.useMemo)(() => {
+        return [
+            {
+                ariaLabel,
+                buttonId: actionButtonId,
+                disabled,
+                idleColor: colors_1.LIGHT_TEXT,
+                onClick,
+                onPointerDown: null,
+                renderContent: () => children,
+                segmentId: 'preferred-app',
+                style: size === 'default'
+                    ? defaultMainSegmentStyle
+                    : compactMainSegmentStyle,
+                title,
+                type: 'action',
+            },
+            ...(items.length > 0
+                ? [
+                    {
+                        ariaLabel: menuAriaLabel,
+                        buttonId: menuButtonId,
+                        disabled: false,
+                        idleColor: colors_1.LIGHT_TEXT,
+                        leaveLeftSpace: true,
+                        onOpenChange: null,
+                        renderContent: (color) => (jsx_runtime_1.jsx("span", { style: dropdownIconStyle, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }) })),
+                        segmentId: 'another-app',
+                        selectedId: null,
+                        style: dropdownSegmentStyle,
+                        title: menuAriaLabel,
+                        type: 'menu',
+                        values: items,
+                    },
+                ]
+                : []),
+        ];
+    }, [
+        actionButtonId,
+        ariaLabel,
+        children,
+        disabled,
+        items,
+        menuAriaLabel,
+        menuButtonId,
+        onClick,
+        size,
+        title,
+    ]);
+    return (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: { ...(size === 'default' ? { height: 41 } : null), ...style }, title: null }));
+};
+exports.AppLaunchButton = AppLaunchButton;

package/dist/components/AssetSelector.js

@@ -48,6 +48,7 @@ const use_asset_drag_events_1 = __importStar(require("../helpers/use-asset-drag-
 const folders_1 = require("../state/folders");
 const z_index_1 = require("../state/z-index");
 const AssetSelectorItem_1 = require("./AssetSelectorItem");
+const import_assets_1 = require("./import-assets");
 const styles_1 = require("./Menu/styles");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const ExplorerQuickSwitcherTrigger_1 = require("./QuickSwitcher/ExplorerQuickSwitcherTrigger");
@@ -97,6 +98,28 @@ const AssetSelector = ({ readOnlyStudio }) => {
     const assetTree = (0, react_1.useMemo)(() => {
         return (0, create_folder_tree_1.buildAssetFolderStructure)(staticFiles, null, assetFoldersExpanded);
     }, [assetFoldersExpanded, staticFiles]);
+    const writeFilesToPublicFolder = (0, react_1.useCallback)(async ({ files, assetPath, }) => {
+        const makePath = (file) => {
+            return [assetPath, file.name].filter(Boolean).join('/');
+        };
+        const differentExistingFile = files.find((file) => {
+            const filePath = makePath(file);
+            return staticFiles.some((staticFile) => staticFile.name === filePath &&
+                staticFile.sizeInBytes !== file.size);
+        });
+        if (differentExistingFile) {
+            (0, NotificationCenter_1.showNotification)(`File with name ${makePath(differentExistingFile)} already exists and is different`, 4000);
+            return false;
+        }
+        for (const file of files) {
+            const body = await file.arrayBuffer();
+            await (0, write_static_file_1.writeStaticFile)({
+                contents: body,
+                filePath: makePath(file),
+            });
+        }
+        return true;
+    }, [staticFiles]);
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
         setAssetFoldersExpanded((p) => {
             const key = [parentName, folderName].filter(Boolean).join('/');
@@ -145,25 +168,7 @@ const AssetSelector = ({ readOnlyStudio }) => {
                 setDropLocation(null);
                 return;
             }
-            const makePath = (file) => {
-                return [assetPath, file.name].filter(Boolean).join('/');
-            };
-            const differentExistingFile = Array.from(files).find((file) => {
-                const filePath = makePath(file);
-                return staticFiles.some((staticFile) => staticFile.name === filePath &&
-                    staticFile.sizeInBytes !== file.size);
-            });
-            if (differentExistingFile) {
-                (0, NotificationCenter_1.showNotification)(`File with name ${makePath(differentExistingFile)} already exists and is different`, 4000);
-                return;
-            }
-            for (const file of files) {
-                const body = await file.arrayBuffer();
-                await (0, write_static_file_1.writeStaticFile)({
-                    contents: body,
-                    filePath: makePath(file),
-                });
-            }
+            await writeFilesToPublicFolder({ files, assetPath });
         }
         catch (error) {
             (0, NotificationCenter_1.showNotification)(`Error during upload: ${error}`, 3000);
@@ -171,13 +176,50 @@ const AssetSelector = ({ readOnlyStudio }) => {
         finally {
             setDropLocation(null);
         }
-    }, [dropLocation, staticFiles]);
+    }, [dropLocation, writeFilesToPublicFolder]);
+    const uploadAssets = (0, react_1.useCallback)(async (assetPath) => {
+        try {
+            const files = await (0, import_assets_1.pickFilesToImport)();
+            if (files.length === 0) {
+                return;
+            }
+            const wereWritten = await writeFilesToPublicFolder({
+                files,
+                assetPath,
+            });
+            if (wereWritten) {
+                const destination = assetPath ? `'${assetPath}'` : 'public folder';
+                (0, NotificationCenter_1.showNotification)(files.length === 1
+                    ? `Uploaded ${files[0].name} to ${destination}`
+                    : `Uploaded ${files.length} assets to ${destination}`, 3000);
+            }
+        }
+        catch (error) {
+            (0, NotificationCenter_1.showNotification)(`Error during upload: ${error}`, 3000);
+        }
+    }, [writeFilesToPublicFolder]);
+    const getAssetActions = (0, react_1.useCallback)(() => {
+        return [
+            {
+                id: 'upload-assets',
+                keyHint: null,
+                label: 'Upload...',
+                leftItem: null,
+                onClick: () => uploadAssets(null),
+                quickSwitcherLabel: 'Upload assets...',
+                subMenu: null,
+                type: 'item',
+                value: 'upload-assets',
+                disabled: !shouldAllowUpload,
+            },
+        ];
+    }, [shouldAllowUpload, uploadAssets]);
     return (jsx_runtime_1.jsxs("div", { "data-asset-selector": true, style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: [
-            jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "assets", showShortcut: true, tabIndex: tabIndex }), staticFiles.length === 0 ? (publicFolderExists ? (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, place a file in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
+            jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "assets", showShortcut: true, tabIndex: tabIndex, getActions: getAssetActions }), staticFiles.length === 0 ? (publicFolderExists ? (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, place a file in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
                         " folder of your project or drag and drop a file here."] }) })) : (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, create a folder called", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
                         " in the root of your project and place a file in it."] }) }))) : (jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: {
                     ...list,
                     backgroundColor: isDropDiv ? colors_1.WHITE_ALPHA_06 : colors_1.BACKGROUND,
-                }, onDragEnter: onDragEnter, onDragLeave: onDragLeave, children: jsx_runtime_1.jsx(AssetSelectorItem_1.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio }) }))] }));
+                }, onDragEnter: onDragEnter, onDragLeave: onDragLeave, children: jsx_runtime_1.jsx(AssetSelectorItem_1.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio, uploadAssets: uploadAssets }) }))] }));
 };
 exports.AssetSelector = AssetSelector;

package/dist/components/AssetSelectorItem.d.ts

@@ -14,11 +14,12 @@ export declare const getCanDragAsset: ({ readOnlyStudio, relativePath, }: {
     readOnlyStudio: boolean;
     relativePath: string;
 }) => boolean;
-export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInConvert, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }: {
+export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, copyAbsolutePath, openAssetInConvert, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }: {
     relativePath: string;
     fileManagerName: string;
     copyFileName: () => void;
     copyStaticFilePath: () => void;
+    copyAbsolutePath: (() => void) | null;
     openAssetInConvert: () => void;
     openAssetInExplorer: () => void;
     renameAsset: () => void;
@@ -27,6 +28,17 @@ export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName,
     fileExplorerDisabled: boolean;
     mutationsDisabled: boolean;
 }) => ComboboxValue[];
+export declare const getAssetFolderContextMenuItems: ({ folderPath, fileManagerName, copyFolderPath, copyAbsolutePath, openFolderInExplorer, uploadAssets, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }: {
+    folderPath: string;
+    fileManagerName: string;
+    copyFolderPath: () => void;
+    copyAbsolutePath: (() => void) | null;
+    openFolderInExplorer: () => void;
+    uploadAssets: () => void;
+    fileExplorerAvailable: boolean;
+    fileExplorerDisabled: boolean;
+    mutationsDisabled: boolean;
+}) => ComboboxValue[];
 export declare const AssetFolderTree: React.FC<{
     readonly item: AssetStructure;
     readonly name: string | null;
@@ -37,4 +49,5 @@ export declare const AssetFolderTree: React.FC<{
     readonly dropLocation: string | null;
     readonly setDropLocation: React.Dispatch<React.SetStateAction<string | null>>;
     readonly readOnlyStudio: boolean;
+    readonly uploadAssets: (assetPath: string | null) => void;
 }>;