fcr-ui-scene 3.4.5 → 3.5.1

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

@@ -9,10 +9,8 @@ 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 +19,15 @@ 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.async-iterator.find.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 +54,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 +86,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 +257,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 +309,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 +322,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 +368,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 +395,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() {
@@ -384,7 +425,6 @@ var ControlBarView = exports.ControlBarView = (0, _mobxReact.observer)(function
         currentPosition: navCurrentPosition,
         onStopShare: function onStopShare() {
           handlerStopShare();
-          browserWindow.close();
         }
       })]
     })

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/dialog/components/control-bar/index.d.ts

@@ -7,5 +7,5 @@ export declare const config: Electron.BrowserWindowConstructorOptions;
 export declare const ControlBarDialog: (props: PropsWithChildren<{
     params: FcrUIShareSelectionDisplayProps;
     module: ControlBarUIModule;
-}>) => import("react/jsx-runtime").JSX.Element;
+}>) => null;
 export declare const setBounds: (currentShareId: string, currentShareType: AgoraRtcScreenCaptureType, currentShareBounds: CurrentShareBounds, browserWindow: Electron.BrowserWindow, allApplicationWindows: AgoraRtcWindowInfo[]) => Promise<void>;

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

@@ -16,7 +16,7 @@ var _react = require("react");
 var _store = require("../../store");
 var _platform = require("../../../../utilities/platform");
 var _mobxReact = require("mobx-react");
-var _jsxRuntime = require("react/jsx-runtime");
+var _env = require("agora-foundation/lib/utilities/env");
 var config = exports.config = {
   y: 0,
   x: 0,
@@ -34,6 +34,7 @@ var config = exports.config = {
 var ControlBarDialog = exports.ControlBarDialog = (0, _mobxReact.observer)(function (props) {
   var module = props.module,
     params = props.params;
+  var eventProvider = module.eventProvider;
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     currentShareId = _useContext.currentShareId,
     currentShareType = _useContext.currentShareType,
@@ -45,57 +46,56 @@ var ControlBarDialog = exports.ControlBarDialog = (0, _mobxReact.observer)(funct
       browserWindow: browserWindow
     });
   };
+  var setBoundsWithNewAppWindows = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(browserWindow) {
+      var allApplicationWindows;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!browserWindow) {
+              _context.next = 5;
+              break;
+            }
+            _context.next = 3;
+            return deviceStore.getWindowList();
+          case 3:
+            allApplicationWindows = _context.sent;
+            setBounds(currentShareId, currentShareType, currentShareBounds, browserWindow, allApplicationWindows);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function setBoundsWithNewAppWindows(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
   var _useElectronDialog = (0, _useElectron.useElectronDialog)({
       dialogKey: _constant.FcrUIDialogKey.CONTROL_BAR,
       config: config,
       children: children,
       hasCustomShadow: false,
-      onOpened: function onOpened(_ref) {
-        var browserWindow = _ref.browserWindow;
-        (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-          var allApplicationWindows;
-          return _regenerator["default"].wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                _context.next = 2;
-                return deviceStore.getWindowList();
-              case 2:
-                allApplicationWindows = _context.sent;
-                setBounds(params.currentShareId, params.currentShareType, params.currentShareBounds, browserWindow, allApplicationWindows);
-              case 4:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }))();
+      disableShortcutClose: true,
+      onOpened: function onOpened(_ref2) {
+        var browserWindow = _ref2.browserWindow;
+        setBoundsWithNewAppWindows(browserWindow);
+        if ((0, _env.isElectron)()) {
+          eventProvider === null || eventProvider === void 0 || eventProvider.sendEvent(_constant.FcrUIAction.OPEN_TOP_VIDEO_WINDOW);
+        }
       }
     }),
     browserWindow = _useElectronDialog.browserWindow;
   (0, _react.useEffect)(function () {
-    (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-      var allApplicationWindows;
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.next = 2;
-            return deviceStore.getWindowList();
-          case 2:
-            allApplicationWindows = _context2.sent;
-            browserWindow && setBounds(currentShareId, currentShareType, currentShareBounds, browserWindow, allApplicationWindows);
-          case 4:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    }))();
+    setBoundsWithNewAppWindows(browserWindow);
   }, [currentShareId]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+  return null;
 });
 var setBounds = exports.setBounds = /*#__PURE__*/function () {
-  var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(currentShareId, currentShareType, currentShareBounds, browserWindow, allApplicationWindows) {
+  var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(currentShareId, currentShareType, currentShareBounds, browserWindow, allApplicationWindows) {
     var _getCurrentSharingWor, originWidth, originHeight, x, y, WINDOWS_SCREEN_BOUNDARY_WIDTH, width, height, firstBounds;
-    return _regenerator["default"].wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
         case 0:
           _getCurrentSharingWor = (0, _tools.getCurrentSharingWorkArea)({
             currentShareId: currentShareId,
@@ -144,11 +144,11 @@ var setBounds = exports.setBounds = /*#__PURE__*/function () {
           }, 100);
         case 7:
         case "end":
-          return _context3.stop();
+          return _context2.stop();
       }
-    }, _callee3);
+    }, _callee2);
   }));
-  return function setBounds(_x, _x2, _x3, _x4, _x5) {
-    return _ref4.apply(this, arguments);
+  return function setBounds(_x2, _x3, _x4, _x5, _x6) {
+    return _ref3.apply(this, arguments);
   };
 }();

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

@@ -35,7 +35,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 +64,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/share-screen-selection/index.js

@@ -30,12 +30,14 @@ var ShareScreenSelectronDialog = exports.ShareScreenSelectronDialog = function S
       resizable: false
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+      title: transI18n('fmt_screenshare_label_screenshare'),
       width: 790,
       height: 550,
       dialogKey: _constant.FcrUIDialogKey.SHARE_SCREEN,
       children: children
     }),
-    onClose: function onClose(store) {
+    onClose: function onClose(_ref) {
+      var store = _ref.store;
       store.closeDialogByKey(_constant.FcrUIDialogKey.SHARE_SCREEN);
     }
   });

package/lib/modules/dialog/components/system-preference/electron.js

@@ -14,23 +14,23 @@ var DialogContent = function DialogContent(_ref) {
     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),
+    height: (params === null || params === void 0 ? void 0 : params.height) || 355,
     minWidth: 255,
     minHeight: 160,
     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
+    maxHeight: 700
   };
   (0, _useElectron.useElectronDialog)({
     dialogKey: _constant.FcrUIDialogKey.SYSTEM_PREFERENCE,
     config: config,
     children: children,
+    hasCustomShadow: true,
+    alwaysOnTop: true,
     onOpened: function onOpened(_ref2) {
       var setBounds = _ref2.setBounds;
       setBounds({
-        width: 280,
-        height: 355
+        width: 320,
+        height: (params === null || params === void 0 ? void 0 : params.height) || 355
       });
     }
   });

package/lib/modules/dialog/components/system-preference/index.css

@@ -7,6 +7,9 @@
   background-color: white;
   width: 100%;
   height: 100%;
+  border-radius: var(--fcr_cornerradius_xxxl);
+  box-shadow: 0 0 15px #00000033;
+  border: 1px solid var(--fcr_ui_scene_line1);
 }
 
 .fcr-system-preference-dialog img {

package/lib/modules/dialog/components/system-preference/index.d.ts

@@ -1,5 +1,20 @@
 import { PropsWithChildren } from 'react';
+import { ButtonStyleType } from 'agora-ui-foundation/lib/components/button';
 import './index.css';
-export declare const SystemPreferenceDialog: ({ params }: PropsWithChildren<{
-    params: any;
+export type SystemPreferenceDialogContentProps = {
+    title: string;
+    desc: string;
+    img: string;
+    buttons: {
+        text: string;
+        onClick: () => void;
+        withClose: boolean;
+        styleType: ButtonStyleType;
+    }[];
+};
+export declare const SystemPreferenceDialog: ({ params, }: PropsWithChildren<{
+    params: SystemPreferenceDialogContentProps & {
+        width: number;
+        height: number;
+    };
 }>) => import("react/jsx-runtime").JSX.Element;