fcr-ui-scene 3.4.5 → 3.5.0

package/lib/modules/dialog/components/widget/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("core-js/modules/es.function.name.js");
+var _env = require("agora-foundation/lib/utilities/env");
+var _electron = require("./electron");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _dialogContainer = _interopRequireDefault(require("../dialog-container"));
+var _constant = require("../../../../utilities/constant");
+var _store = require("../../store");
+var _jsxRuntime = require("react/jsx-runtime");
+var WidgetDialog = function WidgetDialog(_ref) {
+  var _params$popupSize, _params$popupSize2;
+  var children = _ref.children,
+    params = _ref.params;
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    widgetDialogIds = _useContext.widgetDialogIds;
+  var width = (_params$popupSize = params.popupSize) !== null && _params$popupSize !== void 0 && _params$popupSize.width ? params.popupSize.width + 2 : undefined;
+  var height = (_params$popupSize2 = params.popupSize) !== null && _params$popupSize2 !== void 0 && _params$popupSize2.height ? params.popupSize.height + 46 : undefined;
+  var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+    title: params.name,
+    width: width,
+    height: height,
+    dialogKey: _constant.FcrUIDialogKey.WIDGET,
+    dialogId: widgetDialogIds.get(params.id),
+    children: children
+  });
+  if ((0, _env.isElectron)()) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.WidgetElectronDialog, {
+      params: params,
+      children: container
+    });
+  }
+  return container;
+};
+var _default = exports["default"] = WidgetDialog;

package/lib/modules/dialog/context.d.ts

@@ -0,0 +1,2 @@
+import DialogStore from './store';
+export declare const StoreContext: import("react").Context<DialogStore>;

package/lib/modules/dialog/context.js

@@ -0,0 +1,9 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoreContext = void 0;
+var _react = require("react");
+var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/dialog/hooks/useElectron.d.ts

@@ -1,3 +1,4 @@
+import { FcrUIDialogHooksProps } from '../type';
 export declare const DialogInstanceContext: import("react").Context<{
     browserWindow: Electron.BrowserWindow;
     newRendererWindow: Window;
@@ -7,4 +8,10 @@ export declare const shadowOffset: number;
 export declare function useElectronDialog(props: FcrUIDialogHooksProps): {
     store: import("../store").default;
     browserWindow: Electron.BrowserWindow | undefined;
+    newRendererWindow: Window | undefined;
+};
+export declare function useElectronDialogByDialogId(props: FcrUIDialogHooksProps): {
+    store: import("../store").default;
+    browserWindow: Electron.BrowserWindow | undefined;
+    newRendererWindow: Window | undefined;
 };

package/lib/modules/dialog/hooks/useElectron.js

@@ -8,7 +8,6 @@ require("core-js/modules/es.object.define-property.js");
 require("core-js/modules/es.object.get-own-property-descriptor.js");
 require("core-js/modules/es.object.get-own-property-descriptors.js");
 require("core-js/modules/es.object.keys.js");
-require("core-js/modules/esnext.async-iterator.filter.js");
 require("core-js/modules/esnext.iterator.filter.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
@@ -16,12 +15,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.shadowOffset = exports.DialogInstanceContext = void 0;
 exports.useElectronDialog = useElectronDialog;
+exports.useElectronDialogByDialogId = useElectronDialogByDialogId;
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.for-each.js");
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.includes.js");
-require("core-js/modules/esnext.async-iterator.for-each.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.for-each.js");
@@ -55,8 +54,11 @@ function useElectronDialog(props) {
     onUnmounted = props.onUnmounted,
     polyfills = props.polyfills,
     _props$hasCustomShado = props.hasCustomShadow,
-    hasCustomShadow = _props$hasCustomShado === void 0 ? true : _props$hasCustomShado;
+    hasCustomShadow = _props$hasCustomShado === void 0 ? true : _props$hasCustomShado,
+    _props$disableShortcu = props.disableShortcutClose,
+    disableShortcutClose = _props$disableShortcu === void 0 ? false : _props$disableShortcu;
   var windowRef = (0, _react.useRef)();
+  var newRendernerWindowRef = (0, _react.useRef)();
   var _customConfigs$width = customConfigs.width,
     w = _customConfigs$width === void 0 ? 0 : _customConfigs$width,
     _customConfigs$height = customConfigs.height,
@@ -75,24 +77,21 @@ function useElectronDialog(props) {
   (0, _react.useEffect)(function () {
     var node;
     window.runtime.openRendererWindow(dialogKey, function (dom, browserWindow, newRendererWindow) {
-      var _window$runtime, _controlbar$isVisible;
+      var _controlbar$isVisible;
       node = dom;
       windowRef.current = browserWindow;
+      newRendernerWindowRef.current = newRendererWindow;
       _dialogs.dialogWindows.set(dialogKey, browserWindow);
       var thisWindowBounds = browserWindow.getBounds();
       var mainAppWindowBounds = window.runtime.browserWindow.getBounds();
       var nearDisplayBounds = window.runtime.screen.getDisplayNearestPoint(mainAppWindowBounds).bounds;
       var controlbar = _dialogs.dialogWindows.get(_constant.FcrUIDialogKey.CONTROL_BAR);
-      var isFullScreen = (_window$runtime = window.runtime) === null || _window$runtime === void 0 ? void 0 : _window$runtime.browserWindow.isFullScreen();
       if (controlbar && controlbar !== null && controlbar !== void 0 && (_controlbar$isVisible = controlbar.isVisible) !== null && _controlbar$isVisible !== void 0 && _controlbar$isVisible.call(controlbar)) {
         // 因为打开过的窗口在关闭时是用的 hide 方法，因此只判断 controlbar 是否存在会在关闭 controlbar 时失效，导致窗口依然跟随 controlbar 最后所在屏幕打开，所以要再判断一下 isVisible 状态
         // 当屏幕共享时会打开 control bar，此时弹窗相对于 control bar 展示
         var nearDisplay = window.runtime.screen.getDisplayNearestPoint(controlbar.getBounds());
         var _nearDisplayBounds = nearDisplay.bounds;
         var _thisWindowBounds = browserWindow.getBounds();
-        console.log({
-          thisWindowBounds: _thisWindowBounds
-        });
         var centerBounds = {
           x: Math.floor(_nearDisplayBounds.x + (_nearDisplayBounds.width - _thisWindowBounds.width) / 2),
           y: Math.floor(_nearDisplayBounds.y + (_nearDisplayBounds.height - _thisWindowBounds.height) / 2)
@@ -102,18 +101,23 @@ function useElectronDialog(props) {
         browserWindow.setResizable(false);
         browserWindow.setBounds(centerBounds);
         browserWindow.setResizable(resizeble);
-      } else if (isFullScreen) {
+      } else if (fullScreen) {
         var _browserWindow$setBou;
         // 当窗口的自定义设置为全屏时，让弹窗追随主窗口所在的屏幕展示
+        // 目前 fullScreen 的配置主要用于 toast 和 confirm，在应用启动时会直接初始化这两个 dialog，如果未设置 fullScreen，它们因为没有宽高将无法展示
+        var x = nearDisplayBounds.x,
+          y = nearDisplayBounds.y,
+          width = nearDisplayBounds.width,
+          height = nearDisplayBounds.height;
         browserWindow === null || browserWindow === void 0 || (_browserWindow$setBou = browserWindow.setBounds) === null || _browserWindow$setBou === void 0 || _browserWindow$setBou.call(browserWindow, {
-          x: nearDisplayBounds.x,
-          y: (0, _renderer.isWindows)() && polyfills !== null && polyfills !== void 0 && polyfills.includes('fix-toast-window-flash') ? -100 : nearDisplayBounds.y,
-          width: nearDisplayBounds.width,
-          height: (0, _renderer.isWindows)() && polyfills !== null && polyfills !== void 0 && polyfills.includes('fix-toast-window-flash') ? 0 : nearDisplayBounds.height
+          x: x,
+          y: y,
+          width: width,
+          height: height
         });
       } else {
         var _browserWindow$setBou2;
-        // 如果主窗口不是全屏模式，那么新打开的弹窗相对于主窗口弹窗的水平垂直居中显示
+        // 如果窗口未设置全屏模式，那么新打开的弹窗相对于主窗口弹窗的水平垂直居中显示
         var bounds = {
           x: Math.floor(mainAppWindowBounds.x + (mainAppWindowBounds.width - thisWindowBounds.width) / 2),
           y: Math.floor(mainAppWindowBounds.y + (mainAppWindowBounds.height - thisWindowBounds.height) / 2)
@@ -139,6 +143,7 @@ function useElectronDialog(props) {
       // 因为窗口有可能需要单独设置位置，所以，窗口打开的回调需要放置在默认的位置设置之后
       onOpened === null || onOpened === void 0 || onOpened({
         browserWindow: browserWindow,
+        newRendererWindow: newRendererWindow,
         store: store,
         // 重写 setBounds 方法，使得设置 bounds 时，自动加上阴影的宽度
         setBounds: function setBounds(bounds, animate) {
@@ -161,11 +166,22 @@ function useElectronDialog(props) {
       if (!scroll) {
         browserWindow.webContents.insertCSS("\n            ::-webkit-scrollbar {\n              display: none;\n            }\n            #root {\n              padding: ".concat(hasCustomShadow ? shadowOffset / 2 : 0, "px;\n              display: ").concat(hasCustomShadow ? 'flex' : 'block', ";\n              align-items: center;\n            }\n          "));
       }
+      if (disableShortcutClose) {
+        newRendererWindow.addEventListener('keydown', function (event) {
+          if ((event.ctrlKey || event.metaKey) && event.key === 'w') {
+            event.preventDefault();
+          }
+        });
+      }
       focus && browserWindow.focus();
       (0, _renderer.handleWillClose)(browserWindow, function () {
         (0, _reactDom.unmountComponentAtNode)(node);
         _dialogs.dialogWindows["delete"](dialogKey);
-        onClose === null || onClose === void 0 || onClose(store);
+        store === null || store === void 0 || store.closeDialogByKey(dialogKey);
+        onClose === null || onClose === void 0 || onClose({
+          store: store,
+          browserWindow: browserWindow
+        });
       });
       (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
         value: store,
@@ -182,7 +198,182 @@ function useElectronDialog(props) {
     return function () {
       node && (0, _reactDom.unmountComponentAtNode)(node);
       window.runtime.closeRendererWindow(dialogKey);
-      if (windowRef.current && !windowRef.current.isDestroyed) {
+      if (windowRef.current && !windowRef.current.isDestroyed()) {
+        windowRef.current.hide();
+        windowRef.current.close();
+      }
+      onUnmounted === null || onUnmounted === void 0 || onUnmounted(store);
+    };
+  }, []);
+
+  // 这组监听是为了处理 mac 全屏模式下，弹窗会因为主窗口全屏而变成独立窗口的问题
+  window.runtime.browserWindow.addListener('enter-full-screen', function () {
+    _dialogs.dialogWindows.forEach(function (win, k) {
+      !_store.TOP_LEVEL_DIALOG_LAYER.includes(k) && win.setAlwaysOnTop(true, 'pop-up-menu');
+    });
+  });
+  window.runtime.browserWindow.addListener('leave-full-screen', function () {
+    _dialogs.dialogWindows.forEach(function (win, k) {
+      ![].concat((0, _toConsumableArray2["default"])(_store.TOP_LEVEL_DIALOG_LAYER), (0, _toConsumableArray2["default"])(_store.HIGH_LEVEL_DIALOG_LAYER)).includes(k) && win.setAlwaysOnTop(true, 'normal');
+    });
+  });
+  return {
+    store: store,
+    browserWindow: windowRef.current,
+    newRendererWindow: newRendernerWindowRef.current
+  };
+}
+function useElectronDialogByDialogId(props) {
+  var store = (0, _react.useContext)(_store.StoreContext);
+  var customConfigs = props.config,
+    dialogId = props.dialogId,
+    onClose = props.onClose,
+    scroll = props.scroll,
+    _props$focus2 = props.focus,
+    focus = _props$focus2 === void 0 ? true : _props$focus2,
+    children = props.children,
+    ignoreMouseEvents = props.ignoreMouseEvents,
+    _props$alwaysOnTop2 = props.alwaysOnTop,
+    alwaysOnTop = _props$alwaysOnTop2 === void 0 ? false : _props$alwaysOnTop2,
+    fullScreen = props.fullScreen,
+    onOpened = props.onOpened,
+    onUnmounted = props.onUnmounted,
+    polyfills = props.polyfills,
+    _props$hasCustomShado2 = props.hasCustomShadow,
+    hasCustomShadow = _props$hasCustomShado2 === void 0 ? true : _props$hasCustomShado2,
+    _props$disableShortcu2 = props.disableShortcutClose,
+    disableShortcutClose = _props$disableShortcu2 === void 0 ? false : _props$disableShortcu2;
+  var winUniqueId = dialogId;
+  var windowRef = (0, _react.useRef)();
+  var newRendernerWindowRef = (0, _react.useRef)();
+  var _customConfigs$width2 = customConfigs.width,
+    w = _customConfigs$width2 === void 0 ? 0 : _customConfigs$width2,
+    _customConfigs$height2 = customConfigs.height,
+    h = _customConfigs$height2 === void 0 ? 0 : _customConfigs$height2;
+  var config = _objectSpread(_objectSpread({
+    type: 'panel',
+    hasShadow: false,
+    frame: false,
+    transparent: true,
+    resizeble: false
+  }, customConfigs), {}, {
+    setAlwaysOnTop: alwaysOnTop,
+    width: w + (hasCustomShadow ? shadowOffset : 0),
+    height: h + (hasCustomShadow ? shadowOffset : 0)
+  });
+  (0, _react.useEffect)(function () {
+    var node;
+    window.runtime.openRendererWindow(winUniqueId, function (dom, browserWindow, newRendererWindow) {
+      var _controlbar$isVisible2;
+      node = dom;
+      windowRef.current = browserWindow;
+      newRendernerWindowRef.current = newRendererWindow;
+      var thisWindowBounds = browserWindow.getBounds();
+      var mainAppWindowBounds = window.runtime.browserWindow.getBounds();
+      var nearDisplayBounds = window.runtime.screen.getDisplayNearestPoint(mainAppWindowBounds).bounds;
+      var controlbar = _dialogs.dialogWindows.get(_constant.FcrUIDialogKey.CONTROL_BAR);
+      if (controlbar && controlbar !== null && controlbar !== void 0 && (_controlbar$isVisible2 = controlbar.isVisible) !== null && _controlbar$isVisible2 !== void 0 && _controlbar$isVisible2.call(controlbar)) {
+        // 因为打开过的窗口在关闭时是用的 hide 方法，因此只判断 controlbar 是否存在会在关闭 controlbar 时失效，导致窗口依然跟随 controlbar 最后所在屏幕打开，所以要再判断一下 isVisible 状态
+        // 当屏幕共享时会打开 control bar，此时弹窗相对于 control bar 展示
+        var nearDisplay = window.runtime.screen.getDisplayNearestPoint(controlbar.getBounds());
+        var _nearDisplayBounds2 = nearDisplay.bounds;
+        var _thisWindowBounds2 = browserWindow.getBounds();
+        var centerBounds = {
+          x: Math.floor(_nearDisplayBounds2.x + (_nearDisplayBounds2.width - _thisWindowBounds2.width) / 2),
+          y: Math.floor(_nearDisplayBounds2.y + (_nearDisplayBounds2.height - _thisWindowBounds2.height) / 2)
+        };
+        // resizeble 为 true 的窗口在切换不同分辨率属性的显示器时，会有打开尺寸失真的情况出现，所以暂存一下其原始值，在更改坐标之后还原
+        var resizeble = browserWindow.isResizable();
+        browserWindow.setResizable(false);
+        browserWindow.setBounds(centerBounds);
+        browserWindow.setResizable(resizeble);
+      } else if (fullScreen) {
+        var _browserWindow$setBou3;
+        // 当窗口的自定义设置为全屏时，让弹窗追随主窗口所在的屏幕展示
+        var x = nearDisplayBounds.x,
+          y = nearDisplayBounds.y,
+          width = nearDisplayBounds.width,
+          height = nearDisplayBounds.height;
+        browserWindow === null || browserWindow === void 0 || (_browserWindow$setBou3 = browserWindow.setBounds) === null || _browserWindow$setBou3 === void 0 || _browserWindow$setBou3.call(browserWindow, {
+          x: x,
+          y: y,
+          width: width,
+          height: height
+        });
+      } else {
+        var _browserWindow$setBou4;
+        // 如果主窗口不是全屏模式，那么新打开的弹窗相对于主窗口弹窗的水平垂直居中显示
+        var bounds = {
+          x: Math.floor(mainAppWindowBounds.x + (mainAppWindowBounds.width - thisWindowBounds.width) / 2),
+          y: Math.floor(mainAppWindowBounds.y + (mainAppWindowBounds.height - thisWindowBounds.height) / 2)
+        };
+        browserWindow === null || browserWindow === void 0 || (_browserWindow$setBou4 = browserWindow.setBounds) === null || _browserWindow$setBou4 === void 0 || _browserWindow$setBou4.call(browserWindow, bounds);
+      }
+
+      // 设置所有窗口为所有工作区可见
+      browserWindow.setVisibleOnAllWorkspaces(true, {
+        visibleOnFullScreen: true,
+        skipTransformProcessType: true
+      });
+
+      // 因为窗口有可能需要单独设置位置，所以，窗口打开的回调需要放置在默认的位置设置之后
+      onOpened === null || onOpened === void 0 || onOpened({
+        browserWindow: browserWindow,
+        newRendererWindow: newRendererWindow,
+        store: store,
+        // 重写 setBounds 方法，使得设置 bounds 时，自动加上阴影的宽度
+        setBounds: function setBounds(bounds, animate) {
+          var b = _objectSpread({}, bounds);
+          if (b.width && hasCustomShadow) b.width = b.width + shadowOffset;
+          if (b.height && hasCustomShadow) b.height = b.height + shadowOffset;
+          browserWindow.setBounds(b, animate);
+        },
+        nearDisplayBounds: nearDisplayBounds
+      });
+
+      // 同原生 electron 的 ignoreMouseEvents 一样，设置为 true 时，窗口将不再接收鼠标事件
+      if (ignoreMouseEvents) {
+        browserWindow.setIgnoreMouseEvents(true, typeof ignoreMouseEvents === 'boolean' ? {
+          forward: true
+        } : ignoreMouseEvents);
+      }
+      browserWindow.setAlwaysOnTop(typeof alwaysOnTop === 'boolean' ? alwaysOnTop : typeof alwaysOnTop === 'string', typeof alwaysOnTop === 'string' ? alwaysOnTop : 'pop-up-menu');
+      if (!scroll) {
+        browserWindow.webContents.insertCSS("\n            ::-webkit-scrollbar {\n              display: none;\n            }\n            #root {\n              padding: ".concat(hasCustomShadow ? shadowOffset / 2 : 0, "px;\n              display: ").concat(hasCustomShadow ? 'flex' : 'block', ";\n              align-items: center;\n            }\n          "));
+      }
+      if (disableShortcutClose) {
+        newRendererWindow.addEventListener('keydown', function (event) {
+          if ((event.ctrlKey || event.metaKey) && event.key === 'w') {
+            event.preventDefault();
+          }
+        });
+      }
+      focus && browserWindow.focus();
+      (0, _renderer.handleWillClose)(browserWindow, function () {
+        (0, _reactDom.unmountComponentAtNode)(node);
+        store.closeDilaogByDialogId(winUniqueId);
+        onClose === null || onClose === void 0 || onClose({
+          store: store,
+          browserWindow: browserWindow
+        });
+      });
+      (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
+        value: store,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogInstanceContext.Provider, {
+          value: {
+            browserWindow: browserWindow,
+            newRendererWindow: newRendererWindow,
+            resizable: !!customConfigs.resizable
+          },
+          children: typeof children === 'function' ? children(browserWindow) : children
+        })
+      }), dom);
+    }, config);
+    return function () {
+      node && (0, _reactDom.unmountComponentAtNode)(node);
+      window.runtime.closeRendererWindow(winUniqueId);
+      if (windowRef.current && !windowRef.current.isDestroyed()) {
+        windowRef.current.hide();
         windowRef.current.close();
       }
       onUnmounted === null || onUnmounted === void 0 || onUnmounted(store);
@@ -202,6 +393,7 @@ function useElectronDialog(props) {
   });
   return {
     store: store,
-    browserWindow: windowRef.current
+    browserWindow: windowRef.current,
+    newRendererWindow: newRendernerWindowRef.current
   };
 }

package/lib/modules/dialog/index.css

@@ -22,7 +22,7 @@
 .fcr-livestreaming-dialog-content {
   flex: 1;
   overflow: hidden;
-  padding: 0 20px;
+  padding: 0 20px 20px;
 }
 .frc-common-dialog {
   background: var(--fcr_mobile_ui_scene_color_popup_fill2);
@@ -47,13 +47,3 @@
   height: 24px;
   width: fit-content;
 }
-
-.fcr-confirm-dialog-wrapper {
-  background: #fff;
-}
-.fcr-confirm-dialog-wrapper_web {
-  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
-  border-radius: var(--fcr_cornerradius_xl);
-  box-shadow: var(--fcr_web_light_dropup);
-  border: 1px solid var(--fcr_ui_scene_line1);
-}

package/lib/modules/dialog/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { UIModule } from '../../base';
 import { FcrUIDeviceProvider } from '../../providers/device-provider';
 import { FcrStreamControl, FcrUserControl } from 'fcr-core';
@@ -10,10 +9,14 @@ import { FcrUILocalVideoRenderProvider, FcrUIRemoteVideoRenderProvider } from '.
 import { FcrUIPrivilegeProvider } from '../../providers/privilege-provider';
 import { FcrUIDialogProvider } from '../../providers/dialog-provider';
 import { FcrUIPhoneAudioConnectorProvider } from '../../providers/phone-audio-provider';
+import { FcrUIAbilityProviderImpl } from '../../providers/ability-provider';
 import { FcrUIAction } from '../../utilities/constant';
 import { CurrentShareScreenTypes } from '../share-screen/types';
+import { FcrUIDialogInfo } from './type';
+import { FcrUIWidgetProvider } from '../../providers/widget-provider';
+import { FcrUIChatProvider } from '../../providers/chat-provider';
 export declare class DialogUIModule extends UIModule {
-    private _dialogs;
+    private _dialogsByKey;
     private _store?;
     deviceProvider?: FcrUIDeviceProvider;
     streamControl?: FcrStreamControl;
@@ -29,12 +32,12 @@ export declare class DialogUIModule extends UIModule {
     phoneAudioConnectorProvider?: FcrUIPhoneAudioConnectorProvider;
     mainRoomControlProvider?: FcrUIMainRoomControlProvider;
     waitingRoomControlProvider?: FcrUIWaitingRoomControlProvider;
+    widgetProvider?: FcrUIWidgetProvider;
+    chatProvider?: FcrUIChatProvider;
+    abilityProvider?: FcrUIAbilityProviderImpl;
     onNodeWillActive(): void;
     onNodeWillInactive(): void;
     getComponent(): import("react/jsx-runtime").JSX.Element;
-    addDialogs(dialogs: {
-        key: string;
-        component: (params?: any) => React.JSX.Element;
-    }[]): void;
+    addDialogs(dialogs: FcrUIDialogInfo[]): void;
     onUiEvent(event: FcrUIAction, payload: CurrentShareScreenTypes): void;
 }

package/lib/modules/dialog/index.js

@@ -10,7 +10,6 @@ require("core-js/modules/es.object.get-own-property-descriptors.js");
 require("core-js/modules/es.object.keys.js");
 require("core-js/modules/es.reflect.construct.js");
 require("core-js/modules/es.weak-map.js");
-require("core-js/modules/esnext.async-iterator.filter.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.weak-map.delete-all.js");
 require("core-js/modules/esnext.weak-map.emplace.js");
@@ -27,7 +26,6 @@ require("core-js/modules/es.function.bind.js");
 require("core-js/modules/es.map.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.iterator.js");
-require("core-js/modules/esnext.async-iterator.for-each.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/esnext.map.delete-all.js");
@@ -73,31 +71,33 @@ var DialogUIModule = exports.DialogUIModule = /*#__PURE__*/function (_UIModule)
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, DialogUIModule, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "_dialogs", new Map());
+    (0, _defineProperty2["default"])(_this, "_dialogsByKey", new Map());
     return _this;
   }
   (0, _inherits2["default"])(DialogUIModule, _UIModule);
   return (0, _createClass2["default"])(DialogUIModule, [{
     key: "onNodeWillActive",
     value: function onNodeWillActive() {
-      var _this$currentRoomCont, _this$currentRoomCont2, _this$currentRoomCont3;
+      var _this$currentRoomCont, _this$currentRoomCont2;
       this.streamControl = (_this$currentRoomCont = this.currentRoomControlProvider) === null || _this$currentRoomCont === void 0 ? void 0 : _this$currentRoomCont.currentRoomControl.getStreamControl();
       this.userControl = (_this$currentRoomCont2 = this.currentRoomControlProvider) === null || _this$currentRoomCont2 === void 0 ? void 0 : _this$currentRoomCont2.currentRoomControl.getUserControl();
-      this.chatRoomControl = (_this$currentRoomCont3 = this.currentRoomControlProvider) === null || _this$currentRoomCont3 === void 0 ? void 0 : _this$currentRoomCont3.currentRoomControl.getChatRoomControl();
-      if (this.userControl && this.deviceProvider && this.streamControl && this.remoteVideoRenderProvider && this.chatRoomControl && this.eventProvider && this.localVideoRenderProvider && this.sharedLayoutDataSource && this.dialogProvider && this.phoneAudioConnectorProvider) {
-        var _this$currentRoomCont4, _this$mainRoomControl, _this$waitingRoomCont;
+      if (this.userControl && this.deviceProvider && this.streamControl && this.remoteVideoRenderProvider && this.eventProvider && this.localVideoRenderProvider && this.sharedLayoutDataSource && this.dialogProvider && this.phoneAudioConnectorProvider && this.widgetProvider && this.chatProvider && this.abilityProvider) {
+        var _this$currentRoomCont3, _this$mainRoomControl, _this$waitingRoomCont;
         this._store = new _store["default"]({
           userControl: this.userControl,
-          chatRoomControl: this.chatRoomControl,
           streamControl: this.streamControl,
           deviceStore: this.deviceProvider,
           remoteVideoRenderManager: this.remoteVideoRenderProvider,
           localVideoRenderProvider: this.localVideoRenderProvider,
-          securityStore: ((_this$currentRoomCont4 = this.currentRoomControlProvider) === null || _this$currentRoomCont4 === void 0 || (_this$currentRoomCont4 = _this$currentRoomCont4.currentRoomControl.getRoomInfo()) === null || _this$currentRoomCont4 === void 0 ? void 0 : _this$currentRoomCont4.roomType) === _type.FcrRoomType.Mainroom ? (_this$mainRoomControl = this.mainRoomControlProvider) === null || _this$mainRoomControl === void 0 ? void 0 : _this$mainRoomControl.privilegeProvider : (_this$waitingRoomCont = this.waitingRoomControlProvider) === null || _this$waitingRoomCont === void 0 ? void 0 : _this$waitingRoomCont.privilegeProvider,
+          securityStore: ((_this$currentRoomCont3 = this.currentRoomControlProvider) === null || _this$currentRoomCont3 === void 0 || (_this$currentRoomCont3 = _this$currentRoomCont3.currentRoomControl.getRoomInfo()) === null || _this$currentRoomCont3 === void 0 ? void 0 : _this$currentRoomCont3.roomType) === _type.FcrRoomType.Mainroom ? (_this$mainRoomControl = this.mainRoomControlProvider) === null || _this$mainRoomControl === void 0 ? void 0 : _this$mainRoomControl.privilegeProvider : (_this$waitingRoomCont = this.waitingRoomControlProvider) === null || _this$waitingRoomCont === void 0 ? void 0 : _this$waitingRoomCont.privilegeProvider,
           uiEventStore: this.eventProvider,
           sharedLayoutDataSource: this.sharedLayoutDataSource,
           dialogProvider: this.dialogProvider,
-          phoneAudioConnectorProvider: this.phoneAudioConnectorProvider
+          phoneAudioConnectorProvider: this.phoneAudioConnectorProvider,
+          dialogsByKey: this._dialogsByKey,
+          widgetProvider: this.widgetProvider,
+          chatProvider: this.chatProvider,
+          abilityProvider: this.abilityProvider
         });
         this.eventProvider.addObserver({
           onEvent: this.onUiEvent.bind(this)
@@ -118,9 +118,7 @@ var DialogUIModule = exports.DialogUIModule = /*#__PURE__*/function (_UIModule)
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
         value: this._store,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
-          dialogs: this._dialogs
-        })
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {})
       }, "dialog");
     }
   }, {
@@ -128,7 +126,7 @@ var DialogUIModule = exports.DialogUIModule = /*#__PURE__*/function (_UIModule)
     value: function addDialogs(dialogs) {
       var _this2 = this;
       dialogs.forEach(function (dialog) {
-        _this2._dialogs.set(dialog.key, dialog.component);
+        _this2._dialogsByKey.set(dialog.key, dialog.component);
       });
     }
   }, {

package/lib/modules/dialog/store.d.ts

@@ -1,5 +1,4 @@
 import { FcrStreamControl, FcrUserControl } from 'fcr-core';
-import { FcrChatRoomConnectionState, FcrChatRoomControl } from 'fcr-core/lib/room-control/chatroom-control/type';
 import { FcrUIDialogKey } from '../../utilities/constant';
 import { FcrUIPrivilegeProvider } from '../../providers/privilege-provider';
 import { FcrUIDeviceProvider } from '../../providers/device-provider';
@@ -11,6 +10,11 @@ import { FcrUIPhoneAudioConnectorProvider } from '../../providers/phone-audio-pr
 import { AgoraRtcScreenCaptureType } from 'agora-rte-sdk/lib/core/rtc/type';
 import { CurrentShareBounds } from '../control-bar/types';
 import { CurrentShareScreenTypes } from '../share-screen/types';
+import { FcrUIDialogComponent } from './type';
+import { FcrUIWidgetProvider } from '../../providers/widget-provider';
+import { FcrUIChatProvider } from '../../providers/chat-provider';
+import { FcrUIAbilityProviderImpl } from 'fcr-ui-scene/src/providers/ability-provider';
+import { CurrentShareScreenWorkArea } from '../../utilities/tools';
 export declare const HIGH_LEVEL_DIALOG_LAYER: FcrUIDialogKey[];
 export declare const TOP_LEVEL_DIALOG_LAYER: FcrUIDialogKey[];
 export default class DialogStore {
@@ -24,29 +28,35 @@ export default class DialogStore {
     private _localVideoRenderProvider;
     private _remoteVideoRenderManager;
     private _dialogProvider;
-    private _chatRoomControl;
-    private _connnectBeforeCloseDetect;
+    private _widgetProvider;
     private _sharedLayoutDataSource;
     private _phoneAudioConnectorProvider;
+    private _dialogComponentMapByKey;
+    private _chatProvider;
     private _handleDialogEventObserver;
     private _userObserver;
-    private _chatRoomObserver;
     accessor openedDialogs: {
-        dialogKey: string;
+        dialogKey: FcrUIDialogKey;
         dialogId: string;
+        params?: unknown;
     }[];
-    accessor payloadDialogs: Map<string, unknown>;
     accessor confirmDialogs: Map<string, unknown>;
     accessor userCount: number;
     accessor participantElectronDialogContainer: HTMLElement | null;
-    accessor chatRoomState: FcrChatRoomConnectionState;
     accessor currentDialogBounds: Map<FcrUIDialogKey, number>;
     accessor videoWindowBounds: any;
     accessor currentShareId: string;
     accessor currentShareType: AgoraRtcScreenCaptureType;
     accessor currentShareBounds: CurrentShareBounds;
+    accessor recordShareBounds: Map<CurrentShareBounds, CurrentShareScreenWorkArea>;
+    get dialogComponentMapByKey(): Map<FcrUIDialogKey, FcrUIDialogComponent>;
     get participantCount(): number;
     get isManager(): boolean;
+    get dialogs(): {
+        dialogKey: FcrUIDialogKey;
+        dialogId: string;
+        params?: unknown;
+    }[];
     get streamControl(): FcrStreamControl;
     get deviceStore(): FcrUIDeviceProvider;
     get remoteVideoRenderManager(): FcrUIRemoteVideoRenderProvider;
@@ -54,10 +64,10 @@ export default class DialogStore {
     get waitingRoomState(): boolean;
     get connectType(): import("../../type").FcrUIConnectType;
     get hasOwnPstnStream(): boolean;
-    constructor({ uiEventStore, userControl, chatRoomControl, deviceStore, streamControl, localVideoRenderProvider, remoteVideoRenderManager, securityStore, sharedLayoutDataSource, dialogProvider, phoneAudioConnectorProvider, }: {
+    get widgetDialogIds(): Map<string, string>;
+    constructor({ uiEventStore, userControl, deviceStore, streamControl, localVideoRenderProvider, remoteVideoRenderManager, securityStore, sharedLayoutDataSource, dialogProvider, phoneAudioConnectorProvider, dialogsByKey, widgetProvider, chatProvider, }: {
         streamControl: FcrStreamControl;
         userControl: FcrUserControl;
-        chatRoomControl: FcrChatRoomControl;
         uiEventStore: FcrUIEventProvider;
         securityStore: FcrUIPrivilegeProvider;
         deviceStore: FcrUIDeviceProvider;
@@ -66,10 +76,16 @@ export default class DialogStore {
         sharedLayoutDataSource: FcrUISharedLayoutDataSource;
         dialogProvider: FcrUIDialogProvider;
         phoneAudioConnectorProvider: FcrUIPhoneAudioConnectorProvider;
+        dialogsByKey: Map<FcrUIDialogKey, FcrUIDialogComponent>;
+        widgetProvider: FcrUIWidgetProvider;
+        chatProvider: FcrUIChatProvider;
+        abilityProvider: FcrUIAbilityProviderImpl;
     });
+    get chatRoomState(): import("fcr-core/lib/room-control/chatroom-control/type").FcrChatRoomConnectionState;
     setParticipantElectronDialogContainer(dom: HTMLElement | null): void;
     setVideoWindowBounds(payload: any): void;
     closeDialogByKey(dialogKey: FcrUIDialogKey): void;
+    closeDilaogByDialogId(dialogId: string): void;
     closeSystemPreferenceDialog(): void;
     closeChatFromDialog(): void;
     moveChatFromDialogToAside(): void;
@@ -79,8 +95,8 @@ export default class DialogStore {
     release(): void;
     resizeVideoWindow(width: number, height: number): void;
     updateCurrentShareContent(payload: CurrentShareScreenTypes): void;
+    getCurrentSharingScreenBounds(): CurrentShareScreenWorkArea;
     private _handleDialogEvent;
-    private _handleConnectionUpdated;
     private _hanleAllUserCountUpdated;
 }
 export declare const StoreContext: import("react").Context<DialogStore>;