@remotion/studio 4.0.518 → 4.0.520

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
+const create_folder_tree_1 = require("../../helpers/create-folder-tree");
 const get_preview_file_type_1 = require("../../helpers/get-preview-file-type");
 const is_composition_still_1 = require("../../helpers/is-composition-still");
 const url_state_1 = require("../../helpers/url-state");
@@ -19,6 +20,7 @@ const use_select_asset_1 = require("../use-select-asset");
 const use_static_files_1 = require("../use-static-files");
 const algolia_search_1 = require("./algolia-search");
 const asset_search_1 = require("./asset-search");
+const composition_search_1 = require("./composition-search");
 const fuzzy_search_1 = require("./fuzzy-search");
 const NoResults_1 = require("./NoResults");
 const QuickSwitcherResult_1 = require("./QuickSwitcherResult");
@@ -27,6 +29,10 @@ const input = {
     width: '100%',
     borderRadius: 4,
 };
+const touchscreenInput = {
+    ...input,
+    fontSize: 16,
+};
 const modeSelector = {
     paddingLeft: 16,
     paddingRight: 16,
@@ -42,6 +48,7 @@ const modeItem = {
     padding: 0,
     fontSize: 13,
     cursor: 'pointer',
+    userSelect: 'none',
 };
 const modeInactive = {
     ...modeItem,
@@ -103,7 +110,9 @@ const mapModeToQuery = (mode) => {
     throw new Error('no mode' + mode);
 };
 const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio, assetSelection, compositionSelection, }) => {
-    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    var _a;
+    var _b;
+    const { compositions, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const [state, setState] = (0, react_1.useState)(() => {
         return {
@@ -126,6 +135,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         });
     }, [assetSelection, compositionSelection, initialMode, invocationTimestamp]);
     const inputRef = (0, react_1.useRef)(null);
+    const isTouchscreen = navigator.maxTouchPoints > 0;
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const closeMenu = (0, react_1.useCallback)(() => undefined, []);
@@ -195,37 +205,45 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
                 ...assetResults,
             ];
         }
-        return (0, fuzzy_search_1.fuzzySearch)(actualQuery, compositions
-            .filter((c) => c.id !== (compositionSelection === null || compositionSelection === void 0 ? void 0 : compositionSelection.excludeCompositionId))
-            .map((c) => {
+        const tree = (0, create_folder_tree_1.createFolderTree)(compositions.filter((composition) => composition.id !== (compositionSelection === null || compositionSelection === void 0 ? void 0 : compositionSelection.excludeCompositionId)), folders, {});
+        return (0, composition_search_1.searchCompositionTree)({ items: tree, query: actualQuery }).map((result) => {
+            if (result.type === 'folder') {
+                return result;
+            }
+            const { composition } = result;
             return {
-                id: 'composition-' + c.id,
-                title: c.id,
+                id: 'composition-' + composition.id,
+                title: composition.id,
                 type: 'composition',
+                composition,
+                level: result.level,
                 onSelected: () => {
                     var _a;
                     if (compositionSelection !== null) {
-                        compositionSelection.onSelected(c);
+                        compositionSelection.onSelected(composition);
                         setSelectedModal(null);
                         return;
                     }
-                    selectComposition(c, true);
+                    selectComposition(composition, true);
                     setSelectedModal(null);
-                    const selector = `.__remotion-composition[data-compname="${c.id}"]`;
-                    (_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.expandComposition(c.id);
+                    const selector = `.__remotion-composition[data-compname="${composition.id}"]`;
+                    (_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.expandComposition(composition.id);
                     waitForElm(selector).then(() => {
                         var _a;
                         (_a = document
                             .querySelector(selector)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'center' });
                     });
                 },
-                compositionType: (0, is_composition_still_1.isCompositionStill)(c) ? 'still' : 'composition',
+                compositionType: (0, is_composition_still_1.isCompositionStill)(composition)
+                    ? 'still'
+                    : 'composition',
             };
-        }));
+        });
     }, [
         mode,
         actualQuery,
         compositions,
+        folders,
         menuActions,
         docResults,
         assetSearch,
@@ -313,40 +331,44 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
     const onTextChange = (0, react_1.useCallback)((e) => {
         setState({ query: e.target.value, selectedIndex: 0 });
     }, []);
-    const selectedIndexRounded = (0, shared_1.loopIndex)(state.selectedIndex, resultsArray.length);
-    const onActionsSelected = (0, react_1.useCallback)(() => {
+    const selectableResults = resultsArray.filter(QuickSwitcherResult_1.isQuickSwitcherResultSelectable);
+    const selectedIndexRounded = (0, shared_1.loopIndex)(state.selectedIndex, selectableResults.length);
+    const selectedResultId = (_b = (_a = selectableResults[selectedIndexRounded]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null;
+    const focusInput = (0, react_1.useCallback)(() => {
         var _a;
+        if (!isTouchscreen) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [isTouchscreen]);
+    const onActionsSelected = (0, react_1.useCallback)(() => {
         setState((s) => ({
             query: `> ${stripQuery(s.query)}`,
             selectedIndex: 0,
         }));
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
+        focusInput();
+    }, [focusInput]);
     const onCompositionsSelected = (0, react_1.useCallback)(() => {
-        var _a;
         setState((s) => ({
             query: stripQuery(s.query),
             selectedIndex: 0,
         }));
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
+        focusInput();
+    }, [focusInput]);
     const onAssetsSelected = (0, react_1.useCallback)(() => {
-        var _a;
         setState((s) => ({
             query: `$ ${stripQuery(s.query)}`,
             selectedIndex: 0,
         }));
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
+        focusInput();
+    }, [focusInput]);
     const onDocSearchSelected = (0, react_1.useCallback)(() => {
-        var _a;
         setState((s) => ({
             query: `? ${stripQuery(s.query)}`,
             selectedIndex: 0,
         }));
         setDocResults({ type: 'initial' });
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
+        focusInput();
+    }, [focusInput]);
     const showSearchLoadingState = mode === 'docs' && docResults.type === 'loading';
     const showEmptyDocSearch = mode === 'docs' && actualQuery.trim() === '';
     const placeholder = mode === 'assets'
@@ -360,9 +382,9 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
                     jsx_runtime_1.jsx("button", { onClick: onCompositionsSelected, style: mode === 'compositions' ? modeActive : modeInactive, type: "button", children: "Compositions" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onAssetsSelected, style: mode === 'assets' ? modeActive : modeInactive, type: "button", children: "Assets" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onActionsSelected, style: mode === 'commands' ? modeActive : modeInactive, type: "button", children: "Actions" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("button", { onClick: onDocSearchSelected, style: mode === 'docs' ? modeActive : modeInactive, type: "button", children: "Documentation" })
                 ] })), jsx_runtime_1.jsx("div", { style: assetSelection === null && compositionSelection === null
                     ? content
-                    : contentWithoutModeSelector, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: input, autoFocus: true, status: "ok", value: state.query, onChange: onTextChange, placeholder: placeholder, rightAlign: false }) }), jsx_runtime_1.jsx("div", { style: results, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: showEmptyDocSearch ||
-                    showSearchLoadingState ? null : resultsArray.length === 0 ? (jsx_runtime_1.jsx(NoResults_1.QuickSwitcherNoResults, { mode: mode, query: actualQuery })) : (resultsArray.map((result, i) => {
-                    return (jsx_runtime_1.jsx(QuickSwitcherResult_1.QuickSwitcherResult, { selected: selectedIndexRounded === i, result: result }, result.id));
+                    : contentWithoutModeSelector, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: isTouchscreen ? touchscreenInput : input, autoFocus: !isTouchscreen, status: "ok", value: state.query, onChange: onTextChange, placeholder: placeholder, rightAlign: false }) }), jsx_runtime_1.jsx("div", { style: results, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: showEmptyDocSearch ||
+                    showSearchLoadingState ? null : resultsArray.length === 0 ? (jsx_runtime_1.jsx(NoResults_1.QuickSwitcherNoResults, { mode: mode, query: actualQuery })) : (resultsArray.map((result) => {
+                    return (jsx_runtime_1.jsx(QuickSwitcherResult_1.QuickSwitcherResult, { selected: selectedResultId === result.id, result: result }, result.id));
                 })) })
         ] }));
 };

package/dist/components/QuickSwitcher/QuickSwitcherResult.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
+import type { _InternalTypes } from 'remotion';
 import type { AssetFileType } from '../../helpers/get-preview-file-type';
 type QuickSwitcherResultDetail = {
     type: 'asset';
     fileType: AssetFileType;
 } | {
     type: 'composition';
+    composition: _InternalTypes['AnyComposition'];
     compositionType: 'composition' | 'still';
+    level: number;
 } | {
     type: 'menu-item';
 } | {
@@ -15,7 +18,17 @@ type QuickSwitcherResultDetail = {
     titleLine: string;
     subtitleLine: string;
 };
-export type TQuickSwitcherResult = {
+export type TQuickSwitcherResult = ({
+    title: string;
+    id: string;
+    onSelected: () => void;
+} & QuickSwitcherResultDetail) | {
+    title: string;
+    id: string;
+    type: 'folder';
+    level: number;
+};
+export declare const isQuickSwitcherResultSelectable: (result: TQuickSwitcherResult) => result is {
     title: string;
     id: string;
     onSelected: () => void;

package/dist/components/QuickSwitcher/QuickSwitcherResult.js

@@ -1,16 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuickSwitcherResult = void 0;
+exports.QuickSwitcherResult = exports.isQuickSwitcherResultSelectable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const noop_1 = require("../../helpers/noop");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const folder_1 = require("../../icons/folder");
 const still_1 = require("../../icons/still");
 const upload_1 = require("../../icons/upload");
 const video_1 = require("../../icons/video");
+const modals_1 = require("../../state/modals");
 const AssetFileIcon_1 = require("../AssetFileIcon");
+const composition_menu_items_1 = require("../composition-menu-items");
+const ContextMenu_1 = require("../ContextMenu");
 const layout_1 = require("../layout");
+const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
+const use_default_editor_info_1 = require("../use-default-editor-info");
 const shared_1 = require("./shared");
+const isQuickSwitcherResultSelectable = (result) => {
+    return result.type !== 'folder';
+};
+exports.isQuickSwitcherResultSelectable = isQuickSwitcherResultSelectable;
 const container = {
     paddingLeft: 16,
     paddingRight: 16,
@@ -48,10 +60,44 @@ const labelContainer = {
     paddingBottom: 5,
 };
 const QuickSwitcherResult = ({ result, selected }) => {
+    var _a;
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const onSelected = result.type === 'folder' ? null : result.onSelected;
+    const composition = result.type === 'composition' ? result.composition : null;
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
+    const { defaultEditorId, defaultEditorName } = (0, use_default_editor_info_1.useEditorOpening)(connectionStatus === 'connected');
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = composition === null || composition === void 0 ? void 0 : composition.stack) !== null && _a !== void 0 ? _a : null);
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
+        if (composition === null) {
+            return [];
+        }
+        return (0, composition_menu_items_1.getCompositionContextMenuItems)({
+            closeMenu: noop_1.noop,
+            composition,
+            connectionStatus,
+            editorId: defaultEditorId,
+            editorName: defaultEditorName,
+            includeCompositionManagementItems: true,
+            resolvedLocation,
+            setSelectedModal,
+            readOnlyStudio: window.remotion_isReadOnlyStudio,
+        });
+    }, [
+        composition,
+        connectionStatus,
+        defaultEditorId,
+        defaultEditorName,
+        resolvedLocation,
+        setSelectedModal,
+    ]);
     (0, react_1.useEffect)(() => {
+        if (result.type === 'folder') {
+            return;
+        }
         const { current } = ref;
         if (!current) {
             return;
@@ -64,14 +110,14 @@ const QuickSwitcherResult = ({ result, selected }) => {
             current.removeEventListener('mouseenter', onMouseEnter);
             current.removeEventListener('mouseleave', onMouseLeave);
         };
-    }, []);
+    }, [result.type]);
     (0, react_1.useEffect)(() => {
-        if (!selected) {
+        if (!selected || onSelected === null) {
             return;
         }
         const binding = keybindings.registerKeybinding({
             key: 'Enter',
-            callback: result.onSelected,
+            callback: onSelected,
             commandCtrlKey: false,
             event: 'keydown',
             preventDefault: true,
@@ -82,18 +128,23 @@ const QuickSwitcherResult = ({ result, selected }) => {
         return () => {
             binding.unregister();
         };
-    }, [keybindings, result.onSelected, selected]);
+    }, [keybindings, onSelected, selected]);
     (0, shared_1.useScrollIntoViewOnSelected)(ref, selected);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
-            backgroundColor: hovered || selected ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
+            paddingLeft: result.type === 'folder' || result.type === 'composition'
+                ? 16 + result.level * 8
+                : container.paddingLeft,
+            backgroundColor: result.type !== 'folder' && (hovered || selected)
+                ? colors_1.WHITE_ALPHA_06
+                : colors_1.TRANSPARENT,
         };
-    }, [hovered, selected]);
+    }, [hovered, result, selected]);
     const labelStyle = (0, react_1.useMemo)(() => {
         return {
             ...(result.type === 'search-result' ? searchLabel : label),
-            color: result.type === 'search-result'
+            color: result.type === 'search-result' || result.type === 'folder'
                 ? colors_1.LIGHT_TEXT
                 : selected || hovered
                     ? colors_1.WHITE
@@ -101,7 +152,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
             fontSize: shared_1.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE,
         };
     }, [hovered, result.type, selected]);
-    return (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }))) : result.type === 'asset' ? (jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: result.fileType, color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : result.type === 'select-file' ? (jsx_runtime_1.jsx(upload_1.UploadIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: selectFileIconStyle })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    const row = (jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: onSelected !== null && onSelected !== void 0 ? onSelected : undefined, children: [result.type === 'composition' ? (result.compositionType === 'still' ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }))) : result.type === 'folder' ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { color: colors_1.LIGHT_TEXT, style: iconStyle })) : result.type === 'asset' ? (jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: result.fileType, color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : result.type === 'select-file' ? (jsx_runtime_1.jsx(upload_1.UploadIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: selectFileIconStyle })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: result.type === 'search-result' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx("div", { 
                             // eslint-disable-next-line react/no-danger
                             dangerouslySetInnerHTML: {
@@ -113,5 +164,9 @@ const QuickSwitcherResult = ({ result, selected }) => {
                             }, style: labelStyle })
                     ] })) : (jsx_runtime_1.jsx("div", { style: labelStyle, children: result.title })) })
         ] }, result.id));
+    if (composition === null) {
+        return row;
+    }
+    return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.QuickSwitcherResult = QuickSwitcherResult;

package/dist/components/QuickSwitcher/composition-search.d.ts

@@ -0,0 +1,16 @@
+import type { _InternalTypes } from 'remotion';
+import type { CompositionSelectorItemType } from '../CompositionSelectorItem';
+export type CompositionSearchResult = {
+    readonly type: 'folder';
+    readonly id: string;
+    readonly title: string;
+    readonly level: number;
+} | {
+    readonly type: 'composition';
+    readonly composition: _InternalTypes['AnyComposition'];
+    readonly level: number;
+};
+export declare const searchCompositionTree: ({ items, query, }: {
+    readonly items: CompositionSelectorItemType[];
+    readonly query: string;
+}) => CompositionSearchResult[];

package/dist/components/QuickSwitcher/composition-search.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchCompositionTree = void 0;
+const normalizeSearchText = (text) => {
+    return text
+        .trim()
+        .toLowerCase()
+        .replace(/[\s/-]/g, '');
+};
+const getMatchScore = (query, candidate) => {
+    const normalizedCandidate = normalizeSearchText(candidate);
+    if (normalizedCandidate === query) {
+        return 400000 - normalizedCandidate.length;
+    }
+    if (normalizedCandidate.startsWith(query)) {
+        return 300000 - (normalizedCandidate.length - query.length);
+    }
+    const substringIndex = normalizedCandidate.indexOf(query);
+    if (substringIndex !== -1) {
+        return (200000 -
+            substringIndex * 100 -
+            (normalizedCandidate.length - query.length));
+    }
+    let previousIndex = -1;
+    let firstIndex = -1;
+    let gapCount = 0;
+    for (const character of query) {
+        const nextIndex = normalizedCandidate.indexOf(character, previousIndex + 1);
+        if (nextIndex === -1) {
+            return null;
+        }
+        if (firstIndex === -1) {
+            firstIndex = nextIndex;
+        }
+        else {
+            gapCount += nextIndex - previousIndex - 1;
+        }
+        previousIndex = nextIndex;
+    }
+    return (100000 -
+        gapCount * 100 -
+        firstIndex * 10 -
+        (normalizedCandidate.length - query.length));
+};
+const searchCompositionTree = ({ items, query, }) => {
+    const normalizedQuery = normalizeSearchText(query);
+    const filterAndRank = (treeItems, level, inheritedFolderScore) => {
+        const rankedItems = treeItems
+            .map((item, originalIndex) => {
+            if (item.type === 'composition') {
+                const compositionPath = [
+                    item.composition.parentFolderName,
+                    item.composition.folderName,
+                    item.composition.id,
+                ]
+                    .filter(Boolean)
+                    .join('/');
+                const idScore = normalizedQuery === ''
+                    ? 0
+                    : getMatchScore(normalizedQuery, item.composition.id);
+                const compositionPathScore = normalizedQuery === ''
+                    ? 0
+                    : getMatchScore(normalizedQuery, compositionPath);
+                const directScore = Math.max(idScore !== null && idScore !== void 0 ? idScore : -1, compositionPathScore !== null && compositionPathScore !== void 0 ? compositionPathScore : -1);
+                const score = Math.max(directScore, inheritedFolderScore !== null && inheritedFolderScore !== void 0 ? inheritedFolderScore : -1);
+                if (score === -1) {
+                    return null;
+                }
+                return {
+                    result: {
+                        type: 'composition',
+                        composition: item.composition,
+                        level,
+                        score,
+                    },
+                    originalIndex,
+                };
+            }
+            const fullPath = [item.parentName, item.folderName]
+                .filter(Boolean)
+                .join('/');
+            const nameScore = normalizedQuery === ''
+                ? 0
+                : getMatchScore(normalizedQuery, item.folderName);
+            const pathScore = normalizedQuery === '' ? 0 : getMatchScore(normalizedQuery, fullPath);
+            const directFolderScore = Math.max(nameScore !== null && nameScore !== void 0 ? nameScore : -1, pathScore !== null && pathScore !== void 0 ? pathScore : -1);
+            const folderScore = Math.max(directFolderScore === -1 ? -1 : directFolderScore - 1, inheritedFolderScore !== null && inheritedFolderScore !== void 0 ? inheritedFolderScore : -1);
+            const children = filterAndRank(item.items, level + 1, folderScore === -1 ? null : folderScore);
+            if (children.length === 0) {
+                return null;
+            }
+            return {
+                result: {
+                    type: 'folder',
+                    id: `folder-${fullPath}`,
+                    title: item.folderName,
+                    level,
+                    score: Math.max(folderScore, ...children.map((child) => child.score)),
+                    children,
+                },
+                originalIndex,
+            };
+        })
+            .filter((item) => item !== null);
+        if (normalizedQuery !== '') {
+            rankedItems.sort((a, b) => {
+                return (b.result.score - a.result.score || a.originalIndex - b.originalIndex);
+            });
+        }
+        return rankedItems.map((item) => item.result);
+    };
+    const flatten = (rankedItems) => {
+        return rankedItems.flatMap((item) => {
+            if (item.type === 'composition') {
+                return [
+                    {
+                        type: 'composition',
+                        composition: item.composition,
+                        level: item.level,
+                    },
+                ];
+            }
+            return [
+                {
+                    type: 'folder',
+                    id: item.id,
+                    title: item.title,
+                    level: item.level,
+                },
+                ...flatten(item.children),
+            ];
+        });
+    };
+    return flatten(filterAndRank(items, 0, null));
+};
+exports.searchCompositionTree = searchCompositionTree;

package/dist/components/RenderQueue/actions.d.ts

@@ -109,6 +109,7 @@ export declare const applyCodemod: ({ codemod, dryRun, symbolicatedStack, signal
 export declare const removeRenderJob: (job: RenderJob) => Promise<undefined>;
 export declare const cancelRenderJob: (job: RenderJob) => Promise<import("@remotion/studio-shared").CancelRenderResponse>;
 export declare const updateAvailable: (signal: AbortSignal) => Promise<import("@remotion/studio-shared").UpdateAvailableResponse>;
+export declare const getReleaseNotes: (currentVersion: string, latestVersion: string, signal: AbortSignal) => Promise<import("@remotion/studio-shared").GetReleaseNotesResponse>;
 export declare const getProjectInfo: (signal: AbortSignal) => Promise<import("@remotion/studio-shared").ProjectInfoResponse>;
 export declare const callUpdateDefaultPropsApi: (compositionId: string, defaultProps: Record<string, unknown>, enumPaths: EnumPath[]) => Promise<import("@remotion/studio-shared").UpdateDefaultPropsResponse>;
 export declare const applyVisualControlChange: ({ fileName, changes, }: {

package/dist/components/RenderQueue/actions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyVisualControlChange = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
+exports.applyVisualControlChange = exports.callUpdateDefaultPropsApi = exports.getProjectInfo = exports.getReleaseNotes = exports.updateAvailable = exports.cancelRenderJob = exports.removeRenderJob = exports.applyCodemod = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addSequenceRenderJob = exports.addStillRenderJob = void 0;
 const no_react_1 = require("remotion/no-react");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const call_api_1 = require("../call-api");
@@ -166,6 +166,10 @@ const updateAvailable = (signal) => {
     return (0, call_api_1.callApi)('/api/update-available', {}, signal);
 };
 exports.updateAvailable = updateAvailable;
+const getReleaseNotes = (currentVersion, latestVersion, signal) => {
+    return (0, call_api_1.callApi)('/api/release-notes', { currentVersion, latestVersion }, signal);
+};
+exports.getReleaseNotes = getReleaseNotes;
 const getProjectInfo = (signal) => {
     return (0, call_api_1.callApi)('/api/project-info', {}, signal);
 };

package/dist/components/ResetZoomButton.js

@@ -3,11 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResetZoomButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Button_1 = require("./Button");
+const colors_1 = require("../helpers/colors");
+const button = {
+    appearance: 'none',
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    border: `1px solid ${colors_1.BLACK_ALPHA_60}`,
+    borderRadius: 4,
+    color: colors_1.WHITE,
+    flexDirection: 'row',
+    fontFamily: 'inherit',
+    fontSize: 14,
+};
+const buttonContainer = {
+    cursor: 'pointer',
+    fontSize: 14,
+    padding: 10,
+};
 const ResetZoomButton = ({ onClick }) => {
     const onPointerDown = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
     }, []);
-    return (jsx_runtime_1.jsx(Button_1.Button, { onClick: onClick, onPointerDown: onPointerDown, children: "Reset zoom" }));
+    return (jsx_runtime_1.jsx("button", { style: button, type: "button", onClick: onClick, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("div", { className: "css-reset", style: buttonContainer, children: "Reset zoom" }) }));
 };
 exports.ResetZoomButton = ResetZoomButton;

package/dist/components/SelectedOutlineCanvasRotation.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
+const is_mac_1 = require("../helpers/is-mac");
 const pointer_session_1 = require("../helpers/pointer-session");
 const editor_snapping_1 = require("../state/editor-snapping");
 const canvas_rotation_cursor_1 = require("./canvas-rotation-cursor");
@@ -57,9 +58,34 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
+    const [commandKeyPressed, setCommandKeyPressed] = react_1.default.useState(false);
     const cursor = transform3DMode
         ? canvas_rotation_cursor_1.canvasRotationCursor
         : canvas2DRotationCursor;
+    react_1.default.useEffect(() => {
+        const commandKey = is_mac_1.isMac ? 'Meta' : 'Control';
+        const onKeyDown = (event) => {
+            if (event.key === commandKey) {
+                setCommandKeyPressed(true);
+            }
+        };
+        const onKeyUp = (event) => {
+            if (event.key === commandKey) {
+                setCommandKeyPressed(false);
+            }
+        };
+        const onBlur = () => {
+            setCommandKeyPressed(false);
+        };
+        window.addEventListener('keydown', onKeyDown);
+        window.addEventListener('keyup', onKeyUp);
+        window.addEventListener('blur', onBlur);
+        return () => {
+            window.removeEventListener('keydown', onKeyDown);
+            window.removeEventListener('keyup', onKeyUp);
+            window.removeEventListener('blur', onBlur);
+        };
+    }, []);
     const onPointerDown = react_1.default.useCallback((event) => {
         var _a, _b;
         if (event.button !== 0) {
@@ -241,6 +267,6 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
         setDragOverrides,
         setPropStatuses,
     ]);
-    return (jsx_runtime_1.jsx("polygon", { points: outline.points.map((point) => `${point.x},${point.y}`).join(' '), fill: colors_1.TRANSPARENT, pointerEvents: "all", cursor: cursor, onPointerDown: onPointerDown, "data-remotion-studio-canvas-rotation": true }));
+    return (jsx_runtime_1.jsx("polygon", { points: outline.points.map((point) => `${point.x},${point.y}`).join(' '), fill: colors_1.TRANSPARENT, pointerEvents: commandKeyPressed ? 'none' : 'all', cursor: commandKeyPressed ? 'default' : cursor, onPointerDown: onPointerDown, "data-remotion-studio-canvas-rotation": true }));
 };
 exports.SelectedOutlineCanvasRotation = SelectedOutlineCanvasRotation;