fcr-ui-scene 1.0.40 → 3.1.0-1

package/lib/ui-manager.js

@@ -0,0 +1,555 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/web.dom-collections.for-each.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.join.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");
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+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 _deviceStore = require("./common/device-store");
+var _layout = require("./modules/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 _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 _shareScreen = require("./modules/share-screen");
+var _videoWindow = require("./modules/video-window");
+var _type2 = require("agora-edu-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 _context2 = require("./modules/device-pretest/context");
+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 _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 _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, _roomControl, _observable) {
+    var _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, "_roomObserver", {});
+    this._sceneConfig = _sceneConfig;
+    this._coreConfig = _coreConfig;
+    this._engine = _engine;
+    this._roomControl = _roomControl;
+    this._observable = _observable;
+    this._uiEventStore = new _eventStore.FcrUIEventStore();
+    this._deviceStore = new _deviceStore.FcrDeviceStore(_sceneConfig.userName, this._engine.getMediaControl());
+    var _ref = (_this$_sceneConfig$re = this._sceneConfig.resource) !== null && _this$_sceneConfig$re !== void 0 ? _this$_sceneConfig$re : {
+        virtualBackgroundImages: [],
+        virtualBackgroundVideos: []
+      },
+      _ref$virtualBackgroun = _ref.virtualBackgroundImages,
+      virtualBackgroundImages = _ref$virtualBackgroun === void 0 ? [] : _ref$virtualBackgroun,
+      _ref$virtualBackgroun2 = _ref.virtualBackgroundVideos,
+      virtualBackgroundVideos = _ref$virtualBackgroun2 === void 0 ? [] : _ref$virtualBackgroun2;
+    var uiResources = {
+      virtualBackgroundImages: [_uiResources.BUILTIN_VIRTUAL_BACKGROUND_IMAGES_URL].concat((0, _toConsumableArray2["default"])(virtualBackgroundImages)),
+      virtualBackgroundVideos: [_uiResources.BUILTIN_VIRTUAL_BACKGROUND_VIDEOS_URL].concat((0, _toConsumableArray2["default"])(virtualBackgroundVideos))
+    };
+    this._deviceStore.downloadUiResources(uiResources);
+  }
+  return (0, _createClass2["default"])(DefaultSceneUIManager, [{
+    key: "render",
+    value: function render(dom) {
+      var _this = 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();
+      }
+      if (!skipPretest) {
+        var joining = false;
+        this._renderDevicePretestUi(dom,
+        // on join
+        function () {
+          if (joining) return;
+          joining = true;
+          _this._handleJoinRoom().then(function () {
+            _this._renderRoomUi(dom);
+          })["finally"](function () {
+            joining = false;
+          });
+        },
+        // on exit
+        function () {
+          _this._observable.notifyObservers('onLaunchCancel', _this._sceneConfig.roomId);
+        });
+      } else {
+        this._handleJoinRoom().then(function () {
+          _this._renderRoomUi(dom);
+        });
+      }
+    }
+  }, {
+    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._deviceStore.release();
+      this._uiEventStore.release();
+    }
+  }, {
+    key: "_handleJoinRoom",
+    value: function () {
+      var _handleJoinRoom2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var engine, config, streams;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              engine = this._engine;
+              config = this._sceneConfig;
+              if (engine) {
+                _context.next = 4;
+                break;
+              }
+              return _context.abrupt("return");
+            case 4:
+              streams = [{
+                videoSourceState: _type3.AgoraRtcMediaSourceState.STOPPED,
+                audioSourceState: _type3.AgoraRtcMediaSourceState.STOPPED,
+                videoSourceId: '',
+                audioSourceId: '',
+                streamName: 'default',
+                streamType: _type4.AgoraRteMediaStreamType.BOTH,
+                videoSourceType: _type5.AgoraRteVideoSourceType.CAMERA,
+                audioSourceType: _type5.AgoraRteAudioSourceType.MICROPHONE
+              }];
+              if (config.userRole === _type2.FcrUserRole.ROBOT) {
+                streams = [];
+              }
+              _context.prev = 6;
+              _context.next = 9;
+              return this._roomControl.join({
+                userName: config.userName,
+                userRole: config.userRole,
+                userProperties: config.userProperties,
+                streamLatency: _type2.FcrStreamLatencyLevel.ULTRA_LOW,
+                createStreamConfigs: streams
+              });
+            case 9:
+              this._observable.notifyObservers('onLaunchSuccess', this._sceneConfig.roomId);
+              _context.next = 16;
+              break;
+            case 12:
+              _context.prev = 12;
+              _context.t0 = _context["catch"](6);
+              this._observable.notifyObservers('onLaunchFailure', this._sceneConfig.roomId, _context.t0);
+              throw _context.t0;
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this, [[6, 12]]);
+      }));
+      function _handleJoinRoom() {
+        return _handleJoinRoom2.apply(this, arguments);
+      }
+      return _handleJoinRoom;
+    }()
+  }, {
+    key: "_renderDevicePretestUi",
+    value: function _renderDevicePretestUi(dom, onJoin, _onExit) {
+      var _this2 = this;
+      var store = this._deviceStore;
+      var pretestStore = new _store.FcrPretestStore({
+        deviceStore: store
+      });
+      _reactDom["default"].render( /*#__PURE__*/(0, _jsxRuntime.jsx)(_context2.PretestStoreContext.Provider, {
+        value: pretestStore,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            width: '100vw',
+            height: '100vh'
+          },
+          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() {
+              _this2._deviceStore.actionsBeforeJoin();
+              pretestStore.release();
+              onJoin();
+            },
+            onExit: function onExit() {
+              _onExit();
+            }
+          })
+        })
+      }), dom);
+    }
+  }, {
+    key: "_renderRoomUi",
+    value: function _renderRoomUi(dom) {
+      var _this3 = this;
+      /**
+       * Common Stores
+       */
+      var deviceStore = this._deviceStore;
+      var uiEventStore = this._uiEventStore;
+      var securityStore = new _securityStore.FcrSecurityStore(this._roomControl.getPrivilegeControl(), this._roomControl.getUserControl(), this._roomControl.getStreamControl(), this._roomControl.getRoomSessionControl(), uiEventStore);
+      this._securityStore = securityStore;
+      var deviceStreamStore = new _deviceStreamStore.FcrDeviceStreamStore({
+        mediaControl: this._engine.getMediaControl(),
+        roomControl: this._roomControl,
+        securityStore: securityStore,
+        deviceStore: deviceStore,
+        uiEventStore: uiEventStore
+      });
+      this._deviceStreamStore = deviceStreamStore;
+      this._layoutModule = new _layout.LayoutUIModule({
+        deviceStore: deviceStore,
+        uiEventStore: uiEventStore,
+        mediaControl: this._engine.getMediaControl(),
+        userControl: this._roomControl.getUserControl(),
+        streamControl: this._roomControl.getStreamControl(),
+        securityStore: securityStore,
+        chatRoomControl: this._roomControl.getChatRoomControl(),
+        whiteBoardControl: this._roomControl.getWhiteboardControl()
+      });
+      this._chatModule = new _chat.ChatUIModule({
+        roomControl: this._roomControl,
+        uiEventStore: uiEventStore,
+        securityStore: securityStore
+      });
+      this._actionBarUIModule = new _actionBar.FcrActionBarUIModule({
+        roomControl: this._roomControl,
+        userControl: this._roomControl.getUserControl(),
+        uiEventStore: uiEventStore,
+        securityStore: securityStore,
+        streamControl: this._roomControl.getStreamControl(),
+        deviceStore: deviceStore,
+        deviceStreamStore: deviceStreamStore,
+        mediaControl: this._engine.getMediaControl()
+      });
+      this._audioStreamUIModule = new _audioStream.AudioStreamUIModule({
+        streamControl: this._roomControl.getStreamControl(),
+        userControl: this._roomControl.getUserControl(),
+        deviceStreamStore: deviceStreamStore
+      });
+      this._dialogModule = new _dialog.DialogUIModule({
+        uiEventStore: uiEventStore,
+        userInfo: this._roomControl.getUserControl().getLocalUser(),
+        securityStore: securityStore,
+        userControl: this._roomControl.getUserControl(),
+        chatRoomControl: this._roomControl.getChatRoomControl(),
+        deviceStore: deviceStore,
+        streamControl: this._roomControl.getStreamControl()
+      });
+      this._settingUIModule = new _setting.SettingUIModule({
+        mediaControl: this._engine.getMediaControl(),
+        config: this._sceneConfig,
+        uiEventStore: uiEventStore,
+        deviceStore: deviceStore,
+        monitorControl: this._engine.getMonitorControl(),
+        streamControl: this._roomControl.getStreamControl(),
+        roomControl: this._roomControl
+      });
+      this._stateBarUIModule = new _stateBar.StateBarUIModule({
+        roomControl: this._roomControl,
+        uiEventStore: uiEventStore,
+        securityStore: securityStore,
+        config: this._sceneConfig
+      });
+      this._eventToastUIModule = new _eventToast.EventToastUIModule({
+        uiEventStore: uiEventStore
+      });
+      this._participantsModule = new _participant.ParticipantUIModule({
+        roomControl: this._roomControl,
+        engine: this._engine,
+        peerSessionControl: this._engine.getPeerSessionControl(),
+        securityStore: securityStore,
+        uiEventStore: uiEventStore,
+        deviceStore: deviceStore,
+        deviceStreamStore: deviceStreamStore
+      });
+      this._shareScreenModule = new _shareScreen.ShareScreenUIModule({
+        roomControl: this._roomControl,
+        mediaControl: this._engine.getMediaControl(),
+        deviceStore: deviceStore,
+        deviceStreamStore: deviceStreamStore,
+        securityStore: securityStore,
+        uiEventStore: uiEventStore
+      });
+      this._liveStreamingUIModule = new _liveStreaming.LiveStreamingUIModule({
+        roomControl: this._roomControl,
+        uiEventStore: uiEventStore
+      });
+      this._videoWindowModule = new _videoWindow.VideoWindowUIModule({
+        uiEventStore: uiEventStore,
+        mediaControl: this._engine.getMediaControl(),
+        userControl: this._roomControl.getUserControl(),
+        streamControl: this._roomControl.getStreamControl(),
+        securityStore: securityStore,
+        deviceStore: deviceStore,
+        deviceStreamStore: deviceStreamStore
+      });
+      this._connectionGatewayUIModule = new _connectionGateway.ConnectionGatewayUIModule({
+        roomControl: this._roomControl,
+        uiEventStore: uiEventStore,
+        deviceStore: this._deviceStore
+      });
+      this._inviteUIModule = new _invite.InviteUIModule({
+        roomControl: this._roomControl,
+        uiEventStore: uiEventStore
+      });
+      this._whiteBoradUIModule = new _whiteboard.FcrWhiteboardUIModule({
+        roomControl: this._roomControl,
+        uiEventStore: uiEventStore,
+        userControl: this._roomControl.getUserControl(),
+        whiteboardControl: this._roomControl.getWhiteboardControl(),
+        streamControl: this._roomControl.getStreamControl(),
+        securityStore: securityStore
+      });
+      this._dialogModule.addDialogs([{
+        key: _constant.DialogKey.DEVICE_SETTINGS,
+        component: function component() {
+          var _this3$_settingUIModu;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogs.DeviceSettingDialog, {
+            children: (_this3$_settingUIModu = _this3._settingUIModule) === null || _this3$_settingUIModu === void 0 ? void 0 : _this3$_settingUIModu.getComponent()
+          }, "DeviceSettingDialog");
+        }
+      }, {
+        key: _constant.DialogKey.PARTICIPANT,
+        component: function component() {
+          var _this3$_participantsM;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_participant2.ParticipantDialog, {
+            children: (_this3$_participantsM = _this3._participantsModule) === null || _this3$_participantsM === void 0 ? void 0 : _this3$_participantsM.getComponent()
+          }, "ParticipantDialog");
+        }
+      }, {
+        key: _constant.DialogKey.LIVE_STREAMING,
+        component: function component() {
+          var _this3$_liveStreaming;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogs.LiveStreamingDialog, {
+            title: "Push the meeting to the specified live platform",
+            children: (_this3$_liveStreaming = _this3._liveStreamingUIModule) === null || _this3$_liveStreaming === void 0 ? void 0 : _this3$_liveStreaming.getComponent()
+          }, "LiveStreamingDialog");
+        }
+      }, {
+        key: _constant.DialogKey.INVITE,
+        component: function component() {
+          var _this3$_inviteUIModul;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogs.InviteDialog, {
+            children: (_this3$_inviteUIModul = _this3._inviteUIModule) === null || _this3$_inviteUIModul === void 0 ? void 0 : _this3$_inviteUIModul.getComponent()
+          }, "InviteDialog");
+        }
+      }, {
+        key: _constant.DialogKey.CHAT,
+        component: function component() {
+          var _this3$_chatModule, _this3$_chatModule2;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_chat2.ChatDialog, {
+            chatAction: (_this3$_chatModule = _this3._chatModule) === null || _this3$_chatModule === void 0 ? void 0 : _this3$_chatModule.getActionsComponent(),
+            children: (_this3$_chatModule2 = _this3._chatModule) === null || _this3$_chatModule2 === void 0 ? void 0 : _this3$_chatModule2.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 _this3$_videoWindowMo;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogs.VideoWindowDialog, {
+            children: (_this3$_videoWindowMo = _this3._videoWindowModule) === null || _this3$_videoWindowMo === void 0 ? void 0 : _this3$_videoWindowMo.getComponent()
+          }, "VideoWindowDialog");
+        }
+      }, {
+        key: _constant.DialogKey.CONNECTION_GATEWAY,
+        component: function component() {
+          var _this3$_connectionGat;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_connectionGateway2.ConnectionGatewayDialog, {
+            children: (_this3$_connectionGat = _this3._connectionGatewayUIModule) === null || _this3$_connectionGat === void 0 ? void 0 : _this3$_connectionGat.getComponent()
+          }, "ConnectionGatewayDialog");
+        }
+      }, {
+        key: _constant.DialogKey.WHITEBOARD,
+        component: function component() {
+          return _this3._whiteBoradUIModule ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_whiteboard2.WhiteboardElectronDialog, {
+            module: _this3._whiteBoradUIModule
+          }, "WhiteboardDialog") : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+        }
+      }, {
+        key: _constant.DialogKey.SHARE_SCREEN,
+        component: function component(params) {
+          var _this3$_shareScreenMo;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareScreenSelection.ShareScreenSelectronDialog, {
+            params: params,
+            children: (_this3$_shareScreenMo = _this3._shareScreenModule) === null || _this3$_shareScreenMo === void 0 ? void 0 : _this3$_shareScreenMo.getSelectionComponent()
+          }, "ShareScreenSelection");
+        }
+      }]);
+      this._layoutModule = new _layout.LayoutUIModule({
+        deviceStore: this._deviceStore,
+        uiEventStore: uiEventStore,
+        mediaControl: this._engine.getMediaControl(),
+        userControl: this._roomControl.getUserControl(),
+        streamControl: this._roomControl.getStreamControl(),
+        securityStore: securityStore,
+        chatRoomControl: this._roomControl.getChatRoomControl(),
+        whiteBoardControl: this._roomControl.getWhiteboardControl()
+      });
+      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()],
+        whiteboard: this._whiteBoradUIModule.getComponent()
+      });
+      this._eventObserver = {
+        onEvent: function onEvent(action, payload) {
+          if (action === _constant.UIAction.EXIT_ROOM) {
+            _this3._observable.notifyObservers('onExited', _this3._sceneConfig.roomId, payload.reason);
+          }
+        }
+      };
+      this._engineObserver = {
+        onConnectionStateUpdated: function onConnectionStateUpdated(state) {
+          if (state === _type2.FcrConnectionState.ABORTED) {
+            _this3._observable.notifyObservers('onExited', _this3._sceneConfig.roomId, _type.FcrUIExitReason.ABORTED);
+          }
+          if (state === _type2.FcrConnectionState.CONNECTED) {
+            uiEventStore.sendEvent(_constant.UIAction.ENGINE_RECONNECTED);
+          }
+        }
+      };
+      this._userObserver = {
+        onLocalUserKickedOut: function onLocalUserKickedOut(roomId) {
+          _this3._observable.notifyObservers('onExited', roomId, _type.FcrUIExitReason.KICKED_OUT);
+        }
+      };
+      this._roomObserver = {
+        onRoomStateUpdated: function onRoomStateUpdated(roomId, state) {
+          if (state === _type2.FcrRoomState.Closed) {
+            _this3._observable.notifyObservers('onExited', roomId, _type.FcrUIExitReason.CLOSE_ROOM);
+          }
+        }
+      };
+      uiEventStore.addObserver(this._eventObserver);
+      this._engine.addObserver(this._engineObserver);
+      this._roomControl.addObserver(this._roomObserver);
+      this._roomControl.getUserControl().addObserver(this._userObserver);
+      _reactDom["default"].render( /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoTrackRenderContext.FcrVideoTrackRenderContext.Provider, {
+        value: {
+          deviceStore: this._deviceStore,
+          streamControl: this._roomControl.getStreamControl()
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            width: '100vw',
+            height: '100vh'
+          },
+          children: layoutComponent
+        })
+      }), dom);
+    }
+  }]);
+}();

package/lib/ui-scene.d.ts

@@ -0,0 +1,13 @@
+import { FcrUISceneConfig, FcrUISceneCreatorConfig, FcrUISceneObserver } from './type';
+export declare class FcrUIDefaultScene {
+    private _config;
+    private _creatorConfig;
+    private _dom;
+    private _roomControl?;
+    constructor(_config: FcrUISceneConfig, _creatorConfig: FcrUISceneCreatorConfig, _dom: HTMLElement);
+    exit(): void;
+    addObserver(observer: FcrUISceneObserver): void;
+    removeObserver(observer: FcrUISceneObserver): void;
+    launch(): Promise<void>;
+    private _release;
+}