@remotion/studio 4.0.514 → 4.0.515

package/dist/api/install-package.js

@@ -3,10 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.installPackages = void 0;
 const remotion_1 = require("remotion");
 const call_api_1 = require("../components/call-api");
-const installPackages = (dependencies) => {
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const installPackages = async (dependencies) => {
     if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
         throw new Error('installPackages() is only available in the Studio');
     }
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    if (browserStudioOperations !== null) {
+        const response = await browserStudioOperations.packageInstallation.installPackages({
+            dependencies: [...dependencies],
+        });
+        if (!response.success) {
+            const error = new Error(response.reason);
+            error.stack = response.stack;
+            throw error;
+        }
+        return {};
+    }
     if (window.remotion_isReadOnlyStudio) {
         throw new Error('installPackages() is not available in Read-Only Studio');
     }

package/dist/components/AssetSelectorItem.d.ts

@@ -14,7 +14,7 @@ export declare const getCanDragAsset: ({ readOnlyStudio, relativePath, }: {
     readOnlyStudio: boolean;
     relativePath: string;
 }) => boolean;
-export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerDisabled, mutationsDisabled, }: {
+export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }: {
     relativePath: string;
     fileManagerName: string;
     copyFileName: () => void;
@@ -22,6 +22,7 @@ export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName,
     openAssetInExplorer: () => void;
     renameAsset: () => void;
     deleteAsset: () => void;
+    fileExplorerAvailable: boolean;
     fileExplorerDisabled: boolean;
     mutationsDisabled: boolean;
 }) => ComboboxValue[];

package/dist/components/AssetSelectorItem.js

@@ -117,8 +117,8 @@ const getCanDragAsset = ({ readOnlyStudio, relativePath, }) => {
     return !readOnlyStudio && (0, import_assets_1.getAssetElementFromPath)(relativePath) !== null;
 };
 exports.getCanDragAsset = getCanDragAsset;
-const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerDisabled, mutationsDisabled, }) => {
-    return [
+const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }) => {
+    const items = [
         (0, open_in_new_window_1.getOpenInNewWindowMenuItem)(`/assets/${relativePath}`),
         {
             type: 'divider',
@@ -150,18 +150,20 @@ const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName,
             type: 'divider',
             id: 'asset-file-actions-divider',
         },
-        {
-            id: 'open-asset-in-explorer',
-            keyHint: null,
-            label: `Show in ${fileManagerName}`,
-            leftItem: null,
-            onClick: openAssetInExplorer,
-            quickSwitcherLabel: `Show asset in ${fileManagerName}`,
-            subMenu: null,
-            type: 'item',
-            value: 'open-asset-in-explorer',
-            disabled: fileExplorerDisabled,
-        },
+        fileExplorerAvailable
+            ? {
+                id: 'open-asset-in-explorer',
+                keyHint: null,
+                label: `Show in ${fileManagerName}`,
+                leftItem: null,
+                onClick: openAssetInExplorer,
+                quickSwitcherLabel: `Show asset in ${fileManagerName}`,
+                subMenu: null,
+                type: 'item',
+                value: 'open-asset-in-explorer',
+                disabled: fileExplorerDisabled,
+            }
+            : null,
         {
             id: 'rename-asset',
             keyHint: null,
@@ -187,6 +189,7 @@ const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName,
             disabled: mutationsDisabled,
         },
     ];
+    return items.filter(no_react_1.NoReactInternals.truthy);
 };
 exports.getAssetContextMenuItems = getAssetContextMenuItems;
 const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dropLocation, setDropLocation, readOnlyStudio, }) => {
@@ -432,6 +435,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             openAssetInExplorer,
             renameAsset,
             deleteAsset,
+            fileExplorerAvailable: (0, browser_studio_operations_1.getBrowserStudioOperations)() === null,
             fileExplorerDisabled,
             mutationsDisabled,
         });

package/dist/components/AudioWaveform.js

@@ -41,19 +41,6 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
 const EMPTY_PEAKS = new Float32Array(0);
-// Recreate the canvas after Fast Refresh because an already transferred canvas
-// cannot be handed to OffscreenCanvas again.
-const canRetryCanvasTransfer = (err) => {
-    return err instanceof DOMException && err.name === 'InvalidStateError';
-};
-const canUseAudioWaveformWorker = () => {
-    if (typeof Worker === 'undefined' ||
-        typeof OffscreenCanvas === 'undefined' ||
-        typeof HTMLCanvasElement === 'undefined') {
-        return false;
-    }
-    return 'transferControlToOffscreen' in HTMLCanvasElement.prototype;
-};
 const getContainerStyle = (height) => {
     return {
         display: 'flex',
@@ -64,9 +51,6 @@ const getContainerStyle = (height) => {
         height,
     };
 };
-const getWaveformErrorMessage = () => {
-    return new Error('No waveform available. The audio could not be decoded or may not support CORS.');
-};
 const waveformCanvasStyle = {
     pointerEvents: 'none',
     width: '100%',
@@ -86,17 +70,12 @@ const parseVolume = (volume) => {
 const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayOffsetInFrames, displayDurationInFrames, visualizationWidth, volume, doesVolumeChange, muted, playbackRate, loopDisplay, }) => {
     const [peaks, setPeaks] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
-    const [waveformCanvasKey, setWaveformCanvasKey] = (0, react_1.useState)(0);
-    const canUseWorkerPath = (0, react_1.useMemo)(() => canUseAudioWaveformWorker(), []);
     const vidConf = remotion_1.Internals.useUnsafeVideoConfig();
     if (vidConf === null) {
         throw new Error('Expected video config');
     }
     const waveformCanvas = (0, react_1.useRef)(null);
     const volumeCanvas = (0, react_1.useRef)(null);
-    const waveformWorker = (0, react_1.useRef)(null);
-    const hasTransferredCanvas = (0, react_1.useRef)(false);
-    const latestRequestId = (0, react_1.useRef)(0);
     const shouldRenderVolumeOverlay = doesVolumeChange && typeof volume === 'string';
     const parsedVolume = (0, react_1.useMemo)(() => parseVolume(volume), [volume]);
     const visibleVolume = (0, react_1.useMemo)(() => {
@@ -116,82 +95,19 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         muted,
         parsedVolume,
     ]);
-    (0, react_1.useEffect)(() => {
-        if (canUseWorkerPath) {
-            return;
-        }
-        const controller = new AbortController();
+    // Layout effect so that a cache hit sets the peaks synchronously and the
+    // waveform is painted on the very first frame after mounting.
+    (0, react_1.useLayoutEffect)(() => {
         setPeaks(null);
         setError(null);
-        (0, timeline_utils_1.loadWaveformPeaks)(src, controller.signal)
-            .then((p) => {
-            if (!controller.signal.aborted) {
-                setPeaks(p);
-            }
-        })
-            .catch((err) => {
-            if (!controller.signal.aborted) {
-                setError(err);
-            }
+        return (0, timeline_utils_1.subscribeToWaveformPeaks)({
+            src,
+            onPeaks: (p) => setPeaks(p),
+            onError: (err) => setError(err),
         });
-        return () => controller.abort();
-    }, [canUseWorkerPath, src]);
-    (0, react_1.useEffect)(() => {
-        if (!canUseWorkerPath) {
-            return;
-        }
-        const canvasElement = waveformCanvas.current;
-        if (!canvasElement || hasTransferredCanvas.current) {
-            return;
-        }
-        const worker = (0, timeline_utils_1.makeAudioWaveformWorker)();
-        let workerFailed = false;
-        waveformWorker.current = worker;
-        worker.addEventListener('message', (event) => {
-            if (event.data.type === 'error') {
-                if (event.data.requestId !== latestRequestId.current) {
-                    return;
-                }
-                setError(new Error(event.data.message));
-            }
-        });
-        worker.addEventListener('error', (event) => {
-            event.preventDefault();
-            workerFailed = true;
-            if (worker !== waveformWorker.current) {
-                return;
-            }
-            worker.terminate();
-            waveformWorker.current = null;
-            hasTransferredCanvas.current = false;
-            setError(getWaveformErrorMessage());
-        });
-        let offscreen;
-        try {
-            offscreen = canvasElement.transferControlToOffscreen();
-        }
-        catch (err) {
-            worker.terminate();
-            waveformWorker.current = null;
-            if (canRetryCanvasTransfer(err)) {
-                setWaveformCanvasKey((key) => key + 1);
-                return;
-            }
-            throw err;
-        }
-        hasTransferredCanvas.current = true;
-        worker.postMessage({ type: 'init', canvas: offscreen }, [offscreen]);
-        return () => {
-            if (!workerFailed) {
-                worker.postMessage({ type: 'dispose' });
-            }
-            worker.terminate();
-            waveformWorker.current = null;
-            hasTransferredCanvas.current = false;
-        };
-    }, [canUseWorkerPath, waveformCanvasKey]);
+    }, [src]);
     const portionPeaks = (0, react_1.useMemo)(() => {
-        if (canUseWorkerPath || !peaks) {
+        if (!peaks) {
             return null;
         }
         return (0, timeline_utils_1.sliceVisibleWaveformPeaks)({
@@ -205,7 +121,6 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
             startFrom,
         });
     }, [
-        canUseWorkerPath,
         displayDurationInFrames,
         displayOffsetInFrames,
         durationInFrames,
@@ -215,7 +130,10 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         startFrom,
         vidConf.fps,
     ]);
-    (0, react_1.useEffect)(() => {
+    // Drawing must happen in a layout effect: when the timeline zooms, the
+    // canvas CSS box resizes in the same commit, and painting the bitmap
+    // before the browser paints avoids showing a stretched stale waveform.
+    (0, react_1.useLayoutEffect)(() => {
         const { current: canvasElement } = waveformCanvas;
         if (!canvasElement) {
             return;
@@ -223,31 +141,6 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
         const pixelRatio = window.devicePixelRatio;
         const h = Math.ceil(height * pixelRatio);
         const w = Math.ceil(visualizationWidth * pixelRatio);
-        if (canUseWorkerPath) {
-            const worker = waveformWorker.current;
-            if (!worker || !hasTransferredCanvas.current) {
-                return;
-            }
-            latestRequestId.current += 1;
-            setError(null);
-            const message = {
-                type: 'render',
-                requestId: latestRequestId.current,
-                src,
-                width: w,
-                height: h,
-                volume: visibleVolume,
-                startFrom,
-                durationInFrames,
-                displayOffsetInFrames,
-                displayDurationInFrames,
-                fps: vidConf.fps,
-                playbackRate,
-                loopDisplay,
-            };
-            worker.postMessage(message);
-            return;
-        }
         canvasElement.width = w;
         canvasElement.height = h;
         (0, timeline_utils_1.drawBars)({
@@ -257,23 +150,8 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
             volume: visibleVolume,
             width: w,
         });
-    }, [
-        canUseWorkerPath,
-        displayDurationInFrames,
-        displayOffsetInFrames,
-        durationInFrames,
-        height,
-        loopDisplay,
-        playbackRate,
-        portionPeaks,
-        src,
-        startFrom,
-        vidConf.fps,
-        visualizationWidth,
-        visibleVolume,
-        waveformCanvasKey,
-    ]);
-    (0, react_1.useEffect)(() => {
+    }, [height, portionPeaks, visibleVolume, visualizationWidth]);
+    (0, react_1.useLayoutEffect)(() => {
         if (!shouldRenderVolumeOverlay) {
             return;
         }
@@ -315,10 +193,10 @@ const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, displayO
     if (error) {
         return null;
     }
-    if (!canUseWorkerPath && !peaks) {
+    if (!peaks) {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: getContainerStyle(height), children: [
-            jsx_runtime_1.jsx("canvas", { ref: waveformCanvas, style: waveformCanvasStyle }, waveformCanvasKey), shouldRenderVolumeOverlay ? (jsx_runtime_1.jsx("canvas", { ref: volumeCanvas, style: volumeCanvasStyle })) : null] }));
+            jsx_runtime_1.jsx("canvas", { ref: waveformCanvas, style: waveformCanvasStyle }), shouldRenderVolumeOverlay ? (jsx_runtime_1.jsx("canvas", { ref: volumeCanvas, style: volumeCanvasStyle })) : null] }));
 };
 exports.AudioWaveform = react_1.default.memo(AudioWaveformInner);

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -3,10 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionInspector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const download_blob_1 = require("../../helpers/download-blob");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const browse_elements_1 = require("../../icons/browse-elements");
+const cloud_download_1 = require("../../icons/cloud-download");
 const frame_1 = require("../../icons/frame");
 const solid_1 = require("../../icons/solid");
 const video_1 = require("../../icons/video");
@@ -14,6 +17,7 @@ const VisualControls_1 = require("../../visual-controls/VisualControls");
 const DefaultPropsEditor_1 = require("../DefaultPropsEditor");
 const get_zod_if_possible_1 = require("../get-zod-if-possible");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const ObserveDefaultPropsContext_1 = require("../ObserveDefaultPropsContext");
 const DataEditor_1 = require("../RenderModal/DataEditor");
 const zod_schema_type_1 = require("../RenderModal/SchemaEditor/zod-schema-type");
@@ -46,18 +50,36 @@ const browseElementsArrowStyle = {
     verticalAlign: -2,
     width: 12,
 };
-const CompositionActions = ({ readOnlyStudio }) => {
+const CompositionActions = () => {
+    var _a;
+    var _b;
     const { canInsertAsset, canInsertComposition, canInsertSolid, canShowInsertAsset, canShowInsertComposition, canShowInsertSolid, insertAsset, insertComposition, insertSolid, } = (0, use_composition_actions_1.useCompositionActions)();
+    const downloadProject = (_b = (_a = (0, browser_studio_operations_1.getBrowserStudioOperations)()) === null || _a === void 0 ? void 0 : _a.downloadProject) !== null && _b !== void 0 ? _b : null;
+    const onDownloadProject = (0, react_1.useCallback)(async () => {
+        if (downloadProject === null) {
+            return;
+        }
+        try {
+            const { data, fileName } = await downloadProject();
+            const arrayBuffer = data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
+            (0, download_blob_1.downloadBlob)(new Blob([arrayBuffer], { type: 'application/zip' }), fileName);
+        }
+        catch (error) {
+            (0, NotificationCenter_1.showNotification)(`Could not download project: ${error instanceof Error ? error.message : String(error)}`, 2000);
+        }
+    }, [downloadProject]);
     const openElementsLibrary = (0, react_1.useCallback)(() => {
         window.open('https://www.remotion.dev/elements', '_blank', 'noopener,noreferrer');
     }, []);
-    if ((readOnlyStudio && !canShowInsertSolid) ||
-        (!canShowInsertAsset && !canShowInsertComposition && !canShowInsertSolid)) {
+    if (!canShowInsertAsset &&
+        !canShowInsertComposition &&
+        !canShowInsertSolid &&
+        downloadProject === null) {
         return null;
     }
     return (jsx_runtime_1.jsxs(common_1.InspectorQuickActionsSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null, canShowInsertComposition ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: !canInsertComposition, onClick: insertComposition, renderIcon: (color) => (jsx_runtime_1.jsx(video_1.FilmIcon, { color: color, style: actionIconStyle })), children: "Add composition..." })) : null, canShowInsertAsset ? (jsx_runtime_1.jsxs(common_1.InspectorQuickAction, { disabled: false, iconContainerStyle: browseElementsIconContainerStyle, onClick: openElementsLibrary, renderIcon: (color) => (jsx_runtime_1.jsx(browse_elements_1.BrowseElementsIcon, { color: color, style: browseElementsIconStyle })), title: "Open the Remotion Elements library in a new tab. Install an Element there to send it to this composition.", children: ["Browse Elements",
                     jsx_runtime_1.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", style: browseElementsArrowStyle, children: jsx_runtime_1.jsx("path", { d: "M4 12 12 4M6 4h6v6", fill: "none", stroke: colors_1.CURRENT_COLOR, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })
-                ] })) : null] }));
+                ] })) : null, downloadProject ? (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { disabled: false, onClick: onDownloadProject, renderIcon: (color) => (jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: actionIconStyle })), children: "Download project" })) : null] }));
 };
 const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     var _a;
@@ -138,7 +160,7 @@ const CompositionInspector = ({ composition, currentDefaultProps, readOnlyStudio
     return (jsx_runtime_1.jsxs("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
             jsx_runtime_1.jsxs("div", { style: styles_1.inspectorOverviewSection, children: [
                     jsx_runtime_1.jsx(CompositionInspectorHeader_1.CompositionInspectorHeader, {}), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(CompositionMetadata_1.CompositionMetadata, { compositionId: composition.id, disabled: readOnlyStudio || previewServerState.type !== 'connected', stack: composition.stack })
-                ] }), jsx_runtime_1.jsx(CompositionDefaultPropsSection, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps }), jsx_runtime_1.jsx(CompositionVisualControlsSection, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CompositionActions, { readOnlyStudio: readOnlyStudio })
+                ] }), jsx_runtime_1.jsx(CompositionDefaultPropsSection, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps }), jsx_runtime_1.jsx(CompositionVisualControlsSection, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CompositionActions, {})
         ] }));
 };
 exports.CompositionInspector = CompositionInspector;

package/dist/components/InstallPackage.d.ts

@@ -1,5 +1,5 @@
 import type { PackageManager } from '@remotion/studio-shared';
 import React from 'react';
 export declare const InstallPackageModal: React.FC<{
-    readonly packageManager: PackageManager;
+    readonly packageManager: PackageManager | null;
 }>;

package/dist/components/InstallPackage.js

@@ -44,6 +44,7 @@ const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint")
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const modals_1 = require("../state/modals");
 const Checkbox_1 = require("./Checkbox");
 const InstallablePackage_1 = require("./InstallablePackage");
 const layout_1 = require("./layout");
@@ -64,22 +65,46 @@ const InstallPackageModal = ({ packageManager }) => {
     const [state, setState] = react_1.default.useState({ type: 'idle' });
     const [map, setMap] = react_1.default.useState({});
     const { previewServerState: ctx } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const selectedPackages = Object.keys(map).filter((pkg) => map[pkg]);
+    const selectedPackageSpecs = selectedPackages.map((name) => {
+        var _a;
+        var _b;
+        return ({
+            name,
+            version: (_b = (_a = studio_shared_1.extraPackages.find((pkg) => pkg.name === name)) === null || _a === void 0 ? void 0 : _a.version) !== null && _b !== void 0 ? _b : null,
+        });
+    });
     const onClick = (0, react_1.useCallback)(async () => {
+        var _a;
         if (state.type === 'done') {
+            if (packageManager === null) {
+                setSelectedModal(null);
+                return;
+            }
             setState({ type: 'restarting' });
             (0, restart_studio_1.restartStudio)();
             return;
         }
         setState({ type: 'installing' });
         try {
-            await (0, install_package_1.installPackages)(selectedPackages.map((name) => ({ name, version: null })));
+            await (0, install_package_1.installPackages)(selectedPackageSpecs);
+            window.remotion_installedPackages = Array.from(new Set([
+                ...((_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : []),
+                ...selectedPackages,
+            ]));
             setState({ type: 'done' });
         }
         catch (err) {
             setState({ type: 'error', error: err });
         }
-    }, [selectedPackages, state.type]);
+    }, [
+        packageManager,
+        selectedPackageSpecs,
+        selectedPackages,
+        setSelectedModal,
+        state.type,
+    ]);
     const canSelectPackages = state.type === 'idle' && ctx.type === 'connected';
     const disabled = !(canSelectPackages || state.type === 'done') ||
         selectedPackages.length === 0;
@@ -104,7 +129,11 @@ const InstallPackageModal = ({ packageManager }) => {
         };
     }, [disabled, onClick, registerKeybinding]);
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Install packages" }), jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: state.type === 'done' ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Installed package", selectedPackages.length === 1 ? '' : 's', ' ', "successfully. Restart the server to complete."] })) : state.type === 'restarting' ? (jsx_runtime_1.jsx("div", { style: text, children: "Restarting the Studio server..." })) : state.type === 'installing' ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Installing package", selectedPackages.length === 1 ? '' : 's', ". Check your terminal for progress."] })) : (jsx_runtime_1.jsxs("div", { style: text, children: [Object.entries(studio_shared_1.installableMap)
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Install packages" }), jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: state.type === 'done' ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Installed package", selectedPackages.length === 1 ? '' : 's', ' ', "successfully.", packageManager === null
+                            ? null
+                            : ' Restart the server to complete.'] })) : state.type === 'restarting' ? (jsx_runtime_1.jsx("div", { style: text, children: "Restarting the Studio server..." })) : state.type === 'installing' ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Installing package", selectedPackages.length === 1 ? '' : 's', packageManager === null
+                            ? '.'
+                            : '. Check your terminal for progress.'] })) : (jsx_runtime_1.jsxs("div", { style: text, children: [Object.entries(studio_shared_1.installableMap)
                             .filter(([, install]) => install)
                             .map(([pkgShort]) => {
                             var _a;
@@ -136,13 +165,16 @@ const InstallPackageModal = ({ packageManager }) => {
                                             }));
                                         }, disabled: !canSelectPackages || isInstalled }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 }), jsx_runtime_1.jsx(InstallablePackage_1.InstallablePackageComp, { description: extraPkg.description, isInstalled: isInstalled, link: extraPkg.docsUrl, pkg: `${extraPkg.name}@${extraPkg.version}` })
                                 ] }, extraPkg.name));
-                        })] })) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [state.type === 'idle' ? (jsx_runtime_1.jsxs("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 }, children: ["This will install ", selectedPackages.length, " package", selectedPackages.length === 1 ? '' : 's', jsx_runtime_1.jsx("br", {}),
-                                "using ", packageManager, ", Remotion v", remotion_1.VERSION] })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onClick, disabled: disabled, children: [state.type === 'restarting'
+                        })] })) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [state.type === 'idle' ? (jsx_runtime_1.jsxs("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 }, children: ["This will install ", selectedPackages.length, " package", selectedPackages.length === 1 ? '' : 's', jsx_runtime_1.jsx("br", {}), packageManager === null
+                                    ? `in this project, Remotion v${remotion_1.VERSION}`
+                                    : `using ${packageManager}, Remotion v${remotion_1.VERSION}`] })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onClick, disabled: disabled, children: [state.type === 'restarting'
                                     ? 'Restarting...'
                                     : state.type === 'installing'
                                         ? 'Installing...'
                                         : state.type === 'done'
-                                            ? 'Restart Server'
+                                            ? packageManager === null
+                                                ? 'Done'
+                                                : 'Restart Server'
                                             : 'Install', disabled ? null : jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })
                     ] }) })
         ] }));

package/dist/components/Menu/MenuDivider.js

@@ -10,6 +10,6 @@ const menuDivider = {
     backgroundColor: colors_1.WHITE_ALPHA_05,
 };
 const MenuDivider = () => {
-    return jsx_runtime_1.jsx("div", { style: menuDivider });
+    return jsx_runtime_1.jsx("div", { role: "separator", style: menuDivider });
 };
 exports.MenuDivider = MenuDivider;

package/dist/components/Modals.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modals = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const modals_1 = require("../state/modals");
@@ -36,7 +37,11 @@ const Modals = ({ readOnlyStudio }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { previewServerState, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const canRender = previewServerState.type === 'connected';
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     (0, react_1.useEffect)(() => {
+        if (isBrowserStudio) {
+            return;
+        }
         return subscribeToEvent('license-key-install-request', (event) => {
             if (event.type !== 'license-key-install-request') {
                 return;
@@ -47,8 +52,10 @@ const Modals = ({ readOnlyStudio }) => {
                 initialPublicLicenseKey: event.licenseKey,
             });
         });
-    }, [setSelectedModal, subscribeToEvent]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack, canvasCapture: modalContextType.canvasCapture })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'settings' && (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    }, [isBrowserStudio, setSelectedModal, subscribeToEvent]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack, canvasCapture: modalContextType.canvasCapture })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), !isBrowserStudio &&
+                modalContextType &&
+                modalContextType.type === 'settings' && (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
                 (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'fix-computed-value' && (jsx_runtime_1.jsx(FixComputedValueModal_1.FixComputedValueModal, { state: modalContextType })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };

package/dist/components/RenderModal/GuiRenderStatus.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GuiRenderStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const colors_1 = require("../../helpers/colors");
 const layout_1 = require("../layout");
 const actions_1 = require("../RenderQueue/actions");
@@ -78,6 +79,7 @@ const DownloadsProgress = ({ downloads }) => {
         ] }));
 };
 const OpenFile = ({ job }) => {
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     const labelStyle = (0, react_1.useMemo)(() => {
         return {
             ...label,
@@ -93,7 +95,7 @@ const OpenFile = ({ job }) => {
         (0, actions_1.openInFileExplorer)({ directory: job.outName });
     }, [job.outName]);
     return (jsx_runtime_1.jsxs("div", { style: progressItem, children: [
-            jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { style: labelStyle, type: "button", onClick: onClick, children: job.outName }), jsx_runtime_1.jsx("div", { style: right, children: jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }) })
+            jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {}), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), isBrowserStudio ? (jsx_runtime_1.jsx("div", { style: labelStyle, children: job.outName })) : (jsx_runtime_1.jsx("button", { style: labelStyle, type: "button", onClick: onClick, children: job.outName })), jsx_runtime_1.jsx("div", { style: right, children: jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }) })
         ] }));
 };
 const GuiRenderStatus = ({ job }) => {

package/dist/components/RenderModal/RenderModalOutputName.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalOutputName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const colors_1 = require("../../helpers/colors");
 const get_file_manager_name_1 = require("../../helpers/get-file-manager-name");
 const folder_1 = require("../../icons/folder");
@@ -47,14 +48,13 @@ const RenderModalOutputName = ({ existence, inputStyle, outName, onValueChange,
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: openIconStyle, color: color });
     }, []);
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
     return (jsx_runtime_1.jsxs("div", { style: outputNameRow, children: [
             jsx_runtime_1.jsx(layout_1.Column, { children: jsx_runtime_1.jsx("div", { style: layout_2.label, children: labelText }) }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { style: outputNameInputContainer, children: [
                         jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: validationMessage ? 'error' : existence ? 'warning' : 'ok', style: inputStyle, type: "text", value: outName, onChange: onValueChange, rightAlign: true }), validationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage, type: 'error' })
                             ] })) : existence ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [
-                                            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` }),
-                                            "Exists, will be overwritten"] }), type: 'warning' })
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` })), "Exists, will be overwritten"] }), type: 'warning' })
                             ] })) : null] }) })
         ] }));
 };