fcr-ui-scene 3.7.4-rc.1 → 3.7.5

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

@@ -3,525 +3,620 @@
 require("core-js/modules/es.symbol.js");
 require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.array.push.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/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");
 require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ControlbarContext = exports.ControlBarView = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+exports.View = void 0;
 require("core-js/modules/es.array.concat.js");
-require("core-js/modules/es.array.find.js");
-require("core-js/modules/es.date.to-json.js");
-require("core-js/modules/es.json.stringify.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/esnext.iterator.constructor.js");
-require("core-js/modules/esnext.iterator.find.js");
-require("core-js/modules/web.timers.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _mobxReact = require("mobx-react");
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react2 = require("@use-gesture/react");
+var _more = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/more");
+var _badge = require("agora-ui-foundation/lib/components/badge");
 var _divider = _interopRequireDefault(require("agora-ui-foundation/lib/components/divider"));
 var _popover = require("agora-ui-foundation/lib/components/popover");
-var _badge = require("agora-ui-foundation/lib/components/badge");
 var _meetingSecurity = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/meeting-security");
-var _more = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/more");
 var _participants = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/participants");
-var _shareAudio = require("./components/share-audio");
 var _shareScreenButton = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/share-screen-button");
-var _mobxReact = require("mobx-react");
-var _react = require("react");
-var _store = require("./store");
-var _securityMenu = _interopRequireDefault(require("../components/security-menu"));
-var _shareStateNav = require("./components/share-state-nav");
+var _meetingDetails = require("../state-bar/meeting-details");
+var _cloudRecordingButtons = require("./components/cloud-recording-buttons");
 var _moreActions = require("./components/more-actions");
+var _shareStateNav = require("./components/share-state-nav");
 var _stopLiveStreaming = require("./components/stop-live-streaming");
-var _cloudRecordingButtons = require("./components/cloud-recording-buttons");
-var _toast = require("agora-ui-foundation/lib/components/toast");
-var _platform = require("../../utilities/platform");
-var _deviceControl = _interopRequireDefault(require("../components/device-control"));
-var _meetingDetails = require("./components/meeting-details");
-var _react2 = require("@use-gesture/react");
-var _useElectron = require("../dialog/hooks/useElectron");
 var _enums = require("./enums");
-var _constant = require("../../utilities/constant");
-var _type = require("../../type");
-var _annotationButton = require("./components/annotation-button");
-var _dialogUtils = require("../../utilities/dialog-utils");
-var _rendererEvent = require("../../utilities/renderer-event");
+var _store = require("./store");
+var _context = require("./context");
+var _logger = require("../../utilities/logger");
+var _securityMenu = _interopRequireDefault(require("../components/security-menu"));
+var _shareAudio = require("./components/share-audio");
+var _schedule = require("agora-foundation/lib/schedule");
+var _microphone = require("./components/microphone");
+var _carmera = require("./components/carmera");
+var _boundaryDetector = require("./components/boundary-detector");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["x", "y"];
+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; }
 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; }
-var ControlbarContext = exports.ControlbarContext = /*#__PURE__*/(0, _react.createContext)({
-  browserWindow: null
+var HIDDEN_TIMEOUT = 3000;
+var NAV_HEIGHT = 84;
+var View = exports.View = (0, _mobxReact.observer)(function () {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DraggableControlBarProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DraggableContainer, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ControlBar, {})
+    })
+  });
 });
-var ControlBarView = exports.ControlBarView = (0, _mobxReact.observer)(function () {
-  var _useContext = (0, _react.useContext)(_useElectron.DialogInstanceContext),
-    browserWindow = _useContext.browserWindow,
-    newRendererWindow = _useContext.newRendererWindow;
-  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
-    setShareWithAudioState = _useContext2.setShareWithAudioState,
-    shareWithAudio = _useContext2.shareWithAudio,
-    handlerStopShare = _useContext2.handlerStopShare,
-    shareAudioProcessingChannel = _useContext2.shareAudioProcessingChannel,
-    setShareAudioProcessingChannel = _useContext2.setShareAudioProcessingChannel,
-    createNewShare = _useContext2.createNewShare,
-    currentShareId = _useContext2.currentShareId,
-    controlBarMouseOver = _useContext2.controlBarMouseOver,
-    handleMoreClick = _useContext2.handleMoreClick,
-    hasSecurityPermission = _useContext2.hasSecurityPermission,
-    isShowMeetingDetailPortal = _useContext2.isShowMeetingDetailPortal,
-    setShowMeetingDetailPortal = _useContext2.setShowMeetingDetailPortal,
-    setEnableWaitingRoom = _useContext2.setEnableWaitingRoom,
-    currentShareDisplayId = _useContext2.currentShareDisplayId,
-    privilegeProvider = _useContext2.privilegeProvider,
-    newMessageCount = _useContext2.newMessageCount,
-    currentShareBounds = _useContext2.currentShareBounds,
-    recordShareBounds = _useContext2.recordShareBounds,
-    showLockedRoomToast = _useContext2.showLockedRoomToast,
-    checkedStateMap = _useContext2.checkedStateMap,
-    setCheckedStateMap = _useContext2.setCheckedStateMap,
-    setObserverWindowBounds = _useContext2.setObserverWindowBounds,
-    removeObserverWindowBounds = _useContext2.removeObserverWindowBounds,
-    log = _useContext2.log,
-    annotationButtonVisible = _useContext2.annotationButtonVisible,
-    liveStreamingButtonVisible = _useContext2.liveStreamingButtonVisible,
-    recordingButtonVisible = _useContext2.recordingButtonVisible;
-  // 控制栏本身的高度
-  var NAV_HEIGHT = 84;
-  // 鼠标移开后自动隐藏的时间
-  var HIDDEN_TIMEOUT = 3000;
-  // 系统顶部的状态栏
-  var _getCurrentSharingWor = (0, _dialogUtils.getCurrentSharingWorkArea)({
-      currentShareBounds: currentShareBounds
+
+// 拖拽和计算状态提供者
+var DraggableControlBarProvider = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var children = _ref.children;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    draggableArea = _useContext.draggableArea,
+    titleHeight = _useContext.titleHeight;
+  var _useState = (0, _react.useState)(function () {
+      return {
+        position: {
+          x: 0,
+          y: 0
+        },
+        isDragging: false
+      };
     }),
-    browserWidth = _getCurrentSharingWor.width,
-    browserHeight = _getCurrentSharingWor.height,
-    topOffset = _getCurrentSharingWor.topOffset;
-  var TITLE_HEIGHT = (0, _platform.isWindows)() ? 0 : topOffset !== null && topOffset !== void 0 ? topOffset : 0;
-  var _useState = (0, _react.useState)(_enums.TransferPosition.TOP),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    navCurrentPosition = _useState2[0],
-    setNavCurrentPosition = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
+    dragState = _useState2[0],
+    setDragState = _useState2[1];
+  var _useState3 = (0, _react.useState)(_enums.TransferPosition.TOP),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    hiddenShareActionNav = _useState4[0],
-    setHiddenShareActionNav = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    moreVisible = _useState6[0],
-    setMoreVisible = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    showSecurityPopover = _useState8[0],
-    setShowSecurityPopover = _useState8[1];
-  var windowFocusTimerRef = (0, _react.useRef)();
-  var alwayOnTopTimerRef = (0, _react.useRef)();
-  var _useState9 = (0, _react.useState)({
-      x: 0,
-      y: 0
-    }),
-    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
-    coordination = _useState0[0],
-    setCoordination = _useState0[1];
-  var _useState1 = (0, _react.useState)({
+    navPosition = _useState4[0],
+    setNavPosition = _useState4[1];
+  var _useState5 = (0, _react.useState)({
       width: 0,
       height: 0
     }),
-    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
-    barBound = _useState10[0],
-    setBound = _useState10[1];
-  var bind = (0, _react2.useDrag)(function (_ref) {
-    var _ref$delta = (0, _slicedToArray2["default"])(_ref.delta, 2),
-      dx = _ref$delta[0],
-      dy = _ref$delta[1];
-    var x = coordination.x + dx;
-    var y = coordination.y + dy;
-    var maxX = browserWidth - barBound.width;
-    var maxY = browserHeight - barBound.height - TITLE_HEIGHT;
-    setObserverWindowBounds({
-      x: Math.max(0, Math.min(maxX, x)),
-      y: Math.max(0, Math.min(maxY, y)),
-      width: barBound.width,
-      height: barBound.height
-    });
-    handleDragStop({
-      lastX: Math.max(0, Math.min(maxX, x)),
-      lastY: Math.max(0, Math.min(maxY, y))
-    });
-  });
-  var rndRef = (0, _react.useRef)(null);
-  var hideTimeout = (0, _react.useRef)(0);
-  var moveControlBarToDisplayId = function moveControlBarToDisplayId(dialogWidth, dialogHeight, targetDisplayId) {
-    var displays = window.runtime.screen.getAllDisplays();
-    var targetDisplay = displays.find(function (display) {
-      return display.id === targetDisplayId;
-    });
-    if (!targetDisplay) {
-      return;
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    dimensions = _useState6[0],
+    setDimensions = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isShareActionNavHidden = _useState8[0],
+    setIsShareActionNavHidden = _useState8[1];
+  var taskRef = (0, _react.useRef)();
+  var restartActiveTask = (0, _react.useCallback)(function () {
+    if (taskRef.current) {
+      taskRef.current.stop();
+      taskRef.current = undefined;
     }
-    var controlBarNewX = targetDisplay.bounds.width / 2 - dialogWidth / 2;
-    browserWindow.setPosition(targetDisplay.bounds.x, targetDisplay.bounds.y);
-    setCoordination({
-      x: controlBarNewX,
-      y: 0
-    });
-    setBound({
-      width: dialogWidth,
-      height: dialogHeight
-    });
-    setObserverWindowBounds({
-      x: controlBarNewX,
-      y: 0,
-      width: dialogWidth,
-      height: dialogHeight
-    });
-    setNavCurrentPosition(_enums.TransferPosition.TOP);
-  };
+    taskRef.current = _schedule.AgoraScheduler.shared.addDelayTask(function () {
+      setIsShareActionNavHidden(true);
+    }, HIDDEN_TIMEOUT);
+  }, []);
+  var cancelActiveTask = (0, _react.useCallback)(function () {
+    if (taskRef.current) {
+      taskRef.current.stop();
+      taskRef.current = undefined;
+    }
+  }, []);
 
-  // 逻辑更改为根据分享的内容重新计算control-bar的窗口大小后，
-  // 计算最大的Y坐标可直接从window.innerHeight - NAV_HEIGHT获取
-  var handlerShareNavTransferPosition = (0, _react.useCallback)(function (targetPosition) {
-    setNavCurrentPosition(targetPosition);
-    var targetY = targetPosition === _enums.TransferPosition.TOP ? 0 : browserHeight - NAV_HEIGHT - TITLE_HEIGHT;
-    setCoordination({
-      x: coordination.x,
-      y: targetY
-    });
-  }, [coordination, rndRef.current]);
-  var handleMouseEnter = function handleMouseEnter() {
-    browserWindow.focus();
-    browserWindow.setIgnoreMouseEvents(false, {
-      forward: true
-    });
-    clearTimeout(hideTimeout.current);
-    setHiddenShareActionNav(false);
-  };
-  var handleMouseLeave = function handleMouseLeave(e) {
-    // setMoreVisible(false);
-    // setShowSecurityPopover(false);
-    (0, _rendererEvent.sendEvent)({
-      action: _constant.FcrUIRendererEventAction.SET_ANNOTATION_TO_FOCUS,
-      payload: true
+  // 计算控制栏的显示状态和位置
+  var calculation = (0, _react.useMemo)(function () {
+    // 这里需要根据实际的store数据来计算
+
+    var browserHeight = draggableArea.height;
+    var isAttachToBottom = isShareActionNavHidden && dragState.position.y === browserHeight - NAV_HEIGHT - titleHeight;
+    var isAttachToTop = isShareActionNavHidden && (dragState.position.y < titleHeight || dragState.position.y === titleHeight || dragState.position.y === 0);
+    return {
+      isAttachToBottom: isAttachToBottom,
+      isAttachToTop: isAttachToTop,
+      navPosition: navPosition,
+      isShareActionNavHidden: isShareActionNavHidden,
+      barDimensions: dimensions
+    };
+  }, [dragState.position, dimensions, isShareActionNavHidden, navPosition, titleHeight]);
+  var updateDragState = (0, _react.useCallback)(function (newState) {
+    setDragState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), newState);
     });
-    browserWindow.setIgnoreMouseEvents(true, {
-      forward: true
+  }, []);
+  var moveTop = (0, _react.useCallback)(function () {
+    setDragState(function (state) {
+      return {
+        position: {
+          x: state.position.x,
+          y: 0
+        },
+        isDragging: false
+      };
     });
-    hideTimeout.current = window.setTimeout(function () {
-      var hasPopover = document.querySelector('.fcr-popover');
-      if (!hasPopover) {
-        setHiddenShareActionNav(true);
-      }
-    }, HIDDEN_TIMEOUT);
-  };
-  var handleDragStop = function handleDragStop(data) {
-    var x = data.lastX,
-      y = data.lastY;
-    setCoordination({
-      x: x,
-      y: y
+  }, []);
+  var moveBottom = (0, _react.useCallback)(function () {
+    var dragHeight = draggableArea.height;
+    var barHeight = dimensions.height;
+    setDragState(function (state) {
+      return {
+        position: {
+          x: state.position.x,
+          y: dragHeight - barHeight - titleHeight
+        },
+        isDragging: false
+      };
     });
-    // 控制栏左上角在屏幕Y轴的最大坐标
-    var MAX_Y = browserHeight - NAV_HEIGHT - TITLE_HEIGHT;
-    if (y >= MAX_Y) {
-      setNavCurrentPosition(_enums.TransferPosition.BOTTOM);
-    } else if (y <= 0) {
-      setNavCurrentPosition(_enums.TransferPosition.TOP);
+  }, [draggableArea, dimensions, titleHeight]);
+  (0, _react.useEffect)(function () {
+    if (calculation.isAttachToTop) {
+      (0, _logger.getLogger)().info('[ControlBar] Control bar hit top');
     }
-  };
-  var handleMouseMove = function handleMouseMove() {
-    browserWindow.moveTop();
-    browserWindow.focus();
-    browserWindow.setIgnoreMouseEvents(false, {
-      forward: true
-    });
-  };
-  var computControlBarPos = function computControlBarPos(browserWidth) {
-    if (rndRef.current) {
-      var width = rndRef.current.offsetWidth;
-      var height = rndRef.current.offsetHeight;
-      var _x$y = {
-          x: browserWidth / 2 - width / 2,
-          y: 0
+    if (calculation.isAttachToBottom) {
+      (0, _logger.getLogger)().info('[ControlBar] Control bar hit bottom');
+    }
+  }, [calculation.isAttachToTop, calculation.isAttachToBottom]);
+  var updater = (0, _react.useMemo)(function () {
+    return {
+      setDimensions: setDimensions,
+      moveTop: moveTop,
+      moveBottom: moveBottom,
+      setIsShareActionNavHidden: setIsShareActionNavHidden,
+      setNavPosition: setNavPosition,
+      restartActiveTask: restartActiveTask,
+      cancelActiveTask: cancelActiveTask
+    };
+  }, [setDimensions, moveTop, moveBottom, setIsShareActionNavHidden, setNavPosition, restartActiveTask, cancelActiveTask]);
+  (0, _react.useEffect)(function () {
+    restartActiveTask();
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.DragContext.Provider, {
+    value: dragState,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ControlBarCalculationContext.Provider, {
+      value: calculation,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ControlBarCalculationUpdaterContext.Provider, {
+        value: updater,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.DragStateUpdaterContext.Provider, {
+          value: updateDragState,
+          children: children
+        })
+      })
+    })
+  });
+});
+
+// 拖拽容器组件
+var DraggableContainer = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
+  var children = _ref2.children;
+  var dragState = (0, _react.useContext)(_context.DragContext);
+  var updateDragState = (0, _react.useContext)(_context.DragStateUpdaterContext);
+  var _useContext2 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    barDimensions = _useContext2.barDimensions;
+  var _useContext3 = (0, _react.useContext)(_context.ControlBarCalculationUpdaterContext),
+    setNavPosition = _useContext3.setNavPosition;
+  var _useContext4 = (0, _react.useContext)(_store.StoreContext),
+    draggableArea = _useContext4.draggableArea,
+    titleHeight = _useContext4.titleHeight;
+
+  // 获取布局信息
+  var layoutInfo = (0, _react.useMemo)(function () {
+    var browserWidth = draggableArea.width;
+    var browserHeight = draggableArea.height;
+    var barBoundWidth = barDimensions.width;
+    var barBoundHeight = barDimensions.height;
+    (0, _logger.getLogger)().info("[ControlBar] Layout Info - browserWidth: ".concat(browserWidth, ", browserHeight: ").concat(browserHeight, ", barBoundWidth: ").concat(barBoundWidth, ", barBoundHeight: ").concat(barBoundHeight));
+    return {
+      titleHeight: titleHeight,
+      browserWidth: browserWidth,
+      browserHeight: browserHeight,
+      barBoundWidth: barBoundWidth,
+      barBoundHeight: barBoundHeight,
+      maxX: browserWidth - barBoundWidth,
+      maxY: browserHeight - barBoundHeight - titleHeight
+    };
+  }, [barDimensions, draggableArea, titleHeight]);
+  var bind = (0, _react2.useDrag)(function (_ref3) {
+    var _ref3$delta = (0, _slicedToArray2["default"])(_ref3.delta, 2),
+      dx = _ref3$delta[0],
+      dy = _ref3$delta[1],
+      dragging = _ref3.dragging;
+    if (!updateDragState) return;
+    if (dragging) {
+      var x = dragState.position.x + dx;
+      var y = dragState.position.y + dy;
+      var newX = Math.max(0, Math.min(layoutInfo.maxX, x));
+      var newY = Math.max(0, Math.min(layoutInfo.maxY, y));
+      updateDragState({
+        position: {
+          x: newX,
+          y: newY
         },
-        x = _x$y.x,
-        y = _x$y.y;
-      setCoordination({
-        x: x,
-        y: y
+        isDragging: true
       });
-      setBound({
-        width: width,
-        height: height
-      });
-      setNavCurrentPosition(_enums.TransferPosition.TOP);
-      setObserverWindowBounds({
-        x: x,
-        y: y,
-        width: width,
-        height: height
+    } else {
+      var position = dragState.position;
+      var MAX_Y = layoutInfo.browserHeight - NAV_HEIGHT - layoutInfo.titleHeight;
+
+      // 确定传输位置
+      var transferPosition = _enums.TransferPosition.TOP;
+      if (position.y >= MAX_Y) {
+        transferPosition = _enums.TransferPosition.BOTTOM;
+      } else if (position.y <= 0) {
+        transferPosition = _enums.TransferPosition.TOP;
+      }
+      setNavPosition(transferPosition);
+      updateDragState({
+        isDragging: false
       });
     }
-  };
-  var recomputControlBarPosAfterDisplayChange = function recomputControlBarPosAfterDisplayChange() {
-    // setTimeout 1200ms后确定rndRef.current一定可以重新获取到，
-    // 跟随最新的共享内容所在的屏幕,位移control-bar
-    setTimeout(function () {
-      if (rndRef.current) {
-        var dialogWidth = rndRef.current.offsetWidth;
-        var dialogHeight = rndRef.current.offsetHeight;
-        var info = (0, _dialogUtils.getCurrentSharingWorkArea)({
-          currentShareBounds: currentShareBounds
+  }, {
+    filterTaps: true
+  });
+  var style = (0, _react.useMemo)(function () {
+    return {
+      width: 'fit-content',
+      transform: "translate(".concat(dragState.position.x, "px, ").concat(dragState.position.y, "px)"),
+      cursor: dragState.isDragging ? 'grabbing' : 'grab',
+      touchAction: 'none'
+    };
+  }, [dragState.position, dragState.isDragging]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, bind()), {}, {
+    style: style,
+    children: children
+  }));
+});
+
+// 主控制栏组件
+var ControlBar = (0, _mobxReact.observer)(function () {
+  var containerRef = _react["default"].useRef(null);
+  var calculation = (0, _react.useContext)(_context.ControlBarCalculationContext);
+  var _useContext5 = (0, _react.useContext)(_store.StoreContext),
+    draggableArea = _useContext5.draggableArea,
+    currentShareDisplayId = _useContext5.currentShareDisplayId;
+  var updatePosition = (0, _react.useContext)(_context.DragStateUpdaterContext);
+  var _useContext6 = (0, _react.useContext)(_context.ControlBarCalculationUpdaterContext),
+    setDimensions = _useContext6.setDimensions,
+    setNavPosition = _useContext6.setNavPosition;
+  var rootClassNames = (0, _react.useMemo)(function () {
+    return (0, _classnames["default"])('fcr-flex', 'share-action-nav__container', {
+      'share-action-nav__move_to_bottom': calculation.navPosition === _enums.TransferPosition.BOTTOM,
+      'share-action-nav__move_to_top': calculation.navPosition === _enums.TransferPosition.TOP,
+      'share-action-nav__hidden': calculation.isShareActionNavHidden,
+      'completely-hidden-in-bottom': calculation.isAttachToBottom,
+      'completely-hidden-in-top': calculation.isAttachToTop
+    });
+  }, [calculation]);
+  (0, _react.useLayoutEffect)(function () {
+    if (currentShareDisplayId) {
+      var ro = new ResizeObserver(function () {
+        var bounds = containerRef.current.getBoundingClientRect();
+        setDimensions({
+          width: bounds.width,
+          height: bounds.height
+        });
+        updatePosition({
+          position: {
+            x: draggableArea.width / 2 - bounds.width / 2,
+            y: 0
+          }
         });
-        moveControlBarToDisplayId(dialogWidth, dialogHeight, info.displayId);
+        setNavPosition(_enums.TransferPosition.TOP);
+      });
+      ro.observe(containerRef.current);
+      return function () {
+        return ro.disconnect();
+      };
+    }
+  }, [currentShareDisplayId]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: containerRef,
+    className: rootClassNames,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ControlBarContent, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShareStateNavigation, {})]
+  });
+});
+
+// 控制栏内容组件（控制栏上部）
+var ControlBarContent = /*#__PURE__*/(0, _react.memo)(function () {
+  var _useContext7 = (0, _react.useContext)(_store.StoreContext),
+    handleMouseEnter = _useContext7.handleMouseEnter,
+    handleMouseLeave = _useContext7.handleMouseLeave,
+    setControlBarContentArea = _useContext7.setControlBarContentArea;
+  var _useContext8 = (0, _react.useContext)(_context.ControlBarCalculationUpdaterContext),
+    setIsShareActionNavHidden = _useContext8.setIsShareActionNavHidden,
+    restartActiveTask = _useContext8.restartActiveTask,
+    cancelActiveTask = _useContext8.cancelActiveTask;
+  var calculation = (0, _react.useContext)(_context.ControlBarCalculationContext);
+  var navClassName = (0, _react.useMemo)(function () {
+    return "share-action-nav share-action-nav__can-draggable ".concat(calculation.isShareActionNavHidden ? 'invisible' : '');
+  }, [calculation.isShareActionNavHidden]);
+  var handleMouseEnterNav = (0, _react.useCallback)(function () {
+    setIsShareActionNavHidden(false);
+    handleMouseEnter();
+    cancelActiveTask();
+  }, []);
+  var handleMouseLeaveNav = (0, _react.useCallback)(function () {
+    handleMouseLeave();
+    restartActiveTask();
+  }, []);
+  var handleBoundariesChanged = (0, _react.useCallback)(function (boundaries) {
+    console.log('ControlBarContent boundaries changed');
+    setControlBarContentArea(boundaries);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
+    onBoundariesChanged: handleBoundariesChanged,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: navClassName,
+      onMouseEnter: handleMouseEnterNav,
+      onMouseLeave: handleMouseLeaveNav,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MediaControlGroup, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+        style: {
+          marginRight: 24,
+          height: '20px',
+          marginLeft: 30
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MeetingControlGroup, {})]
+    })
+  });
+});
+
+// 媒体控制组
+var MediaControlGroup = /*#__PURE__*/(0, _react.memo)(function () {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "share-action-nav__media-control-group",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_microphone.MicrophoneControl, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_carmera.CameraControl, {})]
+  });
+});
+
+// 会议控制组
+var MeetingControlGroup = (0, _mobxReact.observer)(function () {
+  var _useContext9 = (0, _react.useContext)(_store.StoreContext),
+    liveStreamingButtonVisible = _useContext9.liveStreamingButtonVisible,
+    recordingButtonVisible = _useContext9.recordingButtonVisible,
+    hasSecurityPermission = _useContext9.hasSecurityPermission;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "share-action-nav__meeting-control-group",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SecurityMenuSection, {
+      hasSecurityPermission: hasSecurityPermission
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ParticipantSection, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
+      style: {
+        margin: '0 8px',
+        height: '20px'
       }
-    }, 1200);
-  };
+    }), /*#__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"], {
+      style: {
+        margin: '0 8px',
+        height: '20px'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShareAudioSection, {})]
+  });
+});
+
+// 安全菜单区块
+var SecurityMenuSection = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
+  var hasSecurityPermission = _ref4.hasSecurityPermission;
+  if (!hasSecurityPermission) return null;
+  var _useContext0 = (0, _react.useContext)(_store.StoreContext),
+    setPopoverArea = _useContext0.setPopoverArea;
+  var _useContext1 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext1.isShareActionNavHidden;
+  var _useState9 = (0, _react.useState)(false),
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    showSecurityPopover = _useState0[0],
+    setShowSecurityPopover = _useState0[1];
+  var handleVisibilityChange = (0, _react.useCallback)(function (visible) {
+    setShowSecurityPopover(visible);
+  }, []);
+  var handleBoundariesChanged = (0, _react.useCallback)(function (boundaries) {
+    console.log('SecurityMenu boundaries changed', boundaries);
+    setPopoverArea(boundaries);
+  }, []);
   (0, _react.useEffect)(function () {
-    if (rndRef.current) {
-      computControlBarPos(browserWidth);
+    if (isShareActionNavHidden) {
+      setShowSecurityPopover(false);
+      setPopoverArea({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      });
     }
-  }, [currentShareId]);
+  }, [isShareActionNavHidden]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    showArrow: false,
+    mouseEnterDelay: 0,
+    overlayInnerStyle: {
+      width: '300px',
+      boxShadow: 'none',
+      backgroundColor: 'none',
+      borderRadius: 'var(--fcr_cornerradius_l)'
+    },
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
+      onBoundariesChanged: handleBoundariesChanged,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_securityMenu["default"], {})
+    }),
+    trigger: "click",
+    visible: showSecurityPopover,
+    onVisibleChange: handleVisibilityChange,
+    placement: "bottom",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      onClick: function onClick(e) {
+        e.preventDefault();
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingSecurity.MeetingSecurity, {})
+    })
+  });
+});
+
+// 参与者区块
+var ParticipantSection = /*#__PURE__*/(0, _react.memo)(function () {
+  var _useContext10 = (0, _react.useContext)(_store.StoreContext),
+    handleOpenParticipant = _useContext10.handleOpenParticipant;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_participants.ParticipantButton, {
+    onTooltipButtonClick: handleOpenParticipant
+  });
+});
+
+// 屏幕分享区块
+var ShareScreenSection = /*#__PURE__*/(0, _react.memo)(function () {
+  var _useContext11 = (0, _react.useContext)(_store.StoreContext),
+    handleNewShare = _useContext11.handleNewShare;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareScreenButton.ShareScreenButton, {
+    onCreateNewShareButtonClick: handleNewShare
+  });
+});
+
+// 更多操作区块
+var MoreActionsSection = (0, _mobxReact.observer)(function () {
+  var _useState1 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
+    moreVisible = _useState10[0],
+    setMoreVisible = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    isShowMeetingDetailPortal = _useState12[0],
+    setIsShowMeetingDetailPortal = _useState12[1];
+  var _useContext12 = (0, _react.useContext)(_store.StoreContext),
+    newMessageCount = _useContext12.newMessageCount,
+    hasChatPermission = _useContext12.hasChatPermission,
+    setPopoverArea = _useContext12.setPopoverArea;
+  var _useContext13 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext13.isShareActionNavHidden;
   (0, _react.useEffect)(function () {
     if (!moreVisible) {
-      setShowMeetingDetailPortal(false);
-      browserWindow.setIgnoreMouseEvents(true, {
-        forward: true
-      });
+      setIsShowMeetingDetailPortal(false);
     }
   }, [moreVisible]);
-  (0, _react.useEffect)(function () {
-    var handleDisplayRemoved = function handleDisplayRemoved(event, display) {
-      if (display.id === currentShareDisplayId) {
-        handlerStopShare();
-        browserWindow.close();
-      } else {
-        recomputControlBarPosAfterDisplayChange();
-      }
-    };
-    var handleDisplayAdded = function handleDisplayAdded(event, newDisplay) {
-      recomputControlBarPosAfterDisplayChange();
-    };
-    window.runtime.screen.addListener('display-removed', handleDisplayRemoved);
-    window.runtime.screen.addListener('display-added', handleDisplayAdded);
-    return function () {
-      window.runtime.screen.removeListener('display-removed', handleDisplayRemoved);
-      window.runtime.screen.removeListener('display-added', handleDisplayAdded);
-      removeObserverWindowBounds();
-    };
-  }, [currentShareDisplayId]);
-  var handleIgnoreMinimize = function handleIgnoreMinimize(event) {
-    event.preventDefault();
-    // browserWindow.restore();
-  };
-  function handleBlur() {
+  var handleMoreButtonClick = (0, _react.useCallback)(function () {
+    setMoreVisible(!moreVisible);
+  }, [moreVisible]);
+  var handlePopoverClose = (0, _react.useCallback)(function () {
     setMoreVisible(false);
-    setShowSecurityPopover(false);
-  }
-  function getScreenBounds() {
-    // 当电脑系统更改主屏幕为非共享屏幕时，会导致正在共享屏幕的 x, y 坐标发生改变，并触发 merics-changed 事件，去重新计算 controlbar 的热区位置
-    // 但当初分享屏幕时是通过所选择屏幕的 bounds 通过 currentShareBounds 传递到热区计算函数获知到热区应该在哪个显示器上的
-    // 因此当系统的主屏幕发生改变，再次通过这个 currentShareBounds 获取的 x, y 坐标就是错误的，以下逻辑既是对此情况做出相应处理
-    // 同一个 currentShareBounds 代表选择分享的屏幕没有发生变化，通过它作为 key 去存屏幕信息。当存在这个 key 时，取出来去拿屏幕 id 去匹配，并重新赋值 x，y
-    var screenBounds = undefined;
-    if (recordShareBounds.has(currentShareBounds)) {
-      var _window$runtime$scree;
-      var _ref2 = recordShareBounds.get(currentShareBounds),
-        ox = _ref2.x,
-        oy = _ref2.y,
-        bounds = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
-      var _ref3 = ((_window$runtime$scree = window.runtime.screen.getAllDisplays().find(function (display) {
-          return bounds.displayId === display.id;
-        })) === null || _window$runtime$scree === void 0 ? void 0 : _window$runtime$scree.bounds) || {
-          x: ox,
-          y: oy
-        },
-        x = _ref3.x,
-        y = _ref3.y;
-      screenBounds = _objectSpread({
-        x: x,
-        y: y
-      }, bounds);
-      browserWindow.setBounds(screenBounds);
-      log("[ControlBarView]: [getScreenBounds][screen-share], screenBounds: ".concat(JSON.stringify(screenBounds)));
-    } else {
-      recordShareBounds.clear();
-      screenBounds = (0, _dialogUtils.getCurrentSharingWorkArea)({
-        currentShareBounds: currentShareBounds
-      });
-      recordShareBounds.set(currentShareBounds, screenBounds);
-      log("[ControlBarView]: [getScreenBounds][screen-share], screenBounds: ".concat(JSON.stringify(screenBounds)));
-    }
-    return screenBounds;
-  }
-  function checkMouseOver() {
-    if (windowFocusTimerRef.current) clearInterval(windowFocusTimerRef.current);
-    var screenBounds = getScreenBounds();
-    (0, _dialogUtils.handleCheckMouseOver)({
-      elem: rndRef.current,
-      browserWindow: browserWindow,
-      screenBounds: screenBounds,
-      newRendererWindow: newRendererWindow,
-      callback: function callback(timerId) {
-        windowFocusTimerRef.current = timerId;
-      },
-      dialog: _constant.FcrUIDialogKey.CONTROL_BAR
+    setPopoverArea({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
     });
-  }
-  (0, _react.useEffect)(function () {
-    (0, _platform.isWindows)() ? checkMouseOver() : getScreenBounds();
-    window.runtime.screen.addListener(
-    // @ts-ignore
-    'display-metrics-changed', (0, _platform.isWindows)() ? checkMouseOver : getScreenBounds);
-    browserWindow.setAlwaysOnTop(false);
-    handleMouseLeave();
-    document.body.classList.add(_toast.TOAST_ROOT_CLASS_NAME);
-    browserWindow.addListener('minimize', handleIgnoreMinimize);
-    window.addEventListener('blur', handleBlur);
-    alwayOnTopTimerRef.current = setTimeout(function () {
-      browserWindow.setAlwaysOnTop(true, 'screen-saver');
-    }, 500);
-    return function () {
-      window.runtime.screen.removeListener(
-      // @ts-ignore
-      'display-metrics-changed', (0, _platform.isWindows)() ? checkMouseOver : getScreenBounds);
-      window.removeEventListener('blur', handleBlur);
-      clearTimeout(hideTimeout.current);
-      clearTimeout(alwayOnTopTimerRef.current);
-      clearInterval(windowFocusTimerRef.current);
-    };
-  }, [currentShareId]);
+  }, []);
+  var preventDefault = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+  }, []);
+  var handleBoundariesChanged = (0, _react.useCallback)(function (boundaries) {
+    console.log('More boundaries changed');
+    setPopoverArea(boundaries);
+  }, []);
+  var handlerVisibleChange = function handlerVisibleChange(visible) {
+    setMoreVisible(visible);
+  };
   (0, _react.useEffect)(function () {
-    if (rndRef.current && (0, _platform.isWindows)()) {
-      if (controlBarMouseOver) {
-        browserWindow.setAlwaysOnTop(true, 'pop-up-menu');
-      }
+    if (isShareActionNavHidden) {
+      setMoreVisible(false);
+      setPopoverArea({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      });
     }
-  }, [controlBarMouseOver]);
-  (0, _react.useEffect)(function () {
-    browserWindow.on('blur', handleBlur);
-    return function () {
-      browserWindow.off('blur', handleBlur);
-    };
-  }, [browserWindow]);
-  return currentShareId ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, bind()), {}, {
-    style: {
-      width: 'fit-content',
-      transform: "translate(".concat(coordination.x, "px, ").concat(coordination.y, "px)")
-    },
-    onClick: handleBlur,
+  }, [isShareActionNavHidden]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge.FcrBadge, {
+    count: newMessageCount,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      ref: rndRef,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onMouseOver: handleMouseEnter,
-      onMouseMove: handleMouseMove,
-      onClick: handleMouseMove,
-      className: "fcr-flex \n        share-action-nav__container\n         ".concat(navCurrentPosition === _enums.TransferPosition.BOTTOM ? 'share-action-nav__move_to_bottom' : 'share-action-nav__move_to_top', "\n         ").concat(hiddenShareActionNav ? 'share-action-nav__hidden' : '', "\n      ").concat(hiddenShareActionNav && coordination.y === browserHeight - NAV_HEIGHT - TITLE_HEIGHT ? 'completely-hidden-in-bottom' : '', "\n      // \u8FD9\u91CC\u7684\u903B\u8F91\u662F\uFF0C \u5F53control-bar\u5728\u9876\u90E8\u65F6\uFF0C\u5982\u679C\u5F53\u524D\u7684Y\u5750\u6807\u5C0F\u4E8E\u6807\u9898\u680F\u7684\u9AD8\u5EA6\uFF0C\u6216\u8005\u7B49\u4E8E\u6807\u9898\u680F\u7684\u9AD8\u5EA6\uFF0C\u6216\u8005\u7B49\u4E8E0\uFF0C\u90A3\u4E48\u5C31\u6DFB\u52A0\u5438\u9876\u6548\u679C\n      // \u5F53\u7535\u8111\u6709\u4E24\u4E2A\u5C4F\u5E55\u65F6\uFF0CTITLE_HEIGHT\u7684\u503C\u53EF\u80FD\u4E3A\u8D1F\u6570\n      ").concat(hiddenShareActionNav && (coordination.y < TITLE_HEIGHT || coordination.y === TITLE_HEIGHT || coordination.y === 0) ? 'completely-hidden-in-top' : '', "\n      "),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ControlbarContext.Provider, {
-        value: {
-          browserWindow: browserWindow
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "share-action-nav share-action-nav__can-draggable ".concat(hiddenShareActionNav ? 'invisible' : ''),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "share-action-nav__media-control-group",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_deviceControl["default"], {
-              showTitle: false
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
-            style: {
-              marginRight: 24,
-              height: '20px',
-              marginLeft: 30
-            }
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "share-action-nav__meeting-control-group",
-            children: [hasSecurityPermission && /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
-              showArrow: false,
-              mouseEnterDelay: 0,
-              overlayInnerStyle: {
-                width: '300px',
-                boxShadow: 'none',
-                backgroundColor: 'none',
-                borderRadius: 'var(--fcr_cornerradius_l)'
-              },
-              content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_securityMenu["default"], {
-                showLockedRoomToast: showLockedRoomToast,
-                privilege: privilegeProvider,
-                setEnableWaitingRoom: setEnableWaitingRoom,
-                checkedStateMap: checkedStateMap,
-                setCheckedStateMap: setCheckedStateMap
-              }),
-              trigger: "click",
-              visible: showSecurityPopover,
-              onVisibleChange: function onVisibleChange(visible) {
-                return setShowSecurityPopover(visible);
-              },
-              placement: "bottom",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                onClick: function onClick(e) {
-                  return e.stopPropagation();
-                },
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingSecurity.MeetingSecurity, {})
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_participants.ParticipantButton, {
-              onTooltipButtonClick: function onTooltipButtonClick() {
-                handleMoreClick(_enums.MoreAction.OPEN_PARTICIPANTS);
-              }
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
-              style: {
-                margin: '0 8px',
-                height: '20px'
-              }
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareScreenButton.ShareScreenButton, {
-              onCreateNewShareButtonClick: createNewShare
-            }), annotationButtonVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_annotationButton.AnnotationButton, {}), liveStreamingButtonVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_stopLiveStreaming.StopLiveStreamingButton, {}), recordingButtonVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cloudRecordingButtons.CloudRecordingButtons, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge.FcrBadge, {
-              count: newMessageCount[_type.FcrUIRoomType.MAIN_ROOM] || 0,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                onClick: function onClick(e) {
-                  return e.stopPropagation();
-                },
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_more.More, {
-                  visible: moreVisible,
-                  onButtonClick: function onButtonClick() {
-                    return setMoreVisible(!moreVisible);
-                  },
-                  morePopoverContent: isShowMeetingDetailPortal ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingDetails.MeetingDetails, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_moreActions.MorePopoverContent, {
-                    closePopover: function closePopover() {
-                      return setMoreVisible(false);
-                    },
-                    hasChatPermission: true
-                  })
-                })
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
-              style: {
-                margin: '0 8px',
-                height: '20px'
-              }
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareAudio.ShareAudio, {
-              browserWindow: browserWindow,
-              shareWithAudio: shareWithAudio,
-              currentAudioChannel: shareAudioProcessingChannel,
-              toggleShareWithAudio: setShareWithAudioState,
-              onSwitchAudioChannel: setShareAudioProcessingChannel
-            })]
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareStateNav.ShareStateNav, {
-          onShareStateNavTransferPosition: handlerShareNavTransferPosition,
-          currentPosition: navCurrentPosition,
-          onStopShare: handlerStopShare
-        })]
+      onClick: preventDefault,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_more.More, {
+        visible: moreVisible,
+        onButtonClick: handleMoreButtonClick,
+        onVisibleChange: handlerVisibleChange,
+        morePopoverContent: isShowMeetingDetailPortal ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingDetails.MeetingDetails, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
+          onBoundariesChanged: handleBoundariesChanged,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_moreActions.MorePopoverContent, {
+            closePopover: handlePopoverClose,
+            hasChatPermission: hasChatPermission
+          })
+        })
       })
     })
-  })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+  });
+});
+
+// 音频分享区块
+var ShareAudioSection = (0, _mobxReact.observer)(function () {
+  var _useContext14 = (0, _react.useContext)(_store.StoreContext),
+    setShareWithAudioState = _useContext14.setShareWithAudioState,
+    isSharingWithAudio = _useContext14.isSharingWithAudio,
+    setShareAudioMode = _useContext14.setShareAudioMode,
+    audioShareMode = _useContext14.audioShareMode;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareAudio.ShareAudio, {
+    shareWithAudio: isSharingWithAudio,
+    currentAudioChannel: audioShareMode,
+    toggleShareWithAudio: setShareWithAudioState,
+    onSwitchAudioChannel: setShareAudioMode
+  });
+});
+
+// 分享状态导航（控制栏下部）
+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 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;
+
+  // 从store获取当前位置和相关方法
+  var navCurrentPosition = calculation.navPosition; // 从store获取
+
+  var handleTransferPosition = (0, _react.useCallback)(function (position) {
+    setNavPosition(position);
+    if (position === _enums.TransferPosition.TOP) {
+      moveTop();
+    } else {
+      moveBottom();
+    }
+  }, [moveTop, moveBottom]);
+  var handleMouseEnterNav = (0, _react.useCallback)(function () {
+    setIsShareActionNavHidden(false);
+    handleMouseEnter();
+    cancelActiveTask();
+  }, [setIsShareActionNavHidden, handleMouseEnter, cancelActiveTask]);
+  var handleMouseLeaveNav = (0, _react.useCallback)(function () {
+    handleMouseLeave();
+    restartActiveTask();
+  }, [handleMouseLeave, restartActiveTask]);
+  var handleBoundariesChanged = (0, _react.useCallback)(function (boundaries) {
+    console.log('ShareStateNavigation boundaries changed');
+    setStateNavArea(boundaries);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
+    onBoundariesChanged: handleBoundariesChanged,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareStateNav.ShareStateNav, {
+      onMouseEnter: handleMouseEnterNav,
+      onMouseLeave: handleMouseLeaveNav,
+      onShareStateNavTransferPosition: handleTransferPosition,
+      currentPosition: navCurrentPosition,
+      onStopShare: handlerStopShare
+    })
+  });
 });