fcr-ui-scene 3.7.9-alpha → 3.8.0

package/lib/modules/components/toolbar/components/graphic-tool/graphic-panel/libs.js

@@ -7,27 +7,27 @@ Object.defineProperty(exports, "__esModule", {
 exports.convertShapeToBoardToolType = convertShapeToBoardToolType;
 exports.tools = exports.lineWidths = void 0;
 var _type = require("agora-ui-foundation/lib/components/icon/type");
-var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var _fcrCore = require("fcr-core");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var tools = exports.tools = [{
   iconType: _type.FcrIconType.FCR_WHITEBOARD_SHAP_SQUARE,
-  shape: _enums.FcrBoardShape.Rectangle,
+  shape: _fcrCore.FcrBoardShape.Rectangle,
   tip: (0, _i18n.transI18n)('fmt_whiteboard_tips_rectangle')
 }, {
   iconType: _type.FcrIconType.FCR_WHITEBOARD_SHAP_CIRCLE,
-  shape: _enums.FcrBoardShape.Ellipse,
+  shape: _fcrCore.FcrBoardShape.Ellipse,
   tip: (0, _i18n.transI18n)('fmt_whiteboard_tips_circle')
 }, {
   iconType: _type.FcrIconType.FCR_WHITEBOARD_SHAP_TRIANGLE,
-  shape: _enums.FcrBoardShape.Triangle,
+  shape: _fcrCore.FcrBoardShape.Triangle,
   tip: (0, _i18n.transI18n)('fmt_whiteboard_tips_triangle')
 }, {
   iconType: _type.FcrIconType.FCR_WHITEBOARD_SHAP_LINE,
-  shape: _enums.FcrBoardShape.Straight,
+  shape: _fcrCore.FcrBoardShape.Straight,
   tip: (0, _i18n.transI18n)('fmt_whiteboard_tips_straight')
 }, {
   iconType: _type.FcrIconType.FCR_WHITEBOARD_SHAP_ARROW,
-  shape: _enums.FcrBoardShape.Arrow,
+  shape: _fcrCore.FcrBoardShape.Arrow,
   tip: (0, _i18n.transI18n)('fmt_whiteboard_tips_arrow')
 }];
 var lineWidths = exports.lineWidths = [{
@@ -45,21 +45,21 @@ var lineWidths = exports.lineWidths = [{
 }];
 function convertShapeToBoardToolType(shape) {
   switch (shape) {
-    case _enums.FcrBoardShape.Arrow:
-      return _enums.FcrBoardToolType.ARROW;
-    case _enums.FcrBoardShape.Curve:
-      return _enums.FcrBoardToolType.CURVE;
-    case _enums.FcrBoardShape.Ellipse:
-      return _enums.FcrBoardToolType.ELLIPSE;
-    case _enums.FcrBoardShape.Pentagram:
-      return _enums.FcrBoardToolType.PENTAGRAM;
-    case _enums.FcrBoardShape.Rectangle:
-      return _enums.FcrBoardToolType.RECTANGLE;
-    case _enums.FcrBoardShape.Straight:
-      return _enums.FcrBoardToolType.STRAIGHT;
-    case _enums.FcrBoardShape.Triangle:
-      return _enums.FcrBoardToolType.TRIANGLE;
+    case _fcrCore.FcrBoardShape.Arrow:
+      return _fcrCore.FcrBoardToolType.ARROW;
+    case _fcrCore.FcrBoardShape.Curve:
+      return _fcrCore.FcrBoardToolType.CURVE;
+    case _fcrCore.FcrBoardShape.Ellipse:
+      return _fcrCore.FcrBoardToolType.ELLIPSE;
+    case _fcrCore.FcrBoardShape.Pentagram:
+      return _fcrCore.FcrBoardToolType.PENTAGRAM;
+    case _fcrCore.FcrBoardShape.Rectangle:
+      return _fcrCore.FcrBoardToolType.RECTANGLE;
+    case _fcrCore.FcrBoardShape.Straight:
+      return _fcrCore.FcrBoardToolType.STRAIGHT;
+    case _fcrCore.FcrBoardShape.Triangle:
+      return _fcrCore.FcrBoardToolType.TRIANGLE;
     default:
-      return _enums.FcrBoardToolType.NONE;
+      return _fcrCore.FcrBoardToolType.NONE;
   }
 }

package/lib/modules/components/toolbar/components/graphic-tool/index.d.ts

@@ -1,4 +1,4 @@
-import { FcrBoardShape, FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+import { FcrBoardShape, FcrBoardToolType } from 'fcr-core';
 import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
 export declare const AnnotationGraphicTool: (props: {
     size?: number;

package/lib/modules/components/toolbar/components/multiple-color-tool/index.d.ts

@@ -1,5 +1,5 @@
 import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
-import { FcrColor } from 'fcr-core/lib/room-control/whiteboard-control/types';
+import { FcrColor } from 'fcr-core';
 export declare const MultipleColorTool: (props: {
     coverCount?: number;
     commonColors: string[];

package/lib/modules/components/toolbar/components/pen-tool/index.d.ts

@@ -1,4 +1,4 @@
-import { FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+import { FcrBoardToolType } from 'fcr-core';
 import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
 export declare const AnnotationPenTool: (props: {
     size?: number;

package/lib/modules/components/toolbar/components/pen-tool/index.js

@@ -12,7 +12,7 @@ var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _item = require("../item");
 var _penPanel = require("./pen-panel");
 var _react = require("react");
-var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var _fcrCore = require("fcr-core");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _jsxRuntime = require("react/jsx-runtime");
 var AnnotationPenTool = exports.AnnotationPenTool = function AnnotationPenTool(props) {
@@ -31,13 +31,13 @@ var AnnotationPenTool = exports.AnnotationPenTool = function AnnotationPenTool(p
     setVisible = _useState2[1];
   var handleClick = function handleClick() {
     setVisible(!visible);
-    setTool(_enums.FcrBoardToolType.CURVE);
+    setTool(_fcrCore.FcrBoardToolType.CURVE);
   };
   var handleVisibleChange = function handleVisibleChange(visible) {
     setVisible(visible);
   };
   var t = (0, _i18n.useI18n)();
-  var penMap = (0, _defineProperty2["default"])({}, _enums.FcrBoardToolType.CURVE, _type.FcrIconType.FCR_WHITEBOARD_PED5);
+  var penMap = (0, _defineProperty2["default"])({}, _fcrCore.FcrBoardToolType.CURVE, _type.FcrIconType.FCR_WHITEBOARD_PED5);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
     placement: placement,
     size: size,

package/lib/modules/components/toolbar/index.d.ts

@@ -1,5 +1,5 @@
-import { FcrBoardShape, FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
-import { FcrColor } from 'fcr-core/lib/room-control/whiteboard-control/types';
+import { FcrBoardShape, FcrBoardToolType } from 'fcr-core';
+import { FcrColor } from 'fcr-core';
 import './style.css';
 export declare const colors: string[];
 export declare const WhiteboardToolbar: (props: {

package/lib/modules/components/toolbar/index.js

@@ -13,7 +13,7 @@ require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.filter.js");
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var _fcrCore = require("fcr-core");
 var _item = require("./components/item");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _penTool = require("./components/pen-tool");
@@ -82,27 +82,28 @@ var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(p
       setTool: setTool,
       hideTitle: true,
       direction: direction
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    }, 0), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
       size: size,
-      active: currentTool === _enums.FcrBoardToolType.TEXT,
+      active: currentTool === _fcrCore.FcrBoardToolType.TEXT,
       onClick: function onClick() {
-        return setTool(_enums.FcrBoardToolType.TEXT);
+        return setTool(_fcrCore.FcrBoardToolType.TEXT);
       },
       iconType: _type.FcrIconType.FCR_WHITEBOARD_TEXT,
       title: t('fmt_screenshare_whiteboard_button_text'),
       hideTitle: true,
       placement: placement
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
-      size: size,
-      active: currentTool === _enums.FcrBoardToolType.HAND,
-      onClick: function onClick() {
-        return setTool(_enums.FcrBoardToolType.HAND);
-      },
-      iconType: _type.FcrIconType.FCR_WHITEBOARD_MOVESUBJECTS2,
-      title: t('fmt_screenshare_whiteboard_button_dragdrop'),
-      hideTitle: true,
-      placement: placement
-    }), commonColors ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_cleanTool.AnnotationCleanTool, {
+    }, 1),
+    // <AnnotationToolItem
+    //   key={2}
+    //   size={size}
+    //   active={currentTool === FcrBoardToolType.HAND}
+    //   onClick={() => setTool(FcrBoardToolType.HAND)}
+    //   iconType={FcrIconType.FCR_WHITEBOARD_MOVESUBJECTS2}
+    //   title={t('fmt_screenshare_whiteboard_button_dragdrop')}
+    //   hideTitle
+    //   placement={placement}
+    // />,
+    commonColors ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_cleanTool.AnnotationCleanTool, {
       size: size,
       hideTitle: true,
       currentTool: currentTool,
@@ -110,30 +111,30 @@ var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(p
       setTool: setTool,
       clean: clean,
       direction: direction
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    }, 3) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
       size: size,
-      active: currentTool === _enums.FcrBoardToolType.ERASER,
+      active: currentTool === _fcrCore.FcrBoardToolType.ERASER,
       onClick: function onClick() {
-        return setTool(_enums.FcrBoardToolType.ERASER);
+        return setTool(_fcrCore.FcrBoardToolType.ERASER);
       },
       iconType: _type.FcrIconType.FCR_WHITEBOARD_ERASER2,
       title: t('fmt_screenshare_whiteboard_button_eraser'),
       hideTitle: true,
       placement: placement
-    }), (0, _env.isElectron)() && onCaptureScreen && commonColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_captureTool.AnnotationCaptureTool, {
+    }, 4), (0, _env.isElectron)() && onCaptureScreen && commonColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_captureTool.AnnotationCaptureTool, {
       size: size,
       direction: direction,
       hideTitle: true,
       placement: placement,
       onClick: onCaptureScreen
-    }), !commonColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    }, 5), !commonColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
       size: size,
       onClick: clean,
       iconType: _type.FcrIconType.FCR_DELETE5,
       title: t('fmt_screenshare_whiteboard_button_empty'),
       hideTitle: true,
       placement: placement
-    })].filter(function (item) {
+    }, 6)].filter(function (item) {
       return !!item;
     });
   }, effects);
@@ -142,26 +143,26 @@ var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(p
     var shows = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
     return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
       size: size,
-      active: currentTool === _enums.FcrBoardToolType.LASER_POINTER,
+      active: currentTool === _fcrCore.FcrBoardToolType.LASER_POINTER,
       onClick: function onClick() {
-        return setTool(_enums.FcrBoardToolType.LASER_POINTER);
+        return setTool(_fcrCore.FcrBoardToolType.LASER_POINTER);
       },
       iconType: _type.FcrIconType.FCR_WHITEBOARD_LASERPEN1,
       color: '#FF0005',
       title: t('fmt_screenshare_whiteboard_button_laserpen'),
       hideTitle: true,
       placement: placement
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    }, 7), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
       size: size,
-      active: currentTool === _enums.FcrBoardToolType.SELECTOR,
+      active: currentTool === _fcrCore.FcrBoardToolType.SELECTOR,
       onClick: function onClick() {
-        return setTool(_enums.FcrBoardToolType.SELECTOR);
+        return setTool(_fcrCore.FcrBoardToolType.SELECTOR);
       },
       iconType: _type.FcrIconType.FCR_WHITECHOOSE,
       title: t('fmt_screenshare_whiteboard_button_boxselection'),
       hideTitle: true,
       placement: placement
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_penTool.AnnotationPenTool, {
+    }, 8), /*#__PURE__*/(0, _jsxRuntime.jsx)(_penTool.AnnotationPenTool, {
       size: size,
       placement: placement,
       currentColor: currentColor,
@@ -171,11 +172,11 @@ var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(p
       setStrokeWidth: setStrokeWidth,
       hideTitle: true,
       direction: direction
-    })].concat((0, _toConsumableArray2["default"])(hiddens), [coverCount >= 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupTool.AnnotationGroupTool, {
+    }, 9)].concat((0, _toConsumableArray2["default"])(hiddens), [coverCount >= 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_groupTool.AnnotationGroupTool, {
       size: size,
       placement: placement,
       children: shows
-    }), commonColors ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_multipleColorTool.MultipleColorTool, {
+    }, 10), commonColors ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_multipleColorTool.MultipleColorTool, {
       coverCount: coverCount,
       commonColors: commonColors || [],
       currentColor: currentColor,
@@ -187,7 +188,7 @@ var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(p
       onContextMenuClick: function onContextMenuClick(colors) {
         return setCommonColors === null || setCommonColors === void 0 ? void 0 : setCommonColors(colors);
       }
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorTool.AnnotationColorTool, {
+    }, 11) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorTool.AnnotationColorTool, {
       direction: 'horizontal',
       placement: placement,
       size: 36,
@@ -195,7 +196,7 @@ var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(p
       colors: themeColors,
       setStrokeColor: setStrokeColor,
       hideTitle: true
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    }, 12), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
       size: size,
       onClick: undo,
       iconType: _type.FcrIconType.FCR_MOBILE_WHITEBOARD_UNDO,
@@ -203,7 +204,7 @@ var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(p
       disabled: !redoSteps,
       hideTitle: true,
       placement: placement
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    }, 13), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
       size: size,
       onClick: redo,
       iconType: _type.FcrIconType.FCR_MOBILE_WHITEBOARD_REDO,
@@ -211,12 +212,12 @@ var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(p
       disabled: !undoSteps,
       hideTitle: true,
       placement: placement
-    }), onSave && /*#__PURE__*/(0, _jsxRuntime.jsx)(_saveDraft.AnnotationToolSaveDraft, {
+    }, 14), onSave && /*#__PURE__*/(0, _jsxRuntime.jsx)(_saveDraft.AnnotationToolSaveDraft, {
       progress: progress || 0,
       setProgress: setProgress || function () {},
       onClick: onSave,
       placement: placement
-    })]).filter(function (item) {
+    }, 15)]).filter(function (item) {
       return !!item;
     });
   }, effects);

package/lib/modules/components/toolbar/style.css

@@ -3,7 +3,7 @@
   position: absolute;
   left: 20px;
   top: 20px;
-  z-index: 1000;
+  z-index: 999;
   background-color: #fff;
   border-radius: 8px;
   box-shadow: var(--fcr_web_light_dropup);

package/lib/modules/components/toolbar/types.d.ts

@@ -1,4 +1,4 @@
-import { FcrBoardShape, FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+import { FcrBoardShape, FcrBoardToolType } from 'fcr-core';
 export type FcrToolbarState = {
     controlEnable: boolean;
     currentTool: FcrBoardToolType;

package/lib/modules/connection-gateway/store.d.ts

@@ -20,6 +20,7 @@ export default class ConnectionGatewayStore implements FcrUIManagedObject {
     private _devicePrivilegeProvider?;
     private _sharedDevicePrivilegeDataSource?;
     private _sharedMemberDataSource;
+    private _sharedSettingDataSource;
     accessor activeTabKey: string;
     accessor rememberMe: boolean;
     accessor rememberedNumberList: ConnectListType[];

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

@@ -167,6 +167,7 @@ var ConnectionGatewayStore = exports["default"] = /*#__PURE__*/function () {
     // Optional providers with try-catch
     this._devicePrivilegeProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_DEVICE_PRIVILEGE_PROVIDER);
     this._sharedDevicePrivilegeDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_DEVICE_PRIVILEGE_DATA_SOURCE);
+    this._sharedSettingDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_SETTING_DATA_SOURCE);
     this._deviceObserver = {
       onAudioConnected: function onAudioConnected() {
         _this.closeConnectionDialog();
@@ -319,6 +320,10 @@ var ConnectionGatewayStore = exports["default"] = /*#__PURE__*/function () {
         activeTab: _type3.DeviceSettingTab.AUDIO,
         highlightSelector: _constant.FcrUIHighlightElement.AUDIO_MICROPHONE
       });
+      this._sharedSettingDataSource.setDialogConfig({
+        activeTab: _type3.DeviceSettingTab.AUDIO,
+        highlightSelector: _constant.FcrUIHighlightElement.AUDIO_MICROPHONE
+      });
     }
   }, {
     key: "closeConnectionDialog",

package/lib/modules/control-bar/components/apps-popover/index.d.ts

@@ -0,0 +1,3 @@
+export declare const AppsPopover: (props: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppsPopover = void 0;
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _appList = require("../../../components/apps/app-list");
+var _store = require("../../store");
+var _react = require("react");
+var _mobxReact = require("mobx-react");
+var _jsxRuntime = require("react/jsx-runtime");
+var AppsPopover = exports.AppsPopover = (0, _mobxReact.observer)(function (props) {
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    appItemOptions = _useContext.appItemOptions,
+    appActionbarPopoverVisible = _useContext.appActionbarPopoverVisible,
+    setAppActionbarPopoverVisible = _useContext.setAppActionbarPopoverVisible;
+  var children = props.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    trigger: "click",
+    showArrow: false,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_appList.AppList, {
+      appItemProps: appItemOptions
+    }),
+    overlayInnerStyle: {
+      boxShadow: 'var(--fcr_web_light_dropup_m)',
+      border: 'none',
+      width: '374px',
+      height: 'auto'
+    },
+    onVisibleChange: function onVisibleChange(visible) {
+      setAppActionbarPopoverVisible(visible);
+    },
+    afterVisibleChange: function afterVisibleChange(visible) {
+      setAppActionbarPopoverVisible(visible);
+    },
+    visible: appActionbarPopoverVisible,
+    children: children
+  });
+});

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

@@ -15,8 +15,6 @@ var _popover = require("agora-ui-foundation/lib/components/popover");
 var _videoMenu = _interopRequireDefault(require("../../../components/device-control/components/video-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");
@@ -27,10 +25,8 @@ var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function ()
     enableCamera = _useContext.enableCamera,
     cameraList = _useContext.cameraList,
     checkMediaPermission = _useContext.checkMediaPermission;
-  var _useContext2 = (0, _react.useContext)(_store2.StoreContext),
-    setPopoverArea = _useContext2.setPopoverArea;
-  var _useContext3 = (0, _react.useContext)(_context.ControlBarCalculationContext),
-    isShareActionNavHidden = _useContext3.isShareActionNavHidden;
+  var _useContext2 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext2.isShareActionNavHidden;
   var _useDeviceTooltipVisi = (0, _hooks["default"])(),
     popoverOpened = _useDeviceTooltipVisi.popoverOpened,
     handlePopoverVisibleChanged = _useDeviceTooltipVisi.handlePopoverVisibleChanged,
@@ -46,18 +42,9 @@ var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function ()
     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", {
@@ -100,32 +87,13 @@ var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function ()
         visible: popoverOpened,
         onVisibleChange: function onVisibleChange(visible) {
           handlePopoverVisibleChanged(visible);
-          if (!visible) {
-            setPopoverArea({
-              x: 0,
-              y: 0,
-              width: 0,
-              height: 0
-            });
-          }
         },
         overlayClassName: "device-control--device-popover",
-        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
-          onBoundariesChanged: handleBoundariesChanged,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoMenu["default"], {
-            setPopoverOpened: function setPopoverOpened(opened) {
-              _setPopoverOpened(opened);
-              if (!opened) {
-                setPopoverArea({
-                  x: 0,
-                  y: 0,
-                  width: 0,
-                  height: 0
-                });
-              }
-            },
-            onMoreClick: function onMoreClick() {}
-          })
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoMenu["default"], {
+          setPopoverOpened: function setPopoverOpened(opened) {
+            _setPopoverOpened(opened);
+          },
+          onMoreClick: function onMoreClick() {}
         }),
         trigger: "click",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

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
-              });
             }
           })]
         }),