fcr-ui-scene 3.8.2 → 3.9.0-alpha

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

@@ -6,6 +6,7 @@ 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.array.push.js");
 require("core-js/modules/es.date.to-primitive.js");
 require("core-js/modules/es.function.bind.js");
 require("core-js/modules/es.function.name.js");
@@ -36,17 +37,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.StoreContext = void 0;
-require("core-js/modules/es.array.filter.js");
 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-string.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
 require("core-js/modules/esnext.iterator.constructor.js");
-require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/esnext.weak-map.delete-all.js");
 require("core-js/modules/esnext.weak-map.emplace.js");
@@ -61,7 +59,6 @@ var _type = require("fcr-core/lib/type");
 var _decorator = require("agora-foundation/lib/decorator");
 var _react = require("react");
 var _constant = require("../../utilities/constant");
-var _i18n = require("agora-ui-foundation/lib/i18n");
 var _logger = require("../../utilities/logger");
 var _objectManager = require("../../object-manager");
 var _meetingDetail = require("../../utilities/meeting-detail");
@@ -69,12 +66,15 @@ var _shareAudio = require("./components/share-audio");
 var _type2 = require("../../type");
 var _enums = require("./enums");
 var _defaultConfig = require("../../utilities/default-config");
-var _browserApi = require("../../utilities/browser-api");
+var _copyText = require("agora-ui-foundation/lib/utilities/copy-text");
 var _controlBar = require("../dialog/dialogs/control-bar");
-var _platform = require("../../utilities/platform");
+var _env = require("agora-foundation/lib/utilities/env");
 var _struct = require("../../providers/mouse-detect/struct");
+var _type3 = require("fcr-core/lib/room-control/sharing-control/type");
+var _type4 = require("../secondary-window/type");
+var _type5 = require("../../modules/toast-manager/type");
 var _ControlBarStore;
-var _initProto, _init_roomDuration, _init_startTime, _init_cloudRecordingState, _init_playUrl, _init_liveStreamingState, _init_allApplicationWindows, _init_boardOwnerUser, _init_currentShareDisplayId, _init_position, _init_appActionbarPopoverVisible, _setCheckedStateMapDecs, _showLockedRoomToastDecs, _handleNewShareDecs, _handlerStopShareDecs, _pauseCloudRecordingDecs, _resumeCloudRecordingDecs, _stopCloudRecordingDecs, _showToastDecs, _handleLeaveRoomDecs, _closeLeaveMeetingDialogDecs, _handleMoreClickDecs, _setAppActionbarPopoverVisibleDecs, _ref;
+var _initProto, _init_roomDuration, _init_startTime, _init_cloudRecordingState, _init_playUrl, _init_liveStreamingState, _init_allApplicationWindows, _init_boardOwnerUser, _init_currentShareDisplayId, _init_position, _init_appActionbarPopoverVisible, _setCheckedStateMapDecs, _pauseCloudRecordingDecs, _resumeCloudRecordingDecs, _stopCloudRecordingDecs, _showToastDecs, _handleLeaveRoomDecs, _closeLeaveMeetingDialogDecs, _handleMoreClickDecs, _setAppActionbarPopoverVisibleDecs, _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; }
@@ -100,7 +100,7 @@ var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
 var _D = /*#__PURE__*/new WeakMap();
 var _E = /*#__PURE__*/new WeakMap();
-_ref = (_setCheckedStateMapDecs = [_mobx.action, _mobx.action.bound], _showLockedRoomToastDecs = [_mobx.action, _mobx.action.bound], _handleNewShareDecs = [_mobx.action, _mobx.action.bound], _handlerStopShareDecs = [_mobx.action, _mobx.action.bound], _pauseCloudRecordingDecs = [_decorator.bound, (0, _decorator.debounced)(500, {
+_ref = (_setCheckedStateMapDecs = [_mobx.action, _mobx.action.bound], _pauseCloudRecordingDecs = [_decorator.bound, (0, _decorator.debounced)(500, {
   leading: true
 })], _resumeCloudRecordingDecs = [_decorator.bound, (0, _decorator.debounced)(500, {
   leading: true
@@ -127,7 +127,7 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
         var y = display.bounds.y,
           workAreaY = display.workArea.y;
         var topOffset = workAreaY - y;
-        _this.titleHeight = (0, _platform.isWindows)() ? 0 : topOffset !== null && topOffset !== void 0 ? topOffset : 0;
+        _this.titleHeight = (0, _env.isWindows)() ? 0 : topOffset !== null && topOffset !== void 0 ? topOffset : 0;
         (0, _mobx.runInAction)(function () {
           _this.currentShareDisplayId = display.id;
         });
@@ -141,7 +141,7 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
         var y = display.bounds.y,
           workAreaY = display.workArea.y;
         var topOffset = workAreaY - y;
-        _this.titleHeight = (0, _platform.isWindows)() ? 0 : topOffset !== null && topOffset !== void 0 ? topOffset : 0;
+        _this.titleHeight = (0, _env.isWindows)() ? 0 : topOffset !== null && topOffset !== void 0 ? topOffset : 0;
         (0, _mobx.runInAction)(function () {
           _this.currentShareDisplayId = _this._renderer.getDisplayNearestPoint(_this.draggableArea).id;
           _this._mouseDetectProvider.setDisplayId(_this.currentShareDisplayId);
@@ -156,7 +156,7 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
         var y = display.bounds.y,
           workAreaY = display.workArea.y;
         var topOffset = workAreaY - y;
-        _this.titleHeight = (0, _platform.isWindows)() ? 0 : topOffset !== null && topOffset !== void 0 ? topOffset : 0;
+        _this.titleHeight = (0, _env.isWindows)() ? 0 : topOffset !== null && topOffset !== void 0 ? topOffset : 0;
         (0, _mobx.runInAction)(function () {
           _this.currentShareDisplayId = display.id;
         });
@@ -170,6 +170,9 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
       onMouseEnterDetectArea: function onMouseEnterDetectArea(areaId) {
         if (areaId === _struct.FcrUIDetectAreaID.ControlBar) {
           _this._controlBarWindow.setIgnoreMouseEvents(false);
+          if ((0, _env.isWindows)()) {
+            _this._controlBarWindow.focus();
+          }
         }
       },
       onMouseLeaveDetectArea: function onMouseLeaveDetectArea(areaId) {
@@ -180,6 +183,46 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
         }
       }
     });
+    (0, _defineProperty2["default"])(this, "_stateNavArea", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    (0, _defineProperty2["default"])(this, "_contentArea", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    // popover 菜单区域
+    (0, _defineProperty2["default"])(this, "_popoverArea", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    // popover 二级菜单区域
+    (0, _defineProperty2["default"])(this, "_subPopoverArea", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    // popover 三极菜单区域
+    (0, _defineProperty2["default"])(this, "_tertiaryPopoverArea", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    // popover 四级菜单区域
+    (0, _defineProperty2["default"])(this, "_quaternaryPopoverArea", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
     _classPrivateFieldInitSpec(this, _F, _init_roomDuration(this));
     _classPrivateFieldInitSpec(this, _G, _init_startTime(this));
     _classPrivateFieldInitSpec(this, _H, _init_cloudRecordingState(this, _type.FcrRecordingState.Stopped));
@@ -213,9 +256,10 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     this._dialogProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_DIALOG_PROVIDER);
     this._sharedLayoutDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_LAYOUT_DATA_SOURCE);
     this._mouseDetectProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_MOUSE_DETECT_PROVIDER);
+    this._annotationProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_ANNOTATION_PROVIDER);
     this._renderer = objectManager.getObject(_objectManager.FcrUIObjectKeys.RENDERER_WRAPPER);
     var windowProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_WINDOW_PROVIDER);
-    windowProvider.setWindowOptions(_constant.FcrUIDialogKey.SHARE_SCREEN_CONTROL_BAR, _controlBar.windowConfig);
+    windowProvider.setWindowOptions(_constant.FcrUIDialogKey.SHARE_SCREEN_CONTROL_BAR, _controlBar.electronWindowConfig);
     this._controlBarWindow = windowProvider.getWindowById(_constant.FcrUIDialogKey.SHARE_SCREEN_CONTROL_BAR);
     this.startTime = (_this$_mainRoomContro = (_this$_mainRoomContro2 = this._mainRoomControl.getRoomSchedule()) === null || _this$_mainRoomContro2 === void 0 ? void 0 : _this$_mainRoomContro2.startTime) !== null && _this$_mainRoomContro !== void 0 ? _this$_mainRoomContro : new Date().getTime();
     this.roomInfo = this._mainRoomControl.getRoomInfo();
@@ -372,11 +416,6 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     set: function set(v) {
       _classPrivateFieldSet(_E, this, v);
     }
-  }, {
-    key: "_detectAreas",
-    value: function _detectAreas() {
-      return this._mouseDetectProvider.getDetectAreas(_struct.FcrUIDetectAreaID.ControlBar);
-    }
   }, {
     key: "isSharingWithAudio",
     get: function get() {
@@ -468,9 +507,19 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
       return this._sharedSecurityDataSource.checkedStateMap;
     }
   }, {
-    key: "annotationButtonVisible",
+    key: "isWriteAnnotationAllowed",
     get: function get() {
-      return false;
+      return this._privilegeProvider.isAnnotationWriteAllowed();
+    }
+  }, {
+    key: "hasPermissionAllowWriteAnnotation",
+    get: function get() {
+      return this._privilegeProvider.hasAnnotationAllowWritePermission();
+    }
+  }, {
+    key: "hasAnnotationStartPermission",
+    get: function get() {
+      return this._privilegeProvider.hasAnnotationStartPermission();
     }
   }, {
     key: "liveStreamingButtonVisible",
@@ -539,9 +588,8 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "showLockedRoomToast",
     value: function showLockedRoomToast(enable) {
-      this._messageProvider.showToast({
-        type: 'info',
-        message: enable ? (0, _i18n.transI18n)('fmt_security_tips_lock_meeting_on') : (0, _i18n.transI18n)('fmt_uimanager_tips_meetingunlocked')
+      this.showToast({
+        key: enable ? _type5.FcrUIToastKey.FMT_SECURITY_TIPS_LOCK_MEETING_ON : _type5.FcrUIToastKey.FMT_UIMANAGER_TIPS_MEETINGUNLOCKED
       });
     }
   }, {
@@ -554,17 +602,39 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     value: function handlerStopShare() {
       this._screenShareProvider.stopShare();
     }
+  }, {
+    key: "toggleAnnotation",
+    value: function toggleAnnotation() {
+      if (this._annotationProvider.isAnnotationToolbarOpened) {
+        this._annotationProvider.closeAnnotationToolbar();
+      } else {
+        this._annotationProvider.openAnnotationToolbar();
+      }
+    }
+  }, {
+    key: "allowWriteAnnotation",
+    value: function allowWriteAnnotation(allow) {
+      var state = allow ? _type3.FcrSharePermissionState.ON : _type3.FcrSharePermissionState.OFF;
+      this._privilegeProvider.allowWriteAnnotation(allow);
+    }
+  }, {
+    key: "clearAnnotation",
+    value: function clearAnnotation() {
+      this._annotationProvider.getStandaloneToolbarControl().setWhiteboardTool({
+        action: _type4.WhiteboardToolAction.CLEAR
+      });
+    }
   }, {
     key: "handleMouseEnter",
     value: function handleMouseEnter() {
-      if ((0, _platform.isMac)()) {
+      if ((0, _env.isMac)()) {
         this._controlBarWindow.setIgnoreMouseEvents(false);
       }
     }
   }, {
     key: "handleMouseLeave",
     value: function handleMouseLeave() {
-      if ((0, _platform.isMac)()) {
+      if ((0, _env.isMac)()) {
         this._controlBarWindow.setIgnoreMouseEvents(true, {
           forward: true
         });
@@ -613,11 +683,7 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "showToast",
     value: function showToast(params) {
-      this._messageProvider.showToast({
-        type: params.type,
-        message: params.content,
-        duration: params.duration
-      });
+      this._messageProvider.showToastByKey(params);
     }
   }, {
     key: "handleOpenParticipant",
@@ -654,40 +720,89 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
       this._mouseDetectProvider.deleteDetectArea(_struct.FcrUIDetectAreaID.ControlBar);
     }
   }, {
-    key: "setArea",
-    value: function setArea(id, area) {
-      var currentOtherAreas = this._detectAreas().filter(function (item) {
-        return item.id !== id;
-      });
-      var controlBarArea = {
-        id: id,
+    key: "setStateNavArea",
+    value: function setStateNavArea(area) {
+      this._stateNavArea = {
         x: area.x,
         y: area.y,
         width: area.width,
         height: area.height
       };
-      currentOtherAreas.push(controlBarArea);
-      this._mouseDetectProvider.setDetectArea(_struct.FcrUIDetectAreaID.ControlBar, currentOtherAreas);
+      this._updateDetectAreas();
     }
   }, {
-    key: "removeArea",
-    value: function removeArea(id) {
-      var currentOtherAreas = this._detectAreas().filter(function (item) {
-        return item.id !== id;
-      });
-      this._mouseDetectProvider.setDetectArea(_struct.FcrUIDetectAreaID.ControlBar, currentOtherAreas);
+    key: "setControlBarContentArea",
+    value: function setControlBarContentArea(area) {
+      this._contentArea = {
+        x: area.x,
+        y: area.y,
+        width: area.width,
+        height: area.height
+      };
+      this._updateDetectAreas();
     }
   }, {
-    key: "setStateNavArea",
-    value: function setStateNavArea(area) {
-      var id = 'state-nav-area';
-      this.setArea(id, area);
+    key: "setPopoverArea",
+    value: function setPopoverArea(id, area) {
+      var areaWithId = {
+        x: area.x,
+        y: area.y,
+        width: area.width,
+        height: area.height,
+        id: id
+      };
+      var isRefreshingSomeArea = true;
+      if (this._checkPopoverAreaEqual(this._popoverArea, id)) {
+        this._popoverArea = areaWithId;
+      } else if (this._checkPopoverAreaEqual(this._subPopoverArea, id)) {
+        this._subPopoverArea = areaWithId;
+      } else if (this._checkPopoverAreaEqual(this._tertiaryPopoverArea, id)) {
+        this._tertiaryPopoverArea = areaWithId;
+      } else if (this._checkPopoverAreaEqual(this._quaternaryPopoverArea, id)) {
+        this._quaternaryPopoverArea = areaWithId;
+      } else {
+        isRefreshingSomeArea = false;
+      }
+      if (isRefreshingSomeArea) {
+        this._updateDetectAreas();
+        return;
+      }
+      if (!this._checkPopoverAreaExist(this._popoverArea)) {
+        this._popoverArea = areaWithId;
+      } else if (!this._checkPopoverAreaExist(this._subPopoverArea)) {
+        this._subPopoverArea = areaWithId;
+      } else if (!this._checkPopoverAreaExist(this._tertiaryPopoverArea)) {
+        this._tertiaryPopoverArea = areaWithId;
+      } else if (!this._checkPopoverAreaExist(this._quaternaryPopoverArea)) {
+        this._quaternaryPopoverArea = areaWithId;
+      } else {
+        // popver 超过设计的最大层级
+        this.logger.error('popover limit exceeded');
+      }
+      this._updateDetectAreas();
     }
   }, {
-    key: "setControlBarContentArea",
-    value: function setControlBarContentArea(area) {
-      var id = 'control-bar-content-area';
-      this.setArea(id, area);
+    key: "resetPopoverArea",
+    value: function resetPopoverArea(id) {
+      var area = {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        id: undefined
+      };
+      if (this._checkPopoverAreaEqual(this._quaternaryPopoverArea, id)) {
+        this._quaternaryPopoverArea = area;
+      } else if (this._checkPopoverAreaEqual(this._tertiaryPopoverArea, id)) {
+        this._tertiaryPopoverArea = area;
+      } else if (this._checkPopoverAreaEqual(this._subPopoverArea, id)) {
+        this._subPopoverArea = area;
+      } else if (this._checkPopoverAreaEqual(this._popoverArea, id)) {
+        this._popoverArea = area;
+      } else {
+        this.logger.error('popover limit exceeded');
+      }
+      this._updateDetectAreas();
     }
   }, {
     key: "handleLeaveRoom",
@@ -736,18 +851,16 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
           this.handleLeaveRoom();
           break;
         case _enums.MoreAction.COPY_INVITE_LINK:
-          (0, _browserApi.copyText)(this.playUrl).then(function () {
+          (0, _copyText.copyText)(this.playUrl).then(function () {
             _this2.showToast({
-              type: 'info',
-              content: (0, _i18n.transI18n)('fmt_statusbar_status_coppied')
+              key: _type5.FcrUIToastKey.FMT_STATUSBAR_STATUS_COPPIED
             });
           });
           break;
         case _enums.MoreAction.COPY_MEETING_INFO:
-          (0, _browserApi.copyText)(this.roomDetailCopyText).then(function () {
+          (0, _copyText.copyText)(this.roomDetailCopyText).then(function () {
             _this2.showToast({
-              type: 'info',
-              content: (0, _i18n.transI18n)('fmt_meeting_mainwindow_topbar_left_popup_toast_copy_done')
+              key: _type5.FcrUIToastKey.FMT_MEETING_MAINWINDOW_TOPBAR_LEFT_POPUP_TOAST_COPY_DONE
             });
           });
           break;
@@ -768,10 +881,28 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
     value: function setAppActionbarPopoverVisible(visible) {
       this.appActionbarPopoverVisible = visible;
     }
+  }, {
+    key: "_updateDetectAreas",
+    value: function _updateDetectAreas() {
+      this._mouseDetectProvider.setDetectArea(_struct.FcrUIDetectAreaID.ControlBar, [this._stateNavArea, this._contentArea, this._popoverArea, this._subPopoverArea, this._tertiaryPopoverArea, this._quaternaryPopoverArea]);
+    }
+  }, {
+    key: "_checkPopoverAreaExist",
+    value: function _checkPopoverAreaExist(area, areaId) {
+      if (area.id === undefined && (area.width === 0 || area.height === 0)) {
+        return false;
+      }
+      return true;
+    }
+  }, {
+    key: "_checkPopoverAreaEqual",
+    value: function _checkPopoverAreaEqual(area, areaId) {
+      return area.id === areaId;
+    }
   }]);
 }();
 _ControlBarStore = ControlBarStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ControlBarStore, [[_mobx.observable, 1, "roomDuration"], [_mobx.observable, 1, "startTime"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "playUrl"], [_mobx.observable, 1, "liveStreamingState"], [_mobx.observable, 1, "allApplicationWindows"], [_mobx.observable, 1, "boardOwnerUser"], [_mobx.observable, 1, "currentShareDisplayId"], [_mobx.observable, 1, "position"], [_mobx.observable, 1, "appActionbarPopoverVisible"], [_mobx.computed, 3, "hasEndRoomPermission"], [_mobx.computed, 3, "hasGetLiveStreamingUrlPermission"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStartLiveStreamingPermission"], [_mobx.computed, 3, "hasChatPermission"], [_mobx.computed, 3, "liveStreamingButtonVisible"], [_mobx.computed, 3, "recordingButtonVisible"], [_mobx.computed, 3, "isConnecting"], [_setCheckedStateMapDecs, 18, "setCheckedStateMap"], [_decorator.bound, 2, "setShareWithAudioState"], [_decorator.bound, 2, "setShareInSmoothMode"], [_showLockedRoomToastDecs, 18, "showLockedRoomToast"], [_handleNewShareDecs, 18, "handleNewShare"], [_handlerStopShareDecs, 18, "handlerStopShare"], [_decorator.bound, 2, "handleMouseEnter"], [_decorator.bound, 2, "handleMouseLeave"], [_decorator.bound, 2, "openLiveStreamingDialog"], [_decorator.bound, 2, "setShareAudioMode"], [_pauseCloudRecordingDecs, 2, "pauseCloudRecording"], [_resumeCloudRecordingDecs, 2, "resumeCloudRecording"], [_stopCloudRecordingDecs, 2, "stopCloudRecording"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "startLiveStreaming"], [_decorator.bound, 2, "stopLiveStreaming"], [_showToastDecs, 18, "showToast"], [_decorator.bound, 2, "handleOpenParticipant"], [_decorator.bound, 2, "handleOpenLiveStreaming"], [_decorator.bound, 2, "setEnableWaitingRoom"], [_decorator.bound, 2, "getLocalMeetingTime"], [[_decorator.bound, _decorator.trace], 2, "setArea"], [[_decorator.bound, _decorator.trace], 2, "removeArea"], [_decorator.bound, 2, "setStateNavArea"], [_decorator.bound, 2, "setControlBarContentArea"], [_handleLeaveRoomDecs, 18, "handleLeaveRoom"], [_closeLeaveMeetingDialogDecs, 18, "closeLeaveMeetingDialog"], [_handleMoreClickDecs, 18, "handleMoreClick"], [[_decorator.trace, _decorator.bound], 2, "updateWindowBounds"], [_setAppActionbarPopoverVisibleDecs, 18, "setAppActionbarPopoverVisible"]], []).e, 11);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ControlBarStore, [[_mobx.observable, 1, "roomDuration"], [_mobx.observable, 1, "startTime"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "playUrl"], [_mobx.observable, 1, "liveStreamingState"], [_mobx.observable, 1, "allApplicationWindows"], [_mobx.observable, 1, "boardOwnerUser"], [_mobx.observable, 1, "currentShareDisplayId"], [_mobx.observable, 1, "position"], [_mobx.observable, 1, "appActionbarPopoverVisible"], [_mobx.computed, 3, "hasEndRoomPermission"], [_mobx.computed, 3, "hasGetLiveStreamingUrlPermission"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStartLiveStreamingPermission"], [_mobx.computed, 3, "hasChatPermission"], [_mobx.computed, 3, "liveStreamingButtonVisible"], [_mobx.computed, 3, "recordingButtonVisible"], [_mobx.computed, 3, "isConnecting"], [_setCheckedStateMapDecs, 18, "setCheckedStateMap"], [_decorator.bound, 2, "setShareWithAudioState"], [_decorator.bound, 2, "setShareInSmoothMode"], [_decorator.bound, 2, "showLockedRoomToast"], [_decorator.bound, 2, "handleNewShare"], [_decorator.bound, 2, "handlerStopShare"], [_decorator.bound, 2, "toggleAnnotation"], [_decorator.bound, 2, "allowWriteAnnotation"], [_decorator.bound, 2, "clearAnnotation"], [_decorator.bound, 2, "handleMouseEnter"], [_decorator.bound, 2, "handleMouseLeave"], [_decorator.bound, 2, "openLiveStreamingDialog"], [_decorator.bound, 2, "setShareAudioMode"], [_pauseCloudRecordingDecs, 2, "pauseCloudRecording"], [_resumeCloudRecordingDecs, 2, "resumeCloudRecording"], [_stopCloudRecordingDecs, 2, "stopCloudRecording"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "startLiveStreaming"], [_decorator.bound, 2, "stopLiveStreaming"], [_showToastDecs, 18, "showToast"], [_decorator.bound, 2, "handleOpenParticipant"], [_decorator.bound, 2, "handleOpenLiveStreaming"], [_decorator.bound, 2, "setEnableWaitingRoom"], [_decorator.bound, 2, "getLocalMeetingTime"], [[_decorator.bound, _decorator.trace], 2, "setStateNavArea"], [[_decorator.bound, _decorator.trace], 2, "setControlBarContentArea"], [[_decorator.bound, _decorator.trace], 2, "setPopoverArea"], [[_decorator.bound, _decorator.trace], 2, "resetPopoverArea"], [_handleLeaveRoomDecs, 18, "handleLeaveRoom"], [_closeLeaveMeetingDialogDecs, 18, "closeLeaveMeetingDialog"], [_handleMoreClickDecs, 18, "handleMoreClick"], [[_decorator.trace, _decorator.bound], 2, "updateWindowBounds"], [_setAppActionbarPopoverVisibleDecs, 18, "setAppActionbarPopoverVisible"]], []).e, 11);
 _init_roomDuration = _applyDecs$e[0];
 _init_startTime = _applyDecs$e[1];
 _init_cloudRecordingState = _applyDecs$e[2];

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

@@ -58,6 +58,7 @@ var _carmera = require("./components/carmera");
 var _boundaryDetector = require("./components/boundary-detector");
 var _appsPopover = require("./components/apps-popover");
 var _hooks = require("./hooks");
+var _annotationButton = require("./components/annotation-button");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -294,8 +295,8 @@ var ControlBar = (0, _mobxReact.observer)(function () {
     draggableArea = _useContext5.draggableArea,
     currentShareDisplayId = _useContext5.currentShareDisplayId,
     updateWindowBounds = _useContext5.updateWindowBounds,
-    setArea = _useContext5.setArea,
-    removeArea = _useContext5.removeArea;
+    setPopoverArea = _useContext5.setPopoverArea,
+    resetPopoverArea = _useContext5.resetPopoverArea;
   var updatePosition = (0, _react.useContext)(_context.DragStateUpdaterContext);
   var _useContext6 = (0, _react.useContext)(_context.ControlBarCalculationUpdaterContext),
     setDimensions = _useContext6.setDimensions,
@@ -352,7 +353,7 @@ var ControlBar = (0, _mobxReact.observer)(function () {
       };
     }
   }, [visibility]);
-  (0, _hooks.usePopoverWatcher)(containerRef, setArea, removeArea);
+  (0, _hooks.usePopoverWatcher)(containerRef, setPopoverArea, resetPopoverArea);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: containerRef,
     className: rootClassNames,
@@ -456,7 +457,7 @@ var MeetingControlGroup = (0, _mobxReact.observer)(function () {
         margin: '0 8px',
         height: '20px'
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShareScreenSection, {}), liveStreamingButtonVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_stopLiveStreaming.StopLiveStreamingButton, {}), recordingButtonVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cloudRecordingButtons.CloudRecordingButtons, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(MoreActionsSection, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShareScreenSection, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnnotationSection, {}), liveStreamingButtonVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_stopLiveStreaming.StopLiveStreamingButton, {}), recordingButtonVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cloudRecordingButtons.CloudRecordingButtons, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(MoreActionsSection, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
       style: {
         margin: '0 8px',
         height: '20px'
@@ -484,6 +485,7 @@ var SecurityMenuSection = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
     }
   }, [isShareActionNavHidden]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    overlayClassName: "share-action-nav__security-popover",
     showArrow: false,
     mouseEnterDelay: 0,
     overlayInnerStyle: {
@@ -524,22 +526,53 @@ var ShareScreenSection = /*#__PURE__*/(0, _react.memo)(function () {
   });
 });
 
-// 更多操作区块
-var MoreActionsSection = (0, _mobxReact.observer)(function () {
+// 开启批注区块
+var AnnotationSection = (0, _mobxReact.observer)(function () {
+  var _useContext11 = (0, _react.useContext)(_store.StoreContext),
+    toggleAnnotation = _useContext11.toggleAnnotation,
+    allowWriteAnnotation = _useContext11.allowWriteAnnotation,
+    clearAnnotation = _useContext11.clearAnnotation,
+    isWriteAnnotationAllowed = _useContext11.isWriteAnnotationAllowed,
+    hasPermissionAllowWriteAnnotation = _useContext11.hasPermissionAllowWriteAnnotation,
+    hasAnnotationStartPermission = _useContext11.hasAnnotationStartPermission;
+  var _useContext12 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext12.isShareActionNavHidden;
   var _useState11 = (0, _react.useState)(false),
     _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    moreVisible = _useState12[0],
-    setMoreVisible = _useState12[1];
+    visible = _useState12[0],
+    setVisible = _useState12[1];
+  (0, _react.useEffect)(function () {
+    if (isShareActionNavHidden) {
+      setVisible(false);
+    }
+  }, [isShareActionNavHidden]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_annotationButton.AnnotationButton, {
+    onAllowWriteClick: allowWriteAnnotation,
+    onCleanAnnotationClick: clearAnnotation,
+    onAnnotationButtonClick: toggleAnnotation,
+    isWriteAllowed: isWriteAnnotationAllowed,
+    haPermissionAllowWrite: hasPermissionAllowWriteAnnotation,
+    visible: visible,
+    setVisible: setVisible
+  });
+});
+
+// 更多操作区块
+var MoreActionsSection = (0, _mobxReact.observer)(function () {
   var _useState13 = (0, _react.useState)(false),
     _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-    isShowMeetingDetailPortal = _useState14[0],
-    setIsShowMeetingDetailPortal = _useState14[1];
-  var _useContext11 = (0, _react.useContext)(_store.StoreContext),
-    newMessageCount = _useContext11.newMessageCount,
-    hasChatPermission = _useContext11.hasChatPermission,
-    setAppActionbarPopoverVisible = _useContext11.setAppActionbarPopoverVisible;
-  var _useContext12 = (0, _react.useContext)(_context.ControlBarCalculationContext),
-    isShareActionNavHidden = _useContext12.isShareActionNavHidden;
+    moreVisible = _useState14[0],
+    setMoreVisible = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+    isShowMeetingDetailPortal = _useState16[0],
+    setIsShowMeetingDetailPortal = _useState16[1];
+  var _useContext13 = (0, _react.useContext)(_store.StoreContext),
+    newMessageCount = _useContext13.newMessageCount,
+    hasChatPermission = _useContext13.hasChatPermission,
+    setAppActionbarPopoverVisible = _useContext13.setAppActionbarPopoverVisible;
+  var _useContext14 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext14.isShareActionNavHidden;
   (0, _react.useEffect)(function () {
     if (!moreVisible) {
       setIsShowMeetingDetailPortal(false);
@@ -585,17 +618,17 @@ var MoreActionsSection = (0, _mobxReact.observer)(function () {
 
 // 音频分享区块
 var ShareAudioSection = (0, _mobxReact.observer)(function () {
-  var _useContext13 = (0, _react.useContext)(_store.StoreContext),
-    setShareWithAudioState = _useContext13.setShareWithAudioState,
-    isSharingWithAudio = _useContext13.isSharingWithAudio,
-    setShareAudioMode = _useContext13.setShareAudioMode,
-    audioShareMode = _useContext13.audioShareMode;
-  var _useContext14 = (0, _react.useContext)(_context.ControlBarCalculationContext),
-    isShareActionNavHidden = _useContext14.isShareActionNavHidden;
-  var _useState15 = (0, _react.useState)(false),
-    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-    popoverVisible = _useState16[0],
-    setPopoverVisible = _useState16[1];
+  var _useContext15 = (0, _react.useContext)(_store.StoreContext),
+    setShareWithAudioState = _useContext15.setShareWithAudioState,
+    isSharingWithAudio = _useContext15.isSharingWithAudio,
+    setShareAudioMode = _useContext15.setShareAudioMode,
+    audioShareMode = _useContext15.audioShareMode;
+  var _useContext16 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext16.isShareActionNavHidden;
+  var _useState17 = (0, _react.useState)(false),
+    _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
+    popoverVisible = _useState18[0],
+    setPopoverVisible = _useState18[1];
   (0, _react.useEffect)(function () {
     if (isShareActionNavHidden) {
       setPopoverVisible(false);
@@ -613,19 +646,19 @@ var ShareAudioSection = (0, _mobxReact.observer)(function () {
 
 // 分享状态导航（控制栏下部）
 var ShareStateNavigation = /*#__PURE__*/(0, _react.memo)(function () {
-  var _useContext15 = (0, _react.useContext)(_store.StoreContext),
-    handlerStopShare = _useContext15.handlerStopShare,
-    handleMouseEnter = _useContext15.handleMouseEnter,
-    handleMouseLeave = _useContext15.handleMouseLeave,
-    setStateNavArea = _useContext15.setStateNavArea;
+  var _useContext17 = (0, _react.useContext)(_store.StoreContext),
+    handlerStopShare = _useContext17.handlerStopShare,
+    handleMouseEnter = _useContext17.handleMouseEnter,
+    handleMouseLeave = _useContext17.handleMouseLeave,
+    setStateNavArea = _useContext17.setStateNavArea;
   var calculation = (0, _react.useContext)(_context.ControlBarCalculationContext);
-  var _useContext16 = (0, _react.useContext)(_context.ControlBarCalculationUpdaterContext),
-    setIsShareActionNavHidden = _useContext16.setIsShareActionNavHidden,
-    setNavPosition = _useContext16.setNavPosition,
-    moveBottom = _useContext16.moveBottom,
-    moveTop = _useContext16.moveTop,
-    restartActiveTask = _useContext16.restartActiveTask,
-    cancelActiveTask = _useContext16.cancelActiveTask;
+  var _useContext18 = (0, _react.useContext)(_context.ControlBarCalculationUpdaterContext),
+    setIsShareActionNavHidden = _useContext18.setIsShareActionNavHidden,
+    setNavPosition = _useContext18.setNavPosition,
+    moveBottom = _useContext18.moveBottom,
+    moveTop = _useContext18.moveTop,
+    restartActiveTask = _useContext18.restartActiveTask,
+    cancelActiveTask = _useContext18.cancelActiveTask;
 
   // 从store获取当前位置和相关方法
   var navCurrentPosition = calculation.navPosition; // 从store获取

package/lib/modules/device-pretest/audio-preview/microphone-detection.js

@@ -7,14 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MicrophoneDetection = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _select = require("agora-ui-foundation/lib/components/select");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _button = require("agora-ui-foundation/lib/components/button");
 var _mobxReact = require("mobx-react");
-var _useNamespace = require("../../../utilities/useNamespace");
+var _useNamespace = require("agora-ui-foundation/lib/utilities/use-namespace");
 var _jsxRuntime = require("react/jsx-runtime");
 var MicrophoneDetection = exports.MicrophoneDetection = (0, _mobxReact.observer)(function (_ref) {
   var microphoneDeviceId = _ref.microphoneDeviceId,
@@ -26,10 +25,6 @@ var MicrophoneDetection = exports.MicrophoneDetection = (0, _mobxReact.observer)
     microphoneDetecting = _ref.microphoneDetecting;
   var ns = (0, _useNamespace.useNamespace)('microphone-detection');
   var t = (0, _i18n.useI18n)();
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isDetecting = _useState2[0],
-    setIsDetecting = _useState2[1];
   (0, _react.useEffect)(function () {
     return function () {
       stopMicrophoneTest();
@@ -49,11 +44,10 @@ var MicrophoneDetection = exports.MicrophoneDetection = (0, _mobxReact.observer)
       trigger: "hover",
       placement: "top",
       mouseEnterDelay: 0.2,
-      content: t(disabled ? 'fmt_settings_popup_disable_while_speaker_detected' : isDetecting ? 'fmt_setting_tips_mic' : 'fmt_premeeting_setting_label_speak_into_your_microphone'),
+      content: t(disabled ? 'fmt_settings_popup_disable_while_speaker_detected' : microphoneDetecting ? 'fmt_setting_tips_mic' : 'fmt_premeeting_setting_label_speak_into_your_microphone'),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
         onClick: function onClick() {
-          setIsDetecting(!isDetecting);
-          if (isDetecting) {
+          if (microphoneDetecting) {
             stopMicrophoneTest();
           } else {
             startMicrophoneTest();

package/lib/modules/device-pretest/audio-preview/speaker-detection.js

@@ -14,7 +14,7 @@ var _select = require("agora-ui-foundation/lib/components/select");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _button = require("agora-ui-foundation/lib/components/button");
 var _mobxReact = require("mobx-react");
-var _useNamespace = require("../../../utilities/useNamespace");
+var _useNamespace = require("agora-ui-foundation/lib/utilities/use-namespace");
 var _jsxRuntime = require("react/jsx-runtime");
 var SpeakerDetection = exports.SpeakerDetection = (0, _mobxReact.observer)(function (_ref) {
   var speakerDeviceId = _ref.speakerDeviceId,