@remotion/studio 4.0.500 → 4.0.501

package/dist/components/InspectorSequenceSection.js

@@ -3,18 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InspectorSequenceSection = exports.hasSequenceControls = exports.getInspectorSelectableItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const timeline_layout_1 = require("../helpers/timeline-layout");
+const border_radius_1 = require("../icons/border-radius");
+const fullscreen_1 = require("../icons/fullscreen");
 const plus_1 = require("../icons/plus");
 const modals_1 = require("../state/modals");
 const AssetFileIcon_1 = require("./AssetFileIcon");
 const InlineAction_1 = require("./InlineAction");
+const InlineCaptionInspector_1 = require("./InlineCaptionInspector");
 const common_1 = require("./InspectorPanel/common");
+const inspector_section_collapse_1 = require("./InspectorPanel/inspector-section-collapse");
 const styles_1 = require("./InspectorPanel/styles");
 const asset_search_1 = require("./QuickSwitcher/asset-search");
+const border_radius_representation_1 = require("./Timeline/border-radius-representation");
+const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
 const TimelineAssetField_1 = require("./Timeline/TimelineAssetField");
 const TimelineExpandedRow_1 = require("./Timeline/TimelineExpandedRow");
@@ -44,6 +51,43 @@ const plusIcon = {
     width: 15,
     height: 15,
 };
+const borderRadiusToggleIcon = {
+    flexShrink: 0,
+    height: 15,
+    width: 15,
+};
+const collapsibleSectionHeaderButton = {
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    border: 'none',
+    borderRadius: 3,
+    cursor: 'default',
+    display: 'block',
+    flex: 1,
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    fontSize: 12,
+    fontWeight: 'bold',
+    lineHeight: '16px',
+    margin: 0,
+    minWidth: 0,
+    overflow: 'hidden',
+    padding: '4px 0',
+    textAlign: 'left',
+    textOverflow: 'ellipsis',
+    userSelect: 'none',
+    whiteSpace: 'nowrap',
+};
+const CollapsibleInspectorSectionHeader = ({ action, expanded, label, onToggle }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...collapsibleSectionHeaderButton,
+            color: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+        };
+    }, [hovered]);
+    return (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
+            jsx_runtime_1.jsx("button", { type: "button", "aria-expanded": expanded, "aria-label": `${expanded ? 'Collapse' : 'Expand'} ${label}`, className: "__remotion-inspector-section-title", onClick: onToggle, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), style: style, children: label }), action] }));
+};
 const assetSelectorIcon = {
     flexShrink: 0,
     height: 18,
@@ -88,6 +132,7 @@ const isEffectsRoot = (node) => {
     return auxiliaryKeys[auxiliaryKeys.length - 1] === 'effects';
 };
 const INSPECTOR_COLLAPSED_ROWS_SESSION_STORAGE_KEY = 'remotion.editor.inspectorCollapsedRows';
+const INSPECTOR_SECTION_EXPANSION_OVERRIDES_SESSION_STORAGE_KEY = 'remotion.editor.inspectorSectionExpansionOverrides';
 const getInspectorExpansionKey = (nodePathInfo) => {
     return JSON.stringify(nodePathInfo);
 };
@@ -121,6 +166,48 @@ const persistInspectorCollapsedKeys = (keys) => {
         // Ignore quota errors or disabled storage.
     }
 };
+const loadInspectorSectionExpansionOverrides = () => {
+    if (typeof window === 'undefined') {
+        return {};
+    }
+    try {
+        const raw = window.sessionStorage.getItem(INSPECTOR_SECTION_EXPANSION_OVERRIDES_SESSION_STORAGE_KEY);
+        if (raw === null) {
+            return {};
+        }
+        const parsed = JSON.parse(raw);
+        if (parsed === null ||
+            typeof parsed !== 'object' ||
+            Array.isArray(parsed)) {
+            return {};
+        }
+        return Object.fromEntries(Object.entries(parsed).filter((entry) => {
+            return typeof entry[1] === 'boolean';
+        }));
+    }
+    catch (_a) {
+        return {};
+    }
+};
+const persistInspectorSectionExpansionOverrides = (overrides) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    try {
+        window.sessionStorage.setItem(INSPECTOR_SECTION_EXPANSION_OVERRIDES_SESSION_STORAGE_KEY, JSON.stringify(overrides));
+    }
+    catch (_a) {
+        // Ignore quota errors or disabled storage.
+    }
+};
+const getInspectorSectionExpansionKey = ({ nodePathInfo, groupId, }) => {
+    return JSON.stringify([
+        nodePathInfo.sequenceSubscriptionKey.absolutePath,
+        nodePathInfo.sequenceSubscriptionKey.nodePath,
+        nodePathInfo.index,
+        groupId,
+    ]);
+};
 const getInspectorControlGroups = (rows) => {
     return timeline_layout_1.SCHEMA_FIELD_GROUPS.map((group) => ({
         ...group,
@@ -141,15 +228,20 @@ const hasSequenceControls = (sequence) => {
     return sequence.controls !== null;
 };
 exports.hasSequenceControls = hasSequenceControls;
-const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderTransformControls, }) => {
-    const { tree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
+const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderTransformControls, }) => {
+    var _a;
+    const { tree, propStatuses } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
         includeTextContent: true,
         includeSourceControls: true,
     });
     const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(loadInspectorCollapsedKeys);
+    const [sectionExpansionOverrides, setSectionExpansionOverrides] = (0, react_1.useState)(loadInspectorSectionExpansionOverrides);
+    const [automaticSectionExpansion, setAutomaticSectionExpansion] = (0, react_1.useState)({});
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const mediaSrc = (0, timeline_asset_link_1.getTimelineAssetSrcFromSchema)(sequence.controls);
@@ -229,15 +321,102 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
                 }),
         };
     }, [getIsExpanded, tree]);
-    const controlSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(controlRows.filter(({ node }) => {
-        var _a;
-        return node.kind !== 'field' || ((_a = node.field) === null || _a === void 0 ? void 0 : _a.key) !== 'src';
-    })), [controlRows]);
     const effectSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(effectRows), [effectRows]);
     const controlGroups = (0, react_1.useMemo)(() => getInspectorControlGroups(controlRows), [controlRows]);
     const layoutGroup = controlGroups.find((group) => group.id === 'layout');
     const controlGroupsWithoutLayout = controlGroups.filter((group) => group.id !== 'layout');
+    const sequencePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePathInfo.sequenceSubscriptionKey);
     const { schema } = sequence.controls;
+    const getControlGroupActivity = (0, react_1.useCallback)((group) => {
+        if (!(0, inspector_section_collapse_1.isSmartCollapsibleInspectorGroup)(group.id)) {
+            return 'active';
+        }
+        return (0, inspector_section_collapse_1.getInspectorSectionActivity)({
+            group: group.id,
+            propStatuses: sequencePropStatuses,
+            schema,
+        });
+    }, [schema, sequencePropStatuses]);
+    (0, react_1.useEffect)(() => {
+        setAutomaticSectionExpansion((previous) => {
+            let changed = false;
+            const next = { ...previous };
+            for (const group of controlGroups) {
+                if (!(0, inspector_section_collapse_1.isSmartCollapsibleInspectorGroup)(group.id)) {
+                    continue;
+                }
+                const expansionKey = getInspectorSectionExpansionKey({
+                    nodePathInfo,
+                    groupId: group.id,
+                });
+                const activity = getControlGroupActivity(group);
+                if (activity === 'active' && next[expansionKey] !== true) {
+                    next[expansionKey] = true;
+                    changed = true;
+                }
+                else if (activity === 'inactive' &&
+                    next[expansionKey] === undefined) {
+                    next[expansionKey] = false;
+                    changed = true;
+                }
+            }
+            return changed ? next : previous;
+        });
+    }, [controlGroups, getControlGroupActivity, nodePathInfo]);
+    const isControlGroupExpanded = (0, react_1.useCallback)((group) => {
+        if (!(0, inspector_section_collapse_1.isSmartCollapsibleInspectorGroup)(group.id)) {
+            return true;
+        }
+        const expansionKey = getInspectorSectionExpansionKey({
+            nodePathInfo,
+            groupId: group.id,
+        });
+        const override = sectionExpansionOverrides[expansionKey];
+        if (override !== undefined) {
+            return override;
+        }
+        const automaticExpansion = automaticSectionExpansion[expansionKey];
+        if (automaticExpansion !== undefined) {
+            return automaticExpansion;
+        }
+        return getControlGroupActivity(group) !== 'inactive';
+    }, [
+        automaticSectionExpansion,
+        getControlGroupActivity,
+        nodePathInfo,
+        sectionExpansionOverrides,
+    ]);
+    const toggleControlGroup = (0, react_1.useCallback)((group) => {
+        const expansionKey = getInspectorSectionExpansionKey({
+            nodePathInfo,
+            groupId: group.id,
+        });
+        const nextExpanded = !isControlGroupExpanded(group);
+        setSectionExpansionOverrides((previous) => {
+            const next = { ...previous, [expansionKey]: nextExpanded };
+            persistInspectorSectionExpansionOverrides(next);
+            return next;
+        });
+    }, [isControlGroupExpanded, nodePathInfo]);
+    const visibleControlRows = controlGroups.flatMap((group) => {
+        return isControlGroupExpanded(group) ? group.rows : [];
+    });
+    const controlSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(visibleControlRows.filter(({ node }) => {
+        var _a;
+        return node.kind !== 'field' || ((_a = node.field) === null || _a === void 0 ? void 0 : _a.key) !== 'src';
+    })), [visibleControlRows]);
+    const borderRadiusGroup = controlGroups.find((group) => group.id === 'border-radius');
+    const borderRadiusUsesShorthand = borderRadiusGroup === null || borderRadiusGroup === void 0 ? void 0 : borderRadiusGroup.rows.some(({ node }) => {
+        var _a;
+        return node.kind === 'field' && ((_a = node.field) === null || _a === void 0 ? void 0 : _a.key) === border_radius_representation_1.BORDER_RADIUS_SHORTHAND_KEY;
+    });
+    const borderRadiusConversion = (0, border_radius_representation_1.getBorderRadiusConversion)(sequencePropStatuses, getDragOverrides(nodePathInfo.sequenceSubscriptionKey));
+    const inlineCaptionValue = ((_a = schema.captions) === null || _a === void 0 ? void 0 : _a.type) === 'remotion-captions'
+        ? sequence.controls.currentRuntimeValueDotNotation.captions
+        : null;
+    const inlineCaptions = Array.isArray(inlineCaptionValue)
+        ? inlineCaptionValue
+        : null;
     const showEffectsSection = nodePathInfo.supportsEffects || effectRows.length > 0;
     const canAddEffect = nodePathInfo.supportsEffects &&
         previewServerState.type === 'connected' &&
@@ -260,14 +439,65 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
         setSelectedModal,
         validatedLocation.source,
     ]);
+    const onConvertBorderRadius = (0, react_1.useCallback)(() => {
+        if (borderRadiusConversion === null ||
+            previewServerState.type !== 'connected') {
+            return;
+        }
+        const common = {
+            fileName: validatedLocation.source,
+            nodePath: nodePathInfo.sequenceSubscriptionKey,
+            defaultValue: null,
+            schema,
+        };
+        const changes = (0, border_radius_representation_1.getBorderRadiusConversionChanges)(borderRadiusConversion).map((change) => ({ ...common, ...change }));
+        (0, save_sequence_prop_1.saveSequenceProps)({
+            changes,
+            addedKeyframes: null,
+            movedKeyframes: null,
+            setPropStatuses,
+            clientId: previewServerState.clientId,
+            undoLabel: 'Change border radius representation',
+            redoLabel: 'Change border radius representation again',
+        });
+    }, [
+        borderRadiusConversion,
+        nodePathInfo.sequenceSubscriptionKey,
+        previewServerState,
+        schema,
+        setPropStatuses,
+        validatedLocation.source,
+    ]);
+    const borderRadiusAction = borderRadiusGroup ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: borderRadiusConversion === null ||
+            previewServerState.type !== 'connected', onClick: onConvertBorderRadius, title: borderRadiusConversion === null
+            ? borderRadiusUsesShorthand
+                ? 'A static border radius is required to use individual corners'
+                : 'All four corners must have the same static value'
+            : borderRadiusUsesShorthand
+                ? 'Use individual corner radii'
+                : 'Use one border radius value', renderAction: (color) => borderRadiusUsesShorthand ? (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: borderRadiusToggleIcon })) : (jsx_runtime_1.jsx(border_radius_1.BorderRadiusIcon, { color: color, style: borderRadiusToggleIcon })) })) : null;
     const effectsHeader = (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
             jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
     const renderRow = ({ node, depth }) => {
         return (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
     };
-    if (controlRows.length === 0 && !showEffectsSection) {
+    const renderControlGroupHeader = (group) => {
+        const collapsible = (0, inspector_section_collapse_1.isSmartCollapsibleInspectorGroup)(group.id);
+        const expanded = isControlGroupExpanded(group);
+        if (collapsible) {
+            return (jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader, { action: group.id === 'border-radius' && expanded ? borderRadiusAction : null, expanded: expanded, label: group.label, onToggle: () => toggleControlGroup(group) }));
+        }
+        return (jsx_runtime_1.jsx("div", { style: styles_1.sectionHeaderRow, children: jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: group.label }) }));
+    };
+    if (controlRows.length === 0 &&
+        !showEffectsSection &&
+        inlineCaptions === null) {
         return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Controls", children: jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" }) }) }));
     }
-    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsxs(common_1.InspectorSection, { header: group.label, children: [group.id === 'transforms' ? renderTransformControls() : null, group.rows.map(renderRow)] }, group.id))) })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: layoutGroup.label, children: layoutGroup.rows.map(renderRow) }) })) : null] }) }));
+    return (jsx_runtime_1.jsx(TimelineAssetField_1.AssetSelectionContext.Provider, { value: assetSelectionContextValue, children: jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroupsWithoutLayout.map((group) => (jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(group), children: isControlGroupExpanded(group) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [group.id === 'transforms'
+                                    ? renderTransformControls()
+                                    : null, group.rows.map(renderRow)] })) : null }, group.id))) })) : null, inlineCaptions ? (jsx_runtime_1.jsx(InlineCaptionInspector_1.InlineCaptionInspector, { captions: inlineCaptions, controls: sequence.controls, nodePath: nodePathInfo.sequenceSubscriptionKey, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null, layoutGroup ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: renderControlGroupHeader(layoutGroup), children: isControlGroupExpanded(layoutGroup)
+                            ? layoutGroup.rows.map(renderRow)
+                            : null }) })) : null] }) }));
 };
 exports.InspectorSequenceSection = InspectorSequenceSection;

package/dist/components/MenuToolbar.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const use_menu_structure_1 = require("../helpers/use-menu-structure");
@@ -31,6 +33,11 @@ const flex = {
 };
 const MenuToolbar = ({ readOnlyStudio }) => {
     const [selected, setSelected] = (0, react_1.useState)(null);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    const canUndoAndRedo = !readOnlyStudio ||
+        (previewServerState.type === 'connected' &&
+            browserStudioOperations !== null);
     const mobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const fixedWidthRight = (0, react_1.useMemo)(() => {
         return {
@@ -101,7 +108,7 @@ const MenuToolbar = ({ readOnlyStudio }) => {
             jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [
                     jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" }), structure.map((s) => {
                         return (jsx_runtime_1.jsx(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
-                    }), readOnlyStudio ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, {}), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [readOnlyStudio ? null : jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}), jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
+                    }), readOnlyStudio ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, {}), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [canUndoAndRedo ? jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}) : null, jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
                 ] })
         ] }));
 };

package/dist/components/Modals.js

@@ -36,6 +36,6 @@ const Modals = ({ readOnlyStudio }) => {
         'connected';
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'configure-license' && (jsx_runtime_1.jsx(ConfigureLicenseModal_1.ConfigureLicenseModal, { initialPublicLicenseKey: modalContextType.initialPublicLicenseKey })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -37,6 +37,7 @@ const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex }) => {
             mode,
             invocationTimestamp: Date.now(),
             assetSelection: null,
+            compositionSelection: null,
         });
     }, [mode, setSelectedModal]);
     return (jsx_runtime_1.jsx("div", { style: quickSwitcherArea, children: jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, children: ["Search...", showShortcut && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] })) : null] }) }));

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { _InternalTypes } from 'remotion';
 import type { StaticFile } from '../../api/get-static-files';
 import type { QuickSwitcherMode } from './NoResults';
 declare const QuickSwitcher: React.FC<{
@@ -9,5 +10,9 @@ declare const QuickSwitcher: React.FC<{
         readonly initialQuery: string;
         readonly onSelected: (asset: StaticFile) => void;
     } | null;
+    readonly compositionSelection: {
+        readonly excludeCompositionId: string;
+        readonly onSelected: (composition: _InternalTypes['AnyComposition']) => void;
+    } | null;
 }>;
 export default QuickSwitcher;

package/dist/components/QuickSwitcher/QuickSwitcher.js

@@ -7,7 +7,7 @@ const panelStyle = {
     borderRadius: 6,
     overflow: 'hidden',
 };
-const QuickSwitcher = ({ initialMode, invocationTimestamp, readOnlyStudio, assetSelection }) => {
-    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: jsx_runtime_1.jsx(QuickSwitcherContent_1.QuickSwitcherContent, { readOnlyStudio: readOnlyStudio, invocationTimestamp: invocationTimestamp, initialMode: initialMode, assetSelection: assetSelection }) }));
+const QuickSwitcher = ({ initialMode, invocationTimestamp, readOnlyStudio, assetSelection, compositionSelection, }) => {
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: jsx_runtime_1.jsx(QuickSwitcherContent_1.QuickSwitcherContent, { readOnlyStudio: readOnlyStudio, invocationTimestamp: invocationTimestamp, initialMode: initialMode, assetSelection: assetSelection, compositionSelection: compositionSelection }) }));
 };
 exports.default = QuickSwitcher;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { _InternalTypes } from 'remotion';
 import type { StaticFile } from '../../api/get-static-files';
 import type { QuickSwitcherMode } from './NoResults';
 export declare const QuickSwitcherContent: React.FC<{
@@ -9,4 +10,8 @@ export declare const QuickSwitcherContent: React.FC<{
         readonly initialQuery: string;
         readonly onSelected: (asset: StaticFile) => void;
     } | null;
+    readonly compositionSelection: {
+        readonly excludeCompositionId: string;
+        readonly onSelected: (composition: _InternalTypes['AnyComposition']) => void;
+    } | null;
 }>;

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -97,13 +97,15 @@ const mapModeToQuery = (mode) => {
     }
     throw new Error('no mode' + mode);
 };
-const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio, assetSelection }) => {
+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: assetSelection === null
-                ? mapModeToQuery(initialMode)
+                ? compositionSelection === null
+                    ? mapModeToQuery(initialMode)
+                    : ''
                 : assetSelection.initialQuery,
             selectedIndex: 0,
         };
@@ -111,11 +113,13 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
     (0, react_1.useEffect)(() => {
         setState({
             query: assetSelection === null
-                ? mapModeToQuery(initialMode)
+                ? compositionSelection === null
+                    ? mapModeToQuery(initialMode)
+                    : ''
                 : assetSelection.initialQuery,
             selectedIndex: 0,
         });
-    }, [assetSelection, 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)();
@@ -124,7 +128,11 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, 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 = assetSelection !== null ? 'assets' : 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]);
@@ -167,13 +175,20 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
                 };
             }));
         }
-        return (0, fuzzy_search_1.fuzzySearch)(actualQuery, compositions.map((c) => {
+        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}"]`;
@@ -195,6 +210,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
         docResults,
         assetSearch,
         assetSelection,
+        compositionSelection,
         selectAsset,
         selectComposition,
         setSelectedModal,
@@ -337,9 +353,11 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
             height: 300,
         };
     }, [showKeyboardShortcuts]);
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [assetSelection === null && (jsx_runtime_1.jsxs("div", { style: modeSelector, 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 ? content : contentWithoutModeSelector, children: [
+                ] })), 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 }),
                             " ",

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/SelectedOutlineElement.js

@@ -1077,10 +1077,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
                             },
                         ],
                     });
-                    if (result.success) {
-                        (0, NotificationCenter_1.showNotification)('Removed sequence from source file', 2000);
-                    }
-                    else {
+                    if (!result.success) {
                         (0, NotificationCenter_1.showNotification)(result.reason, 4000);
                     }
                 }