fcr-ui-scene 3.8.1 → 3.9.0-alpha

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,696 @@
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/web.timers.js";
+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) { _defineProperty(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; }
+import { observer } from 'mobx-react';
+import React, { useContext, useState, useCallback, useMemo, memo, useEffect, useRef, useLayoutEffect } from 'react';
+import classNames from 'classnames';
+import { useDrag } from '@use-gesture/react';
+import { More } from 'agora-ui-foundation/lib/components/room-screen-share-state-bar/more';
+import { FcrBadge } from 'agora-ui-foundation/lib/components/badge';
+import FcrDivider from 'agora-ui-foundation/lib/components/divider';
+import { FcrPopover } from 'agora-ui-foundation/lib/components/popover';
+import { MeetingSecurity } from 'agora-ui-foundation/lib/components/room-screen-share-state-bar/meeting-security';
+import { ParticipantButton } from 'agora-ui-foundation/lib/components/room-screen-share-state-bar/participants';
+import { ShareScreenButton } from 'agora-ui-foundation/lib/components/room-screen-share-state-bar/share-screen-button';
+import { MeetingDetails } from '../state-bar/meeting-details';
+import { CloudRecordingButtons } from './components/cloud-recording-buttons';
+import { MorePopoverContent } from './components/more-actions';
+import { ShareStateNav } from './components/share-state-nav';
+import { StopLiveStreamingButton } from './components/stop-live-streaming';
+import { TransferPosition } from './enums';
+import { StoreContext } from './store';
+import { ControlBarCalculationContext, ControlBarCalculationUpdaterContext, DragContext, DragStateUpdaterContext } from './context';
+import { getLogger } from '../../utilities/logger';
+import SecurityMenu from '../components/security-menu';
+import { ShareAudio } from './components/share-audio';
+import { AgoraScheduler } from 'agora-foundation/lib/schedule';
+import { MicrophoneControl } from './components/microphone';
+import { CameraControl } from './components/carmera';
+import { BoundaryDetector } from './components/boundary-detector';
+import { AppsPopover } from './components/apps-popover';
+import { usePopoverWatcher } from './hooks';
+import { AnnotationButton } from './components/annotation-button';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var HIDDEN_TIMEOUT = 3000;
+var NAV_HEIGHT = 84;
+var WINDOW_RENDER_DELAY = 500;
+var FADE_ANIMATION_DURATION = 350;
+export var View = observer(function () {
+  return /*#__PURE__*/_jsx(DraggableControlBarProvider, {
+    children: /*#__PURE__*/_jsx(DraggableContainer, {
+      children: /*#__PURE__*/_jsx(ControlBar, {})
+    })
+  });
+});
+
+// 拖拽和计算状态提供者
+var DraggableControlBarProvider = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children;
+  var _useContext = useContext(StoreContext),
+    draggableArea = _useContext.draggableArea,
+    titleHeight = _useContext.titleHeight;
+  var _useState = useState(function () {
+      return {
+        position: {
+          x: 0,
+          y: 0
+        },
+        isDragging: false
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragState = _useState2[0],
+    setDragState = _useState2[1];
+  var _useState3 = useState(TransferPosition.TOP),
+    _useState4 = _slicedToArray(_useState3, 2),
+    navPosition = _useState4[0],
+    setNavPosition = _useState4[1];
+  var _useState5 = useState({
+      width: 0,
+      height: 0
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dimensions = _useState6[0],
+    setDimensions = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isShareActionNavHidden = _useState8[0],
+    setIsShareActionNavHidden = _useState8[1];
+  var taskRef = useRef();
+  var restartActiveTask = useCallback(function () {
+    if (taskRef.current) {
+      taskRef.current.stop();
+      taskRef.current = undefined;
+    }
+    taskRef.current = AgoraScheduler.shared.addDelayTask(function () {
+      setIsShareActionNavHidden(true);
+    }, HIDDEN_TIMEOUT);
+  }, []);
+  var cancelActiveTask = useCallback(function () {
+    if (taskRef.current) {
+      taskRef.current.stop();
+      taskRef.current = undefined;
+    }
+  }, []);
+
+  // 计算控制栏的显示状态和位置
+  var calculation = 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 = useCallback(function (newState) {
+    setDragState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), newState);
+    });
+  }, []);
+  var moveTop = useCallback(function () {
+    setDragState(function (state) {
+      return {
+        position: {
+          x: state.position.x,
+          y: 0
+        },
+        isDragging: false
+      };
+    });
+  }, []);
+  var moveBottom = 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
+      };
+    });
+  }, [draggableArea, dimensions, titleHeight]);
+  useEffect(function () {
+    if (calculation.isAttachToTop) {
+      getLogger().info('[ControlBar] Control bar hit top');
+    }
+    if (calculation.isAttachToBottom) {
+      getLogger().info('[ControlBar] Control bar hit bottom');
+    }
+  }, [calculation.isAttachToTop, calculation.isAttachToBottom]);
+  var updater = useMemo(function () {
+    return {
+      setDimensions: setDimensions,
+      moveTop: moveTop,
+      moveBottom: moveBottom,
+      setIsShareActionNavHidden: setIsShareActionNavHidden,
+      setNavPosition: setNavPosition,
+      restartActiveTask: restartActiveTask,
+      cancelActiveTask: cancelActiveTask
+    };
+  }, [setDimensions, moveTop, moveBottom, setIsShareActionNavHidden, setNavPosition, restartActiveTask, cancelActiveTask]);
+  useEffect(function () {
+    restartActiveTask();
+  }, []);
+  return /*#__PURE__*/_jsx(DragContext.Provider, {
+    value: dragState,
+    children: /*#__PURE__*/_jsx(ControlBarCalculationContext.Provider, {
+      value: calculation,
+      children: /*#__PURE__*/_jsx(ControlBarCalculationUpdaterContext.Provider, {
+        value: updater,
+        children: /*#__PURE__*/_jsx(DragStateUpdaterContext.Provider, {
+          value: updateDragState,
+          children: children
+        })
+      })
+    })
+  });
+});
+
+// 拖拽容器组件
+var DraggableContainer = /*#__PURE__*/memo(function (_ref2) {
+  var children = _ref2.children;
+  var dragState = useContext(DragContext);
+  var updateDragState = useContext(DragStateUpdaterContext);
+  var _useContext2 = useContext(ControlBarCalculationContext),
+    barDimensions = _useContext2.barDimensions;
+  var _useContext3 = useContext(ControlBarCalculationUpdaterContext),
+    setNavPosition = _useContext3.setNavPosition;
+  var _useContext4 = useContext(StoreContext),
+    draggableArea = _useContext4.draggableArea,
+    titleHeight = _useContext4.titleHeight;
+
+  // 获取布局信息
+  var layoutInfo = useMemo(function () {
+    var browserWidth = draggableArea.width;
+    var browserHeight = draggableArea.height;
+    var barBoundWidth = barDimensions.width;
+    var barBoundHeight = barDimensions.height;
+    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 = useDrag(function (_ref3) {
+    var _ref3$delta = _slicedToArray(_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
+        },
+        isDragging: true
+      });
+    } else {
+      var position = dragState.position;
+      var MAX_Y = layoutInfo.browserHeight - NAV_HEIGHT - layoutInfo.titleHeight;
+
+      // 确定传输位置
+      var transferPosition = TransferPosition.TOP;
+      if (position.y >= MAX_Y) {
+        transferPosition = TransferPosition.BOTTOM;
+      } else if (position.y <= 0) {
+        transferPosition = TransferPosition.TOP;
+      }
+      setNavPosition(transferPosition);
+      updateDragState({
+        isDragging: false
+      });
+    }
+  }, {
+    filterTaps: true
+  });
+  var style = 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__*/_jsx("div", _objectSpread(_objectSpread({}, bind()), {}, {
+    style: style,
+    children: children
+  }));
+});
+
+// 主控制栏组件
+var ControlBar = observer(function () {
+  var containerRef = React.useRef(null);
+  var calculation = useContext(ControlBarCalculationContext);
+  var _useContext5 = useContext(StoreContext),
+    draggableArea = _useContext5.draggableArea,
+    currentShareDisplayId = _useContext5.currentShareDisplayId,
+    updateWindowBounds = _useContext5.updateWindowBounds,
+    setPopoverArea = _useContext5.setPopoverArea,
+    resetPopoverArea = _useContext5.resetPopoverArea;
+  var updatePosition = useContext(DragStateUpdaterContext);
+  var _useContext6 = useContext(ControlBarCalculationUpdaterContext),
+    setDimensions = _useContext6.setDimensions,
+    setNavPosition = _useContext6.setNavPosition;
+  var _useState9 = useState('hidden'),
+    _useState0 = _slicedToArray(_useState9, 2),
+    visibility = _useState0[0],
+    setVisibility = _useState0[1];
+  var rootClassNames = useMemo(function () {
+    return classNames('fcr-flex', 'share-action-nav__container', {
+      'share-action-nav__move_to_bottom': calculation.navPosition === TransferPosition.BOTTOM,
+      'share-action-nav__move_to_top': calculation.navPosition === TransferPosition.TOP,
+      'share-action-nav__hidden': calculation.isShareActionNavHidden,
+      'completely-hidden-in-bottom': calculation.isAttachToBottom,
+      'completely-hidden-in-top': calculation.isAttachToTop
+    });
+  }, [calculation]);
+  useEffect(function () {
+    var ro = new ResizeObserver(function () {
+      if (!containerRef.current) return;
+      var bounds = containerRef.current.getBoundingClientRect();
+      setDimensions({
+        width: bounds.width,
+        height: bounds.height
+      });
+    });
+    ro.observe(containerRef.current);
+    return function () {
+      return ro.disconnect();
+    };
+  }, []);
+  useEffect(function () {
+    setVisibility('hidden');
+  }, [currentShareDisplayId]);
+  useLayoutEffect(function () {
+    if (visibility === 'hidden') {
+      var timerId = setTimeout(function () {
+        updateWindowBounds(draggableArea);
+        timerId = setTimeout(function () {
+          if (!containerRef.current) return;
+          var bounds = containerRef.current.getBoundingClientRect();
+          updatePosition({
+            position: {
+              x: draggableArea.width / 2 - bounds.width / 2,
+              y: 0
+            }
+          });
+          setNavPosition(TransferPosition.TOP);
+          setVisibility('visible');
+        });
+      }, WINDOW_RENDER_DELAY);
+      return function () {
+        return clearTimeout(timerId);
+      };
+    }
+  }, [visibility]);
+  usePopoverWatcher(containerRef, setPopoverArea, resetPopoverArea);
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    className: rootClassNames,
+    style: {
+      visibility: visibility
+    },
+    children: [/*#__PURE__*/_jsx(ControlBarContent, {}), /*#__PURE__*/_jsx(ShareStateNavigation, {})]
+  });
+});
+
+// 控制栏内容组件（控制栏上部）
+var ControlBarContent = /*#__PURE__*/memo(function () {
+  var _useContext7 = useContext(StoreContext),
+    handleMouseEnter = _useContext7.handleMouseEnter,
+    handleMouseLeave = _useContext7.handleMouseLeave,
+    setControlBarContentArea = _useContext7.setControlBarContentArea;
+  var _useContext8 = useContext(ControlBarCalculationUpdaterContext),
+    setIsShareActionNavHidden = _useContext8.setIsShareActionNavHidden,
+    restartActiveTask = _useContext8.restartActiveTask,
+    cancelActiveTask = _useContext8.cancelActiveTask;
+  var calculation = useContext(ControlBarCalculationContext);
+  var navClassName = useMemo(function () {
+    return "share-action-nav share-action-nav__can-draggable ".concat(calculation.isShareActionNavHidden ? 'invisible' : '');
+  }, [calculation.isShareActionNavHidden]);
+  var handleMouseEnterNav = useCallback(function () {
+    setIsShareActionNavHidden(false);
+    handleMouseEnter();
+    cancelActiveTask();
+  }, []);
+  var handleMouseLeaveNav = useCallback(function () {
+    handleMouseLeave();
+    restartActiveTask();
+  }, []);
+  var handleBoundariesChanged = useCallback(function (boundaries) {
+    console.log('ControlBarContent boundaries changed');
+    setControlBarContentArea(boundaries);
+  }, []);
+  var detector = useRef(null);
+  useEffect(function () {
+    var timerId = 0;
+    if (calculation.isShareActionNavHidden) {
+      timerId = setTimeout(function () {
+        setControlBarContentArea({
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0
+        });
+      }, FADE_ANIMATION_DURATION);
+    } else {
+      timerId = setTimeout(function () {
+        var _detector$current;
+        var bounds = (_detector$current = detector.current) === null || _detector$current === void 0 ? void 0 : _detector$current.getBoundaries();
+        if (bounds) {
+          setControlBarContentArea(bounds);
+        }
+      }, FADE_ANIMATION_DURATION);
+    }
+    return function () {
+      return clearTimeout(timerId);
+    };
+  }, [calculation.isShareActionNavHidden]);
+  return /*#__PURE__*/_jsx(BoundaryDetector, {
+    onBoundariesChanged: handleBoundariesChanged,
+    ref: detector,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: navClassName,
+      onMouseEnter: handleMouseEnterNav,
+      onMouseLeave: handleMouseLeaveNav,
+      children: [/*#__PURE__*/_jsx(MediaControlGroup, {}), /*#__PURE__*/_jsx(FcrDivider, {
+        style: {
+          marginRight: 24,
+          height: '20px',
+          marginLeft: 30
+        }
+      }), /*#__PURE__*/_jsx(MeetingControlGroup, {})]
+    })
+  });
+});
+
+// 媒体控制组
+var MediaControlGroup = /*#__PURE__*/memo(function () {
+  return /*#__PURE__*/_jsxs("div", {
+    className: "share-action-nav__media-control-group",
+    children: [/*#__PURE__*/_jsx(MicrophoneControl, {}), /*#__PURE__*/_jsx(CameraControl, {})]
+  });
+});
+
+// 会议控制组
+var MeetingControlGroup = observer(function () {
+  var _useContext9 = useContext(StoreContext),
+    liveStreamingButtonVisible = _useContext9.liveStreamingButtonVisible,
+    recordingButtonVisible = _useContext9.recordingButtonVisible,
+    hasSecurityPermission = _useContext9.hasSecurityPermission;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "share-action-nav__meeting-control-group",
+    children: [/*#__PURE__*/_jsx(SecurityMenuSection, {
+      hasSecurityPermission: hasSecurityPermission
+    }), /*#__PURE__*/_jsx(ParticipantSection, {}), /*#__PURE__*/_jsx(FcrDivider, {
+      style: {
+        margin: '0 8px',
+        height: '20px'
+      }
+    }), /*#__PURE__*/_jsx(ShareScreenSection, {}), /*#__PURE__*/_jsx(AnnotationSection, {}), liveStreamingButtonVisible && /*#__PURE__*/_jsx(StopLiveStreamingButton, {}), recordingButtonVisible && /*#__PURE__*/_jsx(CloudRecordingButtons, {}), /*#__PURE__*/_jsx(MoreActionsSection, {}), /*#__PURE__*/_jsx(FcrDivider, {
+      style: {
+        margin: '0 8px',
+        height: '20px'
+      }
+    }), /*#__PURE__*/_jsx(ShareAudioSection, {})]
+  });
+});
+
+// 安全菜单区块
+var SecurityMenuSection = /*#__PURE__*/memo(function (_ref4) {
+  var hasSecurityPermission = _ref4.hasSecurityPermission;
+  if (!hasSecurityPermission) return null;
+  var _useContext0 = useContext(ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext0.isShareActionNavHidden;
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    showSecurityPopover = _useState10[0],
+    setShowSecurityPopover = _useState10[1];
+  var handleVisibilityChange = useCallback(function (visible) {
+    setShowSecurityPopover(visible);
+  }, []);
+  useEffect(function () {
+    if (isShareActionNavHidden) {
+      setShowSecurityPopover(false);
+    }
+  }, [isShareActionNavHidden]);
+  return /*#__PURE__*/_jsx(FcrPopover, {
+    overlayClassName: "share-action-nav__security-popover",
+    showArrow: false,
+    mouseEnterDelay: 0,
+    overlayInnerStyle: {
+      width: '300px',
+      boxShadow: 'none',
+      backgroundColor: 'none',
+      borderRadius: 'var(--fcr_cornerradius_l)'
+    },
+    content: /*#__PURE__*/_jsx(SecurityMenu, {}),
+    trigger: "click",
+    visible: showSecurityPopover,
+    onVisibleChange: handleVisibilityChange,
+    placement: "bottom",
+    children: /*#__PURE__*/_jsx("div", {
+      onClick: function onClick(e) {
+        e.preventDefault();
+      },
+      children: /*#__PURE__*/_jsx(MeetingSecurity, {})
+    })
+  });
+});
+
+// 参与者区块
+var ParticipantSection = /*#__PURE__*/memo(function () {
+  var _useContext1 = useContext(StoreContext),
+    handleOpenParticipant = _useContext1.handleOpenParticipant;
+  return /*#__PURE__*/_jsx(ParticipantButton, {
+    onTooltipButtonClick: handleOpenParticipant
+  });
+});
+
+// 屏幕分享区块
+var ShareScreenSection = /*#__PURE__*/memo(function () {
+  var _useContext10 = useContext(StoreContext),
+    handleNewShare = _useContext10.handleNewShare;
+  return /*#__PURE__*/_jsx(ShareScreenButton, {
+    onCreateNewShareButtonClick: handleNewShare
+  });
+});
+
+// 开启批注区块
+var AnnotationSection = observer(function () {
+  var _useContext11 = useContext(StoreContext),
+    toggleAnnotation = _useContext11.toggleAnnotation,
+    allowWriteAnnotation = _useContext11.allowWriteAnnotation,
+    clearAnnotation = _useContext11.clearAnnotation,
+    isWriteAnnotationAllowed = _useContext11.isWriteAnnotationAllowed,
+    hasPermissionAllowWriteAnnotation = _useContext11.hasPermissionAllowWriteAnnotation,
+    hasAnnotationStartPermission = _useContext11.hasAnnotationStartPermission;
+  var _useContext12 = useContext(ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext12.isShareActionNavHidden;
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    visible = _useState12[0],
+    setVisible = _useState12[1];
+  useEffect(function () {
+    if (isShareActionNavHidden) {
+      setVisible(false);
+    }
+  }, [isShareActionNavHidden]);
+  return /*#__PURE__*/_jsx(AnnotationButton, {
+    onAllowWriteClick: allowWriteAnnotation,
+    onCleanAnnotationClick: clearAnnotation,
+    onAnnotationButtonClick: toggleAnnotation,
+    isWriteAllowed: isWriteAnnotationAllowed,
+    haPermissionAllowWrite: hasPermissionAllowWriteAnnotation,
+    visible: visible,
+    setVisible: setVisible
+  });
+});
+
+// 更多操作区块
+var MoreActionsSection = observer(function () {
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    moreVisible = _useState14[0],
+    setMoreVisible = _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    isShowMeetingDetailPortal = _useState16[0],
+    setIsShowMeetingDetailPortal = _useState16[1];
+  var _useContext13 = useContext(StoreContext),
+    newMessageCount = _useContext13.newMessageCount,
+    hasChatPermission = _useContext13.hasChatPermission,
+    setAppActionbarPopoverVisible = _useContext13.setAppActionbarPopoverVisible;
+  var _useContext14 = useContext(ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext14.isShareActionNavHidden;
+  useEffect(function () {
+    if (!moreVisible) {
+      setIsShowMeetingDetailPortal(false);
+    }
+  }, [moreVisible]);
+  var handleMoreButtonClick = useCallback(function () {
+    setMoreVisible(!moreVisible);
+  }, [moreVisible]);
+  var handlePopoverClose = useCallback(function () {
+    setMoreVisible(false);
+  }, []);
+  var preventDefault = useCallback(function (e) {
+    e.stopPropagation();
+    setAppActionbarPopoverVisible(false);
+  }, []);
+  var handlerVisibleChange = function handlerVisibleChange(visible) {
+    setMoreVisible(visible);
+  };
+  useEffect(function () {
+    if (isShareActionNavHidden) {
+      setMoreVisible(false);
+      setAppActionbarPopoverVisible(false);
+    }
+  }, [isShareActionNavHidden]);
+  return /*#__PURE__*/_jsx(FcrBadge, {
+    count: newMessageCount,
+    children: /*#__PURE__*/_jsx("div", {
+      onClick: preventDefault,
+      children: /*#__PURE__*/_jsx(AppsPopover, {
+        children: /*#__PURE__*/_jsx(More, {
+          visible: moreVisible,
+          onButtonClick: handleMoreButtonClick,
+          onVisibleChange: handlerVisibleChange,
+          morePopoverContent: isShowMeetingDetailPortal ? /*#__PURE__*/_jsx(MeetingDetails, {}) : /*#__PURE__*/_jsx(MorePopoverContent, {
+            closePopover: handlePopoverClose,
+            hasChatPermission: hasChatPermission
+          })
+        })
+      })
+    })
+  });
+});
+
+// 音频分享区块
+var ShareAudioSection = observer(function () {
+  var _useContext15 = useContext(StoreContext),
+    setShareWithAudioState = _useContext15.setShareWithAudioState,
+    isSharingWithAudio = _useContext15.isSharingWithAudio,
+    setShareAudioMode = _useContext15.setShareAudioMode,
+    audioShareMode = _useContext15.audioShareMode;
+  var _useContext16 = useContext(ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext16.isShareActionNavHidden;
+  var _useState17 = useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    popoverVisible = _useState18[0],
+    setPopoverVisible = _useState18[1];
+  useEffect(function () {
+    if (isShareActionNavHidden) {
+      setPopoverVisible(false);
+    }
+  }, [isShareActionNavHidden]);
+  return /*#__PURE__*/_jsx(ShareAudio, {
+    popoverVisible: popoverVisible,
+    setPopoverVisible: setPopoverVisible,
+    shareWithAudio: isSharingWithAudio,
+    currentAudioChannel: audioShareMode,
+    toggleShareWithAudio: setShareWithAudioState,
+    onSwitchAudioChannel: setShareAudioMode
+  });
+});
+
+// 分享状态导航（控制栏下部）
+var ShareStateNavigation = /*#__PURE__*/memo(function () {
+  var _useContext17 = useContext(StoreContext),
+    handlerStopShare = _useContext17.handlerStopShare,
+    handleMouseEnter = _useContext17.handleMouseEnter,
+    handleMouseLeave = _useContext17.handleMouseLeave,
+    setStateNavArea = _useContext17.setStateNavArea;
+  var calculation = useContext(ControlBarCalculationContext);
+  var _useContext18 = useContext(ControlBarCalculationUpdaterContext),
+    setIsShareActionNavHidden = _useContext18.setIsShareActionNavHidden,
+    setNavPosition = _useContext18.setNavPosition,
+    moveBottom = _useContext18.moveBottom,
+    moveTop = _useContext18.moveTop,
+    restartActiveTask = _useContext18.restartActiveTask,
+    cancelActiveTask = _useContext18.cancelActiveTask;
+
+  // 从store获取当前位置和相关方法
+  var navCurrentPosition = calculation.navPosition; // 从store获取
+
+  var handleTransferPosition = useCallback(function (position) {
+    setNavPosition(position);
+    if (position === TransferPosition.TOP) {
+      moveTop();
+    } else {
+      moveBottom();
+    }
+  }, [moveTop, moveBottom]);
+  var handleMouseEnterNav = useCallback(function () {
+    setIsShareActionNavHidden(false);
+    handleMouseEnter();
+    cancelActiveTask();
+  }, [setIsShareActionNavHidden, handleMouseEnter, cancelActiveTask]);
+  var handleMouseLeaveNav = useCallback(function () {
+    handleMouseLeave();
+    restartActiveTask();
+  }, [handleMouseLeave, restartActiveTask]);
+  var handleBoundariesChanged = useCallback(function (boundaries) {
+    console.log('ShareStateNavigation boundaries changed');
+    setStateNavArea(boundaries);
+  }, []);
+  var detector = useRef(null);
+  useEffect(function () {
+    var timerId = setTimeout(function () {
+      var _detector$current2;
+      var bounds = (_detector$current2 = detector.current) === null || _detector$current2 === void 0 ? void 0 : _detector$current2.getBoundaries();
+      if (bounds) {
+        setStateNavArea(bounds);
+      }
+    }, FADE_ANIMATION_DURATION);
+    return function () {
+      return clearTimeout(timerId);
+    };
+  }, [calculation.isShareActionNavHidden]);
+  return /*#__PURE__*/_jsx(BoundaryDetector, {
+    onBoundariesChanged: handleBoundariesChanged,
+    ref: detector,
+    children: /*#__PURE__*/_jsx(ShareStateNav, {
+      onMouseEnter: handleMouseEnterNav,
+      onMouseLeave: handleMouseLeaveNav,
+      onShareStateNavTransferPosition: handleTransferPosition,
+      currentPosition: navCurrentPosition,
+      onStopShare: handlerStopShare
+    })
+  });
+});