fcr-ui-scene 3.8.0-alpha → 3.8.0

package/lib/modules/control-bar/components/cloud-recording-buttons.js

@@ -15,7 +15,6 @@ var _type2 = require("agora-ui-foundation/lib/components/icon/type");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _store = require("../store");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _boundaryDetector = require("./boundary-detector");
 var _popover = require("agora-ui-foundation/lib/components/popover");
 var _context = require("../context");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -77,48 +76,34 @@ var CloudRecordingButtons = exports.CloudRecordingButtons = (0, _mobxReact.obser
 var StopCloudRecording = exports.StopCloudRecording = (0, _mobxReact.observer)(function (_ref) {
   var stopCloudRecording = _ref.stopCloudRecording,
     children = _ref.children;
-  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
-    setPopoverArea = _useContext2.setPopoverArea;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     visible = _useState2[0],
     setVisible = _useState2[1];
   var transI18n = (0, _i18n.useI18n)();
-  var handleBoundariesChanged = (0, _react.useCallback)(function (boundaries) {
-    setPopoverArea(boundaries);
-  }, []);
-  var _useContext3 = (0, _react.useContext)(_context.ControlBarCalculationContext),
-    isShareActionNavHidden = _useContext3.isShareActionNavHidden;
+  var _useContext2 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext2.isShareActionNavHidden;
   (0, _react.useEffect)(function () {
     if (isShareActionNavHidden) {
       setVisible(false);
-      setPopoverArea({
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0
-      });
     }
   }, [isShareActionNavHidden]);
-  var content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
-    onBoundariesChanged: handleBoundariesChanged,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "leave-container",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "leave-title",
-        children: transI18n('fmt_actionbar_record_tips_stoprecord')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "leave-confirm",
-        onClick: stopCloudRecording,
-        children: transI18n('fmt_actionbar_record_option_stoprecord')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "leave-cancel",
-        onClick: function onClick() {
-          return setVisible(false);
-        },
-        children: transI18n('fmt_security_buttons_cancel')
-      })]
-    })
+  var content = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "leave-container",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "leave-title",
+      children: transI18n('fmt_actionbar_record_tips_stoprecord')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "leave-confirm",
+      onClick: stopCloudRecording,
+      children: transI18n('fmt_actionbar_record_option_stoprecord')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "leave-cancel",
+      onClick: function onClick() {
+        return setVisible(false);
+      },
+      children: transI18n('fmt_security_buttons_cancel')
+    })]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
     showArrow: false,

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

@@ -21,8 +21,6 @@ var _noneMenu = _interopRequireDefault(require("../../../components/device-contr
 var _phoneMenu = _interopRequireDefault(require("../../../components/device-control/components/phone-menu"));
 var _hooks = _interopRequireDefault(require("../../../components/device-control/hooks"));
 var _store = require("../../../components/device-control/store.base");
-var _boundaryDetector = require("../boundary-detector");
-var _store2 = require("../../store");
 var _context = require("../../context");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -66,10 +64,8 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
     checkMediaPermission = _useContext2.checkMediaPermission,
     connectType = _useContext2.connectType,
     microphoneState = _useContext2.microphoneState;
-  var _useContext3 = (0, _react.useContext)(_store2.StoreContext),
-    setPopoverArea = _useContext3.setPopoverArea;
-  var _useContext4 = (0, _react.useContext)(_context.ControlBarCalculationContext),
-    isShareActionNavHidden = _useContext4.isShareActionNavHidden;
+  var _useContext3 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext3.isShareActionNavHidden;
   var _useDeviceTooltipVisi = (0, _hooks["default"])(),
     popoverOpened = _useDeviceTooltipVisi.popoverOpened,
     _setPopoverOpened = _useDeviceTooltipVisi.setPopoverOpened,
@@ -90,18 +86,9 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
     iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
     iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
   };
-  var handleBoundariesChanged = (0, _react.useCallback)(function (boundaries) {
-    setPopoverArea(boundaries);
-  }, []);
   (0, _react.useEffect)(function () {
     if (isShareActionNavHidden) {
       _setPopoverOpened(false);
-      setPopoverArea({
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0
-      });
     }
   }, [isShareActionNavHidden]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -169,48 +156,21 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
         visible: popoverOpened,
         onVisibleChange: handlePopoverVisibleChanged,
         trigger: "click",
-        content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_boundaryDetector.BoundaryDetector, {
-          onBoundariesChanged: handleBoundariesChanged,
+        content: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           children: [connectType === _type2.FcrUIConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_noneMenu["default"], {
             onItemClick: function onItemClick() {
               handlePopoverVisibleChanged(false);
-              setPopoverArea({
-                x: 0,
-                y: 0,
-                width: 0,
-                height: 0
-              });
             }
           }), connectType === _type2.FcrUIConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)(_audioMenu["default"], {
             setPopoverOpened: function setPopoverOpened(opened) {
               _setPopoverOpened(opened);
-              if (!opened) {
-                setPopoverArea({
-                  x: 0,
-                  y: 0,
-                  width: 0,
-                  height: 0
-                });
-              }
             },
             onConnectClick: function onConnectClick() {
               handlePopoverVisibleChanged(false);
-              setPopoverArea({
-                x: 0,
-                y: 0,
-                width: 0,
-                height: 0
-              });
             }
           }), connectType === _type2.FcrUIConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_phoneMenu["default"], {
             onItemClick: function onItemClick() {
               handlePopoverVisibleChanged(false);
-              setPopoverArea({
-                x: 0,
-                y: 0,
-                width: 0,
-                height: 0
-              });
             }
           })]
         }),

package/lib/modules/control-bar/components/share-audio/index.d.ts

@@ -8,6 +8,8 @@ export interface ShareAudioProps {
     currentAudioChannel?: AudioProcessingChannel;
     onSwitchAudioChannel?: (target: AudioProcessingChannel) => void;
     toggleShareWithAudio?: (target: boolean) => void;
+    popoverVisible: boolean;
+    setPopoverVisible: (visible: boolean) => void;
     showInfoTip?: boolean;
 }
 export declare const ShareAudio: (props: ShareAudioProps) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/control-bar/components/share-audio/index.js

@@ -20,7 +20,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ShareAudio = exports.AudioProcessingChannel = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 require("./index.css");
 var _i18n = require("agora-ui-foundation/lib/i18n");
@@ -45,14 +44,9 @@ var ShareAudio = exports.ShareAudio = function ShareAudio(props) {
     currentAudioChannel = _props$currentAudioCh === void 0 ? AudioProcessingChannel.MONO : _props$currentAudioCh,
     toggleShareWithAudio = props.toggleShareWithAudio,
     _props$showInfoTip = props.showInfoTip,
-    showInfoTip = _props$showInfoTip === void 0 ? false : _props$showInfoTip;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    popoverVisible = _useState2[0],
-    setVisible = _useState2[1];
-  var handlerVisibleChange = function handlerVisibleChange(visible) {
-    setVisible(visible);
-  };
+    showInfoTip = _props$showInfoTip === void 0 ? false : _props$showInfoTip,
+    popoverVisible = props.popoverVisible,
+    setPopoverVisible = props.setPopoverVisible;
   var shareAudioTips = (0, _react.useMemo)(function () {
     if (!shareWithAudio) {
       return t('fmt_screenshare_window_checkbox_shareAudio');
@@ -89,7 +83,7 @@ var ShareAudio = exports.ShareAudio = function ShareAudio(props) {
       content: /*#__PURE__*/(0, _jsxRuntime.jsx)(ShareAudioOptions, _objectSpread({}, props)),
       trigger: "click",
       visible: popoverVisible,
-      onVisibleChange: handlerVisibleChange,
+      onVisibleChange: setPopoverVisible,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "share-audio-action-button share-selectrion",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {

package/lib/modules/control-bar/hooks.d.ts

@@ -1,3 +1,4 @@
 export declare const useBoundaryDetect: (ref: React.RefObject<HTMLDivElement>, callbacks: {
     onBoundariesChanged: (rect: FcrUI.FcrUIRectangle) => void;
 }) => void;
+export declare const usePopoverWatcher: (containerRef: React.RefObject<HTMLDivElement>, setArea: (id: string, area: FcrUI.FcrUIRectangle) => void, removeArea: (id: string) => void) => void;

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

@@ -4,8 +4,36 @@ require("core-js/modules/es.object.define-property.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useBoundaryDetect = void 0;
+exports.usePopoverWatcher = exports.useBoundaryDetect = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.some.js");
+require("core-js/modules/es.date.now.js");
+require("core-js/modules/es.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.iterator.some.js");
+require("core-js/modules/esnext.map.delete-all.js");
+require("core-js/modules/esnext.map.emplace.js");
+require("core-js/modules/esnext.map.every.js");
+require("core-js/modules/esnext.map.filter.js");
+require("core-js/modules/esnext.map.find.js");
+require("core-js/modules/esnext.map.find-key.js");
+require("core-js/modules/esnext.map.includes.js");
+require("core-js/modules/esnext.map.key-of.js");
+require("core-js/modules/esnext.map.map-keys.js");
+require("core-js/modules/esnext.map.map-values.js");
+require("core-js/modules/esnext.map.merge.js");
+require("core-js/modules/esnext.map.reduce.js");
+require("core-js/modules/esnext.map.some.js");
+require("core-js/modules/esnext.map.update.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 var _schedule = require("agora-foundation/lib/schedule");
+var _lodash = require("lodash");
 var _react = require("react");
 var useBoundaryDetect = exports.useBoundaryDetect = function useBoundaryDetect(ref, callbacks) {
   (0, _react.useEffect)(function () {
@@ -33,4 +61,115 @@ var useBoundaryDetect = exports.useBoundaryDetect = function useBoundaryDetect(r
       }
     };
   }, [callbacks]);
+};
+var handlePositionChange = function handlePositionChange(popover, _onChange) {
+  var lastRect = null;
+  var onChange = (0, _lodash.debounce)(_onChange, 300);
+  var readRect = function readRect() {
+    var domRect = popover.getBoundingClientRect();
+    return {
+      x: domRect.left,
+      y: domRect.top,
+      width: domRect.width,
+      height: domRect.height
+    };
+  };
+  var notifyIfChanged = function notifyIfChanged() {
+    var nextRect = readRect();
+    if (!lastRect || lastRect.x !== nextRect.x || lastRect.y !== nextRect.y || lastRect.width !== nextRect.width || lastRect.height !== nextRect.height) {
+      lastRect = nextRect;
+      onChange(nextRect);
+    }
+  };
+  notifyIfChanged();
+  var observer = new MutationObserver(function (mutationsList) {
+    var shouldUpdate = mutationsList.some(function (mutation) {
+      return mutation.type === 'attributes' && mutation.attributeName === 'style';
+    });
+    if (shouldUpdate) {
+      notifyIfChanged();
+    }
+  });
+  observer.observe(popover, {
+    attributes: true,
+    attributeFilter: ['style']
+  });
+  return function () {
+    onChange.cancel();
+    observer.disconnect();
+  };
+};
+var usePopoverWatcher = exports.usePopoverWatcher = function usePopoverWatcher(containerRef, setArea, removeArea) {
+  (0, _react.useEffect)(function () {
+    if (containerRef.current === null) return;
+    var countNum = 0;
+    var body = containerRef.current.ownerDocument.body;
+    var popoverClassName = 'fcr-popover';
+    var popoverObservers = new Map();
+    var getPopoverElement = function getPopoverElement(node) {
+      if (node.classList.contains(popoverClassName)) {
+        return node;
+      } else {
+        return node.querySelector(".".concat(popoverClassName));
+      }
+    };
+    var observer = new MutationObserver(function (mutationsList) {
+      mutationsList.forEach(function (mutation) {
+        if (mutation.type !== 'childList') {
+          return;
+        }
+        mutation.addedNodes.forEach(function (node) {
+          if (node.nodeType !== Node.ELEMENT_NODE) {
+            return;
+          }
+          var popover = getPopoverElement(node);
+          if (!popover) {
+            return;
+          }
+          var popoverElementId = popover.getAttribute('data-popover-id');
+          if (popoverElementId) {
+            if (popoverObservers.has(popoverElementId)) {
+              return;
+            }
+          } else {
+            popoverElementId = "".concat(popoverClassName, "-").concat(Date.now(), "-").concat(countNum++, "}");
+            popover.setAttribute('data-popover-id', popoverElementId);
+          }
+          popoverObservers.set(popoverElementId, handlePositionChange(popover, function (rect) {
+            setArea(popoverElementId, rect);
+          }));
+        });
+        mutation.removedNodes.forEach(function (node) {
+          if (node.nodeType !== Node.ELEMENT_NODE) {
+            return;
+          }
+          var popover = getPopoverElement(node);
+          if (!popover) {
+            return;
+          }
+          var popoverElementId = popover.getAttribute('data-popover-id');
+          if (popoverElementId) {
+            var disconnect = popoverObservers.get(popoverElementId);
+            if (disconnect) {
+              disconnect();
+              popoverObservers["delete"](popoverElementId);
+            }
+            removeArea(popoverElementId);
+          }
+        });
+      });
+    });
+    observer.observe(body, {
+      childList: true,
+      subtree: true
+    });
+    return function () {
+      observer.disconnect();
+      popoverObservers.forEach(function (disconnect, key) {
+        disconnect();
+        removeArea(key);
+      });
+      popoverObservers.clear();
+    };
+  }, [containerRef.current]);
 };

package/lib/modules/control-bar/store.d.ts

@@ -29,9 +29,6 @@ export default class ControlBarStore implements FcrUIManagedObject {
     private _controlBarWindow;
     private _screenShareObserver;
     private _mouseDetectObserver;
-    private _stateNavArea;
-    private _contentArea;
-    private _popoverArea;
     accessor roomDuration: number;
     accessor startTime: number;
     accessor cloudRecordingState: FcrRecordingState;
@@ -50,6 +47,7 @@ export default class ControlBarStore implements FcrUIManagedObject {
     accessor meetingId: string;
     accessor localUserName: string;
     accessor titleHeight: number;
+    private _detectAreas;
     get isSharingWithAudio(): boolean;
     get isInSmoothMode(): boolean;
     get hasSecurityPermission(): boolean;
@@ -100,9 +98,10 @@ export default class ControlBarStore implements FcrUIManagedObject {
     setEnableWaitingRoom(enable: boolean): void;
     getLocalMeetingTime(): string | null;
     release(): void;
+    setArea(id: string, area: FcrUI.FcrUIRectangle): void;
+    removeArea(id: string): void;
     setStateNavArea(area: FcrUI.FcrUIRectangle): void;
     setControlBarContentArea(area: FcrUI.FcrUIRectangle): void;
-    setPopoverArea(area: FcrUI.FcrUIRectangle): void;
     handleLeaveRoom(): void;
     closeLeaveMeetingDialog(): void;
     handleMoreClick(actionKey: MoreAction): void;

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

@@ -6,15 +6,17 @@ 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");
 require("core-js/modules/es.map.js");
 require("core-js/modules/es.number.constructor.js");
 require("core-js/modules/es.object.create.js");
+require("core-js/modules/es.object.define-properties.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.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
 require("core-js/modules/esnext.function.metadata.js");
 require("core-js/modules/esnext.map.delete-all.js");
 require("core-js/modules/esnext.map.emplace.js");
@@ -37,14 +39,17 @@ 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");
@@ -73,6 +78,8 @@ var _platform = require("../../utilities/platform");
 var _struct = require("../../providers/mouse-detect/struct");
 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;
+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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
@@ -178,24 +185,6 @@ 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
-    });
-    (0, _defineProperty2["default"])(this, "_popoverArea", {
-      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));
@@ -388,6 +377,11 @@ 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() {
@@ -664,23 +658,36 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
       this._mouseDetectProvider.removeObserver(this._mouseDetectObserver);
       this._mouseDetectProvider.deleteDetectArea(_struct.FcrUIDetectAreaID.ControlBar);
     }
+  }, {
+    key: "setArea",
+    value: function setArea(id, area) {
+      var currentOtherAreas = this._detectAreas().filter(function (item) {
+        return item.id !== id;
+      });
+      currentOtherAreas.push(_objectSpread({
+        id: id
+      }, area));
+      this._mouseDetectProvider.setDetectArea(_struct.FcrUIDetectAreaID.ControlBar, currentOtherAreas);
+    }
+  }, {
+    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: "setStateNavArea",
     value: function setStateNavArea(area) {
-      this._stateNavArea = area;
-      this._mouseDetectProvider.setDetectArea(_struct.FcrUIDetectAreaID.ControlBar, [this._stateNavArea, this._contentArea, this._popoverArea]);
+      var id = 'state-nav-area';
+      this.setArea(id, area);
     }
   }, {
     key: "setControlBarContentArea",
     value: function setControlBarContentArea(area) {
-      this._contentArea = area;
-      this._mouseDetectProvider.setDetectArea(_struct.FcrUIDetectAreaID.ControlBar, [this._stateNavArea, this._contentArea, this._popoverArea]);
-    }
-  }, {
-    key: "setPopoverArea",
-    value: function setPopoverArea(area) {
-      this._popoverArea = area;
-      this._mouseDetectProvider.setDetectArea(_struct.FcrUIDetectAreaID.ControlBar, [this._stateNavArea, this._contentArea, this._popoverArea]);
+      var id = 'control-bar-content-area';
+      this.setArea(id, area);
     }
   }, {
     key: "handleLeaveRoom",
@@ -764,7 +771,7 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
   }]);
 }();
 _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, "setStateNavArea"], [[_decorator.bound, _decorator.trace], 2, "setControlBarContentArea"], [[_decorator.bound, _decorator.trace], 2, "setPopoverArea"], [_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"], [_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);
 _init_roomDuration = _applyDecs$e[0];
 _init_startTime = _applyDecs$e[1];
 _init_cloudRecordingState = _applyDecs$e[2];

package/lib/modules/control-bar/type.d.ts

@@ -41,3 +41,6 @@ export type ControlBarCalculationUpdaterType = {
     restartActiveTask: () => void;
     cancelActiveTask: () => void;
 };
+export type FcrUIControlArea = FcrUI.FcrUIRectangle & {
+    id?: string;
+};