fcr-ui-scene 3.4.5 → 3.5.1

package/lib/modules/state-bar/store.js

@@ -80,7 +80,6 @@ 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 _type = require("fcr-core/lib/type");
-var _logger = require("agora-foundation/lib/logger");
 var _mobx = require("mobx");
 var _store = require("../setting/store");
 var _decorator = require("agora-foundation/lib/decorator");
@@ -89,8 +88,10 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _type2 = require("fcr-core/lib/room-control/type");
 var _react = require("react");
 var _view = require("../layout/view");
+var _logger = require("../../utilities/logger");
+var _i18n = require("agora-ui-foundation/lib/i18n");
 var _StateBarStore;
-var _initProto, _init_networkStatus, _init_localUser, _init_roomInfo, _init_scheduleInfo, _init_isLiveStreaming, _init_liveStreamingPlayUrl, _init_galleryWidth, _init_browserWidth, _init_networkStats, _init_attendeeCount, _init_asideOpenedItem, _init_cloudRecordingState, _init_meetingId, _setNetworkStatusDecs, _setLocalUserDecs, _setRoomInfoDecs, _setScheduleInfoDecs, _stopLiveStreamingDialogDecs, _uiEventsDecs, _setBrowserWidthDecs, _onNetworkStatsUpdatedDecs, _onLiveStreamingStateUpdatedDecs, _ref;
+var _initProto, _init_networkStatus, _init_roomInfo, _init_isLiveStreaming, _init_liveStreamingPlayUrl, _init_galleryWidth, _init_browserWidth, _init_networkStats, _init_attendeeCount, _init_asideOpenedItem, _init_cloudRecordingState, _setNetworkStatusDecs, _setRoomInfoDecs, _stopLiveStreamingDialogDecs, _uiEventsDecs, _setBrowserWidthDecs, _onNetworkStatsUpdatedDecs, _onLiveStreamingStateUpdatedDecs, _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; }
@@ -112,14 +113,10 @@ var _G = /*#__PURE__*/new WeakMap();
 var _H = /*#__PURE__*/new WeakMap();
 var _I = /*#__PURE__*/new WeakMap();
 var _J = /*#__PURE__*/new WeakMap();
-var _K = /*#__PURE__*/new WeakMap();
-var _L = /*#__PURE__*/new WeakMap();
-var _M = /*#__PURE__*/new WeakMap();
-_ref = (_setNetworkStatusDecs = [_mobx.action, _mobx.action.bound], _setLocalUserDecs = [_mobx.action, _mobx.action.bound], _setRoomInfoDecs = [_mobx.action, _mobx.action.bound], _setScheduleInfoDecs = [_mobx.action, _mobx.action.bound], _stopLiveStreamingDialogDecs = [_mobx.action, _mobx.action.bound], _uiEventsDecs = [_mobx.action, _mobx.action.bound], _setBrowserWidthDecs = [_mobx.action, _mobx.action.bound], _onNetworkStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onLiveStreamingStateUpdatedDecs = [_mobx.action, _mobx.action.bound], "logger");
+_ref = (_setNetworkStatusDecs = [_mobx.action, _mobx.action.bound], _setRoomInfoDecs = [_mobx.action, _mobx.action.bound], _stopLiveStreamingDialogDecs = [_mobx.action, _mobx.action.bound], _uiEventsDecs = [_mobx.action, _mobx.action.bound], _setBrowserWidthDecs = [_mobx.action, _mobx.action.bound], _onNetworkStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onLiveStreamingStateUpdatedDecs = [_mobx.action, _mobx.action.bound], "logger");
 var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   function StateBarStore(_ref2) {
-    var _this$_roomControl$ge,
-      _this = this;
+    var _this = this;
     var roomControl = _ref2.roomControl,
       uiEventStore = _ref2.uiEventStore,
       securityStore = _ref2.securityStore,
@@ -127,9 +124,16 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       parameters = _ref2.parameters,
       sharedLayoutDataSource = _ref2.sharedLayoutDataSource,
       roomProvider = _ref2.roomProvider,
-      sharedVideoWindowDataSource = _ref2.sharedVideoWindowDataSource;
+      sharedVideoWindowDataSource = _ref2.sharedVideoWindowDataSource,
+      messageProvider = _ref2.messageProvider,
+      sharedMemberDataSource = _ref2.sharedMemberDataSource,
+      localStorageProvider = _ref2.localStorageProvider,
+      abilityProvider = _ref2.abilityProvider,
+      sharedMeetingTimeDataSource = _ref2.sharedMeetingTimeDataSource;
     (0, _classCallCheck2["default"])(this, StateBarStore);
-    (0, _defineProperty2["default"])(this, _ref, (_initProto(this), (0, _logger.getLogger)()));
+    (0, _defineProperty2["default"])(this, _ref, (_initProto(this), (0, _logger.createLogger)({
+      prefix: 'StateBarStore'
+    })));
     (0, _defineProperty2["default"])(this, "_disposer", []);
     (0, _defineProperty2["default"])(this, "_roomObserver", {
       onNetworkQualityUpdated: this._onNetworkQualityUpdated.bind(this),
@@ -138,24 +142,21 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       onCloudRecordingStateUpdated: this._onCloudRecordingStateUpdated.bind(this)
     });
     _classPrivateFieldInitSpec(this, _A, _init_networkStatus(this, 'unknown'));
-    _classPrivateFieldInitSpec(this, _B, _init_localUser(this, undefined));
-    _classPrivateFieldInitSpec(this, _C, _init_roomInfo(this, undefined));
-    _classPrivateFieldInitSpec(this, _D, _init_scheduleInfo(this, undefined));
-    _classPrivateFieldInitSpec(this, _E, _init_isLiveStreaming(this, false));
-    _classPrivateFieldInitSpec(this, _F, _init_liveStreamingPlayUrl(this, ''));
-    _classPrivateFieldInitSpec(this, _G, _init_galleryWidth(this, window.innerWidth));
-    _classPrivateFieldInitSpec(this, _H, _init_browserWidth(this, window.innerWidth));
-    _classPrivateFieldInitSpec(this, _I, _init_networkStats(this, {
+    _classPrivateFieldInitSpec(this, _B, _init_roomInfo(this, undefined));
+    _classPrivateFieldInitSpec(this, _C, _init_isLiveStreaming(this, false));
+    _classPrivateFieldInitSpec(this, _D, _init_liveStreamingPlayUrl(this, ''));
+    _classPrivateFieldInitSpec(this, _E, _init_galleryWidth(this, window.innerWidth));
+    _classPrivateFieldInitSpec(this, _F, _init_browserWidth(this, window.innerWidth));
+    _classPrivateFieldInitSpec(this, _G, _init_networkStats(this, {
       uplinkPacketLossRate: '-',
       downlinkPacketLossRate: '-',
       networkDelay: '-'
     }));
-    _classPrivateFieldInitSpec(this, _J, _init_attendeeCount(this));
-    _classPrivateFieldInitSpec(this, _K, _init_asideOpenedItem(this, new Set()));
+    _classPrivateFieldInitSpec(this, _H, _init_attendeeCount(this));
+    _classPrivateFieldInitSpec(this, _I, _init_asideOpenedItem(this, new Set()));
     // @observable accessor layoutSize: number;
     // @observable accessor layoutView: 'speaker' | 'gallery' = 'gallery';
-    _classPrivateFieldInitSpec(this, _L, _init_cloudRecordingState(this, _type.FcrRecordingState.Stopped));
-    _classPrivateFieldInitSpec(this, _M, _init_meetingId(this, undefined));
+    _classPrivateFieldInitSpec(this, _J, _init_cloudRecordingState(this, _type.FcrRecordingState.Stopped));
     this._config = config;
     this._roomControl = roomControl;
     this._uiEventStore = uiEventStore;
@@ -163,9 +164,17 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
     this._roomProvider = roomProvider;
     this.attendeeCount = 0;
     this.isLiveStreaming = this._roomControl.getLiveStreamingState() === _type.FcrLiveStreamingState.STARTED;
+    if (this.isLiveStreaming) {
+      this.liveStreamingPlayUrl = this._roomControl.getLiveStreamingConfig().pullStreamingUrl;
+    }
     this._sharedLayoutDataSource = sharedLayoutDataSource;
     this._sharedVideoWindowDataSource = sharedVideoWindowDataSource;
+    this._sharedMeetingTimeDataSource = sharedMeetingTimeDataSource;
+    this._messageProvider = messageProvider;
+    this._sharedMemberDataSource = sharedMemberDataSource;
+    this._localStorageProvider = localStorageProvider;
     this._roomControl.addObserver(this._roomObserver);
+    this._abilityProvider = abilityProvider;
     this._uiEventStore.addObserver({
       onEvent: this._uiEvents.bind(this)
     });
@@ -173,7 +182,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
     this.toggleLayout = this.toggleLayout.bind(this);
     this.toggleLayoutBarLock = this.toggleLayoutBarLock.bind(this);
     this.openVideoWindowDialog = this.openVideoWindowDialog.bind(this);
-    this._onCloudRecordingStateUpdated(((_this$_roomControl$ge = this._roomControl.getRoomInfo()) === null || _this$_roomControl$ge === void 0 ? void 0 : _this$_roomControl$ge.roomId) || '', this._roomControl.getCloudRecordingState());
+    this.cloudRecordingState = this._roomControl.getCloudRecordingState();
     this._initRoomInfo();
     var resizeHandler = this._setBrowserWidth();
     window.addEventListener('resize', resizeHandler);
@@ -211,7 +220,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_A, this, v);
     }
   }, {
-    key: "localUser",
+    key: "roomInfo",
     get: function get() {
       return _classPrivateFieldGet(_B, this);
     },
@@ -219,7 +228,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_B, this, v);
     }
   }, {
-    key: "roomInfo",
+    key: "isLiveStreaming",
     get: function get() {
       return _classPrivateFieldGet(_C, this);
     },
@@ -227,7 +236,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_C, this, v);
     }
   }, {
-    key: "scheduleInfo",
+    key: "liveStreamingPlayUrl",
     get: function get() {
       return _classPrivateFieldGet(_D, this);
     },
@@ -235,7 +244,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_D, this, v);
     }
   }, {
-    key: "isLiveStreaming",
+    key: "galleryWidth",
     get: function get() {
       return _classPrivateFieldGet(_E, this);
     },
@@ -243,7 +252,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_E, this, v);
     }
   }, {
-    key: "liveStreamingPlayUrl",
+    key: "browserWidth",
     get: function get() {
       return _classPrivateFieldGet(_F, this);
     },
@@ -251,7 +260,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_F, this, v);
     }
   }, {
-    key: "galleryWidth",
+    key: "networkStats",
     get: function get() {
       return _classPrivateFieldGet(_G, this);
     },
@@ -259,7 +268,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_G, this, v);
     }
   }, {
-    key: "browserWidth",
+    key: "attendeeCount",
     get: function get() {
       return _classPrivateFieldGet(_H, this);
     },
@@ -267,7 +276,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_H, this, v);
     }
   }, {
-    key: "networkStats",
+    key: "asideOpenedItem",
     get: function get() {
       return _classPrivateFieldGet(_I, this);
     },
@@ -275,7 +284,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_I, this, v);
     }
   }, {
-    key: "attendeeCount",
+    key: "cloudRecordingState",
     get: function get() {
       return _classPrivateFieldGet(_J, this);
     },
@@ -283,45 +292,25 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_J, this, v);
     }
   }, {
-    key: "asideOpenedItem",
-    get: function get() {
-      return _classPrivateFieldGet(_K, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_K, this, v);
-    }
-  }, {
-    key: "cloudRecordingState",
+    key: "localUser",
     get: function get() {
-      return _classPrivateFieldGet(_L, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_L, this, v);
-    }
-  }, {
-    key: "meetingId",
-    get: function get() {
-      return _classPrivateFieldGet(_M, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_M, this, v);
+      return this._sharedMemberDataSource.localUser;
     }
   }, {
     key: "isUserHost",
     get: function get() {
-      var _this$localUser;
-      return ((_this$localUser = this.localUser) === null || _this$localUser === void 0 ? void 0 : _this$localUser.userRole) === _type.FcrUserRole.HOST;
+      return this._sharedMemberDataSource.isLocalUserHost;
     }
   }, {
     key: "shouldShowMeetingTime",
     get: function get() {
-      return this.scheduleInfo && this.scheduleInfo.duration;
+      return Boolean(this.scheduleInfo && this.scheduleInfo.duration > 0);
     }
   }, {
     key: "isMainRoom",
     get: function get() {
-      var _this$_roomControl$ge2;
-      return ((_this$_roomControl$ge2 = this._roomControl.getRoomInfo()) === null || _this$_roomControl$ge2 === void 0 ? void 0 : _this$_roomControl$ge2.roomType) === _type2.FcrRoomType.Mainroom;
+      var _this$_roomControl$ge;
+      return ((_this$_roomControl$ge = this._roomControl.getRoomInfo()) === null || _this$_roomControl$ge === void 0 ? void 0 : _this$_roomControl$ge.roomType) === _type2.FcrRoomType.Mainroom;
     }
   }, {
     key: "hasStartCloudRecordingPermission",
@@ -338,11 +327,31 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
     get: function get() {
       return this._securityStore.hasGetLiveStreamingLinkPermission();
     }
+  }, {
+    key: "totalHourText",
+    get: function get() {
+      return this._sharedMeetingTimeDataSource.totalHourText;
+    }
+  }, {
+    key: "totalMinuteText",
+    get: function get() {
+      return this._sharedMeetingTimeDataSource.totalMinuteText;
+    }
+  }, {
+    key: "meetingTimeStatus",
+    get: function get() {
+      return this._sharedMeetingTimeDataSource.status;
+    }
+  }, {
+    key: "meetingTime",
+    get: function get() {
+      return this._sharedMeetingTimeDataSource.meetingTime;
+    }
   }, {
     key: "password",
     get: function get() {
-      var _this$_roomControl$ge3;
-      return (_this$_roomControl$ge3 = this._roomControl.getRoomInfo()) === null || _this$_roomControl$ge3 === void 0 ? void 0 : _this$_roomControl$ge3.password;
+      var _this$_roomControl$ge2;
+      return (_this$_roomControl$ge2 = this._roomControl.getRoomInfo()) === null || _this$_roomControl$ge2 === void 0 ? void 0 : _this$_roomControl$ge2.password;
     }
   }, {
     key: "layoutSize",
@@ -362,6 +371,29 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       var _this$_sharedLayoutDa2;
       return (_this$_sharedLayoutDa2 = this._sharedLayoutDataSource) === null || _this$_sharedLayoutDa2 === void 0 ? void 0 : _this$_sharedLayoutDa2.asideLayout;
     }
+  }, {
+    key: "isRoomDetailSupported",
+    get: function get() {
+      return this._abilityProvider.isRoomDetailSupported();
+    }
+  }, {
+    key: "roomId",
+    get: function get() {
+      var _this$_roomControl;
+      return (_this$_roomControl = this._roomControl) === null || _this$_roomControl === void 0 || (_this$_roomControl = _this$_roomControl.getRoomInfo()) === null || _this$_roomControl === void 0 ? void 0 : _this$_roomControl.roomId;
+    }
+  }, {
+    key: "meetingId",
+    get: function get() {
+      var _ref3;
+      var mainRoomControl = this._roomControl;
+      return (_ref3 = mainRoomControl === null || mainRoomControl === void 0 ? void 0 : mainRoomControl.getRoomPropertiesByKeyPath('meetingId')) !== null && _ref3 !== void 0 ? _ref3 : this.roomId;
+    }
+  }, {
+    key: "scheduleInfo",
+    get: function get() {
+      return this._roomControl.getRoomSchedule();
+    }
   }, {
     key: "isLockRoomEnabled",
     value: function isLockRoomEnabled() {
@@ -372,15 +404,6 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
     value: function setNetworkStatus(networkStatus) {
       this.networkStatus = networkStatus;
     }
-  }, {
-    key: "setLocalUser",
-    value: function setLocalUser(localUser) {
-      if (!this.localUser) {
-        this.localUser = localUser;
-      } else {
-        Object.assign(this.localUser, localUser);
-      }
-    }
   }, {
     key: "setRoomInfo",
     value: function setRoomInfo(roomInfo) {
@@ -390,15 +413,6 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
         Object.assign(this.roomInfo, roomInfo);
       }
     }
-  }, {
-    key: "setScheduleInfo",
-    value: function setScheduleInfo(scheduleInfo) {
-      if (!this.scheduleInfo) {
-        this.scheduleInfo = scheduleInfo;
-      } else {
-        Object.assign(this.scheduleInfo, scheduleInfo);
-      }
-    }
   }, {
     key: "toggleLayout",
     value: function toggleLayout(layout) {
@@ -459,11 +473,11 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "getShareLink",
     value: function getShareLink() {
-      var _this$roomInfo, _this$roomInfo2, _this$localUser2, _this$roomInfo3;
+      var _this$roomInfo, _this$roomInfo2, _this$localUser, _this$roomInfo3;
       var info = {
         roomId: (_this$roomInfo = this.roomInfo) === null || _this$roomInfo === void 0 ? void 0 : _this$roomInfo.roomId,
         roomName: (_this$roomInfo2 = this.roomInfo) === null || _this$roomInfo2 === void 0 ? void 0 : _this$roomInfo2.roomName,
-        userName: (_this$localUser2 = this.localUser) === null || _this$localUser2 === void 0 ? void 0 : _this$localUser2.userName
+        userName: (_this$localUser = this.localUser) === null || _this$localUser === void 0 ? void 0 : _this$localUser.userName
       };
       var baseLink = "".concat((_this$roomInfo3 = this.roomInfo) === null || _this$roomInfo3 === void 0 ? void 0 : _this$roomInfo3.inviteLink);
       return baseLink;
@@ -473,6 +487,16 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
     value: function showToast(params) {
       this._uiEventStore.showToast(params);
     }
+  }, {
+    key: "showNotification",
+    value: function showNotification(params) {
+      this._messageProvider.showNotification(params);
+    }
+  }, {
+    key: "closeNotification",
+    value: function closeNotification(key) {
+      this._messageProvider.closeNotification(key);
+    }
   }, {
     key: "_onNetworkQualityUpdated",
     value: function _onNetworkQualityUpdated(_roomId, event) {
@@ -553,36 +577,58 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "_onCloudRecordingStateUpdated",
     value: function _onCloudRecordingStateUpdated(roomId, state) {
+      if (state === _type.FcrRecordingState.Starting) {
+        this._messageProvider.showToast({
+          type: 'normal',
+          message: (0, _i18n.transI18n)('fmt_record_tips_Cloudrecording_Start')
+        });
+      } else if (state === _type.FcrRecordingState.Started) {
+        this._messageProvider.showToast({
+          type: 'normal',
+          message: (0, _i18n.transI18n)('fmt_localrecord_tips_already_start')
+        });
+      } else if (state === _type.FcrRecordingState.Paused) {
+        this._messageProvider.showToast({
+          type: 'normal',
+          message: (0, _i18n.transI18n)('fmt_record_toast_record_paused')
+        });
+      } else if (state === _type.FcrRecordingState.Stopped) {
+        this._messageProvider.showToast({
+          type: 'normal',
+          message: (0, _i18n.transI18n)('fmt_record_record_stoped')
+        });
+      }
       this.cloudRecordingState = state;
     }
   }, {
     key: "_initRoomInfo",
     value: function _initRoomInfo() {
-      var _this$_roomControl$ge4;
       var info = this._roomControl.getRoomInfo();
-      this.meetingId = this._roomControl.getRoomPropertiesByKeyPath('meetingId');
       this.setRoomInfo(info);
-      var user = (_this$_roomControl$ge4 = this._roomControl.getUserControl()) === null || _this$_roomControl$ge4 === void 0 ? void 0 : _this$_roomControl$ge4.getLocalUser();
-      this.setLocalUser(user);
-      var scheduleInfo = this._roomControl.getRoomSchedule();
-      scheduleInfo && this.setScheduleInfo(scheduleInfo);
+    }
+  }, {
+    key: "meetingTimeKey",
+    get: function get() {
+      return "enter-room-".concat(this.roomId);
+    }
+  }, {
+    key: "getLocalMeetingTime",
+    value: function getLocalMeetingTime() {
+      return this._localStorageProvider.read(this.meetingTimeKey);
     }
   }]);
 }();
 _StateBarStore = StateBarStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_StateBarStore, [[_mobx.observable, 1, "networkStatus"], [_mobx.observable, 1, "localUser"], [_mobx.observable, 1, "roomInfo"], [_mobx.observable, 1, "scheduleInfo"], [_mobx.observable, 1, "isLiveStreaming"], [_mobx.observable, 1, "liveStreamingPlayUrl"], [_mobx.observable, 1, "galleryWidth"], [_mobx.observable, 1, "browserWidth"], [_mobx.observable, 1, "networkStats"], [_mobx.observable, 1, "attendeeCount"], [_mobx.observable, 1, "asideOpenedItem"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "meetingId"], [_mobx.computed, 3, "isUserHost"], [_mobx.computed, 3, "shouldShowMeetingTime"], [_mobx.computed, 3, "isMainRoom"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStopLiveStreamingPermission"], [_mobx.computed, 3, "hasGetLiveStreamingLinkPermission"], [_mobx.computed, 3, "password"], [_decorator.bound, 2, "isLockRoomEnabled"], [_setNetworkStatusDecs, 18, "setNetworkStatus"], [_setLocalUserDecs, 18, "setLocalUser"], [_setRoomInfoDecs, 18, "setRoomInfo"], [_setScheduleInfoDecs, 18, "setScheduleInfo"], [_decorator.bound, 2, "openDeviceSettingDialog"], [_stopLiveStreamingDialogDecs, 18, "stopLiveStreamingDialog"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "pauseCloudRecording"], [_decorator.bound, 2, "resumeCloudRecording"], [_decorator.bound, 2, "stopCloudRecording"], [_decorator.bound, 2, "getShareLink"], [_decorator.bound, 2, "showToast"], [_uiEventsDecs, 18, "_uiEvents"], [_setBrowserWidthDecs, 18, "_setBrowserWidth"], [_onNetworkStatsUpdatedDecs, 18, "_onNetworkStatsUpdated"], [_onLiveStreamingStateUpdatedDecs, 18, "_onLiveStreamingStateUpdated"]], []).e, 14);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_StateBarStore, [[_mobx.observable, 1, "networkStatus"], [_mobx.observable, 1, "roomInfo"], [_mobx.observable, 1, "isLiveStreaming"], [_mobx.observable, 1, "liveStreamingPlayUrl"], [_mobx.observable, 1, "galleryWidth"], [_mobx.observable, 1, "browserWidth"], [_mobx.observable, 1, "networkStats"], [_mobx.observable, 1, "attendeeCount"], [_mobx.observable, 1, "asideOpenedItem"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.computed, 3, "localUser"], [_mobx.computed, 3, "isUserHost"], [_mobx.computed, 3, "shouldShowMeetingTime"], [_mobx.computed, 3, "isMainRoom"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStopLiveStreamingPermission"], [_mobx.computed, 3, "hasGetLiveStreamingLinkPermission"], [_mobx.computed, 3, "totalHourText"], [_mobx.computed, 3, "totalMinuteText"], [_mobx.computed, 3, "meetingTimeStatus"], [_mobx.computed, 3, "meetingTime"], [_mobx.computed, 3, "password"], [_mobx.computed, 3, "roomId"], [_mobx.computed, 3, "meetingId"], [_mobx.computed, 3, "scheduleInfo"], [_decorator.bound, 2, "isLockRoomEnabled"], [_setNetworkStatusDecs, 18, "setNetworkStatus"], [_setRoomInfoDecs, 18, "setRoomInfo"], [_decorator.bound, 2, "openDeviceSettingDialog"], [_stopLiveStreamingDialogDecs, 18, "stopLiveStreamingDialog"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "pauseCloudRecording"], [_decorator.bound, 2, "resumeCloudRecording"], [_decorator.bound, 2, "stopCloudRecording"], [_decorator.bound, 2, "getShareLink"], [_decorator.bound, 2, "showToast"], [_decorator.bound, 2, "showNotification"], [_decorator.bound, 2, "closeNotification"], [_uiEventsDecs, 18, "_uiEvents"], [_setBrowserWidthDecs, 18, "_setBrowserWidth"], [_onNetworkStatsUpdatedDecs, 18, "_onNetworkStatsUpdated"], [_onLiveStreamingStateUpdatedDecs, 18, "_onLiveStreamingStateUpdated"], [_decorator.bound, 2, "getLocalMeetingTime"]], []).e, 11);
 _init_networkStatus = _applyDecs$e[0];
-_init_localUser = _applyDecs$e[1];
-_init_roomInfo = _applyDecs$e[2];
-_init_scheduleInfo = _applyDecs$e[3];
-_init_isLiveStreaming = _applyDecs$e[4];
-_init_liveStreamingPlayUrl = _applyDecs$e[5];
-_init_galleryWidth = _applyDecs$e[6];
-_init_browserWidth = _applyDecs$e[7];
-_init_networkStats = _applyDecs$e[8];
-_init_attendeeCount = _applyDecs$e[9];
-_init_asideOpenedItem = _applyDecs$e[10];
-_init_cloudRecordingState = _applyDecs$e[11];
-_init_meetingId = _applyDecs$e[12];
-_initProto = _applyDecs$e[13];
+_init_roomInfo = _applyDecs$e[1];
+_init_isLiveStreaming = _applyDecs$e[2];
+_init_liveStreamingPlayUrl = _applyDecs$e[3];
+_init_galleryWidth = _applyDecs$e[4];
+_init_browserWidth = _applyDecs$e[5];
+_init_networkStats = _applyDecs$e[6];
+_init_attendeeCount = _applyDecs$e[7];
+_init_asideOpenedItem = _applyDecs$e[8];
+_init_cloudRecordingState = _applyDecs$e[9];
+_initProto = _applyDecs$e[10];
 var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/state-bar/view.js

@@ -21,6 +21,7 @@ var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _networkQuality = require("./network-quality");
 var _layoutConfig = require("./layout-config");
+var _meetingTime = require("./meeting-time");
 var _react = require("react");
 var _copyText = require("../../utilities/copyText");
 var _tools = require("../../utilities/tools");
@@ -36,6 +37,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _type3 = require("fcr-core/lib/room-control/type");
 var _rendererEvent = require("../../utilities/renderer-event");
 var _constant = require("../../utilities/constant");
+var _type4 = require("../../type");
 var _jsxRuntime = require("react/jsx-runtime");
 var MyFcrToolTip = exports.MyFcrToolTip = function MyFcrToolTip(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
@@ -61,7 +63,10 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
     galleryWidth = _useContext.galleryWidth,
     isMainRoom = _useContext.isMainRoom,
     meetingId = _useContext.meetingId,
-    showToast = _useContext.showToast;
+    showToast = _useContext.showToast,
+    showNotification = _useContext.showNotification,
+    closeNotification = _useContext.closeNotification,
+    isRoomDetailSupported = _useContext.isRoomDetailSupported;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isFullScreen = _useState2[0],
@@ -69,6 +74,16 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
   var displayMeetingId = meetingId ? (0, _tools.renderMeetingId)(meetingId, (roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomId) || '') : (0, _tools.renderMeetingId)(meetingId, (roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomId) || '').replace(/\s+/g, '');
   (0, _react.useEffect)(function () {
     isFullScreen ? (0, _screen.enterFullScreen)() : (0, _screen.exitFullScreen)();
+    if (isFullScreen) {
+      showNotification({
+        type: _type4.FcrUINotificationContentType.TOAST,
+        placement: 'bottom',
+        onClose: function onClose() {
+          closeNotification(_type4.FcrUINotificationContentType.TOAST);
+        },
+        data: '点击键盘ESC 可退出全屏'
+      });
+    }
   }, [isFullScreen]);
   var screenHandler = function screenHandler(event) {
     if (event.action === _constant.FcrUIRendererEventAction.ENTER_FULL_SCREEN) {
@@ -84,6 +99,17 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
       (0, _rendererEvent.removeEventListener)(screenHandler);
     };
   }, []);
+  var handleKeydown = function handleKeydown(event) {
+    if (event.key === 'Escape') {
+      isFullScreen && setIsFullScreen(false);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    document.addEventListener('keydown', handleKeydown);
+    return function () {
+      document.removeEventListener('keydown', handleKeydown);
+    };
+  }, [isFullScreen]);
   var onMeetingIdCopy = function onMeetingIdCopy() {
     if (!displayMeetingId) return;
     (0, _copyText.copyText)(displayMeetingId).then(function () {
@@ -132,42 +158,47 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_networkQuality.NetworkQuality, {})
             })
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-          src: _stepGradient["default"],
-          alt: "step divider",
-          className: ns.e('step-divider')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
-          content: t('fmt_information_options_sharedetail'),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
-            trigger: "click",
-            content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingDetails.MeetingDetails, {}),
-            placement: "bottomLeft",
-            onVisibleChange: toggleLayoutBarLock,
-            overlayClassName: ns.e('popover'),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: (0, _classnames["default"])(ns.e('info-detail'), (0, _defineProperty2["default"])({}, ns.e('inwaitingroom-disable-action'), (roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomType) === _type3.FcrRoomType.Waitingroom)),
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-                type: _type.FcrIconType.FCR_V2_TANHAO_ALART,
-                className: ns.e('info-detail-icon'),
-                size: 20
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: ns.e('lock-meeting-text'),
-                children: t('fmt_meetingInfo_label')
-              })]
+        }), isRoomDetailSupported && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _stepGradient["default"],
+            alt: "step divider",
+            className: ns.e('step-divider')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+            content: t('fmt_information_options_sharedetail'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+              trigger: "click",
+              content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingDetails.MeetingDetails, {}),
+              placement: "bottomLeft",
+              onVisibleChange: toggleLayoutBarLock,
+              overlayClassName: ns.e('popover'),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: (0, _classnames["default"])(ns.e('info-detail'), (0, _defineProperty2["default"])({}, ns.e('inwaitingroom-disable-action'), (roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomType) === _type3.FcrRoomType.Waitingroom)),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+                  type: _type.FcrIconType.FCR_V2_TANHAO_ALART,
+                  className: ns.e('info-detail-icon'),
+                  size: 20
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: ns.e('lock-meeting-text'),
+                  children: t('fmt_meetingInfo_label')
+                })]
+              })
             })
-          })
-        }), galleryWidth >= _store.GALLERY_MIN_SIZE && /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
-          content: t('fmt_information_label_clicktocopy'),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: ns.e('info-meeting-id'),
-            onClick: onMeetingIdCopy,
-            children: displayMeetingId
-          })
+          }), galleryWidth >= _store.GALLERY_MIN_SIZE && /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+            content: t('fmt_information_label_clicktocopy'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: ns.e('info-meeting-id'),
+              onClick: onMeetingIdCopy,
+              children: displayMeetingId
+            })
+          })]
         })]
       }), isLiveStreaming && /*#__PURE__*/(0, _jsxRuntime.jsx)(_liveStreamingState.LiveStreamingState, {})]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: ns.e('right-nav'),
-      children: [isRecording && /*#__PURE__*/(0, _jsxRuntime.jsx)(_recording.Recording, {}), attendeeCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+      children: [isRecording && /*#__PURE__*/(0, _jsxRuntime.jsx)(_recording.Recording, {}), isMainRoom && shouldShowMeetingTime && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('time'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingTime.MeetingTime, {})
+      }), attendeeCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
         content: t('fmt_statusbar_label_switchlayout'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: ns.e('layout'),

package/lib/modules/video-window/components/deviceState/index.d.ts

@@ -0,0 +1,7 @@
+import { DeviceStateProps } from '../../type';
+export declare const DeviceState: ({ connectType, openConnection, microphoneVolumeLevel, enableMicrophone, microphoneEnabled, }: DeviceStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AudioRecordinDeviceIcon: ({ size, micEnabled, volume, }: {
+    size?: number;
+    micEnabled?: boolean;
+    volume?: number;
+}) => import("react/jsx-runtime").JSX.Element;