fcr-ui-scene 3.8.2 → 3.9.0-alpha

package/lib-es/modules/connection-gateway/store.js

@@ -88,13 +88,13 @@ import { createContext } from 'react';
 import { bound } from 'agora-foundation/lib/decorator';
 import { FcrRoomConnectorSessionReason, FcrRoomConnectorSessionState } from 'fcr-core/lib/room-control/room-connector-control/type';
 import isEqual from 'lodash/isEqual';
-import { storage } from '../../utilities/tools';
-import { transI18n } from 'agora-ui-foundation/lib/i18n';
+import { storage } from 'agora-foundation/lib/utilities/tools';
 import { FcrUIConnectType } from '../../type';
 import { FcrUIDialogKey, FcrUIHighlightElement } from '../../utilities/constant';
 import { ConnectorRegion } from './enums';
 import { FcrUIObjectKeys } from '../../object-manager';
 import { DeviceSettingTab } from '../setting/type';
+import { FcrUIToastKey } from '../../modules/toast-manager/type';
 var _A = /*#__PURE__*/new WeakMap();
 var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
@@ -429,9 +429,8 @@ var ConnectionGatewayStore = /*#__PURE__*/function () {
               _context3.next = 1;
               return this._roomControl.getRoomConnectorControl().stopSession(this.connectSession.sessionId);
             case 1:
-              this._messageProvider.showToast({
-                type: 'normal',
-                message: transI18n('fmt_PSTN_status_hungup')
+              this._messageProvider.showToastByKey({
+                key: FcrUIToastKey.FMT_PSTN_STATUS_HUNGUP
               });
             case 2:
             case "end":
@@ -594,9 +593,8 @@ var ConnectionGatewayStore = /*#__PURE__*/function () {
       switch (reason) {
         case FcrRoomConnectorSessionReason.ACCEPTED:
           // 已接听
-          this._messageProvider.showToast({
-            type: 'normal',
-            message: transI18n('fmt_PSTN_status_voiceconnected')
+          this._messageProvider.showToastByKey({
+            key: FcrUIToastKey.FMT_PSTN_STATUS_VOICECONNECTED
           });
           this.closeConnectionDialog();
           this._accepted = true;

package/lib-es/modules/control-bar/components/annotation-button/index.js

@@ -0,0 +1,43 @@
+import { FrcTooltipButton } from 'agora-ui-foundation/lib/components/tooltips-button';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import AnnotationMenu from '../../../components/annotation-menu';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var AnnotationButton = function AnnotationButton(_ref) {
+  var onAnnotationButtonClick = _ref.onAnnotationButtonClick,
+    onCleanAnnotationClick = _ref.onCleanAnnotationClick,
+    onAllowWriteClick = _ref.onAllowWriteClick,
+    isWriteAllowed = _ref.isWriteAllowed,
+    haPermissionAllowWrite = _ref.haPermissionAllowWrite,
+    visible = _ref.visible,
+    setVisible = _ref.setVisible;
+  var transI18n = useI18n();
+  return /*#__PURE__*/_jsx(FrcTooltipButton, {
+    active: visible,
+    tooltip: {
+      content: transI18n('fmt_screenshare_controlbar_button_annotations'),
+      icon: {
+        type: FcrIconType.FCR_RENAME,
+        size: 32,
+        colors: {
+          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+        }
+      }
+    },
+    withPopover: true,
+    popover: {
+      content: /*#__PURE__*/_jsx(AnnotationMenu, {
+        className: "fcr-control-bar-annotation-menu",
+        allowAnnotationWriteState: isWriteAllowed,
+        hasAnnotationAllowWritePermission: haPermissionAllowWrite,
+        setAllowAnnotationWrite: onAllowWriteClick,
+        onCleanAnnotationClick: onCleanAnnotationClick
+      }),
+      onVisibleChange: function onVisibleChange(visible) {
+        setVisible(visible);
+      },
+      visible: visible
+    },
+    onTooltipButtonClick: onAnnotationButtonClick
+  });
+};

package/lib-es/modules/control-bar/components/apps-popover/index.css

@@ -0,0 +1,3 @@
+.share-action-nav__apps-popover {
+  max-width: 374px;
+}

package/lib-es/modules/control-bar/components/apps-popover/index.js

@@ -3,6 +3,7 @@ import { AppList } from '../../../components/apps/app-list';
 import { StoreContext } from '../../store';
 import { useContext } from 'react';
 import { observer } from 'mobx-react';
+import './index.css';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var AppsPopover = observer(function (props) {
   var _useContext = useContext(StoreContext),
@@ -11,6 +12,7 @@ export var AppsPopover = observer(function (props) {
     setAppActionbarPopoverVisible = _useContext.setAppActionbarPopoverVisible;
   var children = props.children;
   return /*#__PURE__*/_jsx(FcrPopover, {
+    overlayClassName: "share-action-nav__apps-popover",
     trigger: "click",
     showArrow: false,
     content: /*#__PURE__*/_jsx(AppList, {

package/lib-es/modules/control-bar/components/carmera/index.js

@@ -28,7 +28,7 @@ export var CameraControl = observer(function () {
     iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
   };
   var icon = cameraEnabled ? FcrIconType.FCR_CAMERA : FcrIconType.FCR_CAMERAOFF;
-  var title = cameraEnabled ? transI18n('fmt_device_label_video_start') : transI18n('fmt_device_label_video_stop');
+  var title = cameraEnabled ? transI18n('fmt_device_label_video_stop') : transI18n('fmt_device_label_video_start');
   var noCam = cameraList.length === 0;
   var noCamColor = {
     iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",

package/lib-es/modules/control-bar/components/meeting-details/index.js

@@ -6,14 +6,15 @@ import { FcrButton } from 'agora-ui-foundation/lib/components/button';
 import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
 import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
 import { useI18n } from 'agora-ui-foundation/lib/i18n';
-import { renderMeetingId } from '../../../../utilities/tools';
+import { renderMeetingId } from 'agora-foundation/lib/utilities/tools';
 import { observer } from 'mobx-react';
 import { useContext, useEffect, useMemo, useState } from 'react';
 import './index.css';
 import classNames from 'classnames';
 import { StoreContext } from '../../store';
 import { CopyState } from '../../enums';
-import { copyText } from '../../../../utilities/browser-api';
+import { copyText } from 'agora-ui-foundation/lib/utilities/copy-text';
+import { FcrUIToastKey } from '../../../../modules/toast-manager/type';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var MeetingDetails = observer(function () {
   var t = useI18n();
@@ -51,39 +52,33 @@ export var MeetingDetails = observer(function () {
     var content = meetingId ? copyContent : copyContent.replace(/\s+/g, '');
     copyText(content).then(function () {
       showToast({
-        type: 'info',
-        content: t('fmt_statusbar_status_coppied')
+        key: FcrUIToastKey.FMT_STATUSBAR_STATUS_COPPIED
       });
     })["catch"](function () {
       showToast({
-        type: 'warn',
-        content: t('fmt_information_tips_numbercopyfailed')
+        key: FcrUIToastKey.FMT_INFORMATION_TIPS_NUMBERCOPYFAILED
       });
     });
   }
   function handlerCopyMeetingShareLink(shareLink) {
     copyText(shareLink).then(function () {
       showToast({
-        type: 'info',
-        content: t('fmt_additional_tips_invitation')
+        key: FcrUIToastKey.FMT_ADDITIONAL_TIPS_INVITATION
       });
     })["catch"](function () {
       showToast({
-        type: 'warn',
-        content: t('fmt_additional_tips_invitationfailed')
+        key: FcrUIToastKey.FMT_ADDITIONAL_TIPS_INVITATIONFAILED
       });
     });
   }
   function handleCopyMeetingPassword(password) {
     copyText(password).then(function () {
       showToast({
-        type: 'info',
-        content: t('fmt_uimanager_tips_passwordcopied')
+        key: FcrUIToastKey.FMT_UIMANAGER_TIPS_PASSWORDCOPIED
       });
     })["catch"](function () {
       showToast({
-        type: 'warn',
-        content: t('fmt_settings_tips_passwordcopyfailed')
+        key: FcrUIToastKey.FMT_SETTINGS_TIPS_PASSWORDCOPYFAILED
       });
     });
   }
@@ -109,8 +104,7 @@ export var MeetingDetails = observer(function () {
       }, 1500);
     })["catch"](function () {
       showToast({
-        type: 'warn',
-        content: t('fmt_sharing_tips_copyfull_failed')
+        key: FcrUIToastKey.FMT_SHARING_TIPS_COPYFULL_FAILED
       });
     });
   }

package/lib-es/modules/control-bar/components/microphone/index.js

@@ -65,10 +65,10 @@ export var MicrophoneControl = observer(function () {
   var transI18n = useI18n();
   var microphoneStateMapToTitle = useMemo(function () {
     if (microphoneState === FcrUIMicrophoneState.UNMUTE) {
-      return transI18n('fmt_device_label_audio_unmute');
+      return transI18n('fmt_device_label_audio_mute');
     }
     if (microphoneState === FcrUIMicrophoneState.MUTE) {
-      return transI18n('fmt_device_label_audio_mute');
+      return transI18n('fmt_device_label_audio_unmute');
     } else {
       return transI18n('fmt_audio_popup_button_turning_on');
     }

package/lib-es/modules/control-bar/hooks.js

@@ -125,7 +125,7 @@ export var usePopoverWatcher = function usePopoverWatcher(containerRef, setArea,
               return;
             }
           } else {
-            popoverElementId = "".concat(popoverClassName, "-").concat(Date.now(), "-").concat(countNum++, "}");
+            popoverElementId = "".concat(popoverClassName, "-").concat(Date.now(), "-").concat(countNum++);
             popover.setAttribute('data-popover-id', popoverElementId);
           }
           popoverObservers.set(popoverElementId, handlePositionChange(popover, function (rect) {

package/lib-es/modules/control-bar/index.css

@@ -338,3 +338,14 @@
 .fcr-control-bar .fcr-tooltip {
   max-width: 300px;
 }
+
+.share-action-nav__security-popover {
+  max-width: 300px;
+}
+
+.security-menu.fcr-control-bar-annotation-menu {
+  box-shadow: none;
+  background-color: none;
+  border-radius: none;
+  border: none;
+}

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

@@ -4,6 +4,7 @@ import "core-js/modules/es.symbol.to-primitive.js";
 import "core-js/modules/es.error.cause.js";
 import "core-js/modules/es.error.to-string.js";
 import "core-js/modules/es.array.is-array.js";
+import "core-js/modules/es.array.push.js";
 import "core-js/modules/es.date.to-primitive.js";
 import "core-js/modules/es.function.bind.js";
 import "core-js/modules/es.function.name.js";
@@ -34,18 +35,15 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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;
-import "core-js/modules/es.array.filter.js";
+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;
 import "core-js/modules/es.array.for-each.js";
 import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.array.iterator.js";
-import "core-js/modules/es.array.push.js";
 import "core-js/modules/es.date.to-string.js";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/es.weak-map.js";
 import "core-js/modules/esnext.iterator.constructor.js";
-import "core-js/modules/esnext.iterator.filter.js";
 import "core-js/modules/esnext.iterator.for-each.js";
 import "core-js/modules/esnext.weak-map.delete-all.js";
 import "core-js/modules/esnext.weak-map.emplace.js";
@@ -67,7 +65,6 @@ import { bound, debounced, trace } from 'agora-foundation/lib/decorator';
 import { FcrLiveStreamingState, FcrRecordingState } from 'fcr-core/lib/type';
 import { createContext } from 'react';
 import { FcrUIDialogKey } from '../../utilities/constant';
-import { transI18n } from 'agora-ui-foundation/lib/i18n';
 import { createLogger } from '../../utilities/logger';
 import { FcrUIObjectKeys } from '../../object-manager';
 import { getInvitationInfoByRoomInfo } from '../../utilities/meeting-detail';
@@ -75,10 +72,13 @@ import { AudioProcessingChannel } from './components/share-audio';
 import { FcrUIRoomType } from '../../type';
 import { MoreAction } from './enums';
 import { cloudRecordingConfig } from '../../utilities/default-config';
-import { copyText } from '../../utilities/browser-api';
-import { windowConfig } from '../dialog/dialogs/control-bar';
-import { isMac, isWindows } from '../../utilities/platform';
+import { copyText } from 'agora-ui-foundation/lib/utilities/copy-text';
+import { electronWindowConfig as controlBarWindowConfig } from '../dialog/dialogs/control-bar';
+import { isWindows, isMac } from 'agora-foundation/lib/utilities/env';
 import { FcrUIDetectAreaID } from '../../providers/mouse-detect/struct';
+import { FcrSharePermissionState } from 'fcr-core/lib/room-control/sharing-control/type';
+import { WhiteboardToolAction } from '../secondary-window/type';
+import { FcrUIToastKey } from '../../modules/toast-manager/type';
 var _F = /*#__PURE__*/new WeakMap();
 var _G = /*#__PURE__*/new WeakMap();
 var _H = /*#__PURE__*/new WeakMap();
@@ -94,7 +94,7 @@ var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
 var _D = /*#__PURE__*/new WeakMap();
 var _E = /*#__PURE__*/new WeakMap();
-_ref = (_setCheckedStateMapDecs = [action, action.bound], _showLockedRoomToastDecs = [action, action.bound], _handleNewShareDecs = [action, action.bound], _handlerStopShareDecs = [action, action.bound], _pauseCloudRecordingDecs = [bound, debounced(500, {
+_ref = (_setCheckedStateMapDecs = [action, action.bound], _pauseCloudRecordingDecs = [bound, debounced(500, {
   leading: true
 })], _resumeCloudRecordingDecs = [bound, debounced(500, {
   leading: true
@@ -164,6 +164,9 @@ var ControlBarStore = /*#__PURE__*/function () {
       onMouseEnterDetectArea: function onMouseEnterDetectArea(areaId) {
         if (areaId === FcrUIDetectAreaID.ControlBar) {
           _this._controlBarWindow.setIgnoreMouseEvents(false);
+          if (isWindows()) {
+            _this._controlBarWindow.focus();
+          }
         }
       },
       onMouseLeaveDetectArea: function onMouseLeaveDetectArea(areaId) {
@@ -174,6 +177,46 @@ var ControlBarStore = /*#__PURE__*/function () {
         }
       }
     });
+    _defineProperty(this, "_stateNavArea", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    _defineProperty(this, "_contentArea", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    // popover 菜单区域
+    _defineProperty(this, "_popoverArea", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    // popover 二级菜单区域
+    _defineProperty(this, "_subPopoverArea", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    // popover 三极菜单区域
+    _defineProperty(this, "_tertiaryPopoverArea", {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    });
+    // popover 四级菜单区域
+    _defineProperty(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, FcrRecordingState.Stopped));
@@ -207,9 +250,10 @@ var ControlBarStore = /*#__PURE__*/function () {
     this._dialogProvider = objectManager.getObject(FcrUIObjectKeys.P_DIALOG_PROVIDER);
     this._sharedLayoutDataSource = objectManager.getObject(FcrUIObjectKeys.S_SHARED_LAYOUT_DATA_SOURCE);
     this._mouseDetectProvider = objectManager.getObject(FcrUIObjectKeys.P_MOUSE_DETECT_PROVIDER);
+    this._annotationProvider = objectManager.getObject(FcrUIObjectKeys.P_ANNOTATION_PROVIDER);
     this._renderer = objectManager.getObject(FcrUIObjectKeys.RENDERER_WRAPPER);
     var windowProvider = objectManager.getObject(FcrUIObjectKeys.P_WINDOW_PROVIDER);
-    windowProvider.setWindowOptions(FcrUIDialogKey.SHARE_SCREEN_CONTROL_BAR, windowConfig);
+    windowProvider.setWindowOptions(FcrUIDialogKey.SHARE_SCREEN_CONTROL_BAR, controlBarWindowConfig);
     this._controlBarWindow = windowProvider.getWindowById(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();
@@ -366,11 +410,6 @@ var ControlBarStore = /*#__PURE__*/function () {
     set: function set(v) {
       _classPrivateFieldSet(_E, this, v);
     }
-  }, {
-    key: "_detectAreas",
-    value: function _detectAreas() {
-      return this._mouseDetectProvider.getDetectAreas(FcrUIDetectAreaID.ControlBar);
-    }
   }, {
     key: "isSharingWithAudio",
     get: function get() {
@@ -462,9 +501,19 @@ var ControlBarStore = /*#__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",
@@ -533,9 +582,8 @@ var ControlBarStore = /*#__PURE__*/function () {
   }, {
     key: "showLockedRoomToast",
     value: function showLockedRoomToast(enable) {
-      this._messageProvider.showToast({
-        type: 'info',
-        message: enable ? transI18n('fmt_security_tips_lock_meeting_on') : transI18n('fmt_uimanager_tips_meetingunlocked')
+      this.showToast({
+        key: enable ? FcrUIToastKey.FMT_SECURITY_TIPS_LOCK_MEETING_ON : FcrUIToastKey.FMT_UIMANAGER_TIPS_MEETINGUNLOCKED
       });
     }
   }, {
@@ -548,6 +596,28 @@ var ControlBarStore = /*#__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 ? FcrSharePermissionState.ON : FcrSharePermissionState.OFF;
+      this._privilegeProvider.allowWriteAnnotation(allow);
+    }
+  }, {
+    key: "clearAnnotation",
+    value: function clearAnnotation() {
+      this._annotationProvider.getStandaloneToolbarControl().setWhiteboardTool({
+        action: WhiteboardToolAction.CLEAR
+      });
+    }
   }, {
     key: "handleMouseEnter",
     value: function handleMouseEnter() {
@@ -607,11 +677,7 @@ var ControlBarStore = /*#__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",
@@ -648,40 +714,89 @@ var ControlBarStore = /*#__PURE__*/function () {
       this._mouseDetectProvider.deleteDetectArea(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(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(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",
@@ -732,16 +847,14 @@ var ControlBarStore = /*#__PURE__*/function () {
         case MoreAction.COPY_INVITE_LINK:
           copyText(this.playUrl).then(function () {
             _this2.showToast({
-              type: 'info',
-              content: transI18n('fmt_statusbar_status_coppied')
+              key: FcrUIToastKey.FMT_STATUSBAR_STATUS_COPPIED
             });
           });
           break;
         case MoreAction.COPY_MEETING_INFO:
           copyText(this.roomDetailCopyText).then(function () {
             _this2.showToast({
-              type: 'info',
-              content: transI18n('fmt_meeting_mainwindow_topbar_left_popup_toast_copy_done')
+              key: FcrUIToastKey.FMT_MEETING_MAINWINDOW_TOPBAR_LEFT_POPUP_TOAST_COPY_DONE
             });
           });
           break;
@@ -762,10 +875,28 @@ var ControlBarStore = /*#__PURE__*/function () {
     value: function setAppActionbarPopoverVisible(visible) {
       this.appActionbarPopoverVisible = visible;
     }
+  }, {
+    key: "_updateDetectAreas",
+    value: function _updateDetectAreas() {
+      this._mouseDetectProvider.setDetectArea(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 = _slicedToArray(_applyDecs(_ControlBarStore, [[observable, 1, "roomDuration"], [observable, 1, "startTime"], [observable, 1, "cloudRecordingState"], [observable, 1, "playUrl"], [observable, 1, "liveStreamingState"], [observable, 1, "allApplicationWindows"], [observable, 1, "boardOwnerUser"], [observable, 1, "currentShareDisplayId"], [observable, 1, "position"], [observable, 1, "appActionbarPopoverVisible"], [computed, 3, "hasEndRoomPermission"], [computed, 3, "hasGetLiveStreamingUrlPermission"], [computed, 3, "hasStartCloudRecordingPermission"], [computed, 3, "hasStartLiveStreamingPermission"], [computed, 3, "hasChatPermission"], [computed, 3, "liveStreamingButtonVisible"], [computed, 3, "recordingButtonVisible"], [computed, 3, "isConnecting"], [_setCheckedStateMapDecs, 18, "setCheckedStateMap"], [bound, 2, "setShareWithAudioState"], [bound, 2, "setShareInSmoothMode"], [_showLockedRoomToastDecs, 18, "showLockedRoomToast"], [_handleNewShareDecs, 18, "handleNewShare"], [_handlerStopShareDecs, 18, "handlerStopShare"], [bound, 2, "handleMouseEnter"], [bound, 2, "handleMouseLeave"], [bound, 2, "openLiveStreamingDialog"], [bound, 2, "setShareAudioMode"], [_pauseCloudRecordingDecs, 2, "pauseCloudRecording"], [_resumeCloudRecordingDecs, 2, "resumeCloudRecording"], [_stopCloudRecordingDecs, 2, "stopCloudRecording"], [bound, 2, "startCloudRecording"], [bound, 2, "startLiveStreaming"], [bound, 2, "stopLiveStreaming"], [_showToastDecs, 18, "showToast"], [bound, 2, "handleOpenParticipant"], [bound, 2, "handleOpenLiveStreaming"], [bound, 2, "setEnableWaitingRoom"], [bound, 2, "getLocalMeetingTime"], [[bound, trace], 2, "setArea"], [[bound, trace], 2, "removeArea"], [bound, 2, "setStateNavArea"], [bound, 2, "setControlBarContentArea"], [_handleLeaveRoomDecs, 18, "handleLeaveRoom"], [_closeLeaveMeetingDialogDecs, 18, "closeLeaveMeetingDialog"], [_handleMoreClickDecs, 18, "handleMoreClick"], [[trace, bound], 2, "updateWindowBounds"], [_setAppActionbarPopoverVisibleDecs, 18, "setAppActionbarPopoverVisible"]], []).e, 11);
+var _applyDecs$e = _slicedToArray(_applyDecs(_ControlBarStore, [[observable, 1, "roomDuration"], [observable, 1, "startTime"], [observable, 1, "cloudRecordingState"], [observable, 1, "playUrl"], [observable, 1, "liveStreamingState"], [observable, 1, "allApplicationWindows"], [observable, 1, "boardOwnerUser"], [observable, 1, "currentShareDisplayId"], [observable, 1, "position"], [observable, 1, "appActionbarPopoverVisible"], [computed, 3, "hasEndRoomPermission"], [computed, 3, "hasGetLiveStreamingUrlPermission"], [computed, 3, "hasStartCloudRecordingPermission"], [computed, 3, "hasStartLiveStreamingPermission"], [computed, 3, "hasChatPermission"], [computed, 3, "liveStreamingButtonVisible"], [computed, 3, "recordingButtonVisible"], [computed, 3, "isConnecting"], [_setCheckedStateMapDecs, 18, "setCheckedStateMap"], [bound, 2, "setShareWithAudioState"], [bound, 2, "setShareInSmoothMode"], [bound, 2, "showLockedRoomToast"], [bound, 2, "handleNewShare"], [bound, 2, "handlerStopShare"], [bound, 2, "toggleAnnotation"], [bound, 2, "allowWriteAnnotation"], [bound, 2, "clearAnnotation"], [bound, 2, "handleMouseEnter"], [bound, 2, "handleMouseLeave"], [bound, 2, "openLiveStreamingDialog"], [bound, 2, "setShareAudioMode"], [_pauseCloudRecordingDecs, 2, "pauseCloudRecording"], [_resumeCloudRecordingDecs, 2, "resumeCloudRecording"], [_stopCloudRecordingDecs, 2, "stopCloudRecording"], [bound, 2, "startCloudRecording"], [bound, 2, "startLiveStreaming"], [bound, 2, "stopLiveStreaming"], [_showToastDecs, 18, "showToast"], [bound, 2, "handleOpenParticipant"], [bound, 2, "handleOpenLiveStreaming"], [bound, 2, "setEnableWaitingRoom"], [bound, 2, "getLocalMeetingTime"], [[bound, trace], 2, "setStateNavArea"], [[bound, trace], 2, "setControlBarContentArea"], [[bound, trace], 2, "setPopoverArea"], [[bound, trace], 2, "resetPopoverArea"], [_handleLeaveRoomDecs, 18, "handleLeaveRoom"], [_closeLeaveMeetingDialogDecs, 18, "closeLeaveMeetingDialog"], [_handleMoreClickDecs, 18, "handleMoreClick"], [[trace, bound], 2, "updateWindowBounds"], [_setAppActionbarPopoverVisibleDecs, 18, "setAppActionbarPopoverVisible"]], []).e, 11);
 _init_roomDuration = _applyDecs$e[0];
 _init_startTime = _applyDecs$e[1];
 _init_cloudRecordingState = _applyDecs$e[2];