fcr-ui-scene 3.4.4 → 3.5.0

package/lib/modules/control-bar/view.js

@@ -9,10 +9,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/es.object.to-string.js");
-require("core-js/modules/esnext.async-iterator.filter.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.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.for-each.js");
@@ -21,9 +17,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ControlBarView = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
 require("core-js/modules/web.timers.js");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _divider = _interopRequireDefault(require("agora-ui-foundation/lib/components/divider"));
 var _popover = require("agora-ui-foundation/lib/components/popover");
@@ -50,9 +51,10 @@ var _react2 = require("@use-gesture/react");
 var _useElectron = require("../dialog/hooks/useElectron");
 var _tools = require("../../utilities/tools");
 var _enums = require("./enums");
-var _type2 = require("fcr-core/lib/room-control/type");
 var _constant = require("../../utilities/constant");
+var _type2 = require("../../type");
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["x", "y"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ControlBarView = exports.ControlBarView = (0, _mobxReact.observer)(function () {
@@ -81,7 +83,11 @@ var ControlBarView = exports.ControlBarView = (0, _mobxReact.observer)(function
     privilegeProvider = _useContext2.privilegeProvider,
     newMessageCount = _useContext2.newMessageCount,
     currentShareType = _useContext2.currentShareType,
-    currentShareBounds = _useContext2.currentShareBounds;
+    currentShareBounds = _useContext2.currentShareBounds,
+    recordShareBounds = _useContext2.recordShareBounds,
+    showLockedRoomToast = _useContext2.showLockedRoomToast,
+    checkedStateMap = _useContext2.checkedStateMap,
+    setCheckedStateMap = _useContext2.setCheckedStateMap;
   // 控制栏本身的高度
   var NAV_HEIGHT = 84;
   // 鼠标移开后自动隐藏的时间
@@ -248,17 +254,50 @@ var ControlBarView = exports.ControlBarView = (0, _mobxReact.observer)(function
     setMoreVisible(false);
     setShowSecurityPopover(false);
   }
+  function getScreenBounds() {
+    // 当电脑系统更改主屏幕为非共享屏幕时，会导致正在共享屏幕的 x, y 坐标发生改变，并触发 merics-changed 事件，去重新计算 controlbar 的热区位置
+    // 但当初分享屏幕时是通过所选择屏幕的 bounds 通过 currentShareBounds 传递到热区计算函数获知到热区应该在哪个显示器上的
+    // 因此当系统的主屏幕发生改变，再次通过这个 currentShareBounds 获取的 x, y 坐标就是错误的，以下逻辑既是对此情况做出相应处理
+    // 同一个 currentShareBounds 代表选择分享的屏幕没有发生变化，通过它作为 key 去存屏幕信息。当存在这个 key 时，取出来去拿屏幕 id 去匹配，并重新赋值 x，y
+    var screenBounds = undefined;
+    if (recordShareBounds.has(currentShareBounds)) {
+      var _window$runtime$scree;
+      var _ref2 = recordShareBounds.get(currentShareBounds),
+        ox = _ref2.x,
+        oy = _ref2.y,
+        bounds = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+      var _ref3 = ((_window$runtime$scree = window.runtime.screen.getAllDisplays().find(function (display) {
+          return bounds.displayId === display.id;
+        })) === null || _window$runtime$scree === void 0 ? void 0 : _window$runtime$scree.bounds) || {
+          x: ox,
+          y: oy
+        },
+        x = _ref3.x,
+        y = _ref3.y;
+      screenBounds = _objectSpread({
+        x: x,
+        y: y
+      }, bounds);
+      browserWindow.setBounds(screenBounds);
+    } else {
+      recordShareBounds.clear();
+      screenBounds = (0, _tools.getCurrentSharingWorkArea)({
+        currentShareId: currentShareId,
+        currentShareType: currentShareType,
+        allApplicationWindows: allApplicationWindows,
+        currentShareBounds: currentShareBounds
+      });
+      recordShareBounds.set(currentShareBounds, screenBounds);
+    }
+    return screenBounds;
+  }
   function checkMouseOver() {
     if (windowFocusTimerRef.current) clearInterval(windowFocusTimerRef.current);
+    var screenBounds = getScreenBounds();
     (0, _tools.handleCheckMouseOver)({
       elem: rndRef.current,
       browserWindow: browserWindow,
-      screenBounds: (0, _tools.getCurrentSharingWorkArea)({
-        currentShareId: currentShareId,
-        currentShareType: currentShareType,
-        allApplicationWindows: allApplicationWindows,
-        currentShareBounds: currentShareBounds
-      }),
+      screenBounds: screenBounds,
       newRendererWindow: newRendererWindow,
       callback: function callback(timerId) {
         windowFocusTimerRef.current = timerId;
@@ -267,10 +306,10 @@ var ControlBarView = exports.ControlBarView = (0, _mobxReact.observer)(function
     });
   }
   (0, _react.useEffect)(function () {
-    if ((0, _platform.isWindows)()) {
-      checkMouseOver();
-      window.runtime.screen.addListener('display-metrics-changed', checkMouseOver);
-    }
+    (0, _platform.isWindows)() ? checkMouseOver() : getScreenBounds();
+    window.runtime.screen.addListener(
+    // @ts-ignore
+    'display-metrics-changed', (0, _platform.isWindows)() ? checkMouseOver : getScreenBounds);
     browserWindow.setAlwaysOnTop(false);
     handleMouseLeave();
     document.body.classList.add(_toast.TOAST_ROOT_CLASS_NAME);
@@ -280,19 +319,15 @@ var ControlBarView = exports.ControlBarView = (0, _mobxReact.observer)(function
       browserWindow.setAlwaysOnTop(true, 'screen-saver');
     }, 500);
     return function () {
-      window.runtime.screen.removeListener('display-metrics-changed', checkMouseOver);
+      window.runtime.screen.removeListener(
+      // @ts-ignore
+      'display-metrics-changed', (0, _platform.isWindows)() ? checkMouseOver : getScreenBounds);
       window.removeEventListener('blur', handleBlur);
-      browserWindow.setIgnoreMouseEvents(true);
       clearTimeout(hideTimeout.current);
       clearTimeout(alwayOnTopTimerRef.current);
       clearInterval(windowFocusTimerRef.current);
     };
   }, [currentShareId]);
-  (0, _react.useEffect)(function () {
-    return function () {
-      return browserWindow.close();
-    };
-  }, []);
   return currentShareId ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, bind()), {}, {
     style: {
       width: 'fit-content',
@@ -330,8 +365,11 @@ var ControlBarView = exports.ControlBarView = (0, _mobxReact.observer)(function
               borderRadius: 'var(--fcr_cornerradius_l)'
             },
             content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_securityMenu["default"], {
+              showLockedRoomToast: showLockedRoomToast,
               privilege: privilegeProvider,
-              setEnableWaitingRoom: setEnableWaitingRoom
+              setEnableWaitingRoom: setEnableWaitingRoom,
+              checkedStateMap: checkedStateMap,
+              setCheckedStateMap: setCheckedStateMap
             }),
             trigger: "click",
             visible: showSecurityPopover,
@@ -354,7 +392,7 @@ var ControlBarView = exports.ControlBarView = (0, _mobxReact.observer)(function
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareScreenButton.ShareScreenButton, {
             onCreateNewShareButtonClick: createNewShare
           }), hasStopLiveStreamingPermission && liveStreamingState === _type.FcrLiveStreamingState.STARTED && /*#__PURE__*/(0, _jsxRuntime.jsx)(_stopLiveStreaming.StopLiveStreamingButton, {}), hasStartCloudRecordingPermission && cloudRecordingState !== _type.FcrRecordingState.Stopped && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cloudRecordingButtons.CloudRecordingButtons, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge.FcrBadge, {
-            count: newMessageCount[_type2.FcrRoomType.Mainroom] || 0,
+            count: newMessageCount[_type2.FcrUIRoomType.MAIN_ROOM] || 0,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_more.More, {
               visible: moreVisible,
               onButtonClick: function onButtonClick() {

package/lib/modules/device-pretest/audio-preview/microphone-detection.js

@@ -49,7 +49,7 @@ var MicrophoneDetection = exports.MicrophoneDetection = (0, _mobxReact.observer)
       trigger: "hover",
       placement: "top",
       mouseEnterDelay: 0.2,
-      content: t(disabled ? 'fmt_settings_popup_disable_while_speaker_detected' : isDetecting ? 'fmt_setting_tips_speaker_unwork' : 'fmt_setting_tips_mic'),
+      content: t(disabled ? 'fmt_settings_popup_disable_while_speaker_detected' : isDetecting ? 'fmt_setting_tips_mic' : 'fmt_premeeting_setting_label_speak_into_your_microphone'),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
         onClick: function onClick() {
           setIsDetecting(!isDetecting);

package/lib/modules/device-pretest/settings/beauty.js

@@ -7,7 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Beauty = void 0;
 require("core-js/modules/es.array.map.js");
-require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _icon = require("agora-ui-foundation/lib/components/icon");

package/lib/modules/device-pretest/settings/virtual-background-setting.js

@@ -8,7 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.VirtualBackgroundSetting = void 0;
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.function.name.js");
-require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _useNamespace = require("../../setting/common/useNamespace");
 var _virtualBackdoundResources = require("../assets/virtual-backdound-resources");

package/lib/modules/device-pretest/store.js

@@ -49,8 +49,6 @@ require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
-require("core-js/modules/esnext.async-iterator.for-each.js");
-require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/esnext.iterator.map.js");

package/lib/modules/dialog/components/confirm/electron.d.ts

@@ -6,5 +6,5 @@ declare const ConfirmElectronDialog: ({ children, params, }: PropsWithChildren<{
         x?: number;
         y?: number;
     };
-}>) => null;
+}>) => import("react/jsx-runtime").JSX.Element;
 export default ConfirmElectronDialog;

package/lib/modules/dialog/components/confirm/electron.js

@@ -1,84 +1,54 @@
 "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;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _context2 = require("../../context");
-var _reactDom = require("react-dom");
-var _renderer = require("../../../../utilities/renderer");
+var _store = require("../../store");
+var _constant = require("../../../../utilities/constant");
+var _useElectron = require("../../hooks/useElectron");
 var _jsxRuntime = require("react/jsx-runtime");
 var ConfirmElectronDialog = (0, _mobxReact.observer)(function (_ref) {
   var children = _ref.children,
     params = _ref.params;
-  var store = (0, _react.useContext)(_context2.StoreContext);
+  var store = (0, _react.useContext)(_store.StoreContext);
+  var config = {
+    frame: false,
+    fullscreen: false,
+    maximizable: false,
+    width: (params === null || params === void 0 ? void 0 : params.width) || 320,
+    height: (params === null || params === void 0 ? void 0 : params.height) || 168 + (params.closable || params.closable === undefined ? 16 : 0),
+    minWidth: 255,
+    minHeight: 160,
+    maxWidth: 620,
+    maxHeight: 700,
+    transparent: true,
+    resizable: false
+  };
+  var element = (0, _useElectron.useElectronDialog)({
+    config: config,
+    dialogKey: _constant.DialogKey.CONFIRM,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-confirm-dialog-wrapper",
+      children: children
+    }),
+    onOpened: function onOpened(_ref2) {
+      var browserWindow = _ref2.browserWindow;
+      browserWindow.setBounds({
+        width: (params === null || params === void 0 ? void 0 : params.width) || 320,
+        height: (params === null || params === void 0 ? void 0 : params.height) || 168 + (params.closable || params.closable === undefined ? 16 : 0)
+      });
+    }
+  });
   (0, _react.useEffect)(function () {
-    var node;
-    (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-      var _ref3, x, y;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return store.setWorkArea();
-          case 2:
-            _context.t0 = _context.sent;
-            if (_context.t0) {
-              _context.next = 5;
-              break;
-            }
-            _context.t0 = {
-              x: 0,
-              y: 0
-            };
-          case 5:
-            _ref3 = _context.t0;
-            x = _ref3.x;
-            y = _ref3.y;
-            window.runtime.openRendererWindow('confirm-dialog', function (dom, browserWindow) {
-              node = dom;
-              browserWindow.focus(); // 这里打开的confirm dialog 不会走 openRendererWindow 中的 focus 逻辑，所以单独 focus 一下
-
-              (0, _renderer.handleWillClose)(browserWindow, function () {
-                (0, _reactDom.unmountComponentAtNode)(node);
-              });
-              (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_context2.StoreContext.Provider, {
-                value: store,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: "fcr-confirm-dialog-wrapper",
-                  children: children
-                })
-              }), dom);
-            }, {
-              frame: false,
-              fullscreen: false,
-              maximizable: false,
-              width: (params === null || params === void 0 ? void 0 : params.width) || 415,
-              height: (params === null || params === void 0 ? void 0 : params.height) || 190,
-              minWidth: 255,
-              minHeight: 160,
-              maxWidth: 620,
-              maxHeight: 700,
-              x: x + ((params === null || params === void 0 ? void 0 : params.x) || 0),
-              y: y + ((params === null || params === void 0 ? void 0 : params.y) || 0)
-            });
-          case 9:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }))();
-    return function () {
-      node && (0, _reactDom.unmountComponentAtNode)(node);
-      window.runtime.closeRendererWindow('confirm-dialog');
-    };
-  }, []);
-  return null;
+    var _element$browserWindo;
+    element === null || element === void 0 || (_element$browserWindo = element.browserWindow) === null || _element$browserWindo === void 0 || _element$browserWindo.setBounds({
+      height: store.currentDialogBounds.height
+    });
+  }, [store.currentDialogBounds.height]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
 });
 var _default = exports["default"] = ConfirmElectronDialog;

package/lib/modules/dialog/components/connection-gateway/index.css

@@ -8,9 +8,7 @@
   overflow: hidden;
 }
 .connection-gateway-dialog.electron {
-  border: none;
   box-shadow: none;
-  border-radius: 0;
 }
 .connection-gateway-dialog_close {
   width: 14px;

package/lib/modules/dialog/components/control-bar/index.js

@@ -50,6 +50,7 @@ var ControlBarDialog = exports.ControlBarDialog = (0, _mobxReact.observer)(funct
       config: config,
       children: children,
       hasCustomShadow: false,
+      disableShortcutClose: true,
       onOpened: function onOpened(_ref) {
         var browserWindow = _ref.browserWindow;
         (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {

package/lib/modules/dialog/components/device-setting/index.js

@@ -16,10 +16,11 @@ var _jsxRuntime = require("react/jsx-runtime");
 var DeviceSettingDialog = function DeviceSettingDialog(_ref) {
   var children = _ref.children;
   var t = (0, _i18n.useI18n)();
+  var height = (0, _env.isElectron)() ? 556 : 600;
   var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
     title: t('fmt_modules_labels_devicesettings'),
     width: 580,
-    height: 556,
+    height: height,
     dialogKey: _constant.FcrUIDialogKey.DEVICE_SETTINGS,
     children: children
   });

package/lib/modules/dialog/components/dialog-container/component/body.d.ts

@@ -4,4 +4,5 @@ export declare function DialogContainerBody(props: PropsWithChildren<{
     onClick: () => void;
     title?: string;
     actions?: React.ReactNode;
+    autoHeight?: boolean;
 }>): import("react/jsx-runtime").JSX.Element;

package/lib/modules/dialog/components/dialog-container/component/body.js

@@ -10,8 +10,6 @@ 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/es.object.to-string.js");
-require("core-js/modules/esnext.async-iterator.filter.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.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
@@ -35,7 +33,8 @@ function DialogContainerBody(props) {
   var actions = props.actions,
     title = props.title,
     children = props.children,
-    onClick = props.onClick;
+    onClick = props.onClick,
+    autoHeight = props.autoHeight;
   var _useContext = (0, _react.useContext)(_.DialogContainerStore),
     bind = _useContext.bind;
   var _ref = (0, _env.isElectron)() ? (0, _react.useContext)(_useElectron.DialogInstanceContext) : {
@@ -63,7 +62,7 @@ function DialogContainerBody(props) {
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
       className: "fcr-dialog-container-content",
       style: title || actions ? {
-        height: resizable ? 'calc(100% - 46px)' /* 当窗口需要拉伸时，会传值为 false 的 hasCustomShadow 过来，高度不需要自适应，所以内容区高度为 100vh 减去 title 高度 46px */ : !(0, _env.isElectron)() ? 'calc(100% - 46px)' /* 浏览器不需要减去阴影，高度需要 100% 减去 46px title */ : 'calc(100vh - 76px)' /* 76px 包含 46px 的 title 高度，和 30px 的阴影 */
+        height: resizable ? 'calc(100% - 46px)' /* 当窗口需要拉伸时，会传值为 false 的 hasCustomShadow 过来，高度不需要自适应，所以内容区高度为 100vh 减去 title 高度 46px */ : (0, _env.isElectron)() ? autoHeight ? 'auto' : 'calc(100vh - 76px)' /* 76px 包含 46px 的 title 高度，和 30px 的阴影 */ : 'calc(100% - 46px)' /* 浏览器不需要减去阴影，高度需要 100% 减去 46px title */
       } : {},
       children: children
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {

package/lib/modules/dialog/components/dialog-container/index.d.ts

@@ -12,5 +12,7 @@ declare const DialogContainer: (props: PropsWithChildren<{
     onClose?: () => void;
     closeInterception?: () => boolean;
     actions?: React.ReactNode;
+    dialogId?: string;
+    autoHeight?: boolean;
 }>) => import("react/jsx-runtime").JSX.Element;
 export default DialogContainer;

package/lib/modules/dialog/components/dialog-container/index.js

@@ -33,12 +33,19 @@ var DialogContainer = (0, _mobxReact.observer)(function (props) {
     children = props.children,
     dialogKey = props.dialogKey,
     actions = props.actions,
-    closeInterception = props.closeInterception;
+    closeInterception = props.closeInterception,
+    dialogId = props.dialogId,
+    autoHeight = props.autoHeight;
   var _useContext = (0, _react.useContext)(_store.StoreContext),
-    closeDialogByKey = _useContext.closeDialogByKey;
+    closeDialogByKey = _useContext.closeDialogByKey,
+    closeDilaogByDialogId = _useContext.closeDilaogByDialogId;
   var handleClose = function handleClose() {
     if (!(closeInterception !== null && closeInterception !== void 0 && closeInterception())) {
-      closeDialogByKey(dialogKey);
+      if (dialogId) {
+        closeDilaogByDialogId(dialogId);
+      } else {
+        closeDialogByKey(dialogKey);
+      }
       onClose === null || onClose === void 0 || onClose();
     }
   };
@@ -46,6 +53,7 @@ var DialogContainer = (0, _mobxReact.observer)(function (props) {
     title: title,
     onClick: handleClose,
     actions: actions,
+    autoHeight: autoHeight,
     children: children
   });
   if ((0, _env.isElectron)()) return container;
@@ -57,15 +65,19 @@ var DialogContainer = (0, _mobxReact.observer)(function (props) {
       height: props.height ? props.height : ((_rndRef$current = rndRef.current) === null || _rndRef$current === void 0 ? void 0 : _rndRef$current.getBoundingClientRect().height) || 160
     };
   }, [props.height]);
+  var windowWidth = window.innerWidth;
+  var height = window.innerHeight;
+  var x = windowWidth / 2 - size.width / 2;
+  var y = height / 2 - size.height / 2;
   var windowBounds = {
-    x: 0,
-    y: 0,
+    x: x,
+    y: y,
     width: window.innerWidth,
     height: window.innerHeight
   };
   var _useState = (0, _react.useState)({
-      x: 0,
-      y: 0
+      x: x,
+      y: y
     }),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     bounds = _useState2[0],
@@ -84,12 +96,6 @@ var DialogContainer = (0, _mobxReact.observer)(function (props) {
     };
     setBounds(coord);
   });
-  (0, _react.useEffect)(function () {
-    setBounds({
-      x: windowBounds.width / 2 - size.width / 2,
-      y: windowBounds.height / 2 - size.height / 2
-    });
-  }, [rndRef.current]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: {
       width: size.width,

package/lib/modules/dialog/components/live-streaming/index.js

@@ -20,6 +20,7 @@ var LiveStreamingDialog = exports.LiveStreamingDialog = function LiveStreamingDi
     dialogKey: _constant.FcrUIDialogKey.LIVE_STREAMING,
     width: 440,
     height: 434,
+    autoHeight: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fcr-livestreaming-dialog-content",
       children: children
@@ -41,14 +42,15 @@ var LiveStreamingElectronDialog = function LiveStreamingElectronDialog(_ref2) {
     fullscreen: false,
     maximizable: false,
     width: 440,
-    height: 434,
+    height: 500,
     title: transI18n('fmt_actionbar__livestreaming_labels_live'),
     resizable: false
   };
   (0, _useElectron.useElectronDialog)({
     dialogKey: _constant.FcrUIDialogKey.LIVE_STREAMING,
     config: config,
-    onClose: function onClose(store) {
+    onClose: function onClose(_ref3) {
+      var store = _ref3.store;
       store.closeDialogByKey(_constant.FcrUIDialogKey.LIVE_STREAMING);
     },
     children: children

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

@@ -27,7 +27,7 @@ var ParticipantDialogContent = exports.ParticipantDialogContent = function Parti
     className: "fcr-participant-dialog-wrapper",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
       showClose: true,
-      title: "".concat(transI18n('fmt_role_participant'), "(").concat(store.participantCount, ")"),
+      title: "".concat(transI18n('fmt_participants_label_participants'), "(").concat(store.participantCount, ")"),
       type: _windowHeader.WindowType.WINDOW,
       onTypeChange: store.moveParticipantFromDialogToAside,
       onClose: function onClose() {
@@ -42,7 +42,7 @@ var ParticipantDialog = exports.ParticipantDialog = function ParticipantDialog(_
   var store = (0, _react.useContext)(_store.StoreContext);
   var transI18n = (0, _i18n.useI18n)();
   var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
-    title: "".concat(transI18n('fmt_role_participant'), "(").concat(store.participantCount, ")"),
+    title: "".concat(transI18n('fmt_participants_label_participants'), "(").concat(store.participantCount, ")"),
     width: 320,
     height: 560,
     dialogKey: _constant.FcrUIDialogKey.PARTICIPANT,

package/lib/modules/dialog/components/remove-admit-waiting-room/electron.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _mobxReact = require("mobx-react");
 var _useElectron = require("../../hooks/useElectron");
 var _attendee = require("../../../participant/attendee");
-var DialogContent = function DialogContent(_ref) {
+var DialogContent = (0, _mobxReact.observer)(function (_ref) {
   var children = _ref.children,
     params = _ref.params;
   var config = {
+    frame: false,
     fullscreen: false,
     maximizable: false,
     width: (params === null || params === void 0 ? void 0 : params.width) || 320,
@@ -20,7 +22,8 @@ var DialogContent = function DialogContent(_ref) {
     maxWidth: 620,
     maxHeight: 700,
     x: (params === null || params === void 0 ? void 0 : params.x) || 0,
-    y: (params === null || params === void 0 ? void 0 : params.y) || 0
+    y: (params === null || params === void 0 ? void 0 : params.y) || 0,
+    transparent: true
   };
   (0, _useElectron.useElectronDialog)({
     config: config,
@@ -29,5 +32,5 @@ var DialogContent = function DialogContent(_ref) {
     children: children
   });
   return null;
-};
+});
 var _default = exports["default"] = DialogContent;

package/lib/modules/dialog/components/remove-admit-waiting-room/index.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
 import './index.css';
-export declare const RemoveAdmitWaitingRoomDialog: ({ children, params, }: PropsWithChildren<{
+export declare const RemoveAdmitWaitingRoomDialog: ({ children, params }: PropsWithChildren<{
     params: any;
 }>) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/dialog/components/remove-admit-waiting-room/index.js

@@ -3,6 +3,7 @@
 require("core-js/modules/es.symbol.js");
 require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.object.define-properties.js");
 require("core-js/modules/es.object.define-property.js");
@@ -10,19 +11,26 @@ 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/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
 require("core-js/modules/esnext.async-iterator.filter.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.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
 require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RemoveAdmitWaitingRoomDialog = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
+var _mobxReact = require("mobx-react");
+var _react = _interopRequireWildcard(require("react"));
 var _store = require("../../store");
 var _reactRnd = require("react-rnd");
 var _electron = _interopRequireDefault(require("./electron"));
@@ -30,9 +38,11 @@ var _platform = require("../../../../utilities/platform");
 require("./index.css");
 var _env = require("agora-foundation/lib/utilities/env");
 var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var RemoveAdmitWaitingRoomDialog = exports.RemoveAdmitWaitingRoomDialog = function RemoveAdmitWaitingRoomDialog(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // import { ConfirmContentProps } from 'agora-ui-foundation/lib/components/confirm-content';
+var RemoveAdmitWaitingRoomDialog = exports.RemoveAdmitWaitingRoomDialog = (0, _mobxReact.observer)(function (_ref) {
   var children = _ref.children,
     params = _ref.params;
   var store = (0, _react.useContext)(_store.StoreContext);
@@ -77,4 +87,4 @@ var RemoveAdmitWaitingRoomDialog = exports.RemoveAdmitWaitingRoomDialog = functi
       })
     })
   });
-};
+});