@remotion/studio 4.0.518 → 4.0.519

package/dist/components/Canvas.js

@@ -30,7 +30,6 @@ const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
 const canvas_capture_drop_1 = require("./canvas-capture-drop");
 const composition_drop_preview_1 = require("./composition-drop-preview");
-const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const drop_handler_data_1 = require("./drop-handler-data");
 const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
@@ -127,7 +126,6 @@ const Canvas = ({ canvasContent, size }) => {
     const suppressWheelFromWebKitPinchRef = (0, react_1.useRef)(false);
     const touchPinchRef = (0, react_1.useRef)(null);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const config = remotion_1.Internals.useUnsafeVideoConfig();
@@ -145,6 +143,7 @@ const Canvas = ({ canvasContent, size }) => {
     const [installingElementName, setInstallingElementName] = (0, react_1.useState)(null);
     const [pendingElementInstallRequests, setPendingElementInstallRequests] = (0, react_1.useState)([]);
     const [activeElementInstallRequest, setActiveElementInstallRequest] = (0, react_1.useState)(null);
+    const [elementInstallReview, setElementInstallReview] = (0, react_1.useState)(null);
     const lastFocusedAtRef = (0, react_1.useRef)(typeof document === 'undefined' || document.hasFocus() ? Date.now() : null);
     const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
     const metadataRequestRef = (0, react_1.useRef)(0);
@@ -162,12 +161,13 @@ const Canvas = ({ canvasContent, size }) => {
         compositionFile,
         compositionId: currentCompositionId,
     });
-    const canInstallElements = previewServerClientId !== null &&
+    const canReceiveElementInstallRequest = previewServerClientId !== null &&
         !window.remotion_isReadOnlyStudio &&
-        (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
         currentCompositionId !== null &&
         compositionFile !== null;
-    const canDropAssets = canInstallElements && !isAddingAsset;
+    const canInsertIntoCurrentComposition = canReceiveElementInstallRequest &&
+        (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true;
+    const canDropAssets = canInsertIntoCurrentComposition && !isAddingAsset;
     const cannotAddSequence = (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false;
     const contentDimensions = (0, react_1.useMemo)(() => {
         if ((canvasContent.type === 'asset' ||
@@ -566,15 +566,18 @@ const Canvas = ({ canvasContent, size }) => {
         (0, call_api_1.callApi)('/api/update-element-install-target', {
             requestId,
             clientId: previewServerClientId,
-            compositionFile: canInstallElements ? compositionFile : null,
-            compositionId: canInstallElements ? currentCompositionId : null,
-            canInstall: canInstallElements,
+            compositionFile: canReceiveElementInstallRequest
+                ? compositionFile
+                : null,
+            compositionId: canReceiveElementInstallRequest
+                ? currentCompositionId
+                : null,
             lastFocusedAt: lastFocusedAtRef.current,
             readOnly: window.remotion_isReadOnlyStudio,
             studioUrl: window.location.href,
         }).catch(() => undefined);
     }, [
-        canInstallElements,
+        canReceiveElementInstallRequest,
         compositionFile,
         currentCompositionId,
         previewServerClientId,
@@ -617,21 +620,31 @@ const Canvas = ({ canvasContent, size }) => {
                 event.request.clientId !== previewServerClientId) {
                 return;
             }
-            setPendingElementInstallRequests((requests) => [
-                ...requests,
-                event.request,
-            ]);
+            (0, element_install_request_1.enqueueElementInstallRequest)(event.request);
         });
     }, [previewServerClientId, subscribeToEvent]);
     (0, react_1.useEffect)(() => {
         return (0, element_install_request_1.subscribeToElementInstallRequests)((request) => {
-            setPendingElementInstallRequests((requests) => [...requests, request]);
+            const requestWithFrom = request.source.type === 'drag-and-drop' || request.from !== null
+                ? request
+                : {
+                    ...request,
+                    from: (0, import_assets_1.getFromForDrop)({
+                        durationInFrames: request.element.durationInFrames,
+                        from: (0, imperative_state_1.getCurrentFrame)(),
+                        preferCompositionStart: true,
+                    }),
+                };
+            setPendingElementInstallRequests((requests) => [
+                ...requests,
+                requestWithFrom,
+            ]);
         });
     }, []);
     (0, react_1.useEffect)(() => {
         var _a;
         var _b;
-        if (!canInstallElements ||
+        if (!canReceiveElementInstallRequest ||
             compositionFile === null ||
             currentCompositionId === null) {
             return;
@@ -654,7 +667,7 @@ const Canvas = ({ canvasContent, size }) => {
                 type: 'browser-studio-link',
             },
         });
-    }, [canInstallElements, compositionFile, currentCompositionId]);
+    }, [canReceiveElementInstallRequest, compositionFile, currentCompositionId]);
     (0, react_1.useEffect)(() => {
         if (activeElementInstallRequest !== null ||
             pendingElementInstallRequests.length === 0) {
@@ -675,73 +688,82 @@ const Canvas = ({ canvasContent, size }) => {
         const handleInstallRequest = async () => {
             var _a;
             setInstallingElementName(activeElementInstallRequest.element.displayName);
-            const preflight = await (0, element_install_api_1.prepareElementInstall)({
-                compositionFile: activeElementInstallRequest.compositionFile,
-                compositionId: activeElementInstallRequest.compositionId,
-                element: activeElementInstallRequest.element,
-            });
-            if (!preflight.success) {
-                (0, NotificationCenter_1.showNotification)(`Could not review Element installation: ${preflight.reason}`, 4000);
-                return;
-            }
-            if (canceled) {
-                return;
-            }
-            const declaredDependencies = Array.from(new Map(activeElementInstallRequest.element.dependencies.map((dependency) => [
-                dependency.name,
-                dependency,
-            ])).values());
-            const missingPackages = (0, install_required_package_1.getMissingPackages)(declaredDependencies).map((dependency) => dependency.name);
-            const ignoredDependencies = declaredDependencies.filter((dependency) => elementInstallDependencyIgnoreList.includes(dependency.name) &&
-                !missingPackages.includes(dependency.name));
-            const dependenciesToReview = declaredDependencies
-                .filter((dependency) => !ignoredDependencies.includes(dependency))
-                .map((dependency) => dependency.version === null
-                ? dependency.name
-                : `${dependency.name}@${dependency.version}`);
-            const { source } = activeElementInstallRequest;
-            const sourceLabel = source.type === 'studio-protocol'
-                ? source.origin
-                : source.type === 'browser-studio-link'
-                    ? ((_a = source.origin) !== null && _a !== void 0 ? _a : 'Unverified Browser Studio link')
-                    : 'Unverified drag-and-drop payload';
-            const sourceIsUnverified = source.type === 'drag-and-drop' ||
-                (source.type === 'browser-studio-link' && source.origin === null);
-            const accepted = await confirm({
-                title: 'Install Element',
-                message: (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { displayName: activeElementInstallRequest.element.displayName, sourceLabel: sourceLabel, sourceIsUnverified: sourceIsUnverified, compositionId: activeElementInstallRequest.compositionId, filePath: preflight.plan.filePath, overwritesExistingFile: preflight.plan.expectedFileState.exists, dependenciesToReview: dependenciesToReview, missingPackages: missingPackages, sourceCode: activeElementInstallRequest.element.sourceCode, usesBrowserDependencyResolution: (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null })),
-                confirmLabel: 'Install',
-                cancelLabel: 'Cancel',
-            });
-            if (accepted && !canceled) {
-                await (0, import_assets_1.insertElement)({
-                    element: activeElementInstallRequest.element,
-                    compositionFile: activeElementInstallRequest.compositionFile,
-                    compositionId: activeElementInstallRequest.compositionId,
-                    expectedFileState: preflight.plan.expectedFileState,
-                    from: activeElementInstallRequest.from,
-                    position: activeElementInstallRequest.position,
-                    overwriteExisting: preflight.plan.expectedFileState.exists,
+            try {
+                const [newPreflight, currentPreflight] = await Promise.all([
+                    (0, element_install_api_1.prepareElementInstall)({
+                        destination: {
+                            type: 'new-composition',
+                            compositionFile: null,
+                        },
+                        element: activeElementInstallRequest.element,
+                    }),
+                    (0, element_install_api_1.prepareElementInstall)({
+                        destination: {
+                            type: 'current-composition',
+                            compositionFile: activeElementInstallRequest.compositionFile,
+                            compositionId: activeElementInstallRequest.compositionId,
+                        },
+                        element: activeElementInstallRequest.element,
+                    }),
+                ]);
+                if (canceled) {
+                    return;
+                }
+                if (!newPreflight.success) {
+                    (0, NotificationCenter_1.showNotification)(`Could not review Element installation: ${newPreflight.reason}`, 4000);
+                    setInstallingElementName(null);
+                    setActiveElementInstallRequest(null);
+                    return;
+                }
+                const declaredDependencies = Array.from(new Map(activeElementInstallRequest.element.dependencies.map((dependency) => [dependency.name, dependency])).values());
+                const missingPackages = (0, install_required_package_1.getMissingPackages)(declaredDependencies).map((dependency) => dependency.name);
+                const ignoredDependencies = declaredDependencies.filter((dependency) => elementInstallDependencyIgnoreList.includes(dependency.name) &&
+                    !missingPackages.includes(dependency.name));
+                const dependenciesToReview = declaredDependencies
+                    .filter((dependency) => !ignoredDependencies.includes(dependency))
+                    .map((dependency) => dependency.version === null
+                    ? dependency.name
+                    : `${dependency.name}@${dependency.version}`);
+                const { source } = activeElementInstallRequest;
+                const sourceLabel = source.type === 'studio-protocol'
+                    ? source.origin
+                    : source.type === 'browser-studio-link'
+                        ? ((_a = source.origin) !== null && _a !== void 0 ? _a : 'Unverified Browser Studio link')
+                        : 'Unverified drag-and-drop payload';
+                const sourceIsUnverified = source.type === 'drag-and-drop' ||
+                    (source.type === 'browser-studio-link' && source.origin === null);
+                const currentPlan = currentPreflight.success
+                    ? currentPreflight.plan
+                    : null;
+                setSelectedModal(null);
+                setElementInstallReview({
+                    currentPlan,
+                    dependenciesToReview,
+                    missingPackages,
+                    newPlan: newPreflight.plan,
+                    sourceIsUnverified,
+                    sourceLabel,
                 });
             }
-        };
-        handleInstallRequest()
-            .finally(() => {
-            if (canceled) {
-                return;
+            catch (error) {
+                if (canceled) {
+                    return;
+                }
+                (0, NotificationCenter_1.showNotification)(`Could not review Element installation: ${error instanceof Error ? error.message : String(error)}`, 4000);
+                setInstallingElementName(null);
+                setActiveElementInstallRequest(null);
             }
-            setInstallingElementName(null);
-            setActiveElementInstallRequest(null);
-        })
-            .catch((err) => {
-            setTimeout(() => {
-                throw err;
-            }, 0);
-        });
+        };
+        handleInstallRequest();
         return () => {
             canceled = true;
         };
-    }, [activeElementInstallRequest, confirm]);
+    }, [activeElementInstallRequest, setSelectedModal]);
+    const closeElementInstallDialog = (0, react_1.useCallback)(() => {
+        setElementInstallReview(null);
+        setInstallingElementName(null);
+        setActiveElementInstallRequest(null);
+    }, []);
     const onDragOver = (0, react_1.useCallback)((event) => {
         var _a;
         var _b;
@@ -1100,6 +1122,15 @@ const Canvas = ({ canvasContent, size }) => {
         };
     }, [compositionDropPreview, contentDimensions, previewSize, size]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, compositionDropPreviewStyle === null ? null : (jsx_runtime_1.jsx("div", { className: "css-reset", "data-testid": "composition-drop-preview", style: compositionDropPreviewStyle })), isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { canCreateGuides: canvasContent.type === 'composition', contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef }))] }));
+            jsx_runtime_1.jsxs("div", { ref: canvas_ref_1.canvasRef, style: getContainerStyle(editorZoomGestures), children: [size ? (jsx_runtime_1.jsx(Preview_1.VideoPreview, { canvasContent: canvasContent, contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, onRetryAssetMetadata: fetchMetadata })) : null, compositionDropPreviewStyle === null ? null : (jsx_runtime_1.jsx("div", { className: "css-reset", "data-testid": "composition-drop-preview", style: compositionDropPreviewStyle })), isFit ? null : (jsx_runtime_1.jsx("div", { style: resetZoom, className: "css-reset", children: jsx_runtime_1.jsx(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) })), editorShowGuides && canvasContent.type === 'composition' && (jsx_runtime_1.jsx(EditorGuides_1.default, { canvasSize: size, contentDimensions: contentDimensions, assetMetadata: assetResolution }))] }), areRulersVisible && (jsx_runtime_1.jsx(EditorRuler_1.EditorRulers, { canCreateGuides: canvasContent.type === 'composition', contentDimensions: contentDimensions, canvasSize: size, assetMetadata: assetResolution, containerRef: canvas_ref_1.canvasRef })), activeElementInstallRequest === null ||
+                elementInstallReview === null ? null : (jsx_runtime_1.jsx(ElementInstallConfirmation_1.ElementInstallConfirmation, { currentCompositionMetadata: config === null ||
+                    currentCompositionId !== activeElementInstallRequest.compositionId
+                    ? null
+                    : {
+                        durationInFrames: config.durationInFrames,
+                        fps: config.fps,
+                        height: config.height,
+                        width: config.width,
+                    }, currentPlan: elementInstallReview.currentPlan, dependenciesToReview: elementInstallReview.dependenciesToReview, missingPackages: elementInstallReview.missingPackages, newPlan: elementInstallReview.newPlan, onClose: closeElementInstallDialog, request: activeElementInstallRequest, sourceIsUnverified: elementInstallReview.sourceIsUnverified, sourceLabel: elementInstallReview.sourceLabel, usesBrowserDependencyResolution: (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null }))] }));
 };
 exports.Canvas = Canvas;

package/dist/components/CanvasOrLoading.js

@@ -47,7 +47,7 @@ const CanvasOrLoading = ({ size }) => {
         });
     }, [resolved, setZoom]);
     if (renderError) {
-        return (jsx_runtime_1.jsx(ErrorLoading, { error: renderError, calculateMetadataContext: false }));
+        return (jsx_runtime_1.jsx(ErrorLoading, { error: renderError, calculateMetadataContext: false, onRetry: null }));
     }
     if (!canvasContent) {
         if (compositionListState !== 'ready') {
@@ -71,7 +71,10 @@ const CanvasOrLoading = ({ size }) => {
         return (jsx_runtime_1.jsx("div", { style: container, className: "css-reset", children: jsx_runtime_1.jsx(RunningCalculateMetadata_1.RunningCalculateMetadata, {}) }));
     }
     if (resolved.type === 'error') {
-        return jsx_runtime_1.jsx(ErrorLoading, { error: resolved.error, calculateMetadataContext: true });
+        return (jsx_runtime_1.jsx(ErrorLoading, { error: resolved.error, calculateMetadataContext: true, onRetry: () => {
+                var _a;
+                return (_a = remotion_1.Internals.resolveCompositionsRef.current) === null || _a === void 0 ? void 0 : _a.reloadCurrentlySelectedComposition();
+            } }));
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(FramePersistor_1.FramePersistor, {}),
@@ -86,9 +89,6 @@ const loaderContainer = {
     height: '100%',
     overflowY: 'auto',
 };
-const ErrorLoading = ({ error, calculateMetadataContext }) => {
-    return (jsx_runtime_1.jsx("div", { style: loaderContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: true, error: error, onRetry: () => {
-                var _a;
-                return (_a = remotion_1.Internals.resolveCompositionsRef.current) === null || _a === void 0 ? void 0 : _a.reloadCurrentlySelectedComposition();
-            }, calculateMetadata: calculateMetadataContext }, error.stack) }));
+const ErrorLoading = ({ error, calculateMetadataContext, onRetry }) => {
+    return (jsx_runtime_1.jsx("div", { style: loaderContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: true, error: error, onRetry: onRetry, calculateMetadata: calculateMetadataContext }, error.stack) }));
 };

package/dist/components/CodingAgentButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const CodingAgentButton: React.FC<{
+    readonly label: 'Fix with' | 'Open in';
+    readonly prompt: string;
+    readonly size: 'compact' | 'default';
+    readonly style: React.CSSProperties | null;
+}>;

package/dist/components/CodingAgentButton.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodingAgentButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const AppLaunchButton_1 = require("./AppLaunchButton");
+const CodingAgentIcon_1 = require("./CodingAgentIcon");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const SettingsContext_1 = require("./SettingsContext");
+const use_configure_default_apps_1 = require("./use-configure-default-apps");
+const menuLabel = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '16px',
+};
+const CodingAgentButton = ({ label, prompt, size, style }) => {
+    var _a, _b;
+    const { codingAgentInfo } = (0, SettingsContext_1.useSettings)();
+    const configureDefaultApps = (0, use_configure_default_apps_1.useConfigureDefaultApps)();
+    const installedCodingAgents = (_a = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents) !== null && _a !== void 0 ? _a : [];
+    const defaultCodingAgent = (_b = installedCodingAgents.find((agent) => agent.id === (codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.defaultCodingAgent))) !== null && _b !== void 0 ? _b : installedCodingAgents[0];
+    const alternativeCodingAgents = installedCodingAgents.filter((agent) => agent.id !== (defaultCodingAgent === null || defaultCodingAgent === void 0 ? void 0 : defaultCodingAgent.id));
+    const openWithCodingAgent = (0, react_1.useCallback)(async (codingAgentId, codingAgentName) => {
+        try {
+            const response = await (0, open_in_editor_1.openInCodingAgent)(codingAgentId, codingAgentId === 'copilot' ? null : prompt);
+            if (!response.success) {
+                (0, NotificationCenter_1.showNotification)(`Could not open ${codingAgentName}`, 2000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        }
+    }, [prompt]);
+    const agentMenuItems = (0, react_1.useMemo)(() => {
+        return alternativeCodingAgents.map((codingAgent) => ({
+            id: `open-in-${codingAgent.id}`,
+            keyHint: null,
+            label: jsx_runtime_1.jsx("span", { style: menuLabel, children: codingAgent.name }),
+            leftItem: jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { codingAgentId: codingAgent.id, size: 18 }),
+            onClick: () => {
+                openWithCodingAgent(codingAgent.id, codingAgent.nameWithType).catch(() => undefined);
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: `coding-agent-${codingAgent.id}`,
+        }));
+    }, [alternativeCodingAgents, openWithCodingAgent]);
+    if (!defaultCodingAgent) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(AppLaunchButton_1.AppLaunchButton, { actionButtonId: null, ariaLabel: `${label} ${defaultCodingAgent.nameWithType}`, disabled: false, menuAriaLabel: `${label} another coding agent`, menuButtonId: null, menuItems: agentMenuItems, onConfigureApps: configureDefaultApps, onClick: () => {
+            openWithCodingAgent(defaultCodingAgent.id, defaultCodingAgent.nameWithType).catch(() => undefined);
+        }, size: size, style: style, title: `${label} ${defaultCodingAgent.nameWithType}`, children: [
+            jsx_runtime_1.jsx(CodingAgentIcon_1.CodingAgentIcon, { codingAgentId: defaultCodingAgent.id, size: size === 'default' ? 14 : 18 }), label, " ", defaultCodingAgent.name] }));
+};
+exports.CodingAgentButton = CodingAgentButton;

package/dist/components/CompositionContextButton.d.ts

@@ -3,4 +3,5 @@ import type { ComboboxValue } from './NewComposition/ComboBox';
 export declare const CompositionContextButton: React.FC<{
     readonly visible: boolean;
     readonly getItems: () => ComboboxValue[];
+    readonly readOnlyStudio: boolean;
 }>;

package/dist/components/CompositionContextButton.js

@@ -7,7 +7,10 @@ const client_id_1 = require("../helpers/client-id");
 const hoverable_1 = require("../helpers/hoverable");
 const ellipsis_1 = require("../icons/ellipsis");
 const InlineDropdown_1 = require("./InlineDropdown");
-const CompositionContextButton = ({ visible, getItems }) => {
+const revealStyle = {
+    display: 'flex',
+};
+const CompositionContextButton = ({ visible, getItems, readOnlyStudio }) => {
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
@@ -20,9 +23,9 @@ const CompositionContextButton = ({ visible, getItems }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { fill: color, svgProps: iconStyle });
     }, [iconStyle]);
-    if (!visible || connectionStatus !== 'connected') {
+    if (!visible || (connectionStatus !== 'connected' && !readOnlyStudio)) {
         return null;
     }
-    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, getItems: getItems, variant: null, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }));
+    return (jsx_runtime_1.jsx("div", { className: hoverable_1.HOVER_GROUP_REVEAL_CLASS_NAME, style: revealStyle, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, getItems: getItems, variant: null, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }) }));
 };
 exports.CompositionContextButton = CompositionContextButton;

package/dist/components/CompositionSelector.js

@@ -10,7 +10,7 @@ const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
-const sort_by_nonce_history_1 = require("../helpers/sort-by-nonce-history");
+const folders_1 = require("../state/folders");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
 const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
@@ -87,6 +87,7 @@ const getAutoScrollSpeed = ({ clientY, element, }) => {
 const CompositionSelector = () => {
     const { compositions, canvasContent, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { foldersExpanded } = (0, react_1.useContext)(persist_open_folders_1.ExpandedFoldersContext);
+    const { compositionSortOrder, setCompositionSortOrder } = (0, react_1.useContext)(folders_1.FolderContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
@@ -95,23 +96,27 @@ const CompositionSelector = () => {
             connectionStatus,
             readOnlyStudio: window.remotion_isReadOnlyStudio,
             setSelectedModal,
+            compositionSortOrder,
+            setCompositionSortOrder,
         });
-    }, [connectionStatus, setSelectedModal]);
+    }, [
+        compositionSortOrder,
+        connectionStatus,
+        setCompositionSortOrder,
+        setSelectedModal,
+    ]);
     const [rootDragHovered, setRootDragHovered] = (0, react_1.useState)(false);
     const listRef = (0, react_1.useRef)(null);
     const autoScrollAnimation = (0, react_1.useRef)(null);
     const autoScrollSpeed = (0, react_1.useRef)(0);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
-    const sortedCompositions = (0, react_1.useMemo)(() => {
-        return (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(compositions);
-    }, [compositions]);
-    const sortedFolders = (0, react_1.useMemo)(() => {
-        return (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(folders);
-    }, [folders]);
     const items = (0, react_1.useMemo)(() => {
-        return (0, create_folder_tree_1.createFolderTree)(sortedCompositions, sortedFolders, foldersExpanded);
-    }, [sortedCompositions, sortedFolders, foldersExpanded]);
+        const tree = (0, create_folder_tree_1.createFolderTree)(compositions, folders, foldersExpanded);
+        return compositionSortOrder === 'alphabetical'
+            ? (0, create_folder_tree_1.sortFolderTreeAlphabetically)(tree)
+            : tree;
+    }, [compositionSortOrder, compositions, folders, foldersExpanded]);
     const list = (0, react_1.useMemo)(() => {
         return {
             flex: 1,

package/dist/components/CompositionSelectorItem.js

@@ -7,6 +7,7 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
 const noop_1 = require("../helpers/noop");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const folder_1 = require("../icons/folder");
@@ -39,7 +40,6 @@ const itemStyle = {
     borderRadius: 4,
     width: 'calc(100% - 12px)',
     textAlign: 'left',
-    backgroundColor: colors_1.BACKGROUND,
     height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     userSelect: 'none',
 };
@@ -64,13 +64,6 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         }
         return false;
     }, [item, currentComposition]);
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
     const [dragHovered, setDragHovered] = (0, react_1.useState)(false);
     const compositionRowRef = (0, react_1.useRef)(null);
@@ -86,22 +79,22 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         });
     }, [compositionId, selected]);
     const style = (0, react_1.useMemo)(() => {
+        const idleBackground = dragHovered
+            ? colors_1.WHITE_ALPHA_12
+            : selected
+                ? colors_1.WHITE_ALPHA_06
+                : colors_1.TRANSPARENT;
         return {
             ...itemStyle,
-            backgroundColor: dragHovered
-                ? colors_1.WHITE_ALPHA_12
-                : hovered || selected
-                    ? colors_1.WHITE_ALPHA_06
-                    : colors_1.TRANSPARENT,
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground,
+                hoverBackground: dragHovered ? colors_1.WHITE_ALPHA_12 : colors_1.WHITE_ALPHA_06,
+                idleColor: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+                hoverColor: colors_1.WHITE,
+            }),
             paddingLeft: 12 + level * 8,
         };
-    }, [dragHovered, hovered, level, selected]);
-    const label = (0, react_1.useMemo)(() => {
-        return {
-            ...labelStyle,
-            color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
-        };
-    }, [hovered, selected]);
+    }, [dragHovered, level, selected]);
     const onClick = (0, react_1.useCallback)((evt) => {
         evt.preventDefault();
         if (item.type === 'composition') {
@@ -253,13 +246,13 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     }, [clearRootDragHover, item, toggleFolder]);
     if (item.type === 'folder') {
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: "__remotion-composition-selector-item", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, onDragOver: onFolderDragOver, onDragLeave: onFolderDragLeave, onDrop: onFolderDrop, title: item.folderName, role: "button", children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: hovered })
+                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: `__remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, onDragOver: onFolderDragOver, onDragLeave: onFolderDragLeave, onDrop: onFolderDrop, title: item.folderName, role: "button", children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: colors_1.CURRENT_COLOR })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: colors_1.CURRENT_COLOR, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: true, readOnlyStudio: window.remotion_isReadOnlyStudio })
                             ] }) }) }), item.expanded ? (jsx_runtime_1.jsx("div", { onDragOver: onFolderChildListDragOver, onDrop: onFolderDrop, children: item.items.map((childItem) => {
                         return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover }, childItem.key + childItem.type));
                     }) })) : null] }));
     }
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onCompositionDragStart, onDragEnd: onCompositionDragEnd, type: "button", title: item.composition.id, className: "__remotion-composition __remotion-composition-selector-item", "data-compname": item.composition.id, children: [
-                    jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: hovered && !isDragging }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered && !isDragging, composition: item.composition })
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onCompositionDragStart, onDragEnd: onCompositionDragEnd, type: "button", title: item.composition.id, className: `__remotion-composition __remotion-composition-selector-item ${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, "data-compname": item.composition.id, children: [
+                    jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: colors_1.CURRENT_COLOR, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: !isDragging, readOnlyStudio: window.remotion_isReadOnlyStudio }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: !isDragging, composition: item.composition, readOnlyStudio: window.remotion_isReadOnlyStudio })
                 ] }) }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;