fcr-ui-scene 3.3.1 → 3.4.1

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

@@ -1,91 +1,29 @@
 "use strict";
 
-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.push.js");
-require("core-js/modules/es.object.define-properties.js");
 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");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ParticipantElectronDialog = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _mobxReact = require("mobx-react");
-var _react = require("react");
-var _context = require("../../context");
 var _constant = require("../../../../utilities/constant");
-var _dialogs = require("../../dialogs");
-var _renderer = require("../../../../utilities/renderer");
-var _reactDom = require("react-dom");
-var _ = require(".");
-var _platform = require("../../../../utilities/platform");
-var _jsxRuntime = require("react/jsx-runtime");
-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 ParticipantElectronDialog = exports.ParticipantElectronDialog = (0, _mobxReact.observer)(function (_ref) {
+var _useElectron = require("../../hooks/useElectron");
+var ParticipantElectronDialog = exports.ParticipantElectronDialog = function ParticipantElectronDialog(_ref) {
   var children = _ref.children;
-  var store = (0, _react.useContext)(_context.StoreContext);
-  (0, _react.useEffect)(function () {
-    var newLocal = {
-      width: 320,
-      height: 560
-    };
-    var node;
-    window.runtime.openRendererWindow('participant', function (dom, browserWindow) {
-      _dialogs.dialogWindows.set(_constant.DialogKey.PARTICIPANT, browserWindow);
-      node = dom;
-      (0, _platform.isWindows)() && browserWindow.show(); // 修复 windows 下打开白屏的问题
-
-      if (store.currentDialogBounds.height) {
-        (0, _dialogs.setDialogBounds)(browserWindow, {
-          y: store.currentDialogBounds.y
-        });
-      }
-      store.setParticipantElectronDialogContainer(dom);
-      (0, _renderer.handleWillClose)(browserWindow, function () {
-        (0, _reactDom.unmountComponentAtNode)(node);
-        _dialogs.dialogWindows["delete"](_constant.DialogKey.PARTICIPANT);
-        store.setParticipantElectronDialogContainer(null);
-        store.closeParticipantFromDialog();
-      });
-      (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
-        value: store,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ParticipantDialogContent, {
-          children: children
-        })
-      }), dom);
-    }, _objectSpread(_objectSpread({
-      frame: false,
-      fullscreen: false,
-      maximizable: false
-    }, newLocal), {}, {
-      width: newLocal.width || 320,
-      height: newLocal.height || 560,
-      minWidth: 320,
-      minHeight: 560,
-      maxWidth: 620,
-      maxHeight: 700,
-      y: store.currentDialogBounds.y,
-      center: true,
-      show: !(0, _platform.isWindows)(),
-      transparent: true
-    }));
-    return function () {
-      node && (0, _reactDom.unmountComponentAtNode)(node);
-      window.runtime.closeRendererWindow('participant');
-    };
-  }, []);
+  var config = {
+    fullscreen: false,
+    maximizable: false,
+    width: 320,
+    height: 560,
+    minWidth: 320,
+    minHeight: 560,
+    maxWidth: 620,
+    maxHeight: 700,
+    center: true
+  };
+  (0, _useElectron.useElectronDialog)({
+    config: config,
+    dialogKey: _constant.DialogKey.PARTICIPANT,
+    children: children
+  });
   return null;
-});
+};

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

@@ -1,6 +1,7 @@
 "use strict";
 
 require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,15 +10,18 @@ require("core-js/modules/es.array.concat.js");
 var _env = require("agora-foundation/lib/utilities/env");
 var _windowHeader = require("agora-ui-foundation/lib/components/window-header");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _reactRnd = require("react-rnd");
-var _context = require("../../context");
+var _store = require("../../store");
 var _electron = require("./electron");
+var _constant = require("../../../../utilities/constant");
+var _dialogContainer = _interopRequireDefault(require("../../../components/dialog-container"));
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _iconButton = require("agora-ui-foundation/lib/components/icon-button");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _jsxRuntime = require("react/jsx-runtime");
-var ParticipantDialogContent = exports.ParticipantDialogContent = (0, _mobxReact.observer)(function (_ref) {
+var ParticipantDialogContent = exports.ParticipantDialogContent = function ParticipantDialogContent(_ref) {
   var children = _ref.children;
-  var store = (0, _react.useContext)(_context.StoreContext);
+  var store = (0, _react.useContext)(_store.StoreContext);
   var transI18n = (0, _i18n.useI18n)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "fcr-participant-dialog-wrapper",
@@ -26,36 +30,44 @@ var ParticipantDialogContent = exports.ParticipantDialogContent = (0, _mobxReact
       title: "".concat(transI18n('fmt_role_participant'), "(").concat(store.participantCount, ")"),
       type: _windowHeader.WindowType.WINDOW,
       onTypeChange: store.moveParticipantFromDialogToAside,
-      onClose: store.closeParticipantFromDialog,
+      onClose: function onClose() {
+        return store.closeDialogByKey(_constant.DialogKey.PARTICIPANT);
+      },
       rootClassName: 'participant-can-draggable'
     }), children]
   });
-});
-var ParticipantDialog = exports.ParticipantDialog = (0, _mobxReact.observer)(function (_ref2) {
+};
+var ParticipantDialog = exports.ParticipantDialog = function ParticipantDialog(_ref2) {
   var children = _ref2.children;
-  var width = window.innerWidth;
-  var defaultSize = {
-    x: width / 2 - 320 / 2,
-    y: 0,
+  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, ")"),
     width: 320,
-    height: 560
-  };
+    height: 560,
+    dialogKey: _constant.DialogKey.PARTICIPANT,
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      content: transI18n('fmt_uimanager_option_mergeview'),
+      mouseEnterDelay: 0,
+      trigger: "hover",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+        icon: _type.FcrIconType.FCR_WINDOWPAGE_BIGGER,
+        onClick: store.moveParticipantFromDialogToAside,
+        className: "frc-window-header__icon fcr-no-drag",
+        iconColors: {
+          iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+        }
+      })
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-participant-dialog-wrapper",
+      children: children
+    })
+  });
   if ((0, _env.isElectron)()) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.ParticipantElectronDialog, {
-      children: children
+      children: container
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
-    "default": defaultSize,
-    bounds: '.fcr-layout-content',
-    maxHeight: 700,
-    maxWidth: 620,
-    minWidth: 320,
-    minHeight: 560,
-    cancel: ".frc-window-header__operates",
-    dragHandleClassName: "participant-can-draggable",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ParticipantDialogContent, {
-      children: children
-    })
-  });
-});
+  return container;
+};

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

@@ -1,5 +1,12 @@
 import { PropsWithChildren } from 'react';
 declare const DialogContent: ({ children, params, }: PropsWithChildren<{
-    params: any;
+    params: {
+        type: "remove" | "removeAll" | "admitAll";
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+        closable?: boolean;
+    };
 }>) => null;
 export default DialogContent;

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

@@ -1,89 +1,33 @@
 "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 _jsxRuntime = require("react/jsx-runtime");
-var DialogContent = (0, _mobxReact.observer)(function (_ref) {
+var _useElectron = require("../../hooks/useElectron");
+var _attendee = require("../../../participant/attendee");
+var DialogContent = function DialogContent(_ref) {
   var children = _ref.children,
     params = _ref.params;
-  var store = (0, _react.useContext)(_context2.StoreContext);
-  (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("operation-waiting-room-".concat(params.type), function (dom, browserWindow) {
-              node = dom;
-              browserWindow.focus(); // 这里打开的confirm dialog 不会走 openRendererWindow 中的 focus 逻辑，所以单独 focus 一下
-
-              browserWindow.setBounds({
-                width: 400,
-                height: 300
-              });
-              (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", {
-                  children: children
-                })
-              }), dom);
-            }, {
-              frame: false,
-              fullscreen: false,
-              maximizable: false,
-              // TODO:
-              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,
-              x: x + ((params === null || params === void 0 ? void 0 : params.x) || 0),
-              y: y + ((params === null || params === void 0 ? void 0 : params.y) || 0),
-              transparent: true
-            });
-          case 9:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }))();
-    return function () {
-      node && (0, _reactDom.unmountComponentAtNode)(node);
-      window.runtime.closeRendererWindow("operation-waiting-room-".concat(params.type));
-    };
-  }, []);
+  var config = {
+    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,
+    x: (params === null || params === void 0 ? void 0 : params.x) || 0,
+    y: (params === null || params === void 0 ? void 0 : params.y) || 0
+  };
+  (0, _useElectron.useElectronDialog)({
+    config: config,
+    dialogKey: _attendee.WaitingRoomDialogKeyMap[params.type],
+    // `operation-waiting-room-${params.type}`,
+    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,7 +3,6 @@
 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");
@@ -11,41 +10,32 @@ 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 _mobxReact = require("mobx-react");
-var _react = _interopRequireWildcard(require("react"));
-var _context = require("../../context");
+var _react = require("react");
+var _store = require("../../store");
 var _reactRnd = require("react-rnd");
 var _electron = _interopRequireDefault(require("./electron"));
 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; } // import { ConfirmContentProps } from 'agora-ui-foundation/lib/components/confirm-content';
-var RemoveAdmitWaitingRoomDialog = exports.RemoveAdmitWaitingRoomDialog = (0, _mobxReact.observer)(function (_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; }
+var RemoveAdmitWaitingRoomDialog = exports.RemoveAdmitWaitingRoomDialog = function RemoveAdmitWaitingRoomDialog(_ref) {
   var children = _ref.children,
     params = _ref.params;
-  var store = (0, _react.useContext)(_context.StoreContext);
+  var store = (0, _react.useContext)(_store.StoreContext);
   var containerWidth = window.innerWidth;
   var containerHeight = window.innerHeight;
   var _ref2 = (0, _env.isElectron)() ? window.runtime.browserWindow.getBounds() : {
@@ -67,7 +57,7 @@ var RemoveAdmitWaitingRoomDialog = exports.RemoveAdmitWaitingRoomDialog = (0, _m
       children: children
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
     value: store,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
       "default": {
@@ -87,4 +77,4 @@ var RemoveAdmitWaitingRoomDialog = exports.RemoveAdmitWaitingRoomDialog = (0, _m
       })
     })
   });
-});
+};

package/lib/modules/dialog/components/share-screen-selection/index.js

@@ -1,42 +1,39 @@
 "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.ShareScreenSelectronDialog = void 0;
-var _mobxReact = require("mobx-react");
-var _react = require("react");
-var _dialogs = require("../../dialogs");
 var _constant = require("../../../../utilities/constant");
-var _renderer = require("../../../../utilities/renderer");
-var _reactDom = require("react-dom");
-var _context = require("../../context");
+var _useElectron = require("../../hooks/useElectron");
+var _dialogContainer = _interopRequireDefault(require("../../../components/dialog-container"));
 var _jsxRuntime = require("react/jsx-runtime");
-var ShareScreenSelectronDialog = exports.ShareScreenSelectronDialog = (0, _mobxReact.observer)(function (props) {
+var ShareScreenSelectronDialog = exports.ShareScreenSelectronDialog = function ShareScreenSelectronDialog(props) {
   var children = props.children,
-    params = props.params;
-  var store = (0, _react.useContext)(_context.StoreContext);
-  (0, _react.useEffect)(function () {
-    var node;
-    window.runtime.openRendererWindow('screen-selection', function (dom, browserWindow) {
-      browserWindow.focus();
-      _dialogs.dialogWindows.set(_constant.DialogKey.SHARE_SCREEN, browserWindow);
-      node = dom;
-      (0, _renderer.handleWillClose)(browserWindow, function () {
-        (0, _reactDom.unmountComponentAtNode)(node);
-        _dialogs.dialogWindows["delete"](_constant.DialogKey.SHARE_SCREEN);
-        store.closeShareScreenDialog();
-      });
-      (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
-        value: store,
-        children: children
-      }), dom);
-    }, params);
-    return function () {
-      node && (0, _reactDom.unmountComponentAtNode)(node);
-      window.runtime.closeRendererWindow('screen-selection');
-    };
-  }, []);
+    config = props.params;
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: _constant.DialogKey.SHARE_SCREEN,
+    config: {
+      width: 790,
+      height: 550,
+      fullscreen: false,
+      maximizable: false,
+      trafficLightPosition: {
+        x: 0,
+        y: 0
+      }
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer["default"], {
+      width: 790,
+      height: 550,
+      dialogKey: _constant.DialogKey.SHARE_SCREEN,
+      children: children
+    }),
+    onClose: function onClose(store) {
+      store.closeDialogByKey(_constant.DialogKey.SHARE_SCREEN);
+    }
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
-});
+};

package/lib/modules/dialog/components/switch-language-channels/electron.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DeviceSettingElectronDialog = void 0;
 var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _context = require("../../context");
+var _store = require("../../store");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _constant = require("../../../../utilities/constant");
 var _dialogs = require("../../dialogs");
@@ -17,14 +17,14 @@ var _windowHeader = require("agora-ui-foundation/lib/components/window-header");
 var _jsxRuntime = require("react/jsx-runtime");
 var DeviceSettingElectronDialog = exports.DeviceSettingElectronDialog = (0, _mobxReact.observer)(function (_ref) {
   var children = _ref.children;
-  var store = (0, _react.useContext)(_context.StoreContext);
+  var store = (0, _react.useContext)(_store.StoreContext);
   var t = (0, _i18n.useI18n)();
   (0, _react.useEffect)(function () {
     var node;
     window.runtime.openRendererWindow('simultaneous-interpretation', function (dom, browserWindow) {
       _dialogs.dialogWindows.set(_constant.DialogKey.DEVICE_SETTINGS, browserWindow);
       node = dom;
-      if (store.currentDialogBounds.height) {
+      if (store.currentDialogBounds.y) {
         (0, _dialogs.setDialogBounds)(browserWindow, {
           y: store.currentDialogBounds.y
         });
@@ -41,7 +41,7 @@ var DeviceSettingElectronDialog = exports.DeviceSettingElectronDialog = (0, _mob
         className: "fcr-simultaneous-interpretation-dialog-wrapper",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
           showClose: true,
-          title: t('fmt_modules_labels_simultaneous_interpretation'),
+          title: t('fmt_interpretation_setting_controller_option_simultaneous_interpretation'),
           onClose: handleCloseClick,
           type: _windowHeader.WindowType.WINDOW,
           withWindowPopUpButton: false

package/lib/modules/dialog/components/switch-language-channels/index.js

@@ -13,14 +13,14 @@ var _react = require("react");
 var _reactRnd = require("react-rnd");
 var _windowHeader = require("agora-ui-foundation/lib/components/window-header");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _context = require("../../context");
+var _store = require("../../store");
 var _userQueue = _interopRequireDefault(require("./user-queue"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 var DeviceSettingDialog = (0, _mobxReact.observer)(function (_ref) {
   var children = _ref.children;
   var t = (0, _i18n.useI18n)();
-  var store = (0, _react.useContext)(_context.StoreContext);
+  var store = (0, _react.useContext)(_store.StoreContext);
   var containerRef = (0, _react.useRef)(null);
   var windowWidth = window.innerWidth;
   var windowHeight = window.innerHeight;
@@ -51,7 +51,7 @@ var DeviceSettingDialog = (0, _mobxReact.observer)(function (_ref) {
       className: "fcr-simultaneous-interpretation-dialog-wrapper",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
         showClose: true,
-        title: t('fmt_modules_labels_simultaneous_interpretation'),
+        title: t('fmt_interpretation_setting_controller_option_simultaneous_interpretation'),
         onClose: handleCloseClick,
         type: _windowHeader.WindowType.WINDOW,
         withWindowPopUpButton: false,

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

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+declare const DialogContent: ({ children, params, }: PropsWithChildren<{
+    params: any;
+}>) => null;
+export default DialogContent;

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

@@ -0,0 +1,39 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _useElectron = require("../../hooks/useElectron");
+var _constant = require("../../../../utilities/constant");
+var DialogContent = function DialogContent(_ref) {
+  var children = _ref.children,
+    params = _ref.params;
+  var config = {
+    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,
+    x: (params === null || params === void 0 ? void 0 : params.x) || 0,
+    y: (params === null || params === void 0 ? void 0 : params.y) || 0
+  };
+  (0, _useElectron.useElectronDialog)({
+    dialogKey: _constant.DialogKey.SYSTEM_PREFERENCE,
+    config: config,
+    children: children,
+    onOpened: function onOpened(_ref2) {
+      var setBounds = _ref2.setBounds;
+      setBounds({
+        width: 280,
+        height: 355
+      });
+    }
+  });
+  return null;
+};
+var _default = exports["default"] = DialogContent;

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

@@ -0,0 +1,49 @@
+.fcr-system-preference-dialog {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+  background-color: white;
+  width: 100%;
+  height: 100%;
+}
+
+.fcr-system-preference-dialog img {
+  width: 90%;
+  margin-bottom: 10px;
+}
+
+.fcr-system-preference-dialog-title {
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 10px;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.fcr-system-preference-dialog-desc {
+  font-weight: 400;
+  font-size: 13px;
+  margin-bottom: 10px;
+  color: var(--fcr_ui_scene_icontext1);
+  width: 90%;
+}
+
+.fcr-system-preference-dialog-button {
+  width: 90%;
+}
+
+.fcr-system-preference-dialog button {
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.fcr-system-preference-dialog .fcr-button-white {
+  background-color: var(--fcr_ui_scene_btn2);
+  color: var(--fcr_ui_scene_icontext2);
+}
+
+.fcr-system-preference-dialog .fcr-button-white:hover {
+  background-color: var(--fcr_ui_scene_btn2) !important;
+  color: var(--fcr_ui_scene_icontext2) !important;
+}