fcr-ui-scene 3.3.1 → 3.4.0

package/lib/ui-manager.js

@@ -1,15 +1,6 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.filter.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/esnext.async-iterator.filter.js");
-require("core-js/modules/esnext.iterator.filter.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -18,7 +9,7 @@ exports.DefaultSceneUIManager = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.for-each.js");
-require("core-js/modules/es.array.join.js");
+require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.promise.js");
 require("core-js/modules/es.promise.finally.js");
@@ -26,14 +17,15 @@ require("core-js/modules/esnext.async-iterator.for-each.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.for-each.js");
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _logger = require("agora-foundation/lib/logger");
-var _agoraEduCore = require("agora-edu-core");
+var _fcrCore = require("fcr-core");
 var _deviceStore = require("./common/device-store");
 var _layout = require("./modules/layout");
 var _waitingRoomLayout = require("./modules/waiting-room-layout");
@@ -47,22 +39,18 @@ var _constant = require("./utilities/constant");
 var _participant = require("./modules/participant");
 var _connectionGateway = require("./modules/connection-gateway");
 var _dialogs = require("./modules/dialog/dialogs");
-var _confirm = require("./modules/dialog/components/confirm");
 var _eventToast = require("./modules/event-toast");
 var _stateBar = require("./modules/state-bar");
 var _audioStream = require("./modules/audio-stream");
+var _soundEffect = require("./modules/sound-effect");
 var _shareScreen = require("./modules/share-screen");
 var _videoWindow = require("./modules/video-window");
-var _type2 = require("agora-edu-core/lib/type");
+var _type2 = require("fcr-core/lib/type");
 var _liveStreaming = require("./modules/live-streaming");
 var _invite = require("./modules/invite");
 var _connectionGateway2 = require("./modules/dialog/components/connection-gateway");
-var _confirmContent = require("agora-ui-foundation/lib/components/confirm-content");
-var _type3 = require("agora-rte-sdk/lib/core/rtc/type");
-var _type4 = require("agora-rte-sdk/lib/core/scene/type");
-var _type5 = require("agora-rte-sdk/lib/type");
 var _devicePretest = require("./modules/device-pretest");
-var _context9 = require("./modules/device-pretest/context");
+var _store = require("./modules/device-pretest/store");
 var _whiteboard = require("./modules/whiteboard");
 var _whiteboard2 = require("./modules/dialog/components/whiteboard");
 var _participant2 = require("./modules/dialog/components/participant");
@@ -72,66 +60,170 @@ var _setting = require("./modules/setting");
 var _deviceStreamStore = require("./common/device-stream-store");
 var _uiResources = require("./utilities/ui-resources");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _store = require("./modules/device-pretest/store");
 var _videoTrackRenderContext = require("./utilities/video-track-render-context");
 var _shareScreenSelection = require("./modules/dialog/components/share-screen-selection");
 var _parameters = require("./utilities/parameters");
 var _deviceSetting = _interopRequireDefault(require("./modules/dialog/components/device-setting"));
 var _loginConfirmDialog = require("./login-confirm-dialog");
 var _dialog2 = require("agora-ui-foundation/lib/components/dialog");
-var _type6 = require("agora-edu-core/lib/room-control/type");
-var _type7 = require("agora-edu-core/lib/room-control/privilege-control/type");
+var _type3 = require("fcr-core/lib/room-control/type");
 var _operationWaitingRoom = require("./modules/dialog/components/operation-waiting-room");
-var _eventNotification = require("./modules/event-notification");
+var _interpreter = require("./modules/interpreter");
+var _interpreter2 = _interopRequireDefault(require("./modules/dialog/components/interpreter"));
+var _notification = require("./modules/notification");
 var _removeAdmitWaitingRoom = require("./modules/dialog/components/remove-admit-waiting-room");
-var _lodash = require("lodash");
+var _roomStore = require("./common/room-store");
+var _offscreenPulling = require("./modules/offscreen-pulling");
+var _controlBar = require("./modules/control-bar");
+var _controlBar2 = require("./modules/dialog/components/control-bar");
+var _systemPreference = require("./modules/dialog/components/system-preference");
+var _liveStreaming2 = require("./modules/dialog/components/live-streaming");
+var _invite2 = require("./modules/dialog/components/invite");
+var _remoteRenderer = require("./common/remote-renderer");
+var _eventConfirm = require("./modules/event-confirm");
 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; }
+// import { EventNotificationUIModule } from './modules/event-notification';
 var DefaultSceneUIManager = exports.DefaultSceneUIManager = /*#__PURE__*/function () {
-  // @internal
-
-  function DefaultSceneUIManager(_sceneConfig, _coreConfig, _engine, _observable) {
-    var _this$_sceneConfig$re;
+  function DefaultSceneUIManager(_sceneConfig, _coreConfig, _engine, _observable, _settingConfig) {
+    var _this = this,
+      _this$_sceneConfig$re;
     (0, _classCallCheck2["default"])(this, DefaultSceneUIManager);
     // @internal
     (0, _defineProperty2["default"])(this, "logger", (0, _logger.getLogger)());
     // @internal
-    (0, _defineProperty2["default"])(this, "_eventObserver", {});
-    // @internal
-    (0, _defineProperty2["default"])(this, "_engineObserver", {});
-    // @internal
-    (0, _defineProperty2["default"])(this, "_userObserver", {});
-    // @internal
-    (0, _defineProperty2["default"])(this, "_waitingRoomUserObserver", {});
-    // @internal
-    (0, _defineProperty2["default"])(this, "_roomObserver", {});
-    // @internal
     (0, _defineProperty2["default"])(this, "_disposers", []);
     this._sceneConfig = _sceneConfig;
     this._coreConfig = _coreConfig;
     this._engine = _engine;
     this._observable = _observable;
+    this._settingConfig = _settingConfig;
     this._uiEventStore = new _eventStore.FcrUIEventStore();
-    this._deviceStore = new _deviceStore.FcrDeviceStore(_sceneConfig.userName, this._engine.getDesktopMediaControl());
-    var _ref = (_this$_sceneConfig$re = this._sceneConfig.resource) !== null && _this$_sceneConfig$re !== void 0 ? _this$_sceneConfig$re : {
+    this._deviceStore = new _deviceStore.FcrDeviceStore(_engine.getDesktopMediaControl(), this._uiEventStore);
+    this._roomStore = new _roomStore.FcrRoomStore(this._uiEventStore, this._deviceStore, _sceneConfig, _engine);
+    this._roomStore.addObserver({
+      onJoinMainRoom: function onJoinMainRoom(ticket) {
+        _dialog2.FcrDialogApi.open({
+          id: 'login-confirm-dialog-move-mainroom',
+          dialogProps: {
+            content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loginConfirmDialog.LoginConfirmDialog, {
+              title: (0, _i18n.transI18n)('fmt_waitingroom_mobile_notice_popup_label_about_join'),
+              desc: (0, _i18n.transI18n)('fmt_waitingroom_mobile_notice_popup_label_quick_join'),
+              id: "login-confirm-dialog-move-mainroom",
+              btnTxt: (0, _i18n.transI18n)('fmt_waitingroom_mobile_notice_popup_button_join_now_no_count'),
+              isShowCoutDown: true,
+              showImg: false,
+              onConfirm: /*#__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:
+                      _this._roomStore.handleJoinMainRoom(_this._sceneConfig.roomId, ticket).then(function (roomControl) {
+                        if (_this._dom) {
+                          _this.logger.info('render main room ui');
+                          _this._disposers.push(_this._renderRoomUi(_this._dom, roomControl));
+                        }
+                      });
+                    case 1:
+                    case "end":
+                      return _context.stop();
+                  }
+                }, _callee);
+              }))
+            }),
+            width: 360,
+            closable: false,
+            rootClassName: 'login-confirm-dialog'
+          }
+        });
+      },
+      onJoinMainRoomFailed: function onJoinMainRoomFailed(error) {
+        if (error.code === '730403100') {
+          _dialog2.FcrDialogApi.open({
+            id: 'login-confirm-dialog-error',
+            dialogProps: {
+              content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loginConfirmDialog.LoginConfirmDialog, {
+                desc: (0, _i18n.transI18n)('fmt_waitingroom_attendie_popup_label_removed'),
+                id: "login-confirm-dialog-error",
+                btnTxt: (0, _i18n.transI18n)('fmt_waitingroom_attendie_popup_button_gotit')
+              }),
+              width: 360,
+              closable: false,
+              rootClassName: 'login-confirm-dialog'
+            }
+          });
+        }
+      },
+      onLeaveMainRoom: function onLeaveMainRoom() {
+        _this._disposeRoomControl();
+      },
+      onLeaveWaitingRoom: function onLeaveWaitingRoom() {
+        _this._disposeRoomControl();
+      },
+      onWaitingRoomLocalUserKickedOut: function onWaitingRoomLocalUserKickedOut(roomId) {
+        _dialog2.FcrDialogApi.open({
+          id: 'login-confirm-dialog-kick-out',
+          dialogProps: {
+            content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loginConfirmDialog.LoginConfirmDialog, {
+              title: (0, _i18n.transI18n)('fmt_popup_button_leavemeeting'),
+              desc: (0, _i18n.transI18n)('fmt_leave_tips_removetip'),
+              id: "login-confirm-dialog-kick-out",
+              btnTxt: (0, _i18n.transI18n)('fmt_waitingroom_attendie_popup_button_gotit'),
+              onConfirm: function onConfirm() {
+                _this._observable.notifyObservers('onExited', roomId, _type.FcrUIExitReason.KICKED_OUT);
+              }
+            }),
+            width: 360,
+            closable: false,
+            rootClassName: 'login-confirm-dialog'
+          }
+        });
+      },
+      onMainRoomLocalUserKickedOut: function onMainRoomLocalUserKickedOut(roomId) {
+        _dialog2.FcrDialogApi.open({
+          id: 'login-confirm-dialog-kick-out',
+          dialogProps: {
+            content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loginConfirmDialog.LoginConfirmDialog, {
+              title: (0, _i18n.transI18n)('fmt_popup_button_leavemeeting'),
+              desc: (0, _i18n.transI18n)('fmt_leave_tips_removetip'),
+              btnTxt: (0, _i18n.transI18n)('fmt_waitingroom_attendie_popup_button_gotit'),
+              id: "login-confirm-dialog-kick-out",
+              onConfirm: function onConfirm() {
+                _this._observable.notifyObservers('onExited', roomId, _type.FcrUIExitReason.KICKED_OUT);
+              }
+            }),
+            width: 360,
+            closable: false,
+            rootClassName: 'login-confirm-dialog'
+          }
+        });
+      },
+      onJoinWaitingRoom: function onJoinWaitingRoom(roomControl, isWaitingRoomManaager) {
+        if (_this._dom && !isWaitingRoomManaager) {
+          _this._disposers.push(_this._renderWaitingRoomUi(_this._dom, roomControl));
+        }
+      }
+    });
+    var _ref2 = (_this$_sceneConfig$re = this._sceneConfig.resource) !== null && _this$_sceneConfig$re !== void 0 ? _this$_sceneConfig$re : {
         virtualBackgroundImages: [],
-        virtualBackgroundVideos: []
+        virtualBackgroundVideos: [],
+        soundEffectAudios: []
       },
-      _ref$virtualBackgroun = _ref.virtualBackgroundImages,
-      virtualBackgroundImages = _ref$virtualBackgroun === void 0 ? [] : _ref$virtualBackgroun,
-      _ref$virtualBackgroun2 = _ref.virtualBackgroundVideos,
-      virtualBackgroundVideos = _ref$virtualBackgroun2 === void 0 ? [] : _ref$virtualBackgroun2;
+      _ref2$virtualBackgrou = _ref2.virtualBackgroundImages,
+      virtualBackgroundImages = _ref2$virtualBackgrou === void 0 ? [] : _ref2$virtualBackgrou,
+      _ref2$virtualBackgrou2 = _ref2.virtualBackgroundVideos,
+      virtualBackgroundVideos = _ref2$virtualBackgrou2 === void 0 ? [] : _ref2$virtualBackgrou2,
+      _ref2$soundEffectAudi = _ref2.soundEffectAudios,
+      soundEffectAudios = _ref2$soundEffectAudi === void 0 ? [] : _ref2$soundEffectAudi;
     var uiResources = {
       virtualBackgroundImages: [].concat((0, _toConsumableArray2["default"])(_uiResources.BUILTIN_VIRTUAL_BACKGROUND_IMAGE_URL_LIST), (0, _toConsumableArray2["default"])(virtualBackgroundImages)),
-      virtualBackgroundVideos: [].concat((0, _toConsumableArray2["default"])(_uiResources.BUILTIN_VIRTUAL_BACKGROUND_VIDEO_URL_LIST), (0, _toConsumableArray2["default"])(virtualBackgroundVideos))
+      virtualBackgroundVideos: [].concat((0, _toConsumableArray2["default"])(_uiResources.BUILTIN_VIRTUAL_BACKGROUND_VIDEO_URL_LIST), (0, _toConsumableArray2["default"])(virtualBackgroundVideos)),
+      soundEffectAudios: [].concat((0, _toConsumableArray2["default"])(_uiResources.BUILTIN_SOUND_EFFECT_URL_LIST), (0, _toConsumableArray2["default"])(soundEffectAudios))
     };
     this._deviceStore.downloadUiResources(uiResources);
   }
   return (0, _createClass2["default"])(DefaultSceneUIManager, [{
     key: "render",
     value: function render(dom) {
-      var _this = this;
+      var _this2 = this;
       this._dom = dom;
       if (!this._dom) {
         this.logger.error('Scene UI cannot be rendered as dom is not exist');
@@ -147,31 +239,41 @@ var DefaultSceneUIManager = exports.DefaultSceneUIManager = /*#__PURE__*/functio
         this._deviceStore.openFirstMicrophone();
       }
       var joinRoom = /*#__PURE__*/function () {
-        var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-          return _regenerator["default"].wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
+        var _ref3 = (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:
-                return _context.abrupt("return", _this._engine.login().then(function () {
-                  return _this._handleJoinRoom();
-                }).then(function (type) {
-                  if (type === _type6.FcrRoomType.Mainroom) {
-                    _this._renderRoomUi(dom);
+                return _context2.abrupt("return", _this2._engine.login().then(function () {
+                  return _this2._roomStore.handleJoinRoom(_this2._sceneConfig.roomId);
+                }).then(function (_ref4) {
+                  var _ref5 = (0, _slicedToArray2["default"])(_ref4, 2),
+                    type = _ref5[0],
+                    roomControl = _ref5[1];
+                  if (type === _type3.FcrRoomType.Mainroom) {
+                    if ((0, _parameters.isRobotPullingMode)(_this2._coreConfig.parameters)) {
+                      _this2.logger.info('Offscreen pulling mode enabled');
+                      _this2._disposers.push(_this2._renderPullingUi(dom, roomControl));
+                    } else {
+                      _this2._disposers.push(_this2._renderRoomUi(dom, roomControl));
+                    }
                   } else {
-                    _this._renderWaitingRoomUi(dom);
+                    _this2._disposers.push(_this2._renderWaitingRoomUi(dom, roomControl));
                   }
                 }).then(function () {
-                  _this._observable.notifyObservers('onLaunchSuccess', _this._sceneConfig.roomId);
+                  _this2._runSettingConfig();
+                }).then(function () {
+                  _this2._observable.notifyObservers('onLaunchSuccess', _this2._sceneConfig.roomId);
                 })["catch"](function (e) {
-                  _this._observable.notifyObservers('onLaunchFailure', _this._sceneConfig.roomId, e);
+                  _this2._observable.notifyObservers('onLaunchFailure', _this2._sceneConfig.roomId, e);
                 }));
               case 1:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
-          }, _callee);
+          }, _callee2);
         }));
         return function joinRoom() {
-          return _ref2.apply(this, arguments);
+          return _ref3.apply(this, arguments);
         };
       }();
       if (!skipPretest) {
@@ -187,7 +289,7 @@ var DefaultSceneUIManager = exports.DefaultSceneUIManager = /*#__PURE__*/functio
         },
         // on exit
         function () {
-          _this._observable.notifyObservers('onLaunchCancel', _this._sceneConfig.roomId);
+          _this2._observable.notifyObservers('onLaunchCancel', _this2._sceneConfig.roomId);
         });
       } else {
         joinRoom();
@@ -196,77 +298,24 @@ var DefaultSceneUIManager = exports.DefaultSceneUIManager = /*#__PURE__*/functio
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this$_actionBarUIMod, _this$_chatModule, _this$_layoutModule, _this$_participantsMo, _this$_dialogModule, _this$_settingUIModul, _this$_eventToastUIMo, _this$_stateBarUIModu, _this$_audioStreamUIM, _this$_shareScreenMod, _this$_videoWindowMod, _this$_liveStreamingU, _this$_inviteUIModule, _this$_connectionGate, _this$_whiteBoradUIMo, _this$_securityStore, _this$_deviceStreamSt;
       if (this._dom) {
         _reactDom["default"].unmountComponentAtNode(this._dom);
         this._dom = undefined;
       }
-      (_this$_actionBarUIMod = this._actionBarUIModule) === null || _this$_actionBarUIMod === void 0 || _this$_actionBarUIMod.release();
-      (_this$_chatModule = this._chatModule) === null || _this$_chatModule === void 0 || _this$_chatModule.release();
-      (_this$_layoutModule = this._layoutModule) === null || _this$_layoutModule === void 0 || _this$_layoutModule.release();
-      (_this$_participantsMo = this._participantsModule) === null || _this$_participantsMo === void 0 || _this$_participantsMo.release();
-      (_this$_dialogModule = this._dialogModule) === null || _this$_dialogModule === void 0 || _this$_dialogModule.release();
-      (_this$_settingUIModul = this._settingUIModule) === null || _this$_settingUIModul === void 0 || _this$_settingUIModul.release();
-      (_this$_eventToastUIMo = this._eventToastUIModule) === null || _this$_eventToastUIMo === void 0 || _this$_eventToastUIMo.release();
-      (_this$_stateBarUIModu = this._stateBarUIModule) === null || _this$_stateBarUIModu === void 0 || _this$_stateBarUIModu.release();
-      (_this$_audioStreamUIM = this._audioStreamUIModule) === null || _this$_audioStreamUIM === void 0 || _this$_audioStreamUIM.release();
-      (_this$_shareScreenMod = this._shareScreenModule) === null || _this$_shareScreenMod === void 0 || _this$_shareScreenMod.release();
-      (_this$_videoWindowMod = this._videoWindowModule) === null || _this$_videoWindowMod === void 0 || _this$_videoWindowMod.release();
-      (_this$_liveStreamingU = this._liveStreamingUIModule) === null || _this$_liveStreamingU === void 0 || _this$_liveStreamingU.release();
-      (_this$_inviteUIModule = this._inviteUIModule) === null || _this$_inviteUIModule === void 0 || _this$_inviteUIModule.release();
-      (_this$_connectionGate = this._connectionGatewayUIModule) === null || _this$_connectionGate === void 0 || _this$_connectionGate.release();
-      (_this$_whiteBoradUIMo = this._whiteBoradUIModule) === null || _this$_whiteBoradUIMo === void 0 || _this$_whiteBoradUIMo.release();
-      (_this$_securityStore = this._securityStore) === null || _this$_securityStore === void 0 || _this$_securityStore.release();
-      (_this$_deviceStreamSt = this._deviceStreamStore) === null || _this$_deviceStreamSt === void 0 || _this$_deviceStreamSt.release();
+      this._disposeRoomControl();
       this._deviceStore.release();
       this._uiEventStore.release();
+      this._roomStore.release();
+      this._engine.logout();
+    }
+  }, {
+    key: "_disposeRoomControl",
+    value: function _disposeRoomControl() {
       this._disposers.forEach(function (dispose) {
         return dispose();
       });
+      this._disposers = [];
     }
-  }, {
-    key: "_handleJoinRoom",
-    value: function () {
-      var _handleJoinRoom2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-        var _this2 = this;
-        return _regenerator["default"].wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              return _context2.abrupt("return", this._createRoomControl(this._sceneConfig.roomId).then(function (room) {
-                var _room$getRoomInfo;
-                if (((_room$getRoomInfo = room.getRoomInfo()) === null || _room$getRoomInfo === void 0 ? void 0 : _room$getRoomInfo.roomType) === _type6.FcrRoomType.Mainroom) {
-                  _this2._mainRoomControl = room;
-                  _this2._mainRoomControl.addObserver(_this2._roomObserver);
-                  // 如果已经有等候室管理员权限 再次创建房间
-                  _this2._judgeWaitingRoomPremissionAndCreateRoomControl();
-                  // @ts-ignore
-                  window.__mainRoom_control = room;
-                  return _type6.FcrRoomType.Mainroom;
-                } else {
-                  _this2._waitingRoomControl = room;
-                  _this2._waitingRoomControl.addObserver(_this2._roomObserver);
-                  // @ts-ignore
-                  window.__waitingRoom_control = room;
-                  room.sendRoomMessage({
-                    messageKey: _type2.RoomMessageKey.USER_WAITING_ROOM_JOINED
-                  }, false);
-                  return _type6.FcrRoomType.Waitingroom;
-                }
-              })["catch"](function (e) {
-                _this2._observable.notifyObservers('onLaunchFailure', _this2._sceneConfig.roomId, e);
-                throw e;
-              }));
-            case 1:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2, this);
-      }));
-      function _handleJoinRoom() {
-        return _handleJoinRoom2.apply(this, arguments);
-      }
-      return _handleJoinRoom;
-    }()
   }, {
     key: "_renderDevicePretestUi",
     value: function _renderDevicePretestUi(dom, onJoin, _onExit) {
@@ -275,7 +324,7 @@ var DefaultSceneUIManager = exports.DefaultSceneUIManager = /*#__PURE__*/functio
       var pretestStore = new _store.FcrPretestStore({
         deviceStore: store
       });
-      _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(_context9.PretestStoreContext.Provider, {
+      _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(_store.PretestStoreContext.Provider, {
         value: pretestStore,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           style: {
@@ -303,226 +352,329 @@ var DefaultSceneUIManager = exports.DefaultSceneUIManager = /*#__PURE__*/functio
         })
       }), dom);
     }
+  }, {
+    key: "_runSettingConfig",
+    value: function () {
+      var _runSettingConfig2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+        var media, _media;
+        return _regenerator["default"].wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              media = this._settingConfig.media; // 1. 音频连接
+              if (!media.autoConnectAudio) {
+                _context3.next = 8;
+                break;
+              }
+              _context3.next = 4;
+              return this._deviceStore.joinAudioByComputer();
+            case 4:
+              _media = this._settingConfig.media; // 音频输入
+              // 判断 FcrUISharedSettingConfig.media.microphoneExpectedOff
+              if (!_media.microphoneExpectedOff) {
+                // 当为 false 时，结合 1.0 ActionBar#1.0ActionBar-%E6%93%8D%E4%BD%9C%E8%AE%BE%E5%A4%87 的逻辑判断是否开启麦克风
+                if (this._deviceStreamStore) {
+                  this._deviceStreamStore.enableMicrophoneWithStream(true);
+                }
+              }
+              _context3.next = 9;
+              break;
+            case 8:
+              // 弹出是否链接音频的弹窗
+              this._uiEventStore.openDialog(_constant.DialogKey.CONNECTION_GATEWAY, '', {
+                type: 'computer'
+              });
+            case 9:
+              // 2.摄像头
+              if (!media.cameraExpectedOff) {
+                // 设备开启逻辑与之前一致，1.0 ActionBar#1.0ActionBar-%E6%93%8D%E4%BD%9C%E8%AE%BE%E5%A4%8
+
+                if (this._deviceStreamStore) {
+                  this._deviceStreamStore.enableCameraWithStream(true);
+                }
+              }
+            case 10:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function _runSettingConfig() {
+        return _runSettingConfig2.apply(this, arguments);
+      }
+      return _runSettingConfig;
+    }()
+  }, {
+    key: "_renderPullingUi",
+    value: function _renderPullingUi(dom, roomControl) {
+      var coreConfig = this._coreConfig;
+      var offscreenPullingUIModule = new _offscreenPulling.OffscreenPullingUIModule({
+        streamControl: roomControl.getStreamControl(),
+        userControl: roomControl.getUserControl(),
+        pullingCount: (0, _parameters.getRobotPullingCount)(coreConfig.parameters),
+        pullingStreamType: (0, _parameters.getRobotPullingStreamType)(coreConfig.parameters)
+      });
+      _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "Offscreen pulling mode"
+      }), dom);
+      return function () {
+        _reactDom["default"].unmountComponentAtNode(dom);
+        roomControl.leave();
+        offscreenPullingUIModule.release();
+      };
+    }
   }, {
     key: "_renderRoomUi",
-    value: function _renderRoomUi(dom) {
-      var _this4 = this;
+    value: function _renderRoomUi(dom, roomControl) {
       /**
        * Common Stores
        */
       var deviceStore = this._deviceStore;
       var uiEventStore = this._uiEventStore;
-      if (!this._mainRoomControl) {
-        this.logger.error('Cannot render room ui without mainroom control');
-        return;
-      }
-      var securityStore = new _securityStore.FcrSecurityStore(this._mainRoomControl.getPrivilegeControl(), this._mainRoomControl.getUserControl(), this._mainRoomControl.getStreamControl(), this._mainRoomControl.getRoomSessionControl(), uiEventStore);
-      this._securityStore = securityStore;
+      var roomStore = this._roomStore;
+      var engine = this._engine;
+      var sceneConfig = this._sceneConfig;
+      var coreConfig = this._coreConfig;
+      var observable = this._observable;
+      var remoteVideoRenderManager = new _remoteRenderer.FcrRemoteVideoRenderManager(roomControl.getStreamControl());
+      var securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), roomControl.getRoomSessionControl(), uiEventStore, roomControl.getInterpreterControl());
       var deviceStreamStore = new _deviceStreamStore.FcrDeviceStreamStore({
-        mediaControl: this._engine.getDesktopMediaControl(),
-        roomControl: this._mainRoomControl,
+        mediaControl: engine.getDesktopMediaControl(),
+        roomControl: roomControl,
         securityStore: securityStore,
         deviceStore: deviceStore,
-        uiEventStore: uiEventStore
-      });
-      this._deviceStreamStore = deviceStreamStore;
-      this._chatModule = new _chat.ChatUIModule({
-        roomControl: this._mainRoomControl,
         uiEventStore: uiEventStore,
-        securityStore: securityStore
+        roomStore: roomStore,
+        interpterControl: roomControl.getInterpreterControl()
       });
-      this._actionBarUIModule = new _actionBar.FcrActionBarUIModule({
-        roomControl: this._mainRoomControl,
-        userControl: this._mainRoomControl.getUserControl(),
+      this._deviceStreamStore = deviceStreamStore;
+      var chatModule = new _chat.ChatUIModule({
+        roomControl: roomControl,
         uiEventStore: uiEventStore,
         securityStore: securityStore,
-        streamControl: this._mainRoomControl.getStreamControl(),
-        deviceStore: deviceStore,
+        roomStore: roomStore
+      });
+      var audioStreamUIModule = new _audioStream.AudioStreamUIModule({
+        streamControl: roomControl.getStreamControl(),
+        userControl: roomControl.getUserControl(),
         deviceStreamStore: deviceStreamStore,
-        mediaControl: this._engine.getDesktopMediaControl()
+        roomStore: roomStore,
+        interpterControl: roomControl.getInterpreterControl(),
+        uiEventStore: uiEventStore,
+        deviceStore: deviceStore
       });
-      this._audioStreamUIModule = new _audioStream.AudioStreamUIModule({
-        streamControl: this._mainRoomControl.getStreamControl(),
-        userControl: this._mainRoomControl.getUserControl(),
-        deviceStreamStore: deviceStreamStore
+      var soundEffectUIModule = new _soundEffect.SoundEffectUIModule({
+        chatRoomControl: roomControl.getChatRoomControl(),
+        roomControl: roomControl,
+        streamControl: roomControl.getStreamControl(),
+        whiteboardControl: roomControl.getBoardControl(),
+        userControl: roomControl.getUserControl(),
+        deviceStore: deviceStore,
+        engine: engine
       });
-      this._dialogModule = new _dialog.DialogUIModule({
+      var dialogModule = new _dialog.DialogUIModule({
         uiEventStore: uiEventStore,
-        userInfo: this._mainRoomControl.getUserControl().getLocalUser(),
+        userInfo: roomControl.getUserControl().getLocalUser(),
         securityStore: securityStore,
-        userControl: this._mainRoomControl.getUserControl(),
-        chatRoomControl: this._mainRoomControl.getChatRoomControl(),
+        userControl: roomControl.getUserControl(),
+        chatRoomControl: roomControl.getChatRoomControl(),
         deviceStore: deviceStore,
-        streamControl: this._mainRoomControl.getStreamControl()
+        streamControl: roomControl.getStreamControl(),
+        remoteVideoRenderManager: remoteVideoRenderManager
       });
-      this._settingUIModule = new _setting.SettingUIModule({
-        mediaControl: this._engine.getDesktopMediaControl(),
-        config: this._sceneConfig,
+      var settingUIModule = new _setting.SettingUIModule({
+        mediaControl: engine.getDesktopMediaControl(),
+        config: sceneConfig,
         uiEventStore: uiEventStore,
         deviceStore: deviceStore,
-        monitorControl: this._engine.getMonitorControl(),
-        streamControl: this._mainRoomControl.getStreamControl(),
-        roomControl: this._mainRoomControl
+        monitorControl: engine.getMonitorControl(),
+        parameters: coreConfig.parameters,
+        streamControl: roomControl.getStreamControl(),
+        roomControl: roomControl
       });
-      this._stateBarUIModule = new _stateBar.StateBarUIModule({
-        roomControl: this._mainRoomControl,
+      var interpreterUIModule = new _interpreter.InterpreterUIModule({
+        uiEventStore: uiEventStore,
+        roomControl: roomControl,
+        interpreterControl: roomControl.getInterpreterControl(),
+        deviceStore: deviceStore,
+        roomStore: roomStore,
+        deviceStreamStore: deviceStreamStore,
+        securityStore: securityStore
+      });
+      var stateBarUIModule = new _stateBar.StateBarUIModule({
+        roomControl: roomControl,
         uiEventStore: uiEventStore,
         securityStore: securityStore,
-        config: this._sceneConfig
+        config: sceneConfig,
+        parameters: coreConfig.parameters
+      });
+      var eventToastUIModule = new _eventToast.EventToastUIModule({
+        uiEventStore: uiEventStore
       });
-      this._eventToastUIModule = new _eventToast.EventToastUIModule({
+      var eventConfirmUIModule = new _eventConfirm.EventConfirmUIModule({
         uiEventStore: uiEventStore
       });
-      this._eventNotificationUIModule = new _eventNotification.EventNotificationUIModule({
+      var eventNotificationUIModule = new _notification.NotificationUIModule({
         uiEventStore: uiEventStore,
-        privilegeControl: this._mainRoomControl.getPrivilegeControl()
+        privilegeControl: roomControl.getPrivilegeControl(),
+        roomStore: roomStore
       });
-      this._participantsModule = new _participant.ParticipantUIModule({
-        roomControl: this._mainRoomControl,
-        engine: this._engine,
-        peerSessionControl: this._engine.getPeerSessionControl(),
+      var participantsModule = new _participant.ParticipantUIModule({
+        roomControl: roomControl,
+        engine: engine,
+        peerSessionControl: engine.getPeerSessionControl(),
         securityStore: securityStore,
         uiEventStore: uiEventStore,
         deviceStore: deviceStore,
-        deviceStreamStore: deviceStreamStore
+        deviceStreamStore: deviceStreamStore,
+        interpreterControl: roomControl.getInterpreterControl(),
+        roomStore: roomStore
       });
-      this._shareScreenModule = new _shareScreen.ShareScreenUIModule({
-        roomControl: this._mainRoomControl,
-        mediaControl: this._engine.getDesktopMediaControl(),
+      var shareScreenModule = new _shareScreen.ShareScreenUIModule({
+        roomControl: roomControl,
+        mediaControl: engine.getDesktopMediaControl(),
         deviceStore: deviceStore,
         deviceStreamStore: deviceStreamStore,
         securityStore: securityStore,
         uiEventStore: uiEventStore,
-        config: this._sceneConfig
+        config: sceneConfig
       });
-      this._liveStreamingUIModule = new _liveStreaming.LiveStreamingUIModule({
-        roomControl: this._mainRoomControl,
+      var liveStreamingUIModule = new _liveStreaming.LiveStreamingUIModule({
+        roomControl: roomControl,
         uiEventStore: uiEventStore
       });
-      this._videoWindowModule = new _videoWindow.VideoWindowUIModule({
+      var videoWindowModule = new _videoWindow.VideoWindowUIModule({
         uiEventStore: uiEventStore,
         mediaControl: this._engine.getDesktopMediaControl(),
-        userControl: this._mainRoomControl.getUserControl(),
-        streamControl: this._mainRoomControl.getStreamControl(),
+        userControl: roomControl.getUserControl(),
+        streamControl: roomControl.getStreamControl(),
         securityStore: securityStore,
         deviceStore: deviceStore,
-        deviceStreamStore: deviceStreamStore
+        deviceStreamStore: deviceStreamStore,
+        interpreterControl: roomControl.getInterpreterControl()
+      });
+      var connectionGatewayUIModule = new _connectionGateway.ConnectionGatewayUIModule({
+        roomControl: roomControl,
+        uiEventStore: uiEventStore,
+        deviceStore: deviceStore,
+        mediaControl: engine.getDesktopMediaControl()
       });
-      this._connectionGatewayUIModule = new _connectionGateway.ConnectionGatewayUIModule({
-        roomControl: this._mainRoomControl,
+      var actionBarUIModule = new _actionBar.FcrActionBarUIModule({
+        roomControl: roomControl,
+        userControl: roomControl.getUserControl(),
         uiEventStore: uiEventStore,
-        deviceStore: this._deviceStore,
-        mediaControl: this._engine.getDesktopMediaControl()
+        securityStore: securityStore,
+        streamControl: roomControl.getStreamControl(),
+        deviceStore: deviceStore,
+        deviceStreamStore: deviceStreamStore,
+        mediaControl: engine.getDesktopMediaControl(),
+        interpreterControl: roomControl.getInterpreterControl(),
+        roomStore: roomStore
       });
-      this._inviteUIModule = new _invite.InviteUIModule({
-        roomControl: this._mainRoomControl,
+      var inviteUIModule = new _invite.InviteUIModule({
+        roomControl: roomControl,
         uiEventStore: uiEventStore
       });
-      this._whiteBoradUIModule = new _whiteboard.FcrWhiteboardUIModule({
-        roomControl: this._mainRoomControl,
+      var whiteBoradUIModule = new _whiteboard.FcrWhiteboardUIModule({
+        roomControl: roomControl,
         uiEventStore: uiEventStore,
-        userControl: this._mainRoomControl.getUserControl(),
-        whiteboardControl: this._mainRoomControl.getBoardControl(),
-        streamControl: this._mainRoomControl.getStreamControl(),
+        userControl: roomControl.getUserControl(),
+        whiteboardControl: roomControl.getBoardControl(),
+        streamControl: roomControl.getStreamControl(),
         securityStore: securityStore
       });
-      this._dialogModule.addDialogs([{
+      var controlbarUIModule = new _controlBar.ControlBarUIModule({
+        uiEventStore: uiEventStore,
+        deviceStore: deviceStore,
+        securityStore: securityStore,
+        roomControl: roomControl,
+        mediaControl: engine.getDesktopMediaControl(),
+        streamControl: roomControl.getStreamControl(),
+        deviceStreamStore: deviceStreamStore,
+        userControl: roomControl.getUserControl()
+      });
+      dialogModule.addDialogs([{
         key: _constant.DialogKey.DEVICE_SETTINGS,
         component: function component() {
-          var _this4$_settingUIModu;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_deviceSetting["default"], {
-            children: (_this4$_settingUIModu = _this4._settingUIModule) === null || _this4$_settingUIModu === void 0 ? void 0 : _this4$_settingUIModu.getComponent()
+            children: settingUIModule.getComponent()
           }, "DeviceSettingDialog");
         }
+      }, {
+        key: _constant.DialogKey.INTERPRETER,
+        component: function component(params) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_interpreter2["default"], {
+            children: interpreterUIModule.getComponent()
+          }, "InterpreterDialog");
+        }
       }, {
         key: _constant.DialogKey.PARTICIPANT,
         component: function component() {
-          var _this4$_participantsM;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_participant2.ParticipantDialog, {
-            children: (_this4$_participantsM = _this4._participantsModule) === null || _this4$_participantsM === void 0 ? void 0 : _this4$_participantsM.getComponent()
+            children: participantsModule.getComponent()
           }, "ParticipantDialog");
         }
       }, {
         key: _constant.DialogKey.LIVE_STREAMING,
         component: function component() {
-          var _this4$_liveStreaming;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogs.LiveStreamingDialog, {
-            title: "Push the meeting to the specified live platform",
-            children: (_this4$_liveStreaming = _this4._liveStreamingUIModule) === null || _this4$_liveStreaming === void 0 ? void 0 : _this4$_liveStreaming.getComponent()
-          }, "LiveStreamingDialog");
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_liveStreaming2.LiveStreamingDialog, {
+            title: (0, _i18n.transI18n)('fmt_live_label_push_platform'),
+            children: liveStreamingUIModule === null || liveStreamingUIModule === void 0 ? void 0 : liveStreamingUIModule.getComponent()
+          }, "LiveStreamingDialog-".concat(Math.random()));
         }
       }, {
         key: _constant.DialogKey.INVITE,
         component: function component() {
-          var _this4$_inviteUIModul;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogs.InviteDialog, {
-            children: (_this4$_inviteUIModul = _this4._inviteUIModule) === null || _this4$_inviteUIModul === void 0 ? void 0 : _this4$_inviteUIModul.getComponent()
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_invite2.InviteDialog, {
+            children: inviteUIModule.getComponent()
           }, "InviteDialog");
         }
       }, {
         key: _constant.DialogKey.CHAT,
         component: function component() {
-          var _this4$_chatModule, _this4$_chatModule2;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_chat2.ChatDialog, {
-            chatAction: (_this4$_chatModule = _this4._chatModule) === null || _this4$_chatModule === void 0 ? void 0 : _this4$_chatModule.getActionsComponent(),
-            children: (_this4$_chatModule2 = _this4._chatModule) === null || _this4$_chatModule2 === void 0 ? void 0 : _this4$_chatModule2.getComponent({
+            chatAction: chatModule.getActionsComponent(),
+            children: chatModule.getComponent({
               singling: true
             })
           }, "ChatDialog");
         }
-      }, {
-        key: _constant.DialogKey.CONFIRM,
-        component: function component(params) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.ConfirmDialog, {
-            dialogType: (0, _env.isElectron)() ? 'electron' : 'browser',
-            params: params,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirmContent.ConfirmContent, _objectSpread({
-              width: params === null || params === void 0 ? void 0 : params.width,
-              title: (params === null || params === void 0 ? void 0 : params.title) || '',
-              icon: params === null || params === void 0 ? void 0 : params.icon,
-              content: (params === null || params === void 0 ? void 0 : params.content) || '',
-              onOk: (params === null || params === void 0 ? void 0 : params.onOk) || function () {},
-              onCancel: (params === null || params === void 0 ? void 0 : params.onCancel) || function () {}
-            }, params))
-          }, "ConfirmDialog");
-        }
       }, {
         key: _constant.DialogKey.VIDEO_WINDOW,
         component: function component() {
-          var _this4$_videoWindowMo;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogs.VideoWindowDialog, {
-            children: (_this4$_videoWindowMo = _this4._videoWindowModule) === null || _this4$_videoWindowMo === void 0 ? void 0 : _this4$_videoWindowMo.getComponent()
+            children: videoWindowModule.getComponent()
           }, "VideoWindowDialog");
         }
       }, {
         key: _constant.DialogKey.CONNECTION_GATEWAY,
-        component: function component() {
-          var _this4$_connectionGat;
+        component: function component(params) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_connectionGateway2.ConnectionGatewayDialog, {
-            children: (_this4$_connectionGat = _this4._connectionGatewayUIModule) === null || _this4$_connectionGat === void 0 ? void 0 : _this4$_connectionGat.getComponent()
+            params: params,
+            children: connectionGatewayUIModule.getComponent()
           }, "ConnectionGatewayDialog");
         }
       }, {
         key: _constant.DialogKey.WHITEBOARD,
         component: function component() {
-          return _this4._whiteBoradUIModule ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_whiteboard2.WhiteboardElectronDialog, {
-            module: _this4._whiteBoradUIModule
-          }, "WhiteboardDialog") : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_whiteboard2.WhiteboardElectronDialog, {
+            module: whiteBoradUIModule
+          }, "WhiteboardDialog");
         }
       }, {
         key: _constant.DialogKey.SHARE_SCREEN,
         component: function component(params) {
-          var _this4$_shareScreenMo;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareScreenSelection.ShareScreenSelectronDialog, {
             params: params,
-            children: (_this4$_shareScreenMo = _this4._shareScreenModule) === null || _this4$_shareScreenMo === void 0 ? void 0 : _this4$_shareScreenMo.getSelectionComponent()
+            children: shareScreenModule.getSelectionComponent()
           }, "ShareScreenSelection");
         }
       }, {
         key: _constant.DialogKey.CONTROL_BAR,
-        component: function component() {
-          var _this4$_shareScreenMo2;
-          return (_this4$_shareScreenMo2 = _this4._shareScreenModule) === null || _this4$_shareScreenMo2 === void 0 ? void 0 : _this4$_shareScreenMo2.getComponent();
+        component: function component(params) {
+          return (0, _env.isElectron)() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlBar2.ControlBarDialog, {
+            module: controlbarUIModule,
+            params: params
+          }, "ControlBar") : shareScreenModule.getComponent();
         }
       }, {
         key: _constant.DialogKey.WAITING_ROOM,
@@ -534,155 +686,92 @@ var DefaultSceneUIManager = exports.DefaultSceneUIManager = /*#__PURE__*/functio
       }, {
         key: _constant.DialogKey.WAITING_ROOM_SINGLE_REMOVE,
         component: function component(params) {
-          var _this4$_participantsM2;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_removeAdmitWaitingRoom.RemoveAdmitWaitingRoomDialog, {
             params: params,
-            children: (_this4$_participantsM2 = _this4._participantsModule) === null || _this4$_participantsM2 === void 0 ? void 0 : _this4$_participantsM2.getWaitingRoomDialog(params)
+            children: participantsModule.getWaitingRoomDialog(params)
           }, 'WaitingRoomSingleRemove');
         }
       }, {
         key: _constant.DialogKey.WAITING_ROOM_ALL_REMOVE,
         component: function component(params) {
-          var _this4$_participantsM3;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_removeAdmitWaitingRoom.RemoveAdmitWaitingRoomDialog, {
             params: params,
-            children: (_this4$_participantsM3 = _this4._participantsModule) === null || _this4$_participantsM3 === void 0 ? void 0 : _this4$_participantsM3.getWaitingRoomDialog(params)
+            children: participantsModule.getWaitingRoomDialog(params)
           }, 'WaitingRoomAllRemove');
         }
       }, {
         key: _constant.DialogKey.WAITING_ROOM_ALL_ADMIT,
         component: function component(params) {
-          var _this4$_participantsM4;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_removeAdmitWaitingRoom.RemoveAdmitWaitingRoomDialog, {
             params: params,
-            children: (_this4$_participantsM4 = _this4._participantsModule) === null || _this4$_participantsM4 === void 0 ? void 0 : _this4$_participantsM4.getWaitingRoomDialog(params)
+            children: participantsModule === null || participantsModule === void 0 ? void 0 : participantsModule.getWaitingRoomDialog(params)
           }, 'WaitingRoomAllAdmit');
         }
+      }, {
+        key: _constant.DialogKey.SYSTEM_PREFERENCE,
+        component: function component(params) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_systemPreference.SystemPreferenceDialog, {
+            params: params
+          }, "SystemPreference");
+        }
       }]);
-      this._layoutModule = new _layout.LayoutUIModule({
-        deviceStore: this._deviceStore,
+      var layoutModule = new _layout.LayoutUIModule({
+        deviceStore: deviceStore,
         uiEventStore: uiEventStore,
-        mediaControl: this._engine.getDesktopMediaControl(),
-        userControl: this._mainRoomControl.getUserControl(),
-        streamControl: this._mainRoomControl.getStreamControl(),
+        mediaControl: engine.getDesktopMediaControl(),
+        userControl: roomControl.getUserControl(),
+        streamControl: roomControl.getStreamControl(),
         securityStore: securityStore,
-        chatRoomControl: this._mainRoomControl.getChatRoomControl(),
-        whiteBoardControl: this._mainRoomControl.getBoardControl(),
-        privilegeControl: this._mainRoomControl.getPrivilegeControl(),
-        roomControl: this._mainRoomControl
-      });
-      var layoutComponent = this._layoutModule.getComponent({
-        chat: this._chatModule.getComponent(),
-        chatAction: this._chatModule.getActionsComponent(),
-        participant: this._participantsModule.getComponent(),
-        actionBar: this._actionBarUIModule.getComponent(),
-        stateBar: this._stateBarUIModule.getComponent(),
-        layers: [this._dialogModule.getComponent(), this._eventToastUIModule.getComponent(), this._eventNotificationUIModule.getComponent()],
-        whiteboard: this._whiteBoradUIModule.getComponent()
-      });
-      this._eventObserver = {
+        parameters: coreConfig.parameters,
+        interpreterControl: roomControl.getInterpreterControl(),
+        chatRoomControl: roomControl.getChatRoomControl(),
+        whiteBoardControl: roomControl.getBoardControl(),
+        privilegeControl: roomControl.getPrivilegeControl(),
+        roomControl: roomControl,
+        roomStore: roomStore
+      });
+      var layoutComponent = layoutModule.getComponent({
+        chat: chatModule.getComponent(),
+        chatAction: chatModule.getActionsComponent(),
+        participant: participantsModule.getComponent(),
+        actionBar: actionBarUIModule.getComponent(),
+        stateBar: stateBarUIModule.getComponent(),
+        layers: [dialogModule.getComponent(), eventToastUIModule.getComponent('local'), eventNotificationUIModule.getComponent()],
+        whiteboard: whiteBoradUIModule.getComponent(),
+        globalToast: eventToastUIModule.getComponent('global'),
+        confirm: eventConfirmUIModule.getComponent()
+      });
+      var eventObserver = {
         onEvent: function onEvent(action, payload) {
           if (action === _constant.UIAction.EXIT_ROOM) {
-            _this4._observable.notifyObservers('onExited', _this4._sceneConfig.roomId, payload.reason, _this4._mainRoomControl);
+            observable.notifyObservers('onExited', sceneConfig.roomId, payload.reason);
           }
         }
       };
-      this._engineObserver = {
+      var engineObserver = {
         onConnectionStateUpdated: function onConnectionStateUpdated(state) {
-          if (state === _agoraEduCore.FcrConnectionState.ABORTED) {
-            _this4._observable.notifyObservers('onExited', _this4._sceneConfig.roomId, _type.FcrUIExitReason.ABORTED);
+          if (state === _fcrCore.FcrConnectionState.ABORTED) {
+            observable.notifyObservers('onExited', sceneConfig.roomId, _type.FcrUIExitReason.ABORTED);
           }
-          if (state === _agoraEduCore.FcrConnectionState.CONNECTED) {
+          if (state === _fcrCore.FcrConnectionState.CONNECTED) {
             uiEventStore.sendEvent(_constant.UIAction.ENGINE_RECONNECTED);
           }
         }
       };
-      this._userObserver = {
-        onLocalUserKickedOut: function onLocalUserKickedOut(roomId) {
-          _dialog2.FcrDialogApi.open({
-            id: 'login-confirm-dialog-kick-out',
-            dialogProps: {
-              content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loginConfirmDialog.LoginConfirmDialog, {
-                title: (0, _i18n.transI18n)('fmt_popup_button_leavemeeting'),
-                desc: (0, _i18n.transI18n)('fmt_leave_tips_removetip'),
-                btnTxt: (0, _i18n.transI18n)('fmt_waitingroom_attendie_popup_button_gotit'),
-                id: "login-confirm-dialog-kick-out",
-                onConfirm: function onConfirm() {
-                  _this4._observable.notifyObservers('onExited', roomId, _type.FcrUIExitReason.KICKED_OUT);
-                }
-              }),
-              width: 360,
-              closable: false,
-              rootClassName: 'login-confirm-dialog'
-            }
-          });
-        },
-        onUserInfoUpdated: function onUserInfoUpdated(roomId, event) {
-          // 权限变更的时候
-          if (_this4._mainRoomControl && event.modifiedUser.userId === _this4._mainRoomControl.getUserControl().getLocalUser().userId) {
-            _this4._sceneConfig.userRole = event.modifiedUser.userRole;
-            _this4._judgeWaitingRoomPremissionAndCreateRoomControl();
-          }
-        }
-      };
-      this._roomObserver = {
-        onLocalUserMovedToWaitingRoom: function () {
-          var _onLocalUserMovedToWaitingRoom = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(roomId, event) {
-            var _this4$_mainRoomContr, info, enable, room;
-            return _regenerator["default"].wrap(function _callee3$(_context3) {
-              while (1) switch (_context3.prev = _context3.next) {
-                case 0:
-                  if (!_this4._mainRoomControl) {
-                    _context3.next = 14;
-                    break;
-                  }
-                  _this4$_mainRoomContr = _this4._mainRoomControl.getPrivilegeControl().getSecurityInfo(_type7.FcrSecurityAction.WaitingRoom), info = _this4$_mainRoomContr.info, enable = _this4$_mainRoomContr.enable;
-                  _context3.next = 4;
-                  return _this4._mainRoomControl.leave();
-                case 4:
-                  _this4._mainRoomControl.removeObserver(_this4._roomObserver);
-                  if (!info) {
-                    _context3.next = 14;
-                    break;
-                  }
-                  _context3.next = 8;
-                  return _this4._createRoomControl(info.payload.roomUuid);
-                case 8:
-                  room = _context3.sent;
-                  _this4._waitingRoomControl = room;
-                  // @ts-ignore
-                  window.__waitingRoom_control = room;
-                  _reactDom["default"].unmountComponentAtNode(dom);
-                  _this4._uiEventStore.showToast({
-                    type: 'error',
-                    message: (0, _i18n.transI18n)('fmt_waitingroom_attendie_overview_label__toast_move_to_waitingroom')
-                  });
-                  _this4._renderWaitingRoomUi(dom);
-                case 14:
-                case "end":
-                  return _context3.stop();
-              }
-            }, _callee3);
-          }));
-          function onLocalUserMovedToWaitingRoom(_x, _x2) {
-            return _onLocalUserMovedToWaitingRoom.apply(this, arguments);
-          }
-          return onLocalUserMovedToWaitingRoom;
-        }(),
+      var roomObserver = {
         onRoomStateUpdated: function onRoomStateUpdated(roomId, state) {
           if (state === _type2.FcrRoomState.Closed) {
-            _this4._observable.notifyObservers('onExited', roomId, _type.FcrUIExitReason.CLOSE_ROOM);
+            observable.notifyObservers('onExited', roomId, _type.FcrUIExitReason.CLOSE_ROOM);
           }
         }
       };
-      uiEventStore.addObserver(this._eventObserver);
-      this._engine.addObserver(this._engineObserver);
-      this._mainRoomControl.addObserver(this._roomObserver);
-      this._mainRoomControl.getUserControl().addObserver(this._userObserver);
+      uiEventStore.addObserver(eventObserver);
+      engine.addObserver(engineObserver);
+      roomControl.addObserver(roomObserver);
       _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(_videoTrackRenderContext.FcrVideoTrackRenderContext.Provider, {
         value: {
-          deviceStore: this._deviceStore,
-          streamControl: this._mainRoomControl.getStreamControl()
+          deviceStore: deviceStore,
+          remoteVideoRenderManager: remoteVideoRenderManager
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           style: {
@@ -692,318 +781,176 @@ var DefaultSceneUIManager = exports.DefaultSceneUIManager = /*#__PURE__*/functio
           children: layoutComponent
         })
       }), dom);
+
+      // return disposer
+      return function () {
+        _reactDom["default"].unmountComponentAtNode(dom);
+        roomControl.leave();
+
+        // ...
+        remoteVideoRenderManager.release();
+        deviceStreamStore.release();
+        actionBarUIModule.release();
+        chatModule.release();
+        layoutModule.release();
+        participantsModule.release();
+        dialogModule.release();
+        settingUIModule.release();
+        interpreterUIModule.release();
+        eventToastUIModule.release();
+        stateBarUIModule.release();
+        audioStreamUIModule.release();
+        soundEffectUIModule.release();
+        shareScreenModule.release();
+        videoWindowModule.release();
+        liveStreamingUIModule.release();
+        inviteUIModule.release();
+        connectionGatewayUIModule.release();
+        whiteBoradUIModule.release();
+        securityStore.release();
+        eventNotificationUIModule.release();
+      };
     }
   }, {
     key: "_renderWaitingRoomUi",
-    value: function _renderWaitingRoomUi(dom) {
-      var _this5 = this;
+    value: function _renderWaitingRoomUi(dom, roomControl) {
+      var _this4 = this;
+      /**
+       * Common Stores
+       */
       var deviceStore = this._deviceStore;
-      if (this._waitingRoomControl) {
-        this._waitingRoomLayoutModule = new _waitingRoomLayout.WaitingRoomLayout({
-          deviceStore: deviceStore,
-          userControl: this._waitingRoomControl.getUserControl()
-        });
-        var uiEventStore = this._uiEventStore;
-        this._eventObserver = {
-          onEvent: function onEvent(action, payload) {
-            if (action === _constant.UIAction.EXIT_ROOM) {
-              _this5._observable.notifyObservers('onExited', _this5._sceneConfig.roomId, payload.reason, _this5._waitingRoomControl);
-            }
-          }
-        };
-        uiEventStore.addObserver(this._eventObserver);
-        var securityStore = new _securityStore.FcrSecurityStore(this._waitingRoomControl.getPrivilegeControl(), this._waitingRoomControl.getUserControl(), this._waitingRoomControl.getStreamControl(), this._waitingRoomControl.getRoomSessionControl(), uiEventStore);
-        var deviceStreamStore = new _deviceStreamStore.FcrDeviceStreamStore({
-          mediaControl: this._engine.getDesktopMediaControl(),
-          roomControl: this._waitingRoomControl,
-          securityStore: securityStore,
-          deviceStore: deviceStore,
-          uiEventStore: uiEventStore
-        });
-        this._stateBarUIModule = new _stateBar.StateBarUIModule({
-          roomControl: this._waitingRoomControl,
-          uiEventStore: uiEventStore,
-          securityStore: securityStore,
-          config: this._sceneConfig
-        });
-        this._actionBarUIModule = new _actionBar.FcrActionBarUIModule({
-          roomControl: this._waitingRoomControl,
-          userControl: this._waitingRoomControl.getUserControl(),
-          uiEventStore: uiEventStore,
-          securityStore: securityStore,
-          streamControl: this._waitingRoomControl.getStreamControl(),
-          deviceStore: deviceStore,
-          deviceStreamStore: deviceStreamStore,
-          mediaControl: this._engine.getDesktopMediaControl()
-        });
-        this._chatModule = new _chat.ChatUIModule({
-          roomControl: this._waitingRoomControl,
-          uiEventStore: uiEventStore,
-          securityStore: securityStore
-        });
-        var layoutComponent = this._waitingRoomLayoutModule.getComponent({
-          chat: this._chatModule.getComponent(),
-          stateBar: this._stateBarUIModule.getComponent(),
-          actionBar: this._actionBarUIModule.getComponent()
-        });
-        this._roomObserver = {
-          onLocalUserMovedToMainRoom: function () {
-            var _onLocalUserMovedToMainRoom = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(roomId, event) {
-              return _regenerator["default"].wrap(function _callee5$(_context5) {
-                while (1) switch (_context5.prev = _context5.next) {
-                  case 0:
-                    _dialog2.FcrDialogApi.open({
-                      id: 'login-confirm-dialog-move-mainroom',
-                      dialogProps: {
-                        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loginConfirmDialog.LoginConfirmDialog, {
-                          title: (0, _i18n.transI18n)('fmt_waitingroom_mobile_notice_popup_label_about_join'),
-                          desc: (0, _i18n.transI18n)('fmt_waitingroom_mobile_notice_popup_label_quick_join'),
-                          id: "login-confirm-dialog-move-mainroom",
-                          btnTxt: (0, _i18n.transI18n)('fmt_waitingroom_mobile_notice_popup_button_join_now_no_count'),
-                          isShowCoutDown: true,
-                          showImg: false,
-                          onConfirm: /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-                            var room;
-                            return _regenerator["default"].wrap(function _callee4$(_context4) {
-                              while (1) switch (_context4.prev = _context4.next) {
-                                case 0:
-                                  if (!_this5._waitingRoomControl) {
-                                    _context4.next = 10;
-                                    break;
-                                  }
-                                  _context4.next = 3;
-                                  return _this5._waitingRoomControl.leave();
-                                case 3:
-                                  room = _this5._engine.createMainRoomControl(roomId.split('-')[0]);
-                                  _context4.next = 6;
-                                  return room.joinWithTicket(_objectSpread(_objectSpread({}, _this5._getJoinRoomOption()), {}, {
-                                    ticket: (0, _lodash.get)(event.changedProperties, 'security.ticket')
-                                  }));
-                                case 6:
-                                  _this5._mainRoomControl = room;
-                                  // @ts-ignore
-                                  window.__mainRoom_control = room;
-                                  _reactDom["default"].unmountComponentAtNode(dom);
-                                  _this5._renderRoomUi(dom);
-                                case 10:
-                                case "end":
-                                  return _context4.stop();
-                              }
-                            }, _callee4);
-                          }))
-                        }),
-                        width: 360,
-                        closable: false,
-                        rootClassName: 'login-confirm-dialog'
-                      }
-                    });
-                  case 1:
-                  case "end":
-                    return _context5.stop();
-                }
-              }, _callee5);
-            }));
-            function onLocalUserMovedToMainRoom(_x3, _x4) {
-              return _onLocalUserMovedToMainRoom.apply(this, arguments);
-            }
-            return onLocalUserMovedToMainRoom;
-          }(),
-          onRoomStateUpdated: function onRoomStateUpdated(roomId, state) {
-            if (state === _type2.FcrRoomState.Closed) {
-              _this5._observable.notifyObservers('onExited', roomId, _type.FcrUIExitReason.CLOSE_ROOM);
-            }
-          }
-        };
-        this._waitingRoomUserObserver = {
-          onLocalUserKickedOut: function onLocalUserKickedOut(roomId) {
-            _dialog2.FcrDialogApi.open({
-              id: 'login-confirm-dialog-kick-out',
-              dialogProps: {
-                content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loginConfirmDialog.LoginConfirmDialog, {
-                  title: (0, _i18n.transI18n)('fmt_popup_button_leavemeeting'),
-                  desc: (0, _i18n.transI18n)('fmt_leave_tips_removetip'),
-                  id: "login-confirm-dialog-kick-out",
-                  btnTxt: (0, _i18n.transI18n)('fmt_waitingroom_attendie_popup_button_gotit'),
-                  onConfirm: function onConfirm() {
-                    _this5._observable.notifyObservers('onExited', roomId, _type.FcrUIExitReason.KICKED_OUT);
-                  }
-                }),
-                width: 360,
-                closable: false,
-                rootClassName: 'login-confirm-dialog'
-              }
-            });
+      var uiEventStore = this._uiEventStore;
+      var roomStore = this._roomStore;
+      var engine = this._engine;
+      var sceneConfig = this._sceneConfig;
+      var coreConfig = this._coreConfig;
+      var observable = this._observable;
+      var remoteVideoRenderManager = new _remoteRenderer.FcrRemoteVideoRenderManager(roomControl.getStreamControl());
+      var waitingRoomLayoutModule = new _waitingRoomLayout.WaitingRoomLayout({
+        deviceStore: deviceStore,
+        userControl: roomControl.getUserControl()
+      });
+      var eventObserver = {
+        onEvent: function onEvent(action, payload) {
+          if (action === _constant.UIAction.EXIT_ROOM) {
+            observable.notifyObservers('onExited', sceneConfig.roomId, payload.reason);
           }
-        };
-        this._waitingRoomControl.addObserver(this._roomObserver);
-        this._waitingRoomControl.getUserControl().addObserver(this._waitingRoomUserObserver);
-        _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            width: '100vw',
-            height: '100vh'
-          },
-          children: layoutComponent
-        }), dom);
-      }
-    }
-  }, {
-    key: "_getJoinRoomOption",
-    value: function _getJoinRoomOption() {
-      var config = this._sceneConfig;
-      var streams = [{
-        videoSourceState: this._deviceStore.cameraEnabled ? _type3.AgoraRtcMediaSourceState.STARTED : _type3.AgoraRtcMediaSourceState.STOPPED,
-        audioSourceState: this._deviceStore.microphoneEnabled ? _type3.AgoraRtcMediaSourceState.STARTED : _type3.AgoraRtcMediaSourceState.STOPPED,
-        videoSourceId: this._deviceStore.currentDeviceId.cameraDeviceId,
-        audioSourceId: this._deviceStore.currentDeviceId.microphoneDeviceId,
-        streamName: 'default',
-        streamType: _type4.AgoraRteMediaStreamType.BOTH,
-        videoSourceType: _type5.AgoraRteVideoSourceType.CAMERA,
-        audioSourceType: _type5.AgoraRteAudioSourceType.MICROPHONE
-      }];
-      if (config.userRole === _type2.FcrUserRole.ROBOT) {
-        streams = [];
-      }
-      return {
-        userName: config.userName,
-        userRole: config.userRole,
-        userProperties: config.userProperties,
-        streamLatency: _agoraEduCore.FcrStreamLatencyLevel.ULTRA_LOW,
-        createStreamConfigs: streams,
-        roomToken: config.roomToken,
-        password: config.password
+        }
       };
-    }
-  }, {
-    key: "_createRoomControl",
-    value: function () {
-      var _createRoomControl2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee7(roomId) {
-        var _this6 = this;
-        return _regenerator["default"].wrap(function _callee7$(_context7) {
-          while (1) switch (_context7.prev = _context7.next) {
-            case 0:
-              return _context7.abrupt("return", new Promise(/*#__PURE__*/function () {
-                var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6(resolve, reject) {
-                  var engine, room;
-                  return _regenerator["default"].wrap(function _callee6$(_context6) {
-                    while (1) switch (_context6.prev = _context6.next) {
-                      case 0:
-                        engine = _this6._engine;
-                        if (engine) {
-                          _context6.next = 3;
-                          break;
-                        }
-                        return _context6.abrupt("return");
-                      case 3:
-                        _context6.prev = 3;
-                        _context6.next = 6;
-                        return engine.createRoomControlAndJoin(roomId, _this6._getJoinRoomOption());
-                      case 6:
-                        room = _context6.sent;
-                        resolve(room);
-                        _context6.next = 14;
-                        break;
-                      case 10:
-                        _context6.prev = 10;
-                        _context6.t0 = _context6["catch"](3);
-                        if (_context6.t0.code === '730403100') {
-                          _dialog2.FcrDialogApi.open({
-                            id: 'login-confirm-dialog-error',
-                            dialogProps: {
-                              content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loginConfirmDialog.LoginConfirmDialog, {
-                                desc: (0, _i18n.transI18n)('fmt_waitingroom_attendie_popup_label_removed'),
-                                id: "login-confirm-dialog-error",
-                                btnTxt: (0, _i18n.transI18n)('fmt_waitingroom_attendie_popup_button_gotit')
-                              }),
-                              width: 360,
-                              closable: false,
-                              rootClassName: 'login-confirm-dialog'
-                            }
-                          });
-                        }
-                        reject(_context6.t0);
-                      case 14:
-                      case "end":
-                        return _context6.stop();
-                    }
-                  }, _callee6, null, [[3, 10]]);
-                }));
-                return function (_x6, _x7) {
-                  return _ref4.apply(this, arguments);
-                };
-              }()));
-            case 1:
-            case "end":
-              return _context7.stop();
-          }
-        }, _callee7);
-      }));
-      function _createRoomControl(_x5) {
-        return _createRoomControl2.apply(this, arguments);
-      }
-      return _createRoomControl;
-    }()
-  }, {
-    key: "_judgeWaitingRoomPremissionAndCreateRoomControl",
-    value: function () {
-      var _judgeWaitingRoomPremissionAndCreateRoomControl2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee8() {
-        var _this$_mainRoomContro, info, isWaitingRoomManager, waitingRoomId, room, securityStore;
-        return _regenerator["default"].wrap(function _callee8$(_context8) {
-          while (1) switch (_context8.prev = _context8.next) {
-            case 0:
-              if (this._mainRoomControl) {
-                _context8.next = 2;
-                break;
-              }
-              return _context8.abrupt("return");
-            case 2:
-              _this$_mainRoomContro = this._mainRoomControl.getPrivilegeControl().getSecurityInfo(_type7.FcrSecurityAction.WaitingRoom), info = _this$_mainRoomContro.info;
-              isWaitingRoomManager = this._mainRoomControl.getPrivilegeControl().getLocalUserPermissionInfo(_type7.FcrPermissionAction.WaitingRoomOpen).enable;
-              if (!isWaitingRoomManager) {
-                _context8.next = 16;
-                break;
-              }
-              if (!info) {
-                _context8.next = 14;
-                break;
-              }
-              waitingRoomId = info.payload.roomUuid;
-              room = this._engine.createWaitingRoomControl(waitingRoomId);
-              _context8.next = 10;
-              return room.join(this._getJoinRoomOption());
-            case 10:
-              this._waitingRoomControl = room;
-              // @ts-ignore
-              window.__waitingRoom_control = room;
-              securityStore = new _securityStore.FcrSecurityStore(this._waitingRoomControl.getPrivilegeControl(), this._waitingRoomControl.getUserControl(), this._waitingRoomControl.getStreamControl(), this._waitingRoomControl.getRoomSessionControl(), this._uiEventStore);
-              this._uiEventStore.sendEvent(_constant.UIAction.WAITING_ROOM_CREATED, {
-                room: room,
-                securityStore: securityStore
-              });
-            case 14:
-              _context8.next = 17;
-              break;
-            case 16:
-              this._destroyWaitingRoom();
-            case 17:
-            case "end":
-              return _context8.stop();
+      uiEventStore.addObserver(eventObserver);
+      var securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), roomControl.getRoomSessionControl(), uiEventStore);
+      var deviceStreamStore = new _deviceStreamStore.FcrDeviceStreamStore({
+        mediaControl: engine.getDesktopMediaControl(),
+        roomControl: roomControl,
+        securityStore: securityStore,
+        deviceStore: deviceStore,
+        uiEventStore: uiEventStore,
+        roomStore: roomStore
+      });
+      this._deviceStreamStore = deviceStreamStore;
+      var connectionGatewayUIModule = new _connectionGateway.ConnectionGatewayUIModule({
+        roomControl: roomControl,
+        uiEventStore: uiEventStore,
+        deviceStore: deviceStore,
+        mediaControl: engine.getDesktopMediaControl()
+      });
+      var stateBarUIModule = new _stateBar.StateBarUIModule({
+        roomControl: roomControl,
+        uiEventStore: uiEventStore,
+        securityStore: securityStore,
+        config: sceneConfig
+      });
+      var actionBarUIModule = new _actionBar.FcrActionBarUIModule({
+        roomControl: roomControl,
+        userControl: roomControl.getUserControl(),
+        uiEventStore: uiEventStore,
+        securityStore: securityStore,
+        streamControl: roomControl.getStreamControl(),
+        deviceStore: deviceStore,
+        deviceStreamStore: deviceStreamStore,
+        mediaControl: engine.getDesktopMediaControl(),
+        roomStore: roomStore
+      });
+      var chatModule = new _chat.ChatUIModule({
+        roomControl: roomControl,
+        uiEventStore: uiEventStore,
+        securityStore: securityStore,
+        roomStore: roomStore
+      });
+      var settingUIModule = new _setting.SettingUIModule({
+        mediaControl: engine.getDesktopMediaControl(),
+        config: sceneConfig,
+        uiEventStore: uiEventStore,
+        deviceStore: deviceStore,
+        monitorControl: engine.getMonitorControl(),
+        parameters: coreConfig.parameters,
+        streamControl: roomControl.getStreamControl(),
+        roomControl: roomControl
+      });
+      var dialogModule = new _dialog.DialogUIModule({
+        uiEventStore: uiEventStore,
+        userInfo: roomControl.getUserControl().getLocalUser(),
+        securityStore: securityStore,
+        userControl: roomControl.getUserControl(),
+        chatRoomControl: roomControl.getChatRoomControl(),
+        deviceStore: deviceStore,
+        streamControl: roomControl.getStreamControl(),
+        remoteVideoRenderManager: remoteVideoRenderManager
+      });
+      dialogModule.addDialogs([{
+        key: _constant.DialogKey.DEVICE_SETTINGS,
+        component: function component() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_deviceSetting["default"], {
+            children: settingUIModule.getComponent()
+          }, "DeviceSettingDialog");
+        }
+      }, {
+        key: _constant.DialogKey.CONNECTION_GATEWAY,
+        component: function component(params) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_connectionGateway2.ConnectionGatewayDialog, {
+            params: params,
+            children: connectionGatewayUIModule.getComponent()
+          }, "ConnectionGatewayDialog");
+        }
+      }]);
+      var layoutComponent = waitingRoomLayoutModule.getComponent({
+        chat: chatModule.getComponent(),
+        stateBar: stateBarUIModule.getComponent(),
+        actionBar: actionBarUIModule.getComponent(),
+        layers: [dialogModule.getComponent()]
+      });
+      var roomObserver = {
+        onRoomStateUpdated: function onRoomStateUpdated(roomId, state) {
+          if (state === _type2.FcrRoomState.Closed) {
+            observable.notifyObservers('onExited', roomId, _type.FcrUIExitReason.CLOSE_ROOM);
           }
-        }, _callee8, this);
-      }));
-      function _judgeWaitingRoomPremissionAndCreateRoomControl() {
-        return _judgeWaitingRoomPremissionAndCreateRoomControl2.apply(this, arguments);
-      }
-      return _judgeWaitingRoomPremissionAndCreateRoomControl;
-    }()
-  }, {
-    key: "_destroyWaitingRoom",
-    value: function _destroyWaitingRoom() {
-      var _this$_waitingRoomCon;
-      (_this$_waitingRoomCon = this._waitingRoomControl) === null || _this$_waitingRoomCon === void 0 || _this$_waitingRoomCon.leave();
-      this._waitingRoomControl = undefined;
-      this._uiEventStore.sendEvent(_constant.UIAction.WAITING_ROOM_DESTROYED);
-      // @ts-ignore
-      window.__waitingRoom_control = undefined;
+        }
+      };
+      roomControl.addObserver(roomObserver);
+      _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          width: '100vw',
+          height: '100vh'
+        },
+        children: layoutComponent
+      }), dom);
+
+      // return disposer
+      return function () {
+        _reactDom["default"].unmountComponentAtNode(dom);
+        roomControl.leave();
+        _this4.logger.info('unmount waiting room and leave room');
+        // ...
+        remoteVideoRenderManager.release();
+        waitingRoomLayoutModule.release();
+        securityStore.release();
+        deviceStreamStore.release();
+        dialogModule.release();
+        settingUIModule.release();
+        stateBarUIModule.release();
+        actionBarUIModule.release();
+        chatModule.release();
+      };
     }
   }]);
 }();