fcr-ui-scene 3.4.0 → 3.4.2

package/lib/ui-manager.js

@@ -6,323 +6,36 @@ 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.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.iterator.constructor.js");
-require("core-js/modules/esnext.iterator.for-each.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 _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 _operationWaitingRoom = require("./modules/dialog/components/operation-waiting-room");
-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 _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");
-// import { EventNotificationUIModule } from './modules/event-notification';
 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'
-          }
-        });
-      },
-      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: [],
-        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._deviceStore.openFirstCamera();
-      }
-      if (openDefaultMicrophone) {
-        this._deviceStore.openFirstMicrophone();
-      }
-      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 () {
-                  _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,
@@ -334,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();
             },
@@ -353,59 +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:
-              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) {
+    key: "renderPullingUi",
+    value: function renderPullingUi(dom, roomControl) {
       var coreConfig = this._coreConfig;
       var offscreenPullingUIModule = new _offscreenPulling.OffscreenPullingUIModule({
         streamControl: roomControl.getStreamControl(),
@@ -423,534 +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 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: engine.getDesktopMediaControl(),
-        roomControl: roomControl,
-        securityStore: securityStore,
-        deviceStore: deviceStore,
-        uiEventStore: uiEventStore,
-        roomStore: roomStore,
-        interpterControl: roomControl.getInterpreterControl()
-      });
-      this._deviceStreamStore = deviceStreamStore;
-      var chatModule = new _chat.ChatUIModule({
-        roomControl: roomControl,
-        uiEventStore: uiEventStore,
-        securityStore: securityStore,
-        roomStore: roomStore
-      });
-      var audioStreamUIModule = new _audioStream.AudioStreamUIModule({
-        streamControl: roomControl.getStreamControl(),
-        userControl: roomControl.getUserControl(),
-        deviceStreamStore: deviceStreamStore,
-        roomStore: roomStore,
-        interpterControl: roomControl.getInterpreterControl(),
-        uiEventStore: uiEventStore,
-        deviceStore: deviceStore
-      });
-      var soundEffectUIModule = new _soundEffect.SoundEffectUIModule({
-        chatRoomControl: roomControl.getChatRoomControl(),
-        roomControl: roomControl,
-        streamControl: roomControl.getStreamControl(),
-        whiteboardControl: roomControl.getBoardControl(),
-        userControl: roomControl.getUserControl(),
-        deviceStore: deviceStore,
-        engine: engine
-      });
-      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
-      });
-      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 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: sceneConfig,
-        parameters: coreConfig.parameters
-      });
-      var eventToastUIModule = new _eventToast.EventToastUIModule({
-        uiEventStore: uiEventStore
-      });
-      var eventConfirmUIModule = new _eventConfirm.EventConfirmUIModule({
-        uiEventStore: uiEventStore
-      });
-      var eventNotificationUIModule = new _notification.NotificationUIModule({
-        uiEventStore: uiEventStore,
-        privilegeControl: roomControl.getPrivilegeControl(),
-        roomStore: roomStore
-      });
-      var participantsModule = new _participant.ParticipantUIModule({
-        roomControl: roomControl,
-        engine: engine,
-        peerSessionControl: engine.getPeerSessionControl(),
-        securityStore: securityStore,
-        uiEventStore: uiEventStore,
-        deviceStore: deviceStore,
-        deviceStreamStore: deviceStreamStore,
-        interpreterControl: roomControl.getInterpreterControl(),
-        roomStore: roomStore
-      });
-      var shareScreenModule = new _shareScreen.ShareScreenUIModule({
-        roomControl: roomControl,
-        mediaControl: engine.getDesktopMediaControl(),
-        deviceStore: deviceStore,
-        deviceStreamStore: deviceStreamStore,
-        securityStore: securityStore,
-        uiEventStore: uiEventStore,
-        config: sceneConfig
-      });
-      var liveStreamingUIModule = new _liveStreaming.LiveStreamingUIModule({
-        roomControl: roomControl,
-        uiEventStore: uiEventStore
-      });
-      var videoWindowModule = new _videoWindow.VideoWindowUIModule({
-        uiEventStore: uiEventStore,
-        mediaControl: this._engine.getDesktopMediaControl(),
-        userControl: roomControl.getUserControl(),
-        streamControl: roomControl.getStreamControl(),
-        securityStore: securityStore,
-        deviceStore: deviceStore,
-        deviceStreamStore: deviceStreamStore,
-        interpreterControl: roomControl.getInterpreterControl()
-      });
-      var connectionGatewayUIModule = new _connectionGateway.ConnectionGatewayUIModule({
-        roomControl: roomControl,
-        uiEventStore: uiEventStore,
-        deviceStore: deviceStore,
-        mediaControl: engine.getDesktopMediaControl()
-      });
-      var actionBarUIModule = new _actionBar.FcrActionBarUIModule({
-        roomControl: roomControl,
-        userControl: roomControl.getUserControl(),
-        uiEventStore: uiEventStore,
-        securityStore: securityStore,
-        streamControl: roomControl.getStreamControl(),
-        deviceStore: deviceStore,
-        deviceStreamStore: deviceStreamStore,
-        mediaControl: engine.getDesktopMediaControl(),
-        interpreterControl: roomControl.getInterpreterControl(),
-        roomStore: roomStore
-      });
-      var inviteUIModule = new _invite.InviteUIModule({
-        roomControl: roomControl,
-        uiEventStore: uiEventStore
-      });
-      var whiteBoradUIModule = new _whiteboard.FcrWhiteboardUIModule({
-        roomControl: roomControl,
-        uiEventStore: uiEventStore,
-        userControl: roomControl.getUserControl(),
-        whiteboardControl: roomControl.getBoardControl(),
-        streamControl: roomControl.getStreamControl(),
-        securityStore: securityStore
-      });
-      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() {
-          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,
-        component: function component(params) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_operationWaitingRoom.OperationWaitingRoomDialog, {
-            params: params
-          }, 'WaitingRoom');
-        }
-      }, {
-        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 layoutModule = new _layout.LayoutUIModule({
-        deviceStore: deviceStore,
-        uiEventStore: uiEventStore,
-        mediaControl: engine.getDesktopMediaControl(),
-        userControl: roomControl.getUserControl(),
-        streamControl: roomControl.getStreamControl(),
-        securityStore: securityStore,
-        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) {
-            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: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            width: '100vw',
-            height: '100vh'
-          },
-          children: layoutComponent
-        })
-      }), 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 _this4 = 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 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);
-          }
-        }
-      };
-      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);
-          }
-        }
-      };
-      roomControl.addObserver(roomObserver);
-      _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          width: '100vw',
-          height: '100vh'
-        },
-        children: layoutComponent
-      }), 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();
-        _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();
+        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);
+    }
   }]);
 }();