fcr-ui-scene 3.4.0 → 3.4.2

package/lib/modules/invite/store.js

@@ -35,7 +35,7 @@ var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.StoreContext = exports.InviteStatus = void 0;
+exports["default"] = exports.StoreContext = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.array.map.js");
@@ -56,11 +56,13 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _mobx = require("mobx");
-var _constant = require("../../utilities/constant");
 var _type = require("fcr-core/lib/room-control/room-connector-control/type");
+var _type2 = require("fcr-core/lib/room-control/type");
 var _react = require("react");
+var _constant = require("../../utilities/constant");
+var _enums = require("./enums");
 var _InviteStore;
-var _initProto, _init_InviteStatus, _init_isPstnCalling, _init_isVoipCalling, _init_ipInfo, _init_phoneInfo, _init_calledPstnInfo, _init_calledVoipInfo, _stopSessionDecs, _startSessionByPhoneDecs, _startSessionByVoipDecs, _showToastDecs, _getRoomConnectorIpInfoDecs, _getRoomConnectorPhoneInfoDecs, _handleErrorDecs, _updateInviteStatusDecs, _resetpstnStatusDecs, _resetVoipStatusDecs, _handlePhoneConnectorSessionStateUpdatedDecs, _handleIPConnectorSessionStateUpdatedDecs, _onUiEventDecs, _ref;
+var _initProto, _init_InviteStatus, _init_isPstnCalling, _init_isVoipCalling, _init_ipInfo, _init_phoneInfo, _init_calledPstnInfo, _init_calledVoipInfo, _init_roomInfo, _init_meetingId, _stopSessionDecs, _startSessionByPhoneDecs, _startSessionByVoipDecs, _showToastDecs, _getRoomConnectorIpInfoDecs, _getRoomConnectorPhoneInfoDecs, _handleErrorDecs, _updateInviteStatusDecs, _resetpstnStatusDecs, _resetVoipStatusDecs, _handlePhoneConnectorSessionStateUpdatedDecs, _handleIPConnectorSessionStateUpdatedDecs, _onUiEventDecs, _ref;
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
@@ -71,17 +73,6 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof3(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof3(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _setFunctionName(e, t, n) { "symbol" == _typeof3(t) && (t = (t = t.description) ? "[" + t + "]" : ""); try { Object.defineProperty(e, "name", { configurable: !0, value: n ? n + " " + t : t }); } catch (e) {} return e; }
 function _checkInRHS(e) { if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (null !== e ? _typeof3(e) : "null")); return e; }
-var InviteStatus = exports.InviteStatus = /*#__PURE__*/function (InviteStatus) {
-  InviteStatus[InviteStatus["DEFAULT"] = 0] = "DEFAULT";
-  InviteStatus[InviteStatus["CALLING"] = 1] = "CALLING";
-  InviteStatus[InviteStatus["RINGING"] = 2] = "RINGING";
-  InviteStatus[InviteStatus["ACCEPTED"] = 3] = "ACCEPTED";
-  InviteStatus[InviteStatus["END"] = 4] = "END";
-  InviteStatus[InviteStatus["REJECT"] = 5] = "REJECT";
-  InviteStatus[InviteStatus["ERROR"] = 6] = "ERROR";
-  InviteStatus[InviteStatus["FAILED"] = 7] = "FAILED";
-  return InviteStatus;
-}({});
 var _A = /*#__PURE__*/new WeakMap();
 var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
@@ -89,6 +80,8 @@ var _D = /*#__PURE__*/new WeakMap();
 var _E = /*#__PURE__*/new WeakMap();
 var _F = /*#__PURE__*/new WeakMap();
 var _G = /*#__PURE__*/new WeakMap();
+var _H = /*#__PURE__*/new WeakMap();
+var _I = /*#__PURE__*/new WeakMap();
 _ref = (_stopSessionDecs = [_mobx.action, _mobx.action.bound], _startSessionByPhoneDecs = [_mobx.action, _mobx.action.bound], _startSessionByVoipDecs = [_mobx.action, _mobx.action.bound], _showToastDecs = [_mobx.action, _mobx.action.bound], _getRoomConnectorIpInfoDecs = [_mobx.action, _mobx.action.bound], _getRoomConnectorPhoneInfoDecs = [_mobx.action, _mobx.action.bound], _handleErrorDecs = [_mobx.action, _mobx.action.bound], _updateInviteStatusDecs = [_mobx.action, _mobx.action.bound], _resetpstnStatusDecs = [_mobx.action, _mobx.action.bound], _resetVoipStatusDecs = [_mobx.action, _mobx.action.bound], _handlePhoneConnectorSessionStateUpdatedDecs = [_mobx.action, _mobx.action.bound], _handleIPConnectorSessionStateUpdatedDecs = [_mobx.action, _mobx.action.bound], _onUiEventDecs = [_mobx.action, _mobx.action.bound], "_uiEventStore");
 var InviteStore = exports["default"] = /*#__PURE__*/function () {
   function InviteStore(_ref2) {
@@ -119,14 +112,25 @@ var InviteStore = exports["default"] = /*#__PURE__*/function () {
     _classPrivateFieldInitSpec(this, _G, _init_calledVoipInfo(this, {
       address: '',
       addressType: _type.FcrIPConnectorSessionType.H323,
-      state: InviteStatus.DEFAULT
+      state: _enums.InviteStatus.DEFAULT
+    }));
+    _classPrivateFieldInitSpec(this, _H, _init_roomInfo(this, {
+      roomId: '',
+      roomName: '',
+      roomType: _type2.FcrRoomType.Mainroom,
+      password: '',
+      inviteLink: ''
     }));
+    _classPrivateFieldInitSpec(this, _I, _init_meetingId(this, undefined));
     this._uiEventStore = uiEventStore;
     this._roomConnectorControl = roomControl.getRoomConnectorControl();
     this._roomConnectorControl.addObserver(this._roomConnectorObserver);
     this._uiEventStore.addObserver(this._uiEventObserver);
     this._getRoomConnectorPhoneInfo();
     this._getRoomConnectorIpInfo();
+    this.roomInfo = roomControl.getRoomInfo();
+    this._userControl = roomControl.getUserControl();
+    this.meetingId = roomControl.getRoomPropertiesByKeyPath('meetingId');
   }
   return (0, _createClass2["default"])(InviteStore, [{
     key: "InviteStatus",
@@ -184,6 +188,27 @@ var InviteStore = exports["default"] = /*#__PURE__*/function () {
     set: function set(v) {
       _classPrivateFieldSet(_G, this, v);
     }
+  }, {
+    key: "roomInfo",
+    get: function get() {
+      return _classPrivateFieldGet(_H, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_H, this, v);
+    }
+  }, {
+    key: "meetingId",
+    get: function get() {
+      return _classPrivateFieldGet(_I, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_I, this, v);
+    }
+  }, {
+    key: "localUser",
+    get: function get() {
+      return this._userControl.getLocalUser();
+    }
   }, {
     key: "pstnCountryCodeList",
     get: function get() {
@@ -210,7 +235,7 @@ var InviteStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "openInviteDialog",
     value: function openInviteDialog() {
-      this._inviteDialogId = this._uiEventStore.openDialog(_constant.DialogKey.INVITE);
+      this._inviteDialogId = this._uiEventStore.openDialog(_constant.FcrUIDialogKey.INVITE);
     }
   }, {
     key: "closeInviteDialog",
@@ -226,7 +251,10 @@ var InviteStore = exports["default"] = /*#__PURE__*/function () {
     }
   }, {
     key: "release",
-    value: function release() {}
+    value: function release() {
+      this._roomConnectorControl.removeObserver(this._roomConnectorObserver);
+      this._uiEventStore.removeObserver(this._uiEventObserver);
+    }
   }, {
     key: "stopSession",
     value: function () {
@@ -289,7 +317,7 @@ var InviteStore = exports["default"] = /*#__PURE__*/function () {
               });
             case 6:
               this._pstnSessionId = _context2.sent;
-              this.updateInviteStatus(this.calledPstnInfo, InviteStatus.RINGING);
+              this.updateInviteStatus(this.calledPstnInfo, _enums.InviteStatus.RINGING);
               _context2.next = 13;
               break;
             case 10:
@@ -397,7 +425,7 @@ var InviteStore = exports["default"] = /*#__PURE__*/function () {
     key: "handleError",
     value: function handleError(info, error, sessionType) {
       var _this = this;
-      this.updateInviteStatus(info, InviteStatus.ERROR);
+      this.updateInviteStatus(info, _enums.InviteStatus.ERROR);
       setTimeout(function () {
         if (sessionType === 'pstn') {
           _this.isPstnCalling = false;
@@ -433,7 +461,7 @@ var InviteStore = exports["default"] = /*#__PURE__*/function () {
       if (session.sessionId !== this._pstnSessionId) {
         return;
       }
-      var stateReasonMap = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type.FcrRoomConnectorSessionState.RINGING, InviteStatus.RINGING), _type.FcrRoomConnectorSessionState.CALLING, InviteStatus.CALLING), _type.FcrRoomConnectorSessionState.END, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type.FcrRoomConnectorSessionReason.REJECT, InviteStatus.REJECT), _type.FcrRoomConnectorSessionReason.LINE_BUSY, InviteStatus.REJECT), _type.FcrRoomConnectorSessionReason.TIMEOUT, InviteStatus.REJECT), _type.FcrRoomConnectorSessionReason.ACCEPTED, InviteStatus.ACCEPTED), "default", InviteStatus.ERROR));
+      var stateReasonMap = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type.FcrRoomConnectorSessionState.RINGING, _enums.InviteStatus.RINGING), _type.FcrRoomConnectorSessionState.CALLING, _enums.InviteStatus.CALLING), _type.FcrRoomConnectorSessionState.END, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type.FcrRoomConnectorSessionReason.REJECT, _enums.InviteStatus.REJECT), _type.FcrRoomConnectorSessionReason.LINE_BUSY, _enums.InviteStatus.REJECT), _type.FcrRoomConnectorSessionReason.TIMEOUT, _enums.InviteStatus.REJECT), _type.FcrRoomConnectorSessionReason.ACCEPTED, _enums.InviteStatus.ACCEPTED), "default", _enums.InviteStatus.ERROR));
       if ((0, _typeof2["default"])(stateReasonMap[state]) === 'object') {
         this.calledPstnInfo.state = stateReasonMap[state][reason] || stateReasonMap[state]["default"];
       } else {
@@ -455,7 +483,7 @@ var InviteStore = exports["default"] = /*#__PURE__*/function () {
       if (session.sessionId !== this._voipSessionId) {
         return;
       }
-      var stateReasonMap = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type.FcrRoomConnectorSessionState.RINGING, InviteStatus.RINGING), _type.FcrRoomConnectorSessionState.CALLING, InviteStatus.CALLING), _type.FcrRoomConnectorSessionState.END, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type.FcrRoomConnectorSessionReason.REJECT, InviteStatus.REJECT), _type.FcrRoomConnectorSessionReason.ACCEPTED, InviteStatus.ACCEPTED), "default", InviteStatus.ERROR));
+      var stateReasonMap = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type.FcrRoomConnectorSessionState.RINGING, _enums.InviteStatus.RINGING), _type.FcrRoomConnectorSessionState.CALLING, _enums.InviteStatus.CALLING), _type.FcrRoomConnectorSessionState.END, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type.FcrRoomConnectorSessionReason.REJECT, _enums.InviteStatus.REJECT), _type.FcrRoomConnectorSessionReason.ACCEPTED, _enums.InviteStatus.ACCEPTED), "default", _enums.InviteStatus.ERROR));
       if ((0, _typeof2["default"])(stateReasonMap[state]) === 'object') {
         this.calledVoipInfo.state = stateReasonMap[state][reason] || stateReasonMap[state]["default"];
       } else {
@@ -471,17 +499,17 @@ var InviteStore = exports["default"] = /*#__PURE__*/function () {
     key: "_onUiEvent",
     value: function _onUiEvent(action, payload) {
       switch (action) {
-        case _constant.UIAction.OPEN_INVITE_DIALOG:
+        case _constant.FcrUIAction.OPEN_INVITE_DIALOG:
           this.openInviteDialog();
           break;
-        case _constant.UIAction.CLOSE_INVITE_DIALOG:
+        case _constant.FcrUIAction.CLOSE_INVITE_DIALOG:
           this.closeInviteDialog();
       }
     }
   }]);
 }();
 _InviteStore = InviteStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_InviteStore, [[_mobx.observable, 1, "InviteStatus"], [_mobx.observable, 1, "isPstnCalling"], [_mobx.observable, 1, "isVoipCalling"], [_mobx.observable, 1, "ipInfo"], [_mobx.observable, 1, "phoneInfo"], [_mobx.observable, 1, "calledPstnInfo"], [_mobx.observable, 1, "calledVoipInfo"], [_stopSessionDecs, 18, "stopSession"], [_startSessionByPhoneDecs, 18, "startSessionByPhone"], [_startSessionByVoipDecs, 18, "startSessionByVoip"], [_showToastDecs, 18, "showToast"], [_getRoomConnectorIpInfoDecs, 18, "_getRoomConnectorIpInfo"], [_getRoomConnectorPhoneInfoDecs, 18, "_getRoomConnectorPhoneInfo"], [_handleErrorDecs, 18, "handleError"], [_updateInviteStatusDecs, 18, "updateInviteStatus"], [_resetpstnStatusDecs, 18, "_resetpstnStatus"], [_resetVoipStatusDecs, 18, "_resetVoipStatus"], [_handlePhoneConnectorSessionStateUpdatedDecs, 18, "_handlePhoneConnectorSessionStateUpdated"], [_handleIPConnectorSessionStateUpdatedDecs, 18, "_handleIPConnectorSessionStateUpdated"], [_onUiEventDecs, 18, "_onUiEvent"]], []).e, 8);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_InviteStore, [[_mobx.observable, 1, "InviteStatus"], [_mobx.observable, 1, "isPstnCalling"], [_mobx.observable, 1, "isVoipCalling"], [_mobx.observable, 1, "ipInfo"], [_mobx.observable, 1, "phoneInfo"], [_mobx.observable, 1, "calledPstnInfo"], [_mobx.observable, 1, "calledVoipInfo"], [_mobx.observable, 1, "roomInfo"], [_mobx.observable, 1, "meetingId"], [_stopSessionDecs, 18, "stopSession"], [_startSessionByPhoneDecs, 18, "startSessionByPhone"], [_startSessionByVoipDecs, 18, "startSessionByVoip"], [_showToastDecs, 18, "showToast"], [_getRoomConnectorIpInfoDecs, 18, "_getRoomConnectorIpInfo"], [_getRoomConnectorPhoneInfoDecs, 18, "_getRoomConnectorPhoneInfo"], [_handleErrorDecs, 18, "handleError"], [_updateInviteStatusDecs, 18, "updateInviteStatus"], [_resetpstnStatusDecs, 18, "_resetpstnStatus"], [_resetVoipStatusDecs, 18, "_resetVoipStatus"], [_handlePhoneConnectorSessionStateUpdatedDecs, 18, "_handlePhoneConnectorSessionStateUpdated"], [_handleIPConnectorSessionStateUpdatedDecs, 18, "_handleIPConnectorSessionStateUpdated"], [_onUiEventDecs, 18, "_onUiEvent"]], []).e, 10);
 _init_InviteStatus = _applyDecs$e[0];
 _init_isPstnCalling = _applyDecs$e[1];
 _init_isVoipCalling = _applyDecs$e[2];
@@ -489,5 +517,7 @@ _init_ipInfo = _applyDecs$e[3];
 _init_phoneInfo = _applyDecs$e[4];
 _init_calledPstnInfo = _applyDecs$e[5];
 _init_calledVoipInfo = _applyDecs$e[6];
-_initProto = _applyDecs$e[7];
+_init_roomInfo = _applyDecs$e[7];
+_init_meetingId = _applyDecs$e[8];
+_initProto = _applyDecs$e[9];
 var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/invite/types.d.ts

@@ -0,0 +1,14 @@
+import { FcrIPConnectorSessionType, FcrRoomConnectorPhoneRegion } from 'fcr-core/lib/room-control/room-connector-control/type';
+import { InviteStatus } from './enums';
+export interface pstnInfo {
+    phoneNumber: string;
+    userName: string;
+    countryCode?: FcrRoomConnectorPhoneRegion;
+    state?: InviteStatus;
+    zone: string;
+}
+export interface VoipInfo {
+    address: string;
+    addressType: FcrIPConnectorSessionType;
+    state?: InviteStatus;
+}

package/lib/modules/invite/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/modules/invite/view.js

@@ -7,41 +7,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.View = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
-var _tabs = require("agora-ui-foundation/lib/components/tabs");
 var _mobxReact = require("mobx-react");
 var _react = require("react");
-var _store = require("./store");
-var _pstnInvite = require("./pstn-invite");
-var _voipInvite = require("./voip-invite");
+var _pstnInvite = require("./components/pstn-invite");
+var _voipInvite = require("./components/voip-invite");
 var _i18n = require("agora-ui-foundation/lib/i18n");
+var _tabFrame = _interopRequireDefault(require("../components/tab-frame"));
+var _enums = require("./enums");
 var _jsxRuntime = require("react/jsx-runtime");
-var InviteType = /*#__PURE__*/function (InviteType) {
-  InviteType["PSTN"] = "PSTN";
-  InviteType["VOIP"] = "VOIP";
-  return InviteType;
-}(InviteType || {});
 var View = exports.View = (0, _mobxReact.observer)(function () {
-  (0, _objectDestructuringEmpty2["default"])((0, _react.useContext)(_store.StoreContext));
-  var _useState = (0, _react.useState)(InviteType.PSTN),
+  var _useState = (0, _react.useState)(_enums.InviteType.PSTN),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     currentInviteType = _useState2[0],
     setCurrentInviteType = _useState2[1];
   var transI18n = (0, _i18n.useI18n)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "invite",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.FcrTabs, {
-      items: [{
-        label: transI18n('fmt_pstn_label_phonecall'),
-        key: InviteType.PSTN
-      }, {
-        label: transI18n('fmt_sip_options_H323'),
-        key: InviteType.VOIP
-      }],
-      activeKey: currentInviteType,
-      onChange: function onChange(key) {
-        return setCurrentInviteType(key);
-      }
-    }), currentInviteType === InviteType.PSTN && /*#__PURE__*/(0, _jsxRuntime.jsx)(_pstnInvite.PSTNInvite, {}), currentInviteType === InviteType.VOIP && /*#__PURE__*/(0, _jsxRuntime.jsx)(_voipInvite.VoipInvite, {})]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabFrame["default"], {
+    activeKey: currentInviteType,
+    onChange: function onChange(key) {
+      return setCurrentInviteType(key);
+    },
+    tabs: [{
+      label: "".concat(transI18n('fmt_pstn_label_phonecall')),
+      key: _enums.InviteType.PSTN,
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pstnInvite.PSTNInvite, {})
+    }, {
+      label: "".concat(transI18n('fmt_sip_options_H323')),
+      key: _enums.InviteType.VOIP,
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_voipInvite.VoipInvite, {})
+    }]
   });
 });

package/lib/modules/invite/voip-invite.js

@@ -21,8 +21,9 @@ var _tabs = require("agora-ui-foundation/lib/components/tabs");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _mobxReact = require("mobx-react");
 var _react = require("react");
+var _context2 = require("./context");
+var _type2 = require("agora-edu-core/lib/room-control/room-connector-control/type");
 var _store = require("./store");
-var _type2 = require("fcr-core/lib/room-control/room-connector-control/type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _jsxRuntime = require("react/jsx-runtime");
 var CallType = /*#__PURE__*/function (CallType) {
@@ -63,7 +64,7 @@ var VoipInvite = exports.VoipInvite = (0, _mobxReact.observer)(function () {
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
     isIpError = _useState8[0],
     setIsError = _useState8[1];
-  var _useContext = (0, _react.useContext)(_store.StoreContext),
+  var _useContext = (0, _react.useContext)(_context2.StoreContext),
     localVoipList = _useContext.localVoipList,
     ipInfo = _useContext.ipInfo,
     isVoipCalling = _useContext.isVoipCalling,

package/lib/modules/layout/components/Aside.js

@@ -20,9 +20,20 @@ var _utils = require("./utils");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _iconButton = require("agora-ui-foundation/lib/components/icon-button");
 var _type2 = require("fcr-core/lib/room-control/chatroom-control/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
 var minHeight = 350;
 var DividerHeight = 16;
+var ParticipantDialogHeader = (0, _mobxReact.observer)(function () {
+  var store = (0, _react.useContext)(_store.StoreContext);
+  var transI18n = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [transI18n('fmt_role_participant'), "(", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "participant-dialog-header-count",
+      children: store.participantCount
+    }), ")"]
+  });
+});
 var Aside = exports.Aside = (0, _mobxReact.observer)(function (_ref) {
   var width = _ref.width,
     onDragHandler = _ref.onDragHandler,
@@ -36,9 +47,11 @@ var Aside = exports.Aside = (0, _mobxReact.observer)(function (_ref) {
     closeParticipantFromAside = _useContext.closeParticipantFromAside,
     moveParticipantFromAsideToDialog = _useContext.moveParticipantFromAsideToDialog,
     participantCount = _useContext.participantCount,
-    chatRoomState = _useContext.chatRoomState;
-  var participant = asideContent.participant ? participant_ : null;
-  var chat = asideContent.chat ? chat_ : null;
+    chatRoomState = _useContext.chatRoomState,
+    participantsRenderAt = _useContext.participantsRenderAt,
+    chatRenderAt = _useContext.chatRenderAt;
+  var participant = asideContent.participant && participantsRenderAt === 'aside' ? participant_ : null;
+  var chat = asideContent.chat && chatRenderAt === 'aside' ? chat_ : null;
   var _useState = (0, _react.useState)(50),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     percent = _useState2[0],
@@ -88,17 +101,24 @@ var Aside = exports.Aside = (0, _mobxReact.observer)(function (_ref) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_windowHeader.FcrWindowHeader, {
           showClose: false // 在 Aside 中有自定义的按钮样式，不用 header 中的关闭按钮
           ,
-          title: "".concat(transI18n('fmt_role_participant'), "(").concat(participantCount, ")"),
+          title: /*#__PURE__*/(0, _jsxRuntime.jsx)(ParticipantDialogHeader, {}),
           type: _windowHeader.WindowType.MODAL,
           onTypeChange: moveParticipantFromAsideToDialog,
           onClose: closeParticipantFromAside,
-          otherActionsAfter: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
-            className: "frc-window-header__icon",
-            icon: _type.FcrIconType.FCR_CLOSE,
-            iconColors: {
-              iconPrimary: 'var(--fcr_ui_scene_icontext1)'
-            },
-            onClick: closeParticipantFromAside
+          otherActionsAfter: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+            mouseEnterDelay: 0,
+            content: transI18n('fmt_uimanager_button_close'),
+            trigger: "hover",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+                className: "frc-window-header__icon",
+                icon: _type.FcrIconType.FCR_CLOSE,
+                iconColors: {
+                  iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+                },
+                onClick: closeParticipantFromAside
+              })
+            })
           }),
           rootClassName: 'can-draggable'
         }), participant]
@@ -115,13 +135,20 @@ var Aside = exports.Aside = (0, _mobxReact.observer)(function (_ref) {
           onTypeChange: moveChatFromAsideToDialog,
           onClose: closeAsideChat,
           otherActions: chatAction,
-          otherActionsAfter: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
-            className: "frc-window-header__icon",
-            icon: _type.FcrIconType.FCR_CLOSE,
-            iconColors: {
-              iconPrimary: 'var(--fcr_ui_scene_icontext1)'
-            },
-            onClick: closeAsideChat
+          otherActionsAfter: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+            mouseEnterDelay: 0,
+            content: transI18n('fmt_uimanager_button_close'),
+            trigger: "hover",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+                className: "frc-window-header__icon",
+                icon: _type.FcrIconType.FCR_CLOSE,
+                iconColors: {
+                  iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+                },
+                onClick: closeAsideChat
+              })
+            })
           }),
           type: _windowHeader.WindowType.MODAL
         }), chat]

package/lib/modules/layout/components/Carousel.js

@@ -19,7 +19,7 @@ var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _hooks = require("../../../utilities/hooks");
 var _store = require("../store");
 var _type2 = require("../type");
-var _memberWindow = require("../member-window");
+var _memberWindow = require("../../components/member-window");
 var _utils = require("./utils");
 var _type3 = require("agora-rte-sdk/lib/core/rtc/type");
 var _fcrCore = require("fcr-core");
@@ -221,7 +221,7 @@ var Carousel = exports.Carousel = (0, _mobxReact.observer)(function () {
                 }),
                 videoRenderMode: _type3.AgoraRtcRenderMode.FIT,
                 videoStreamType: _type3.AgoraRtcVideoStreamType.LOW_STREAM,
-                showAvatar: false,
+                showAvatar: true,
                 windowData: windowData,
                 onDoubleClick: function onDoubleClick() {
                   if (windowData.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN || windowData.isPin) {

package/lib/modules/layout/components/Gallery.js

@@ -38,7 +38,7 @@ var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _hooks = require("../../../utilities/hooks");
 var _store = require("../store");
 var _type2 = require("../type");
-var _memberWindow = require("../member-window");
+var _memberWindow = require("../../components/member-window");
 var _utils = require("./utils");
 var _type3 = require("agora-rte-sdk/lib/core/rtc/type");
 var _fcrCore = require("fcr-core");

package/lib/modules/layout/components/Layout.js

@@ -54,7 +54,10 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
     getWaterMarkContent = layoutStore.getWaterMarkContent,
     isMulti = layoutStore.isMulti,
     isWaterMarkEnabled = layoutStore.isWaterMarkEnabled,
-    localUser = layoutStore.localUser;
+    localUser = layoutStore.localUser,
+    setAsideWidth = layoutStore.setAsideWidth,
+    toggleAside = layoutStore.toggleAside,
+    asideWidthChanged = layoutStore.asideWidthChanged;
   var _useDelayedMeasure = (0, _hooks.useDelayedMeasure)(),
     _useDelayedMeasure2 = (0, _slicedToArray2["default"])(_useDelayedMeasure, 2),
     _ref = _useDelayedMeasure2[0],
@@ -77,10 +80,10 @@ var Layout = exports.Layout = (0, _mobxReact.observer)(function () {
         //   !aside && toggleAside(true);
         //   return clamped;
         // });
-        // setAsideWidth(clamped);
+        setAsideWidth(clamped);
       } else {
-        // aside && toggleAside(false);
-        // asideWidthChanged(0);
+        aside && toggleAside(false);
+        asideWidthChanged(0);
       }
     };
     var onPointerUp = function onPointerUp() {

package/lib/modules/layout/components/index.css

@@ -318,7 +318,8 @@
 .fcr-layout-content-gallery-arrow {
   pointer-events: auto;
   position: absolute;
-  top: calc(100% - 160px);
+  /* top: calc(100% - 160px); */
+  bottom: 155px;
   background-color: var(--fcr_web_ui_scene_fill4_popup);
   border-radius: 8px;
   box-shadow: var(--fcr_web_light_dropup);
@@ -650,3 +651,7 @@
   flex-flow: column nowrap;
   justify-content: flex-end;
 }
+
+.participant-dialog-header-count {
+  font-weight: 400;
+}

package/lib/modules/layout/components/index.d.ts

@@ -1,5 +1,5 @@
 import './index.css';
-export * from './Layout';
+export * from './who-is-speaking';
 export * from './Carousel';
 export * from './Gallery';
 export * from './Aside';

package/lib/modules/layout/components/index.js

@@ -12,14 +12,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 require("./index.css");
-var _Layout = require("./Layout");
-Object.keys(_Layout).forEach(function (key) {
+var _whoIsSpeaking = require("./who-is-speaking");
+Object.keys(_whoIsSpeaking).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Layout[key]) return;
+  if (key in exports && exports[key] === _whoIsSpeaking[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Layout[key];
+      return _whoIsSpeaking[key];
     }
   });
 });

package/lib/modules/layout/components/who-is-speaking.d.ts

@@ -0,0 +1,2 @@
+export declare const CarouselExpandButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const WhoIsSpeaking: () => import("react/jsx-runtime").JSX.Element;

package/lib/modules/layout/components/who-is-speaking.js

@@ -0,0 +1,60 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WhoIsSpeaking = exports.CarouselExpandButton = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _store = require("../store");
+var _type2 = require("../type");
+var _jsxRuntime = require("react/jsx-runtime");
+var CarouselExpandButton = exports.CarouselExpandButton = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    collapsed = _useContext.collapsed,
+    toggleCollapsed = _useContext.toggleCollapsed;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('fcr-layout-content-expand', {
+      'fcr-layout-content-collapsed': collapsed
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      className: "fcr-layout-content-expand-btn",
+      onClick: function onClick() {
+        return toggleCollapsed();
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_UP2,
+        size: 48,
+        colors: {
+          iconPrimary: 'currentColor'
+        }
+      })
+    })
+  });
+});
+var WhoIsSpeaking = exports.WhoIsSpeaking = (0, _mobxReact.observer)(function () {
+  var t = (0, _i18n.useI18n)();
+  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
+    layout = _useContext2.layout,
+    collapsed = _useContext2.collapsed,
+    findSpotlightUser = _useContext2.findSpotlightUser;
+  var userName = findSpotlightUser === null || findSpotlightUser === void 0 ? void 0 : findSpotlightUser.userName;
+  var active = userName && layout === _type2.FcrUIVideoWindowLayoutType.Speaker && collapsed;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])('fcr-layout-speaking', {
+      'fcr-layout-speaking-active': active
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-layout-speaking-content",
+      children: t('fmt_modules_status_nowspeaking', {
+        reason1: userName
+      })
+    })
+  });
+});

package/lib/modules/layout/index.d.ts

@@ -1,12 +1,34 @@
 import { UIModule } from '../../base';
-import { FcrLayoutSlots, LayoutStoreParams } from './store';
+import { FcrUIDeviceProvider } from '../../providers/device-provider';
+import { FcrUIEventProvider } from '../../providers/event-provider';
+import { FcrUIPrivilegeProvider } from '../../providers/privilege-provider';
+import { FcrLayoutSlots } from './store';
+import { FcrUISharedConfigDataSource } from '../../shared-data-source/config';
+import { FcrUIMainRoomControlProvider } from '../../providers/room-provider';
+import { FcrUISharedSpeakerSpotlightDataSource } from '../../shared-data-source/speaker-spotlight';
+import { FcrUISharedLayoutDataSource } from '../../shared-data-source/layout-data';
+import { FcrUISharedInterpreterDataSource } from '../../shared-data-source/interpreter';
+import { FcrUISharedSettingDataSource } from '../../shared-data-source/setting';
+import { FcrUIChatProvider } from '../../providers/chat-provider';
+import { FcrUIVideoWindowDataSource } from '../../shared-data-source/video-window';
 export declare class LayoutUIModule extends UIModule {
-    private _store;
-    constructor(args: LayoutStoreParams);
+    private _store?;
+    eventProvider?: FcrUIEventProvider;
+    deviceProvider?: FcrUIDeviceProvider;
+    privilegeProvider?: FcrUIPrivilegeProvider;
+    mainRoomControlProvider?: FcrUIMainRoomControlProvider;
+    sharedConfigDataSource?: FcrUISharedConfigDataSource;
+    sharedSpeakerSpotlightDataSource?: FcrUISharedSpeakerSpotlightDataSource;
+    sharedLayoutDataSource?: FcrUISharedLayoutDataSource;
+    sharedInterpreterDataSource?: FcrUISharedInterpreterDataSource;
+    sharedSettingDataSource?: FcrUISharedSettingDataSource;
+    chatProvider?: FcrUIChatProvider;
+    sharedVideoWindowDataSource?: FcrUIVideoWindowDataSource;
+    onNodeWillActive(): void;
+    onNodeWillInactive(): void;
     getComponent(slots?: Partial<FcrLayoutSlots & {
         globalToast: React.ReactNode;
         confirm: React.ReactNode;
     }>): import("react/jsx-runtime").JSX.Element;
     getDevComponent(): import("react/jsx-runtime").JSX.Element;
-    onUnload(): void;
 }

package/lib/modules/layout/index.dev.d.ts

@@ -1 +0,0 @@
-import './index.css';