fcr-ui-scene 3.4.1 → 3.4.2

package/lib/ui-manager.js

@@ -1,348 +1,41 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.filter.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
 });
 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.map.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");
-require("core-js/modules/esnext.async-iterator.for-each.js");
-require("core-js/modules/esnext.async-iterator.map.js");
-require("core-js/modules/esnext.iterator.constructor.js");
-require("core-js/modules/esnext.iterator.for-each.js");
-require("core-js/modules/esnext.iterator.map.js");
-require("core-js/modules/web.dom-collections.for-each.js");
-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 _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _logger = require("agora-foundation/lib/logger");
-var _fcrCore = require("fcr-core");
-var _deviceStore = require("./common/device-store");
-var _layout = require("./modules/layout");
-var _waitingRoomLayout = require("./modules/waiting-room-layout");
-var _chat = require("./modules/chat");
-var _eventStore = require("./common/event-store");
-var _securityStore = require("./common/security-store");
-var _actionBar = require("./modules/action-bar");
-var _type = require("./type");
-var _dialog = require("./modules/dialog");
-var _constant = require("./utilities/constant");
-var _participant = require("./modules/participant");
-var _connectionGateway = require("./modules/connection-gateway");
-var _dialogs = require("./modules/dialog/dialogs");
-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("fcr-core/lib/type");
-var _liveStreaming = require("./modules/live-streaming");
-var _invite = require("./modules/invite");
-var _connectionGateway2 = require("./modules/dialog/components/connection-gateway");
 var _devicePretest = require("./modules/device-pretest");
 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");
-var _chat2 = require("./modules/dialog/components/chat");
-var _env = require("agora-foundation/lib/utilities/env");
-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 _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 _type3 = require("fcr-core/lib/room-control/type");
-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 _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 _reactErrorBoundary = require("react-error-boundary");
-var _errorFallback = require("./error-fallback");
-var _misc = require("agora-foundation/lib/utilities/misc");
+var _mainScene = require("./scenes/main-scene");
+var _waitingScene = require("./scenes/waiting-scene");
+var _loading = _interopRequireDefault(require("agora-ui-foundation/lib/components/loading"));
 var _jsxRuntime = require("react/jsx-runtime");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DefaultSceneUIManager = exports.DefaultSceneUIManager = /*#__PURE__*/function () {
-  function DefaultSceneUIManager(_sceneConfig, _coreConfig, _engine, _observable, _settingConfig) {
-    var _this = this,
-      _this$_sceneConfig$re;
+  // @internal
+
+  function DefaultSceneUIManager(_sceneConfig, _coreConfig, _engine) {
     (0, _classCallCheck2["default"])(this, DefaultSceneUIManager);
     // @internal
     (0, _defineProperty2["default"])(this, "logger", (0, _logger.getLogger)());
-    // @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(_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',
-            maskClosable: false
-          }
-        });
-      },
-      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',
-            maskClosable: false
-          }
-        });
-      },
-      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: [],
-        soundEffectAudios: []
-      },
-      _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)),
-      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 _this2 = this;
-      this._dom = dom;
-      if (!this._dom) {
-        this.logger.error('Scene UI cannot be rendered as dom is not exist');
-        return;
-      }
-      var skipPretest = (0, _parameters.isSkipPretest)(this._coreConfig.parameters);
-      var openDefaultCamera = (0, _parameters.isOpenDefaultCamera)(this._coreConfig.parameters);
-      var openDefaultMicrophone = (0, _parameters.isOpenDefaultMicrophone)(this._coreConfig.parameters);
-      if (openDefaultCamera) {
-        this._settingConfig.media.cameraExpectedOff = false;
-      }
-      if (openDefaultMicrophone) {
-        this._settingConfig.media.autoConnectAudio = true;
-        this._settingConfig.media.microphoneExpectedOff = false;
-      }
-      var joinRoom = /*#__PURE__*/function () {
-        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 _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 {
-                    _this2._disposers.push(_this2._renderWaitingRoomUi(dom, roomControl));
-                  }
-                }).then(function () {
-                  return _this2._deviceStore.init();
-                }).then(function () {
-                  return _this2._runSettingConfig();
-                }).then(function () {
-                  _this2._observable.notifyObservers('onLaunchSuccess', _this2._sceneConfig.roomId);
-                })["catch"](function (e) {
-                  _this2._observable.notifyObservers('onLaunchFailure', _this2._sceneConfig.roomId, e);
-                }));
-              case 1:
-              case "end":
-                return _context2.stop();
-            }
-          }, _callee2);
-        }));
-        return function joinRoom() {
-          return _ref3.apply(this, arguments);
-        };
-      }();
-      if (!skipPretest) {
-        var joining = false;
-        this._renderDevicePretestUi(dom,
-        // on join
-        function () {
-          if (joining) return;
-          joining = true;
-          joinRoom()["finally"](function () {
-            joining = false;
-          });
-        },
-        // on exit
-        function () {
-          _this2._observable.notifyObservers('onLaunchCancel', _this2._sceneConfig.roomId);
-        });
-      } else {
-        joinRoom();
-      }
-    }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      if (this._dom) {
-        _reactDom["default"].unmountComponentAtNode(this._dom);
-        this._dom = undefined;
-      }
-      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: "_renderDevicePretestUi",
-    value: function _renderDevicePretestUi(dom, onJoin, _onExit) {
-      var _this3 = this;
-      var store = this._deviceStore;
+    key: "renderDevicePretestUi",
+    value: function renderDevicePretestUi(dom, deviceProvider, onJoin, _onExit) {
       var pretestStore = new _store.FcrPretestStore({
-        deviceStore: store
+        deviceProvider: deviceProvider
       });
       _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(_store.PretestStoreContext.Provider, {
         value: pretestStore,
@@ -354,13 +47,10 @@ var DefaultSceneUIManager = exports.DefaultSceneUIManager = /*#__PURE__*/functio
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_devicePretest.FcrMeetingPreview, {
             nickName: this._sceneConfig.userName,
             roomInfo: {
-              // TODO: 获取房间名称
               meetingName: (0, _i18n.transI18n)('fmt_uimanager_labels_roomname'),
-              // TODO: 获取主持人名称
               meetingHostName: ''
             },
             onClick: function onClick() {
-              _this3._deviceStore.actionsBeforeJoin();
               pretestStore.release();
               onJoin();
             },
@@ -373,94 +63,8 @@ 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:
-              this.logger.info('run setting config: ', (0, _misc.jsonstring)(this._settingConfig));
-              media = this._settingConfig.media; // 1. 音频连接
-              if (!media.autoConnectAudio) {
-                _context3.next = 9;
-                break;
-              }
-              _context3.next = 5;
-              return this._deviceStore.joinAudioByComputer();
-            case 5:
-              _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 = 10;
-              break;
-            case 9:
-              // 弹出是否链接音频的弹窗
-              this._uiEventStore.openDialog(_constant.DialogKey.CONNECTION_GATEWAY, '', {
-                type: 'computer'
-              });
-            case 10:
-              // 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 11:
-            case "end":
-              return _context3.stop();
-          }
-        }, _callee3, this);
-      }));
-      function _runSettingConfig() {
-        return _runSettingConfig2.apply(this, arguments);
-      }
-      return _runSettingConfig;
-    }()
-  }, {
-    key: "_renderWithErrorBoundary",
-    value: function _renderWithErrorBoundary(layoutComponent, spaceName) {
-      var _this4 = this;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
-        FallbackComponent: _errorFallback.ErrorFallback,
-        onError: function onError(error, info) {
-          return _this4._logError(error, info, spaceName);
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            width: '100vw',
-            height: '100vh'
-          },
-          children: layoutComponent
-        })
-      });
-    }
-  }, {
-    key: "_logError",
-    value: function _logError(error, info, space) {
-      var errorMessage = "[DefaultSceneUIManager]: ErrorBoundary wrap ".concat(space, " error:");
-      var componentStackMessage = "componentStack: ".concat(info.componentStack);
-      this.logger.error("".concat(errorMessage, "\n") + "  Error: ".concat(error.message, "\n") + "  Stack: ".concat(error.stack, "\n") + "  ".concat(componentStackMessage));
-    }
-  }, {
-    key: "_renderLayers",
-    value: function _renderLayers(layers) {
-      return layers.map(function (el, i) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react["default"].Fragment, {
-          children: el
-        }, i);
-      });
-    }
-  }, {
-    key: "_renderPullingUi",
-    value: function _renderPullingUi(dom, roomControl) {
+    key: "renderPullingUi",
+    value: function renderPullingUi(dom, roomControl) {
       var coreConfig = this._coreConfig;
       var offscreenPullingUIModule = new _offscreenPulling.OffscreenPullingUIModule({
         streamControl: roomControl.getStreamControl(),
@@ -478,400 +82,60 @@ var DefaultSceneUIManager = exports.DefaultSceneUIManager = /*#__PURE__*/functio
       };
     }
   }, {
-    key: "_renderRoomUi",
-    value: function _renderRoomUi(dom, roomControl) {
-      /**
-       * Common Stores
-       */
-      var deviceStore = this._deviceStore;
-      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 streamControl = roomControl.getStreamControl();
-      var userControl = roomControl.getUserControl();
-      var privilegeControl = roomControl.getPrivilegeControl();
-      var interpreterControl = roomControl.getInterpreterControl();
-      var chatRoomControl = roomControl.getChatRoomControl();
-      var whiteboardControl = roomControl.getBoardControl();
-      var remoteVideoRenderManager = new _remoteRenderer.FcrRemoteVideoRenderManager(streamControl);
-      var securityStore = new _securityStore.FcrSecurityStore(privilegeControl, userControl, streamControl, uiEventStore, interpreterControl);
-      var baseConfig = {
-        mediaControl: engine.getDesktopMediaControl(),
-        streamControl: streamControl,
-        userControl: userControl,
-        privilegeControl: privilegeControl,
-        interpreterControl: interpreterControl,
-        chatRoomControl: chatRoomControl,
-        whiteboardControl: whiteboardControl,
-        roomStore: roomStore,
-        uiEventStore: uiEventStore,
-        securityStore: securityStore,
-        deviceStore: deviceStore,
-        roomControl: roomControl,
-        engine: engine,
-        remoteVideoRenderManager: remoteVideoRenderManager,
-        config: sceneConfig,
-        parameters: coreConfig.parameters
-      };
-      var deviceStreamStore = new _deviceStreamStore.FcrDeviceStreamStore(baseConfig);
-      var storeConfig = _objectSpread(_objectSpread({}, baseConfig), {}, {
-        deviceStreamStore: deviceStreamStore
-      });
-      this._deviceStreamStore = deviceStreamStore;
-      var chatModule = new _chat.ChatUIModule(storeConfig);
-      var audioStreamUIModule = new _audioStream.AudioStreamUIModule(storeConfig);
-      var soundEffectUIModule = new _soundEffect.SoundEffectUIModule(storeConfig);
-      var dialogModule = new _dialog.DialogUIModule(storeConfig);
-      var settingUIModule = new _setting.SettingUIModule(storeConfig);
-      var interpreterUIModule = new _interpreter.InterpreterUIModule(storeConfig);
-      var stateBarUIModule = new _stateBar.StateBarUIModule(storeConfig);
-      var participantsModule = new _participant.ParticipantUIModule(storeConfig);
-      var shareScreenModule = new _shareScreen.ShareScreenUIModule(storeConfig);
-      var videoWindowModule = new _videoWindow.VideoWindowUIModule(storeConfig);
-      var whiteBoradUIModule = new _whiteboard.FcrWhiteboardUIModule(storeConfig);
-      var connectionGatewayUIModule = new _connectionGateway.ConnectionGatewayUIModule(storeConfig);
-      var actionBarUIModule = new _actionBar.FcrActionBarUIModule(storeConfig);
-      var controlbarUIModule = new _controlBar.ControlBarUIModule(storeConfig);
-      var layoutModule = new _layout.LayoutUIModule(storeConfig);
-      var eventToastUIModule = new _eventToast.EventToastUIModule({
-        uiEventStore: uiEventStore
-      });
-      var eventConfirmUIModule = new _eventConfirm.EventConfirmUIModule({
-        uiEventStore: uiEventStore
-      });
-      var eventNotificationUIModule = new _notification.NotificationUIModule({
-        uiEventStore: uiEventStore,
-        privilegeControl: privilegeControl,
-        roomStore: roomStore
-      });
-      var liveStreamingUIModule = new _liveStreaming.LiveStreamingUIModule({
-        roomControl: roomControl,
-        uiEventStore: uiEventStore
-      });
-      var inviteUIModule = new _invite.InviteUIModule({
-        roomControl: roomControl,
-        uiEventStore: uiEventStore
-      });
-      dialogModule.addDialogs([{
-        key: _constant.DialogKey.DEVICE_SETTINGS,
-        component: function component() {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_deviceSetting["default"], {
-            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() {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_participant2.ParticipantDialog, {
-            children: participantsModule.getComponent()
-          }, "ParticipantDialog");
-        }
-      }, {
-        key: _constant.DialogKey.LIVE_STREAMING,
-        component: function component() {
-          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() {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_invite2.InviteDialog, {
-            children: inviteUIModule.getComponent()
-          }, "InviteDialog");
-        }
-      }, {
-        key: _constant.DialogKey.CHAT,
-        component: function component() {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_chat2.ChatDialog, {
-            chatAction: chatModule.getActionsComponent(),
-            children: chatModule.getComponent({
-              singling: true
-            })
-          }, "ChatDialog");
-        }
-      }, {
-        key: _constant.DialogKey.VIDEO_WINDOW,
-        component: function component() {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogs.VideoWindowDialog, {
-            children: videoWindowModule.getComponent()
-          }, "VideoWindowDialog");
-        }
-      }, {
-        key: _constant.DialogKey.CONNECTION_GATEWAY,
-        component: function component(params) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_connectionGateway2.ConnectionGatewayDialog, {
-            params: params,
-            children: connectionGatewayUIModule.getComponent()
-          }, "ConnectionGatewayDialog");
-        }
-      }, {
-        key: _constant.DialogKey.WHITEBOARD,
-        component: function component() {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_whiteboard2.WhiteboardElectronDialog, {
-            module: whiteBoradUIModule
-          }, "WhiteboardDialog");
-        }
-      }, {
-        key: _constant.DialogKey.SHARE_SCREEN,
-        component: function component(params) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareScreenSelection.ShareScreenSelectronDialog, {
-            params: params,
-            children: shareScreenModule.getSelectionComponent()
-          }, "ShareScreenSelection");
-        }
-      }, {
-        key: _constant.DialogKey.CONTROL_BAR,
-        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_SINGLE_REMOVE,
-        component: function component(params) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_removeAdmitWaitingRoom.RemoveAdmitWaitingRoomDialog, {
-            params: params,
-            children: participantsModule.getWaitingRoomDialog(params)
-          }, 'WaitingRoomSingleRemove');
-        }
-      }, {
-        key: _constant.DialogKey.WAITING_ROOM_ALL_REMOVE,
-        component: function component(params) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_removeAdmitWaitingRoom.RemoveAdmitWaitingRoomDialog, {
-            params: params,
-            children: participantsModule.getWaitingRoomDialog(params)
-          }, 'WaitingRoomAllRemove');
-        }
-      }, {
-        key: _constant.DialogKey.WAITING_ROOM_ALL_ADMIT,
-        component: function component(params) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_removeAdmitWaitingRoom.RemoveAdmitWaitingRoomDialog, {
-            params: 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");
-        }
-      }]);
-      var layoutComponent = layoutModule.getComponent({
-        chat: chatModule.getComponent(),
-        chatAction: chatModule.getActionsComponent(),
-        participant: participantsModule.getComponent(),
-        actionBar: actionBarUIModule.getComponent(),
-        stateBar: stateBarUIModule.getComponent(),
-        layers: this._renderLayers([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) {
-            observable.notifyObservers('onExited', sceneConfig.roomId, payload.reason);
-          }
-        }
-      };
-      var engineObserver = {
-        onConnectionStateUpdated: function onConnectionStateUpdated(state) {
-          if (state === _fcrCore.FcrConnectionState.ABORTED) {
-            observable.notifyObservers('onExited', sceneConfig.roomId, _type.FcrUIExitReason.ABORTED);
-          }
-          if (state === _fcrCore.FcrConnectionState.CONNECTED) {
-            uiEventStore.sendEvent(_constant.UIAction.ENGINE_RECONNECTED);
-          }
-        }
-      };
-      var roomObserver = {
-        onRoomStateUpdated: function onRoomStateUpdated(roomId, state) {
-          if (state === _type2.FcrRoomState.Closed) {
-            observable.notifyObservers('onExited', roomId, _type.FcrUIExitReason.CLOSE_ROOM);
-          }
-        }
-      };
-      uiEventStore.addObserver(eventObserver);
-      engine.addObserver(engineObserver);
-      roomControl.addObserver(roomObserver);
-      _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(_videoTrackRenderContext.FcrVideoTrackRenderContext.Provider, {
-        value: {
-          deviceStore: deviceStore,
-          remoteVideoRenderManager: remoteVideoRenderManager
-        },
-        children: this._renderWithErrorBoundary(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            width: '100vw',
-            height: '100vh'
-          },
-          children: layoutComponent
-        }), 'mainroom')
-      }), dom);
-
-      // return disposer
+    key: "renderMainSceneUI",
+    value: function renderMainSceneUI(dom, eventProvider, deviceProvider, roomProvider, sharedConfigDataSource, sharedSettingDataSource, sharedLayoutDataSource, sharedSpeakerSpotlightDataSource, sharedPinDataSource, dialogProvider, messageProvider, sharedVideoWindowDataSource, sharedDevicePrivilegeDataSource) {
+      var scene = new _mainScene.FcrMainUIScene({
+        engine: this._engine,
+        eventProvider: eventProvider,
+        sharedConfigDataSource: sharedConfigDataSource,
+        deviceProvider: deviceProvider,
+        roomProvider: roomProvider,
+        sharedSettingDataSource: sharedSettingDataSource,
+        sharedLayoutDataSource: sharedLayoutDataSource,
+        sharedSpeakerSpotlightDataSource: sharedSpeakerSpotlightDataSource,
+        sharedPinDataSource: sharedPinDataSource,
+        dialogProvider: dialogProvider,
+        messageProvider: messageProvider,
+        sharedVideoWindowDataSource: sharedVideoWindowDataSource,
+        sharedDevicePrivilegeDataSource: sharedDevicePrivilegeDataSource
+      });
+      scene.nodeWillActive();
+      scene.mount(dom);
       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();
+        var _roomProvider$mainRoo;
+        scene.unmount(dom);
+        scene.nodeWillInactive();
+        (_roomProvider$mainRoo = roomProvider.mainRoomControl) === null || _roomProvider$mainRoo === void 0 || _roomProvider$mainRoo.leave();
       };
     }
   }, {
-    key: "_renderWaitingRoomUi",
-    value: function _renderWaitingRoomUi(dom, roomControl) {
-      var _this5 = this;
-      /**
-       * Common Stores
-       */
-      var deviceStore = this._deviceStore;
-      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 userControl = roomControl.getUserControl();
-      var mediaControl = engine.getDesktopMediaControl();
-      var streamControl = roomControl.getStreamControl();
-      var privilegeControl = roomControl.getPrivilegeControl();
-      var chatRoomControl = roomControl.getChatRoomControl();
-      var remoteVideoRenderManager = new _remoteRenderer.FcrRemoteVideoRenderManager(streamControl);
-      var waitingRoomLayoutModule = new _waitingRoomLayout.WaitingRoomLayout({
-        deviceStore: deviceStore,
-        userControl: userControl
-      });
-      var eventToastUIModule = new _eventToast.EventToastUIModule({
-        uiEventStore: uiEventStore
-      });
-      var eventObserver = {
-        onEvent: function onEvent(action, payload) {
-          if (action === _constant.UIAction.EXIT_ROOM) {
-            observable.notifyObservers('onExited', sceneConfig.roomId, payload.reason);
-          }
-        }
-      };
-      uiEventStore.addObserver(eventObserver);
-      var securityStore = new _securityStore.FcrSecurityStore(privilegeControl, userControl, streamControl, uiEventStore);
-      var baseConfig = {
-        mediaControl: mediaControl,
-        streamControl: streamControl,
-        userControl: userControl,
-        privilegeControl: privilegeControl,
-        chatRoomControl: chatRoomControl,
-        roomStore: roomStore,
-        uiEventStore: uiEventStore,
-        securityStore: securityStore,
-        deviceStore: deviceStore,
-        roomControl: roomControl,
-        engine: engine,
-        remoteVideoRenderManager: remoteVideoRenderManager,
-        config: sceneConfig,
-        parameters: coreConfig.parameters
-      };
-      var deviceStreamStore = new _deviceStreamStore.FcrDeviceStreamStore(baseConfig);
-      var storeConfig = _objectSpread(_objectSpread({}, baseConfig), {}, {
-        deviceStreamStore: deviceStreamStore
-      });
-      this._deviceStreamStore = deviceStreamStore;
-      var connectionGatewayUIModule = new _connectionGateway.ConnectionGatewayUIModule(storeConfig);
-      var stateBarUIModule = new _stateBar.StateBarUIModule(storeConfig);
-      var actionBarUIModule = new _actionBar.FcrActionBarUIModule(storeConfig);
-      var chatModule = new _chat.ChatUIModule(storeConfig);
-      var settingUIModule = new _setting.SettingUIModule(storeConfig);
-      var dialogModule = new _dialog.DialogUIModule(storeConfig);
-      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: this._renderLayers([dialogModule.getComponent()]),
-        globalToast: eventToastUIModule.getComponent('global')
-      });
-      var roomObserver = {
-        onRoomStateUpdated: function onRoomStateUpdated(roomId, state) {
-          if (state === _type2.FcrRoomState.Closed) {
-            observable.notifyObservers('onExited', roomId, _type.FcrUIExitReason.CLOSE_ROOM);
-          }
-        }
-      };
-      roomControl.addObserver(roomObserver);
-      _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: this._renderWithErrorBoundary(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            width: '100vw',
-            height: '100vh'
-          },
-          children: layoutComponent
-        }), 'waitingroom')
-      }), dom);
-
-      // return disposer
+    key: "renderWaitingSceneUI",
+    value: function renderWaitingSceneUI(dom, eventProvider, deviceProvider, roomProvider, sharedConfigDataSource, dialogProvider, messageProvider, sharedLayoutDataSource, sharedSettingDataSource, sharedDevicePrivilegeDataSource) {
+      var scene = new _waitingScene.FcrWaitingUIScene({
+        engine: this._engine,
+        eventProvider: eventProvider,
+        sharedConfigDataSource: sharedConfigDataSource,
+        deviceProvider: deviceProvider,
+        roomProvider: roomProvider,
+        dialogProvider: dialogProvider,
+        messageProvider: messageProvider,
+        sharedLayoutDataSource: sharedLayoutDataSource,
+        sharedSettingDataSource: sharedSettingDataSource,
+        sharedDevicePrivilegeDataSource: sharedDevicePrivilegeDataSource
+      });
+      scene.nodeWillActive();
+      scene.mount(dom);
       return function () {
-        _reactDom["default"].unmountComponentAtNode(dom);
-        roomControl.leave();
-        _this5.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();
+        scene.unmount(dom);
+        scene.nodeWillInactive();
+        // roomProvider.waitingRoomControl?.leave();
+        roomProvider.leaveWaitingRoom();
       };
     }
+  }, {
+    key: "renderLoading",
+    value: function renderLoading(dom) {
+      _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(_loading["default"], {}), dom);
+    }
   }]);
 }();