fcr-ui-scene 3.3.1 → 3.4.1

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

@@ -4,6 +4,7 @@ require("core-js/modules/es.symbol.js");
 require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.symbol.to-primitive.js");
 require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.error.to-string.js");
 require("core-js/modules/es.array.is-array.js");
 require("core-js/modules/es.date.to-primitive.js");
 require("core-js/modules/es.function.name.js");
@@ -33,21 +34,15 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.GALLERY_MIN_SIZE = void 0;
-require("core-js/modules/es.error.to-string.js");
-require("core-js/modules/es.array.concat.js");
+exports["default"] = exports.StoreContext = exports.GALLERY_MIN_SIZE = void 0;
 require("core-js/modules/es.array.for-each.js");
-require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.array.push.js");
-require("core-js/modules/es.date.to-json.js");
 require("core-js/modules/es.function.bind.js");
-require("core-js/modules/es.json.stringify.js");
 require("core-js/modules/es.number.to-fixed.js");
 require("core-js/modules/es.object.assign.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.set.js");
-require("core-js/modules/es.string.includes.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
 require("core-js/modules/esnext.async-iterator.for-each.js");
@@ -78,17 +73,13 @@ require("core-js/modules/esnext.set.union.v2.js");
 require("core-js/modules/esnext.set.union.js");
 require("core-js/modules/esnext.weak-map.delete-all.js");
 require("core-js/modules/esnext.weak-map.emplace.js");
-require("core-js/modules/web.btoa.js");
 require("core-js/modules/web.dom-collections.for-each.js");
 require("core-js/modules/web.dom-collections.iterator.js");
-require("core-js/modules/web.dom-exception.constructor.js");
-require("core-js/modules/web.dom-exception.stack.js");
-require("core-js/modules/web.dom-exception.to-string-tag.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 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 _type = require("agora-edu-core/lib/type");
+var _type = require("fcr-core/lib/type");
 var _logger = require("agora-foundation/lib/logger");
 var _mobx = require("mobx");
 var _store = require("../setting/store");
@@ -96,6 +87,9 @@ var _decorator = require("agora-foundation/lib/decorator");
 var _constant = require("../../utilities/constant");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _components = require("../layout/components");
+var _parameters = require("../../utilities/parameters");
+var _type2 = require("fcr-core/lib/room-control/type");
+var _react = require("react");
 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_layoutSize, _init_layoutView, _init_cloudRecordingState, _init_meetingId, _setNetworkStatusDecs, _setLocalUserDecs, _setRoomInfoDecs, _setScheduleInfoDecs, _stopLiveStreamingDialogDecs, _uiEventsDecs, _setBrowserWidthDecs, _onNetworkStatsUpdatedDecs, _onLiveStreamingStateUpdatedDecs, _ref;
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
@@ -127,12 +121,14 @@ var _O = /*#__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");
 var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   function StateBarStore(_ref2) {
-    var _this$_roomControl$ge,
+    var _defaultVideoGalleryS,
+      _this$_roomControl$ge,
       _this = this;
     var roomControl = _ref2.roomControl,
       uiEventStore = _ref2.uiEventStore,
       securityStore = _ref2.securityStore,
-      config = _ref2.config;
+      config = _ref2.config,
+      parameters = _ref2.parameters;
     (0, _classCallCheck2["default"])(this, StateBarStore);
     (0, _defineProperty2["default"])(this, _ref, (_initProto(this), (0, _logger.getLogger)()));
     (0, _defineProperty2["default"])(this, "_disposer", []);
@@ -157,32 +153,41 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
     }));
     _classPrivateFieldInitSpec(this, _J, _init_attendeeCount(this));
     _classPrivateFieldInitSpec(this, _K, _init_asideOpenedItem(this, new Set()));
-    _classPrivateFieldInitSpec(this, _L, _init_layoutSize(this, 16));
+    _classPrivateFieldInitSpec(this, _L, _init_layoutSize(this));
     _classPrivateFieldInitSpec(this, _M, _init_layoutView(this, 'gallery'));
     _classPrivateFieldInitSpec(this, _N, _init_cloudRecordingState(this, _type.FcrRecordingState.Stopped));
     _classPrivateFieldInitSpec(this, _O, _init_meetingId(this, undefined));
     this._config = config;
     this._roomControl = roomControl;
+    this._uiEventStore = uiEventStore;
+    this._securityStore = securityStore;
     this.attendeeCount = 0;
     this.isLiveStreaming = this._roomControl.getLiveStreamingState() === _type.FcrLiveStreamingState.STARTED;
+    var defaultVideoGallerySize = (0, _parameters.getDefaultVideoGallerySize)(parameters);
+    if (defaultVideoGallerySize) {
+      defaultVideoGallerySize = Math.min(Math.max(defaultVideoGallerySize, 16), 25);
+    }
+    this.layoutSize = (_defaultVideoGalleryS = defaultVideoGallerySize) !== null && _defaultVideoGalleryS !== void 0 ? _defaultVideoGalleryS : 16;
     this._roomControl.addObserver(this._roomObserver);
-    this._uiEventStore = uiEventStore;
     this._uiEventStore.addObserver({
       onEvent: this._uiEvents.bind(this)
     });
-    this._securityStore = securityStore;
     this._onNetworkQualityUpdated = this._onNetworkQualityUpdated.bind(this);
     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._initRoomInfo();
-    window.addEventListener('resize', this._setBrowserWidth()); // 改变 window 大小
+    var resizeHandler = this._setBrowserWidth();
+    window.addEventListener('resize', resizeHandler);
+    var resizeDispose = function resizeDispose() {
+      window.removeEventListener('resize', resizeHandler);
+    };
     this._disposer.push((0, _mobx.reaction)(function () {
       return _this.isLiveStreaming;
     }, this._setBrowserWidth()), (0, _mobx.reaction)(function () {
       return _this.cloudRecordingState;
-    }, this._setBrowserWidth()));
+    }, this._setBrowserWidth()), resizeDispose);
   }
   return (0, _createClass2["default"])(StateBarStore, [{
     key: "networkStatus",
@@ -315,6 +320,12 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
     get: function get() {
       return this.scheduleInfo && this.scheduleInfo.duration;
     }
+  }, {
+    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;
+    }
   }, {
     key: "hasStartCloudRecordingPermission",
     get: function get() {
@@ -333,8 +344,8 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "password",
     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.password;
+      var _this$_roomControl$ge3;
+      return (_this$_roomControl$ge3 = this._roomControl.getRoomInfo()) === null || _this$_roomControl$ge3 === void 0 ? void 0 : _this$_roomControl$ge3.password;
     }
   }, {
     key: "isLockRoomEnabled",
@@ -402,7 +413,6 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       this._disposer.forEach(function (dispose) {
         return dispose();
       });
-      window.removeEventListener('resize', this._setBrowserWidth());
     }
   }, {
     key: "openDeviceSettingDialog",
@@ -442,26 +452,19 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "getShareLink",
     value: function getShareLink() {
-      var _this$roomInfo, _this$roomInfo2, _this$localUser2;
+      var _this$roomInfo, _this$roomInfo2, _this$localUser2, _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
       };
-      var strArgs = "info=".concat(btoa(encodeURIComponent(JSON.stringify(info))));
-      var baseLink = "".concat(this._config.inviteLink);
-      if (baseLink.includes('?')) {
-        return "".concat(baseLink, "&").concat(strArgs);
-      }
-      return "".concat(baseLink, "?").concat(strArgs);
+      var baseLink = "".concat((_this$roomInfo3 = this.roomInfo) === null || _this$roomInfo3 === void 0 ? void 0 : _this$roomInfo3.inviteLink);
+      return baseLink;
     }
   }, {
-    key: "toastCopyInfo",
-    value: function toastCopyInfo(type, content) {
-      this._uiEventStore.showToast({
-        type: type,
-        message: content
-      });
+    key: "showToast",
+    value: function showToast(params) {
+      this._uiEventStore.showToast(params);
     }
   }, {
     key: "_onNetworkQualityUpdated",
@@ -538,8 +541,8 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "_onNetworkStatsUpdated",
     value: function _onNetworkStatsUpdated(_roomId, stats) {
-      this.networkStats.uplinkPacketLossRate = stats.rxPacketLoss.toFixed(2);
-      this.networkStats.downlinkPacketLossRate = stats.txPacketLoss.toFixed(2);
+      this.networkStats.uplinkPacketLossRate = stats.txPacketLoss.toFixed(2);
+      this.networkStats.downlinkPacketLossRate = stats.rxPacketLoss.toFixed(2);
       this.networkStats.networkDelay = stats.rtt.toFixed(2);
     }
   }, {
@@ -556,11 +559,11 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "_initRoomInfo",
     value: function _initRoomInfo() {
-      var _this$_roomControl$ge3;
+      var _this$_roomControl$ge4;
       var info = this._roomControl.getRoomInfo();
       this.meetingId = this._roomControl.getRoomPropertiesByKeyPath('meetingId');
       this.setRoomInfo(info);
-      var user = (_this$_roomControl$ge3 = this._roomControl.getUserControl()) === null || _this$_roomControl$ge3 === void 0 ? void 0 : _this$_roomControl$ge3.getLocalUser();
+      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);
@@ -568,7 +571,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   }]);
 }();
 _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, "layoutSize"], [_mobx.observable, 1, "layoutView"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "meetingId"], [_mobx.computed, 3, "isUserHost"], [_mobx.computed, 3, "shouldShowMeetingTime"], [_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"], [_mobx.action, 2, "refreshLayoutSize"], [_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, "toastCopyInfo"], [_uiEventsDecs, 18, "_uiEvents"], [_setBrowserWidthDecs, 18, "_setBrowserWidth"], [_onNetworkStatsUpdatedDecs, 18, "_onNetworkStatsUpdated"], [_onLiveStreamingStateUpdatedDecs, 18, "_onLiveStreamingStateUpdated"]], []).e, 16);
+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, "layoutSize"], [_mobx.observable, 1, "layoutView"], [_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"], [_mobx.action, 2, "refreshLayoutSize"], [_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, 16);
 _init_networkStatus = _applyDecs$e[0];
 _init_localUser = _applyDecs$e[1];
 _init_roomInfo = _applyDecs$e[2];
@@ -584,4 +587,5 @@ _init_layoutSize = _applyDecs$e[11];
 _init_layoutView = _applyDecs$e[12];
 _init_cloudRecordingState = _applyDecs$e[13];
 _init_meetingId = _applyDecs$e[14];
-_initProto = _applyDecs$e[15];
+_initProto = _applyDecs$e[15];
+var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

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

@@ -7,6 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.View = exports.MyFcrToolTip = void 0;
 require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _mobxReact = require("mobx-react");
@@ -18,19 +21,21 @@ 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 _toast = require("agora-ui-foundation/lib/components/toast");
-var _context = require("./context");
+var _tools = require("../../utilities/tools");
+var _store = require("./store");
 var _screen = require("../../utilities/screen");
 var _popover = require("agora-ui-foundation/lib/components/popover");
 var _meetingDetails = require("./meeting-details");
 var _meetingNetworkState = require("./meeting-network-state");
 var _liveStreamingState = require("./live-streaming-state");
-var _type2 = require("agora-edu-core/lib/type");
+var _type2 = require("fcr-core/lib/type");
 var _recording = require("./recording");
-var _store = require("./store");
+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 _jsxRuntime = require("react/jsx-runtime");
 var MyFcrToolTip = exports.MyFcrToolTip = function MyFcrToolTip(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
@@ -44,7 +49,7 @@ var MyFcrToolTip = exports.MyFcrToolTip = function MyFcrToolTip(props) {
 var View = exports.View = (0, _mobxReact.observer)(function () {
   var t = (0, _i18n.useI18n)();
   var ns = (0, _useNamespace.useNamespace)('state-bar');
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     isUserHost = _useContext.isUserHost,
     roomInfo = _useContext.roomInfo,
     shouldShowMeetingTime = _useContext.shouldShowMeetingTime,
@@ -54,31 +59,42 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
     attendeeCount = _useContext.attendeeCount,
     toggleLayoutBarLock = _useContext.toggleLayoutBarLock,
     galleryWidth = _useContext.galleryWidth,
-    openVideoWindowDialog = _useContext.openVideoWindowDialog,
-    meetingId = _useContext.meetingId;
+    isMainRoom = _useContext.isMainRoom,
+    meetingId = _useContext.meetingId,
+    showToast = _useContext.showToast;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isFullScreen = _useState2[0],
     setIsFullScreen = _useState2[1];
+  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)();
   }, [isFullScreen]);
+  var screenHandler = function screenHandler(event) {
+    if (event.action === _constant.RendererEventAction.ENTER_FULL_SCREEN) {
+      setIsFullScreen(true);
+    }
+    if (event.action === _constant.RendererEventAction.LEAVE_FULL_SCREEN) {
+      setIsFullScreen(false);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    (0, _rendererEvent.addEventListener)(screenHandler);
+    return function () {
+      (0, _rendererEvent.removeEventListener)(screenHandler);
+    };
+  }, []);
   var onMeetingIdCopy = function onMeetingIdCopy() {
-    var _meetingId = meetingId !== null && meetingId !== void 0 ? meetingId : roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomId;
-    if (!_meetingId) return;
-    (0, _copyText.copyText)(_meetingId).then(function () {
-      _toast.FcrToastApi.open({
-        toastProps: {
-          type: 'normal',
-          content: t('fmt_information_tips_beencopied')
-        }
+    if (!displayMeetingId) return;
+    (0, _copyText.copyText)(displayMeetingId).then(function () {
+      showToast({
+        type: 'normal',
+        message: t('fmt_information_tips_beencopied')
       });
     })["catch"](function () {
-      _toast.FcrToastApi.open({
-        toastProps: {
-          type: 'warn',
-          content: t('fmt_information_tips_numbercopyfailed')
-        }
+      showToast({
+        type: 'warn',
+        message: t('fmt_information_tips_numbercopyfailed')
       });
     });
   };
@@ -125,11 +141,11 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
             trigger: "click",
             content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingDetails.MeetingDetails, {}),
-            placement: "bottom",
+            placement: "bottomLeft",
             onVisibleChange: toggleLayoutBarLock,
             overlayClassName: ns.e('popover'),
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: ns.e('info-detail'),
+              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'),
@@ -145,23 +161,20 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: ns.e('info-meeting-id'),
             onClick: onMeetingIdCopy,
-            children: meetingId !== null && meetingId !== void 0 ? meetingId : roomInfo === null || roomInfo === void 0 ? void 0 : roomInfo.roomId
+            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, {}), shouldShowMeetingTime && galleryWidth >= _store.GALLERY_MIN_SIZE && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: ns.e('time'),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingTime.MeetingTime, {})
-      }), attendeeCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
+      children: [isRecording && /*#__PURE__*/(0, _jsxRuntime.jsx)(_recording.Recording, {}), attendeeCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
         content: t('fmt_statusbar_label_switchlayout'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: ns.e('layout'),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_layoutConfig.LayoutConfig, {})
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
-        placement: "left",
+        placement: "bottom",
         content: isFullScreen ? t('fmt_statusbar_label_exitfullscreen') : t('fmt_statusbar_label_fullscreen'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: ns.e('full-screen'),

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

@@ -1,4 +1,5 @@
-import { ConnectType, ConnectionTabType } from './../type';
+import { ConnectionTabType } from './../type';
+import { ConnectType } from '../../../common/device-store';
 interface DeviceStateProps {
     connectType: ConnectType;
     openConnection: (type: ConnectionTabType) => void;

package/lib/modules/video-window/deviceState/index.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.DeviceState = exports.AudioRecordinDeviceIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _mobxReact = require("mobx-react");
-var _type = require("./../type");
 var _icon = require("agora-ui-foundation/lib/components/icon");
-var _type2 = require("agora-ui-foundation/lib/components/icon/type");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _microphoneIndicator = require("agora-ui-foundation/lib/components/microphone-indicator");
+var _deviceStore = require("../../../common/device-store");
 var _jsxRuntime = require("react/jsx-runtime");
 var DeviceState = exports.DeviceState = (0, _mobxReact.observer)(function (_ref) {
   var connectType = _ref.connectType,
@@ -20,19 +20,19 @@ var DeviceState = exports.DeviceState = (0, _mobxReact.observer)(function (_ref)
     enableMicrophone = _ref.enableMicrophone,
     microphoneEnabled = _ref.microphoneEnabled;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [connectType === _type.ConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [connectType === _deviceStore.ConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       onClick: function onClick() {
         return openConnection('computer');
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-        type: _type2.FcrIconType.FCR_WEB_CONNECTSOUND,
+        type: _type.FcrIconType.FCR_WEB_CONNECTSOUND,
         size: 32,
         colors: {
           iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
           iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
         }
       })
-    }), connectType === _type.ConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), connectType === _deviceStore.ConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       onClick: function onClick() {
         enableMicrophone(!microphoneEnabled);
       },
@@ -40,9 +40,9 @@ var DeviceState = exports.DeviceState = (0, _mobxReact.observer)(function (_ref)
         micEnabled: microphoneEnabled,
         volume: microphoneVolumeLevel
       })
-    }), connectType === _type.ConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), connectType === _deviceStore.ConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-        type: microphoneVolumeLevel > 20 ? _type2.FcrIconType.FCR_PHONECALL3 : microphoneVolumeLevel > 10 ? _type2.FcrIconType.FCR_PHONECALL2 : _type2.FcrIconType.FCR_PHONECALL1,
+        type: microphoneVolumeLevel > 20 ? _type.FcrIconType.FCR_PHONECALL3 : microphoneVolumeLevel > 10 ? _type.FcrIconType.FCR_PHONECALL2 : _type.FcrIconType.FCR_PHONECALL1,
         size: 32,
         colors: {
           iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
@@ -63,7 +63,7 @@ var AudioRecordinDeviceIcon = exports.AudioRecordinDeviceIcon = function AudioRe
     iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
   };
   return !micEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-    type: _type2.FcrIconType.FCR_NOMUTE,
+    type: _type.FcrIconType.FCR_NOMUTE,
     colors: muteColor,
     size: size
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

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

@@ -1,9 +1,10 @@
 import { UIModule } from '../../base';
-import { VideoWindowStoreParams } from './store';
+import { UIAction } from '../../utilities/constant';
+import { StoreConfig } from '../../type';
 export declare class VideoWindowUIModule extends UIModule {
     private _store;
-    constructor(args: VideoWindowStoreParams);
+    constructor(args: StoreConfig);
     getComponent(): import("react/jsx-runtime").JSX.Element;
     onUnload(): void;
-    onProcessEvent(event: RendererCustomEvent): void;
+    onUiEvent(event: UIAction, payload: any): void;
 }

package/lib/modules/video-window/index.js

@@ -1,23 +1,34 @@
 "use strict";
 
+require("core-js/modules/es.array.iterator.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.to-string.js");
 require("core-js/modules/es.reflect.construct.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VideoWindowUIModule = void 0;
+require("core-js/modules/es.function.bind.js");
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _base = require("../../base");
-var _context = require("./context");
-var _store = _interopRequireDefault(require("./store"));
+var _store = _interopRequireWildcard(require("./store"));
 var _view = require("./view");
 var _constant = require("../../utilities/constant");
 var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var VideoWindowUIModule = exports.VideoWindowUIModule = /*#__PURE__*/function (_UIModule) {
@@ -26,13 +37,16 @@ var VideoWindowUIModule = exports.VideoWindowUIModule = /*#__PURE__*/function (_
     (0, _classCallCheck2["default"])(this, VideoWindowUIModule);
     _this = _callSuper(this, VideoWindowUIModule);
     _this._store = new _store["default"](args);
+    args.uiEventStore.addObserver({
+      onEvent: _this.onUiEvent.bind(_this)
+    });
     return _this;
   }
   (0, _inherits2["default"])(VideoWindowUIModule, _UIModule);
   return (0, _createClass2["default"])(VideoWindowUIModule, [{
     key: "getComponent",
     value: function getComponent() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.StoreContext.Provider, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
         value: this._store,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {})
       });
@@ -43,21 +57,14 @@ var VideoWindowUIModule = exports.VideoWindowUIModule = /*#__PURE__*/function (_
       this._store.release();
     }
   }, {
-    key: "onProcessEvent",
-    value: function onProcessEvent(event) {
-      var action = event.action,
-        payload = event.payload;
-      switch (action) {
-        case _constant.RendererEventAction.START_LIVE_STREAMING:
-        case _constant.RendererEventAction.STOP_LIVE_STREAMING:
-          break;
-        case _constant.RendererEventAction.FRAGMENT_LOADED:
-          if (payload === 'live-streaming') {}
-          break;
-        case _constant.RendererEventAction.STOP_SHARE_SCREEN:
+    key: "onUiEvent",
+    value: function onUiEvent(event, payload) {
+      switch (event) {
+        case _constant.UIAction.STOP_SHARE_SCREEN:
           this._store.closeVideoWindow();
           break;
-        case _constant.RendererEventAction.CLOSE_LIVE_STREAMING:
+        case _constant.UIAction.CLOSE_VIDEO_WINDOW:
+          this._store.closeVideoWindow();
           break;
       }
     }

package/lib/modules/video-window/members/index.js

@@ -12,19 +12,19 @@ require("core-js/modules/esnext.iterator.map.js");
 var _react = require("react");
 var _mobxReact = require("mobx-react");
 var _type = require("../type");
-var _context = require("../context");
+var _store = require("../store");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type2 = require("agora-ui-foundation/lib/components/icon/type");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _memberWindow = require("../../layout/member-window");
 var _type3 = require("agora-rte-sdk/lib/core/rtc/type");
 require("./index.css");
-var _agoraEduCore = require("agora-edu-core");
+var _fcrCore = require("fcr-core");
 var _muteAction = require("../../../utilities/mute-action");
 var _env = require("agora-foundation/lib/utilities/env");
 var _jsxRuntime = require("react/jsx-runtime");
 var Members = exports.Members = (0, _mobxReact.observer)(function () {
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     videoWindowPreviewType = _useContext.videoWindowPreviewType,
     videoWindowCurrentWidth = _useContext.videoWindowCurrentWidth,
     videoWindowCurrentHeight = _useContext.videoWindowCurrentHeight,
@@ -49,7 +49,10 @@ var Members = exports.Members = (0, _mobxReact.observer)(function () {
     setVideoOrientation = _useContext.setVideoOrientation,
     hasUnmutePermission = _useContext.hasUnmutePermission,
     hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission,
-    setBounds = _useContext.setBounds;
+    setBounds = _useContext.setBounds,
+    interpreterUsers = _useContext.interpreterUsers,
+    interpreterState = _useContext.interpreterState,
+    openRenameDialog = _useContext.openRenameDialog;
   var ref = (0, _react.useRef)(null);
   var onVisibleChanged = function onVisibleChanged(visible) {
     if (visible) {
@@ -70,8 +73,8 @@ var Members = exports.Members = (0, _mobxReact.observer)(function () {
     }),
     ref: ref,
     children: [foldListRenderData.map(function (windowData, index) {
-      var muteAudioPermission = hasMutePermission(windowData.isMySelf ? _agoraEduCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
-      var startAudioPermission = hasUnmutePermission(windowData.isMySelf ? _agoraEduCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
+      var muteAudioPermission = hasMutePermission(windowData.isMySelf ? _fcrCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
+      var startAudioPermission = hasUnmutePermission(windowData.isMySelf ? _fcrCore.FcrPrivilegeUserRole.SELF : windowData.ownerRoleType);
       var requestStartAudioPermission = hasRequestStartAudioPermission(windowData.ownerRoleType);
       var _actionMute = (0, _muteAction.actionMute)(windowData.isMySelf, windowData.hasMicrophoneAudioStream, muteAudioPermission, startAudioPermission, requestStartAudioPermission),
         isShowActionAudio = _actionMute.isShowActionAudio,
@@ -86,7 +89,9 @@ var Members = exports.Members = (0, _mobxReact.observer)(function () {
           width: videoWindowCurrentWidth,
           height: videoWindowCurrentHeight,
           memberWindowPreviewType: 'suspend',
-          slot: windowData.videoSourceType !== _agoraEduCore.FcrVideoSourceType.SCREEN && /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindowActions, {
+          slot: windowData.videoSourceType !== _fcrCore.FcrVideoSourceType.SCREEN && /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindowActions, {
+            interpreterUsers: interpreterUsers,
+            interpreterState: interpreterState,
             onVisibleChanged: onVisibleChanged,
             videoWindowCurrentWidth: videoWindowCurrentWidth,
             videoWindowCurrentHeight: videoWindowCurrentHeight,
@@ -104,7 +109,8 @@ var Members = exports.Members = (0, _mobxReact.observer)(function () {
             windowSize: "normal",
             windowData: windowData,
             iconSize: 16,
-            showRotation: (0, _env.isElectron)()
+            showRotation: (0, _env.isElectron)(),
+            handleRename: openRenameDialog
           }),
           videoRenderMode: _type3.AgoraRtcRenderMode.FIT,
           videoStreamType: _type3.AgoraRtcVideoStreamType.LOW_STREAM,

package/lib/modules/video-window/speaking/index.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = require("react");
 var _mobxReact = require("mobx-react");
-var _context = require("../context");
+var _store = require("../store");
 var _type = require("./../type");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _deviceState = require("../deviceState");
@@ -16,7 +16,7 @@ require("./index.css");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _jsxRuntime = require("react/jsx-runtime");
 var Speaking = (0, _mobxReact.observer)(function () {
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     speakHover = _useContext.speakHover,
     videoWindowPreviewType = _useContext.videoWindowPreviewType,
     findSpotlightUser = _useContext.findSpotlightUser,