@remotion/studio 4.0.499 → 4.0.501

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -5,7 +5,9 @@ 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 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");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const use_menu_structure_1 = require("../../helpers/use-menu-structure");
 const modals_1 = require("../../state/modals");
@@ -14,14 +16,18 @@ const KeyboardShortcutsExplainer_1 = require("../KeyboardShortcutsExplainer");
 const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const RemInput_1 = require("../NewComposition/RemInput");
+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 AlgoliaCredit_1 = require("./AlgoliaCredit");
+const asset_search_1 = require("./asset-search");
 const fuzzy_search_1 = require("./fuzzy-search");
 const NoResults_1 = require("./NoResults");
 const QuickSwitcherResult_1 = require("./QuickSwitcherResult");
 const shared_1 = require("./shared");
 const input = {
     width: '100%',
+    borderRadius: 4,
 };
 const modeSelector = {
     paddingLeft: 16,
@@ -57,8 +63,12 @@ const content = {
     flexDirection: 'row',
     alignItems: 'center',
 };
+const contentWithoutModeSelector = {
+    ...content,
+    paddingTop: 16,
+};
 const stripQuery = (query) => {
-    if (query.startsWith('>') || query.startsWith('?')) {
+    if (query.startsWith('$') || query.startsWith('>') || query.startsWith('?')) {
         return query.substring(1).trim();
     }
     return query.trim();
@@ -68,9 +78,14 @@ const mapQueryToMode = (query) => {
         ? 'commands'
         : query.startsWith('?')
             ? 'docs'
-            : 'compositions';
+            : query.startsWith('$')
+                ? 'assets'
+                : 'compositions';
 };
 const mapModeToQuery = (mode) => {
+    if (mode === 'assets') {
+        return '$ ';
+    }
     if (mode === 'commands') {
         return '> ';
     }
@@ -82,28 +97,42 @@ const mapModeToQuery = (mode) => {
     }
     throw new Error('no mode' + mode);
 };
-const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }) => {
+const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio, assetSelection, compositionSelection, }) => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const [state, setState] = (0, react_1.useState)(() => {
         return {
-            query: mapModeToQuery(initialMode),
+            query: assetSelection === null
+                ? compositionSelection === null
+                    ? mapModeToQuery(initialMode)
+                    : ''
+                : assetSelection.initialQuery,
             selectedIndex: 0,
         };
     });
     (0, react_1.useEffect)(() => {
         setState({
-            query: mapModeToQuery(initialMode),
+            query: assetSelection === null
+                ? compositionSelection === null
+                    ? mapModeToQuery(initialMode)
+                    : ''
+                : assetSelection.initialQuery,
             selectedIndex: 0,
         });
-    }, [initialMode, invocationTimestamp]);
+    }, [assetSelection, compositionSelection, initialMode, invocationTimestamp]);
     const inputRef = (0, react_1.useRef)(null);
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
+    const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const closeMenu = (0, react_1.useCallback)(() => undefined, []);
     const actions = (0, use_menu_structure_1.useMenuStructure)(closeMenu, readOnlyStudio);
     const [docResults, setDocResults] = (0, react_1.useState)({ type: 'initial' });
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const mode = mapQueryToMode(state.query);
+    const mode = assetSelection !== null
+        ? 'assets'
+        : compositionSelection !== null
+            ? 'compositions'
+            : mapQueryToMode(state.query);
     const actualQuery = (0, react_1.useMemo)(() => {
         return stripQuery(state.query);
     }, [state.query]);
@@ -113,6 +142,12 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         }
         return (0, use_menu_structure_1.makeSearchResults)(actions, setSelectedModal);
     }, [actions, mode, setSelectedModal]);
+    const assetSearch = (0, react_1.useMemo)(() => {
+        return (0, asset_search_1.filterAssetsByType)({
+            assets: staticFiles,
+            query: actualQuery,
+        });
+    }, [actualQuery, staticFiles]);
     const resultsArray = (0, react_1.useMemo)(() => {
         if (mode === 'commands') {
             return (0, fuzzy_search_1.fuzzySearch)(actualQuery, menuActions);
@@ -120,13 +155,40 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         if (mode === 'docs' && docResults.type === 'results') {
             return docResults.results;
         }
-        return (0, fuzzy_search_1.fuzzySearch)(actualQuery, compositions.map((c) => {
+        if (mode === 'assets') {
+            return (0, fuzzy_search_1.fuzzySearch)(assetSearch.query, assetSearch.assets.map((asset) => {
+                return {
+                    id: 'asset-' + asset.name,
+                    title: asset.name,
+                    type: 'asset',
+                    fileType: (0, get_preview_file_type_1.getPreviewFileType)(asset.name),
+                    onSelected: () => {
+                        if (assetSelection !== null) {
+                            assetSelection.onSelected(asset);
+                        }
+                        else {
+                            selectAsset(asset.name);
+                            (0, url_state_1.pushUrl)(`/assets/${asset.name}`);
+                        }
+                        setSelectedModal(null);
+                    },
+                };
+            }));
+        }
+        return (0, fuzzy_search_1.fuzzySearch)(actualQuery, compositions
+            .filter((c) => c.id !== (compositionSelection === null || compositionSelection === void 0 ? void 0 : compositionSelection.excludeCompositionId))
+            .map((c) => {
             return {
                 id: 'composition-' + c.id,
                 title: c.id,
                 type: 'composition',
                 onSelected: () => {
                     var _a;
+                    if (compositionSelection !== null) {
+                        compositionSelection.onSelected(c);
+                        setSelectedModal(null);
+                        return;
+                    }
                     selectComposition(c, true);
                     setSelectedModal(null);
                     const selector = `.__remotion-composition[data-compname="${c.id}"]`;
@@ -146,6 +208,10 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         compositions,
         menuActions,
         docResults,
+        assetSearch,
+        assetSelection,
+        compositionSelection,
+        selectAsset,
         selectComposition,
         setSelectedModal,
     ]);
@@ -244,6 +310,14 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         }));
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
+    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();
+    }, []);
     const onDocSearchSelected = (0, react_1.useCallback)(() => {
         var _a;
         setState((s) => ({
@@ -255,6 +329,13 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
     }, []);
     const showKeyboardShortcuts = mode === 'docs' && actualQuery.trim() === '';
     const showSearchLoadingState = mode === 'docs' && docResults.type === 'loading';
+    const placeholder = mode === 'assets'
+        ? 'Search assets...'
+        : mode === 'commands'
+            ? 'Search actions...'
+            : mode === 'docs'
+                ? 'Search documentation...'
+                : 'Search compositions...';
     const container = (0, react_1.useMemo)(() => {
         return {
             width: showKeyboardShortcuts ? 800 : 500,
@@ -272,11 +353,12 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
             height: 300,
         };
     }, [showKeyboardShortcuts]);
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsxs("div", { style: modeSelector, children: [
-                    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: 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.jsxs("div", { style: content, children: [
-                    jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: input, autoFocus: true, status: "ok", value: state.query, onChange: onTextChange, placeholder: "Search compositions...", rightAlign: false }), showKeyboardShortcuts ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [assetSelection === null && compositionSelection === null && (jsx_runtime_1.jsxs("div", { style: modeSelector, children: [
+                    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.jsxs("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 }), showKeyboardShortcuts ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }),
                             " ",
                             jsx_runtime_1.jsx(AlgoliaCredit_1.AlgoliaCredit, {})

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

@@ -1,5 +1,9 @@
 import React from 'react';
+import type { AssetFileType } from '../../helpers/get-preview-file-type';
 type QuickSwitcherResultDetail = {
+    type: 'asset';
+    fileType: AssetFileType;
+} | {
     type: 'composition';
     compositionType: 'composition' | 'still';
 } | {

package/dist/components/QuickSwitcher/QuickSwitcherResult.js

@@ -7,6 +7,7 @@ const colors_1 = require("../../helpers/colors");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const still_1 = require("../../icons/still");
 const video_1 = require("../../icons/video");
+const AssetFileIcon_1 = require("../AssetFileIcon");
 const layout_1 = require("../layout");
 const shared_1 = require("./shared");
 const container = {
@@ -15,7 +16,11 @@ const container = {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    cursor: 'pointer',
+    cursor: 'default',
+    marginBottom: 1,
+    marginLeft: 4,
+    marginRight: 4,
+    borderRadius: 4,
 };
 const label = {
     whiteSpace: 'nowrap',
@@ -26,8 +31,9 @@ const searchLabel = {
     lineHeight: 1.25,
 };
 const iconStyle = {
-    width: 14,
-    height: 14,
+    width: 18,
+    height: 18,
+    flexShrink: 0,
 };
 const labelContainer = {
     overflow: 'hidden',
@@ -75,10 +81,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
-            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
-                hovered,
-                selected,
-            }),
+            backgroundColor: hovered || selected ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
         };
     }, [hovered, selected]);
     const labelStyle = (0, react_1.useMemo)(() => {
@@ -92,7 +95,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 ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }))) : 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: [
+    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 })) : 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: {

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

@@ -0,0 +1,9 @@
+import type { StaticFile } from '../../api/get-static-files';
+export declare const filterAssetsByType: ({ assets, query, }: {
+    readonly assets: StaticFile[];
+    readonly query: string;
+}) => {
+    readonly assets: StaticFile[];
+    readonly query: string;
+};
+export declare const getAssetSearchQueryForComponent: (componentIdentity: string | null) => string;

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAssetSearchQueryForComponent = exports.filterAssetsByType = void 0;
+const get_preview_file_type_1 = require("../../helpers/get-preview-file-type");
+const typeFilterRegex = /(^|\s)type:([^\s]+)/gi;
+const filterAssetsByType = ({ assets, query, }) => {
+    const typeFilters = [];
+    const queryWithoutTypeFilters = query
+        .replace(typeFilterRegex, (_match, whitespace, type) => {
+        typeFilters.push(type.toLowerCase());
+        return whitespace;
+    })
+        .replace(/\s+/g, ' ')
+        .trim();
+    if (typeFilters.length === 0) {
+        return {
+            assets,
+            query: queryWithoutTypeFilters,
+        };
+    }
+    return {
+        assets: assets.filter((asset) => {
+            return typeFilters.includes((0, get_preview_file_type_1.getPreviewFileType)(asset.name));
+        }),
+        query: queryWithoutTypeFilters,
+    };
+};
+exports.filterAssetsByType = filterAssetsByType;
+const componentAssetTypes = {
+    'dev.remotion.media.Audio': 'audio',
+    'dev.remotion.media.Video': 'video',
+    'dev.remotion.remotion.AnimatedImage': 'image',
+    'dev.remotion.remotion.Img': 'image',
+};
+const getAssetSearchQueryForComponent = (componentIdentity) => {
+    if (componentIdentity === null) {
+        return '';
+    }
+    const assetType = componentAssetTypes[componentIdentity];
+    return assetType ? `type:${assetType} ` : '';
+};
+exports.getAssetSearchQueryForComponent = getAssetSearchQueryForComponent;

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

@@ -1,2 +1 @@
-export declare const downloadBlob: (blob: Blob, filename: string) => void;
 export declare const ClientRenderQueueProcessor: React.FC;

package/dist/components/RenderQueue/ClientRenderQueueProcessor.js

@@ -1,22 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClientRenderQueueProcessor = exports.downloadBlob = void 0;
+exports.ClientRenderQueueProcessor = void 0;
 const web_renderer_1 = require("@remotion/web-renderer");
 const react_1 = require("react");
 const save_render_output_1 = require("../../api/save-render-output");
+const download_blob_1 = require("../../helpers/download-blob");
 const context_1 = require("./context");
-const downloadBlob = (blob, filename) => {
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    const cleanFilename = filename.includes('/')
-        ? filename.substring(filename.lastIndexOf('/') + 1)
-        : filename;
-    a.download = cleanFilename;
-    a.click();
-    URL.revokeObjectURL(url);
-};
-exports.downloadBlob = downloadBlob;
 const ClientRenderQueueProcessor = () => {
     const { getAbortController, getCompositionForJob, updateClientJobProgress, markClientJobSaving, markClientJobDone, markClientJobFailed, markClientJobCancelled, setProcessJobCallback, } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const processStillJob = (0, react_1.useCallback)(async (job, signal) => {
@@ -126,7 +115,7 @@ const ClientRenderQueueProcessor = () => {
             markClientJobSaving(job.id);
             const getBlob = () => Promise.resolve(blob);
             const downloadAndFinish = () => {
-                (0, exports.downloadBlob)(blob, job.outName);
+                (0, download_blob_1.downloadBlob)(blob, job.outName);
                 markClientJobDone(job.id, metadata, getBlob);
             };
             if (window.remotion_isReadOnlyStudio) {

package/dist/components/RenderQueue/RenderQueueDownloadItem.js

@@ -4,9 +4,9 @@ exports.RenderQueueDownloadItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
+const download_blob_1 = require("../../helpers/download-blob");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const ClientRenderQueueProcessor_1 = require("./ClientRenderQueueProcessor");
 const RenderQueueDownloadItem = ({ job }) => {
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
@@ -16,7 +16,7 @@ const RenderQueueDownloadItem = ({ job }) => {
         job
             .getBlob()
             .then((blob) => {
-            (0, ClientRenderQueueProcessor_1.downloadBlob)(blob, job.outName);
+            (0, download_blob_1.downloadBlob)(blob, job.outName);
         })
             .catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not download file: ${err.message}`, 2000);

package/dist/components/SelectedOutlineCropControls.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SelectedOutline } from './selected-outline-geometry';
+import { type SelectedOutlineTarget } from './selected-outline-types';
+export declare const SelectedOutlineCropControls: React.FC<{
+    readonly outline: SelectedOutline;
+    readonly onDraggingChange: (dragging: boolean) => void;
+    readonly target: SelectedOutlineTarget | undefined;
+}>;