fcr-ui-scene 3.1.1 → 3.3.0

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

@@ -13,6 +13,13 @@ 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");
@@ -27,6 +34,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _context = require("../../context");
 var _reactRnd = require("react-rnd");
 var _electron = _interopRequireDefault(require("./electron"));
+var _platform = require("../../../../utilities/platform");
 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; }
@@ -39,10 +47,16 @@ var ConfirmDialog = exports.ConfirmDialog = (0, _mobxReact.observer)(function (_
   var store = (0, _react.useContext)(_context.StoreContext);
   var containerWidth = window.innerWidth;
   var containerHeight = window.innerHeight;
+  var _ref2 = dialogType === 'electron' ? window.runtime.browserWindow.getBounds() : {
+      x: document.body.offsetLeft,
+      y: document.body.offsetTop
+    },
+    offsetX = _ref2.x,
+    offsetY = _ref2.y;
   var width = (params === null || params === void 0 ? void 0 : params.width) || 415;
   var height = (params === null || params === void 0 ? void 0 : params.height) || 180;
-  var x = containerWidth / 2 - width / 2;
-  var y = containerHeight / 2 - height / 2;
+  var x = containerWidth / 2 - width / 2 + ((0, _platform.isWindows)() ? offsetX : 0);
+  var y = containerHeight / 2 - height / 2 + ((0, _platform.isWindows)() ? offsetY : 0);
   if (dialogType === 'electron') {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron["default"], {
       params: _objectSpread(_objectSpread({}, params), {}, {

package/lib/modules/dialog/components/connection-gateway/electron.js

@@ -21,6 +21,7 @@ var ConnectionGatewayElectronDialog = exports.ConnectionGatewayElectronDialog =
   (0, _react.useEffect)(function () {
     var node;
     window.runtime.openRendererWindow('connection-gateway', function (dom, browserWindow) {
+      browserWindow.webContents.insertCSS("\n          ::-webkit-scrollbar {\n            display: none;\n          }\n        ");
       browserRef.current = browserWindow;
       browserWindow.focus();
       _dialogs.dialogWindows.set(_constant.DialogKey.CONNECTION_GATEWAY, browserWindow);
@@ -30,7 +31,7 @@ var ConnectionGatewayElectronDialog = exports.ConnectionGatewayElectronDialog =
         _dialogs.dialogWindows["delete"](_constant.DialogKey.CONNECTION_GATEWAY);
         store.closeConnectionDialog();
       });
-      (0, _reactDom.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
+      (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
         value: store,
         children: children
       }), dom);
@@ -43,7 +44,8 @@ var ConnectionGatewayElectronDialog = exports.ConnectionGatewayElectronDialog =
         x: 0,
         y: 0
       },
-      resizable: false
+      resizable: false,
+      transparent: true
     });
     return function () {
       node && (0, _reactDom.unmountComponentAtNode)(node);

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/device-setting/electron.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare const DeviceSettingElectronDialog: ({ children }: PropsWithChildren<{}>) => null;

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

@@ -0,0 +1,74 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeviceSettingElectronDialog = void 0;
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _context = require("../../context");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _constant = require("../../../../utilities/constant");
+var _dialogs = require("../../dialogs");
+var _renderer = require("../../../../utilities/renderer");
+var _reactDom = require("react-dom");
+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 t = (0, _i18n.useI18n)();
+  (0, _react.useEffect)(function () {
+    var node;
+    window.runtime.openRendererWindow('device-setting', function (dom, browserWindow) {
+      browserWindow.webContents.insertCSS("\n          ::-webkit-scrollbar {\n            display: none;\n          }\n        ");
+      _dialogs.dialogWindows.set(_constant.DialogKey.DEVICE_SETTINGS, browserWindow);
+      node = dom;
+      if (store.currentDialogBounds.height) {
+        (0, _dialogs.setDialogBounds)(browserWindow, {
+          y: store.currentDialogBounds.y
+        });
+      }
+      (0, _renderer.handleWillClose)(browserWindow, function () {
+        (0, _reactDom.unmountComponentAtNode)(node);
+        _dialogs.dialogWindows["delete"](_constant.DialogKey.DEVICE_SETTINGS);
+        store.closeDeviceSettingFromDialog();
+      });
+      var handleCloseClick = function handleCloseClick() {
+        store.closeDeviceSettingFromDialog();
+      };
+      (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-device-setting-dialog-wrapper",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
+          showClose: true,
+          title: t('fmt_modules_labels_devicesettings'),
+          onClose: handleCloseClick,
+          type: _windowHeader.WindowType.WINDOW,
+          withWindowPopUpButton: false
+        }), children]
+      }), dom);
+    }, {
+      frame: false,
+      fullscreen: false,
+      maximizable: false,
+      // titleBarStyle: 'hidden',
+      trafficLightPosition: {
+        x: 10,
+        y: 60
+      },
+      width: 580,
+      height: 600,
+      minWidth: 580,
+      minHeight: 600,
+      maxWidth: 670,
+      maxHeight: 800,
+      transparent: true
+    });
+    return function () {
+      node && (0, _reactDom.unmountComponentAtNode)(node);
+      window.runtime.closeRendererWindow('device-setting');
+    };
+  }, []);
+  return null;
+});

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

@@ -0,0 +1,26 @@
+.fcr-device-setting-dialog-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  border-radius: 16px;
+  box-shadow: var(--fcr_web_light_dropup);
+  border: 1px solid var(--fcr_ui_scene_line1);
+}
+
+.fcr-device-setting-dialog-wrapper .frc-window-header {
+  cursor: move;
+  height: 46px;
+}
+
+.fcr-device-setting-dialog-wrapper .fcr-device-settings {
+  height: calc(100% - 46px);
+}
+.fcr-device-setting-dialog-wrapper .fcr-device-settings-audio {
+  padding: 0;
+}
+
+.fcr-device-setting-dialog-wrapper .frc-window-header .frc-window-header__title {
+  height: 46px;
+  line-height: 46px;
+}

package/lib/modules/dialog/components/device-setting/index.d.ts

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

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

@@ -0,0 +1,60 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _env = require("agora-foundation/lib/utilities/env");
+var _electron = require("./electron");
+var _mobxReact = require("mobx-react");
+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");
+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 containerRef = (0, _react.useRef)(null);
+  var windowWidth = window.innerWidth;
+  var windowHeight = window.innerHeight;
+  var width = 580;
+  var height = 556;
+  var x = windowWidth / 2 - width / 2;
+  if ((0, _env.isElectron)()) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron.DeviceSettingElectronDialog, {
+      children: children
+    });
+  }
+  function handleCloseClick() {
+    store.closeDeviceSettingFromDialog();
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
+    "default": {
+      x: x,
+      y: windowHeight / 2 - height / 2,
+      width: width,
+      height: height
+    },
+    ref: containerRef,
+    bounds: '.fcr-layout-content',
+    minWidth: width,
+    minHeight: height,
+    dragHandleClassName: "frc-window-header",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-device-setting-dialog-wrapper",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
+        showClose: true,
+        title: t('fmt_modules_labels_devicesettings'),
+        onClose: handleCloseClick,
+        type: _windowHeader.WindowType.WINDOW,
+        withWindowPopUpButton: false
+      }), children]
+    })
+  });
+});
+var _default = exports["default"] = DeviceSettingDialog;

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

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

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

@@ -0,0 +1,89 @@
+"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 OperationWaitingRoomDialog = (0, _mobxReact.observer)(function (_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', function (dom, browserWindow) {
+              node = dom;
+              // browserWindow.focus(); // 这里打开的confirm dialog 不会走 openRendererWindow 中的 focus 逻辑，所以单独 focus 一下
+
+              browserWindow.setBounds({
+                width: 445,
+                height: 237
+              });
+              (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');
+    };
+  }, []);
+  return null;
+});
+var _default = exports["default"] = OperationWaitingRoomDialog;

package/lib/modules/dialog/components/operation-waiting-room/index.css

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

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

@@ -0,0 +1,5 @@
+import { FC, PropsWithChildren } from 'react';
+import './index.css';
+export declare const OperationWaitingRoomDialog: FC<PropsWithChildren<{
+    params: any;
+}>>;

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

@@ -0,0 +1,156 @@
+"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.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");
+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.OperationWaitingRoomDialog = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _mobxReact = require("mobx-react");
+var _react = _interopRequireWildcard(require("react"));
+var _context3 = require("../../context");
+var _reactRnd = require("react-rnd");
+var _electron = _interopRequireDefault(require("./electron"));
+var _platform = require("../../../../utilities/platform");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _button = require("agora-ui-foundation/lib/components/button");
+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 CloseWaitingRoomDialogContent = (0, _mobxReact.observer)(function (_ref) {
+  var totalWaitingRoomUser = _ref.totalWaitingRoomUser;
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_context3.StoreContext),
+    moveToMainRoomAllMember = _useContext.moveToMainRoomAllMember,
+    closeWaitingRoomDialog = _useContext.closeWaitingRoomDialog;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "close-waiting-room-dialog",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-dialog-title",
+      children: t('fmt_waitingroom_mobile_setting_popup_label_close')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-dialog-content",
+      children: t('fmt_waitingroom_mobile_setting_popup_label_choose', {
+        reason1: totalWaitingRoomUser
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-dialog-buttons",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        size: "S",
+        styleType: "normal",
+        shape: "rounded",
+        onClick: /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+          return _regenerator["default"].wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                moveToMainRoomAllMember(true);
+                closeWaitingRoomDialog();
+              case 2:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        })),
+        children: t('fmt_waitingroom_mobile_setting_popup_button_admit_all')
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-dialog-buttons",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        size: "S",
+        shape: "rounded",
+        styleType: "white",
+        onClick: /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+          return _regenerator["default"].wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                moveToMainRoomAllMember(false);
+                closeWaitingRoomDialog();
+              case 2:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        })),
+        children: t('fmt_waitingroom_mobile_setting_popup_button_cancel')
+      })
+    })]
+  });
+});
+var OperationWaitingRoomDialog = exports.OperationWaitingRoomDialog = (0, _mobxReact.observer)(function (_ref4) {
+  var params = _ref4.params;
+  var store = (0, _react.useContext)(_context3.StoreContext);
+  var containerWidth = window.innerWidth;
+  var containerHeight = window.innerHeight;
+  var _ref5 = (0, _env.isElectron)() ? window.runtime.browserWindow.getBounds() : {
+      x: document.body.offsetLeft,
+      y: document.body.offsetTop
+    },
+    offsetX = _ref5.x,
+    offsetY = _ref5.y;
+  var width = (params === null || params === void 0 ? void 0 : params.width) || 415;
+  var height = (params === null || params === void 0 ? void 0 : params.height) || 180;
+  var x = containerWidth / 2 - width / 2 + ((0, _platform.isWindows)() ? offsetX : 0);
+  var y = containerHeight / 2 - height / 2 + ((0, _platform.isWindows)() ? offsetY : 0);
+  if ((0, _env.isElectron)()) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_electron["default"], {
+      params: _objectSpread(_objectSpread({}, params), {}, {
+        x: x,
+        y: y
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseWaitingRoomDialogContent, {
+        totalWaitingRoomUser: params.totalWaitingRoomUser
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context3.StoreContext.Provider, {
+    value: store,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
+      "default": {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      },
+      maxHeight: 700,
+      maxWidth: width,
+      minWidth: width,
+      minHeight: height,
+      bounds: '.fcr-confirm-dialog-wrapper_web',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-confirm-dialog-wrapper_web",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseWaitingRoomDialogContent, {
+          totalWaitingRoomUser: params.totalWaitingRoomUser
+        })
+      })
+    })
+  });
+});

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

@@ -10,6 +10,11 @@ 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", {
@@ -55,7 +60,7 @@ var ParticipantElectronDialog = exports.ParticipantElectronDialog = (0, _mobxRea
         store.setParticipantElectronDialogContainer(null);
         store.closeParticipantFromDialog();
       });
-      (0, _reactDom.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
+      (0, _reactDom.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
         value: store,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ParticipantDialogContent, {
           children: children
@@ -74,7 +79,8 @@ var ParticipantElectronDialog = exports.ParticipantElectronDialog = (0, _mobxRea
       maxHeight: 700,
       y: store.currentDialogBounds.y,
       center: true,
-      show: !(0, _platform.isWindows)()
+      show: !(0, _platform.isWindows)(),
+      transparent: true
     }));
     return function () {
       node && (0, _reactDom.unmountComponentAtNode)(node);

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

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