fcr-ui-scene 3.7.5 → 3.7.6

package/lib/modules/audio-stream/index.js

@@ -151,8 +151,10 @@ var AudioStreamUIModule = exports.AudioStreamUIModule = /*#__PURE__*/function (_
         streams.forEach(function (stream) {
           if (stream.owner.userId !== _this._localUser.userId) {
             var isAudioPublished = stream.streamType === _fcrCore.FcrStreamType.AUDIO || stream.streamType === _fcrCore.FcrStreamType.BOTH;
-            var isAudioDeviceStarted = stream.audioSourceState === _fcrCore.FcrMediaSourceState.OPEN;
-            if (isAudioPublished && isAudioDeviceStarted) {
+
+            // const isAudioDeviceStarted = stream.audioSourceState === FcrMediaSourceState.OPEN;
+
+            if (isAudioPublished) {
               _this.logger.info('start play remote audio', stream.streamId);
               streamControl.startPlayRemoteAudioStream(stream.streamId);
             } else {

package/lib/modules/chat/index.css

@@ -107,3 +107,7 @@
 .fcr-line-message-container {
   width: 100%;
 }
+
+.fcr-chat-container-box {
+  height: calc(100% - 46px);
+}

package/lib/modules/chat/view.js

@@ -194,7 +194,8 @@ var Chat = exports.Chat = (0, _mobxReact.observer)(function (_ref) {
       }
     });
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-chat-container-box",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_chatTabs["default"], {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: _objectSpread({}, styles),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatWrapper.ChatWrapper, {

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

@@ -21,12 +21,10 @@
 }
 .fcr-whiteboard-controlbar-body {
   width: 100%;
-  height: 100%;
   /* display: flex;
   align-items: center;
   justify-content: center; */
   position: absolute;
-  top: 0;
   bottom: 0;
   background-color: #e5e7eb;
 }

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

@@ -20,6 +20,7 @@ type WhiteboardProps = {
     isSharingWithAudio?: boolean;
     ownerUserName: string;
     isMyBoard: boolean;
+    showControlBar?: boolean;
 };
 type PickRequired<T extends object, K extends keyof T> = Required<Pick<T, K>> & Omit<T, K>;
 type SharingType<T extends 'whiteboard' | 'screenshare' | undefined> = T extends 'whiteboard' ? WhiteboardProps : PickRequired<Partial<WhiteboardProps>, 'onZoomIn' | 'onZoomOut' | 'onAdaptive' | 'onOrigin' | 'isSharingWithAudio'>;

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

@@ -21,9 +21,10 @@ var _i18n = require("agora-ui-foundation/lib/i18n");
 var _type2 = require("../../whiteboard/type");
 var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
 require("./index.css");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _jsxRuntime = require("react/jsx-runtime");
 var initWidth = 1920;
-var initHeight = 1220;
+var initHeight = 1080;
 var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardControlbar(props) {
   var transI18n = (0, _i18n.useI18n)();
   var onClose = props.onClose,
@@ -43,7 +44,9 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
     onZoomOut = props.onZoomOut,
     onAdaptive = props.onAdaptive,
     onOrigin = props.onOrigin,
-    isSharingWithAudio = props.isSharingWithAudio;
+    isSharingWithAudio = props.isSharingWithAudio,
+    _props$showControlBar = props.showControlBar,
+    showControlBar = _props$showControlBar === void 0 ? true : _props$showControlBar;
   var boardRef = (0, _react.useRef)(undefined);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -81,16 +84,28 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
   var cursor = (0, _react.useMemo)(function () {
     return _enums.FcrBoardToolType[currentTool || _enums.FcrBoardToolType.NONE].toLowerCase();
   }, [currentTool]);
+  var resetHeight = (0, _react.useCallback)(function () {
+    var _boardRef$current;
+    var height = ((_boardRef$current = boardRef.current) === null || _boardRef$current === void 0 ? void 0 : _boardRef$current.clientHeight) || 0;
+    setContianHeight(height);
+  }, []);
+  var resetHeightDebounce = (0, _react.useCallback)((0, _debounce["default"])(resetHeight, 100), []);
   (0, _react.useEffect)(function () {
+    window.addEventListener('resize', resetHeightDebounce);
     return function () {
-      return setLoading(false);
+      setLoading(false);
+      window.removeEventListener('resize', resetHeightDebounce);
+      if (boardRef.current) {
+        boardRef.current.removeEventListener('transitionend', resetHeight);
+      }
     };
   }, []);
   var handleBoardRef = function handleBoardRef(ref) {
-    var _boardRef$current;
     boardRef.current = ref;
-    var height = ((_boardRef$current = boardRef.current) === null || _boardRef$current === void 0 ? void 0 : _boardRef$current.clientHeight) || 0;
-    setContianHeight(height);
+    resetHeight();
+    if (boardRef.current) {
+      boardRef.current.addEventListener('transitionend', resetHeight);
+    }
   };
   var showEditButton = !controlEnabled && !isMyBoard && !isHost && isWhiteboard;
   var showChangeThemeButton = (canWriteBoard || isMyBoard || isHost) && setTheme && currentTheme;
@@ -175,7 +190,7 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
     style: {
       height: isWhiteboard ? '100%' : 'auto'
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [showControlBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "fcr-whiteboard-controlbar-header",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "fcr-whiteboard-controlbar-left",
@@ -307,7 +322,9 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
       className: "fcr-whiteboard-controlbar-body",
       ref: handleBoardRef,
       style: {
-        backgroundColor: '#e5e7eb'
+        backgroundColor: '#e5e7eb',
+        height: showControlBar ? 'calc(100% - 28px)' : '100%',
+        top: showControlBar ? '28px' : '0'
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "fcr-whiteboard-controlbar-body-content",
@@ -317,7 +334,7 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
           position: 'absolute',
           left: "-".concat(width / 2, "px"),
           marginLeft: '50%',
-          top: "-".concat((height - contianHeight) / 2, "px")
+          top: "-".concat(height === contianHeight ? 0 : (height - contianHeight) / 2, "px")
         },
         children: [onBoardDomLoaded && preventAction && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "whiteboard-action-prevent"

package/lib/modules/components/leave-meeting/main-scene/store.d.ts

@@ -4,7 +4,10 @@ import { FcrPlatform } from 'fcr-core/lib/type';
 export default class LeaveMeetingStoreMain extends LeaveMeetingStoreBase {
     private _sharedMemberDataSource;
     private _abilityProvider;
+    private _memberDataSource;
     constructor(args: LeaveMeetingStoreArgs);
+    get localUserId(): string;
+    get localUserRole(): import("fcr-core/lib/type").FcrUserRole;
     get hostAvailibleRemoteUsers(): import("fcr-core/lib/type").FcrUserInfo[];
     get isPstnUser(): boolean;
     isHostSupportedByPlatform(platform: FcrPlatform): boolean;

package/lib/modules/components/leave-meeting/main-scene/store.js

@@ -73,10 +73,22 @@ var LeaveMeetingStoreMain = exports["default"] = /*#__PURE__*/function (_LeaveMe
     (0, _defineProperty2["default"])(_this, _ref, void _initProto(_this));
     _this._sharedMemberDataSource = args.objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_MEMBER_DATA_SOURCE);
     _this._abilityProvider = args.objectManager.getObject(_objectManager.FcrUIObjectKeys.P_ABILITY_PROVIDER);
+    var memberDataSource = args.objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_MEMBER_DATA_SOURCE);
+    _this._memberDataSource = memberDataSource;
     return _this;
   }
   (0, _inherits2["default"])(LeaveMeetingStoreMain, _LeaveMeetingStoreBas);
   return (0, _createClass2["default"])(LeaveMeetingStoreMain, [{
+    key: "localUserId",
+    get: function get() {
+      return this._memberDataSource.localUser.userId;
+    }
+  }, {
+    key: "localUserRole",
+    get: function get() {
+      return this._memberDataSource.localUserRole;
+    }
+  }, {
     key: "hostAvailibleRemoteUsers",
     get: function get() {
       var _this2 = this;

package/lib/modules/components/leave-meeting/store.base.d.ts

@@ -1,8 +1,9 @@
 import { FcrUserInfo, FcrUserRole, FcrPlatform } from 'fcr-core/lib/type';
+import { FcrUserControl } from 'fcr-core';
 import { LeaveMeetingStoreArgs } from './type';
 export declare abstract class LeaveMeetingStoreBase {
     private _roomControl;
-    private _userControl;
+    protected _userControl: FcrUserControl;
     private _streamControl;
     private _privilegeProvider;
     private _dialogProvider;
@@ -12,8 +13,8 @@ export declare abstract class LeaveMeetingStoreBase {
     accessor canAssign: boolean;
     accessor loading: boolean;
     get isLocked(): boolean;
-    get localUserId(): string;
-    get localUserRole(): FcrUserRole;
+    abstract get localUserId(): string;
+    abstract get localUserRole(): FcrUserRole;
     get hasAssignHostBeforeLeavingPermission(): boolean;
     get hasEndRoomPermission(): boolean;
     abstract get hostAvailibleRemoteUsers(): FcrUserInfo[];

package/lib/modules/components/leave-meeting/store.base.js

@@ -121,16 +121,6 @@ var LeaveMeetingStoreBase = exports.LeaveMeetingStoreBase = /*#__PURE__*/functio
     get: function get() {
       return this._privilegeProvider.isLockRoomEnabled();
     }
-  }, {
-    key: "localUserId",
-    get: function get() {
-      return this._userControl.getLocalUser().userId;
-    }
-  }, {
-    key: "localUserRole",
-    get: function get() {
-      return this._userControl.getLocalUser().userRole;
-    }
   }, {
     key: "hasAssignHostBeforeLeavingPermission",
     get: function get() {

package/lib/modules/components/leave-meeting/waiting-scene/store.d.ts

@@ -1,8 +1,12 @@
 import { LeaveMeetingStoreBase } from '../store.base';
 import { LeaveMeetingStoreArgs } from '../type';
-import { FcrPlatform } from 'fcr-core/lib/type';
+import { FcrPlatform, FcrUserRole } from 'fcr-core/lib/type';
 export default class LeaveMeetingStoreWaiting extends LeaveMeetingStoreBase {
+    private _localUserId;
+    private _localUserRole;
     constructor(args: LeaveMeetingStoreArgs);
+    get localUserId(): string;
+    get localUserRole(): FcrUserRole;
     get hostAvailibleRemoteUsers(): never[];
     get isPstnUser(): boolean;
     isHostSupportedByPlatform(platform: FcrPlatform): boolean;

package/lib/modules/components/leave-meeting/waiting-scene/store.js

@@ -48,6 +48,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _mobx = require("mobx");
 var _store = require("../store.base");
 var _LeaveMeetingStoreWaiting;
@@ -59,17 +60,30 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _setFunctionName(e, t, n) { "symbol" == _typeof(t) && (t = (t = t.description) ? "[" + t + "]" : ""); try { Object.defineProperty(e, "name", { configurable: !0, value: n ? n + " " + t : t }); } catch (e) {} return e; }
 function _checkInRHS(e) { if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (null !== e ? _typeof(e) : "null")); return e; }
-_ref = (_isHostSupportedByPlatformDecs = [_mobx.action, _mobx.action.bound], "hostAvailibleRemoteUsers");
+_ref = (_isHostSupportedByPlatformDecs = [_mobx.action, _mobx.action.bound], "_localUserId");
 var LeaveMeetingStoreWaiting = exports["default"] = /*#__PURE__*/function (_LeaveMeetingStoreBas) {
   function LeaveMeetingStoreWaiting(args) {
     var _this;
     (0, _classCallCheck2["default"])(this, LeaveMeetingStoreWaiting);
-    _initProto(_this = _callSuper(this, LeaveMeetingStoreWaiting, [args]));
+    _this = _callSuper(this, LeaveMeetingStoreWaiting, [args]);
+    (0, _defineProperty2["default"])(_this, _ref, void _initProto(_this));
+    _this._localUserId = _this._userControl.getLocalUser().userId;
+    _this._localUserRole = _this._userControl.getLocalUser().userRole;
     return _this;
   }
   (0, _inherits2["default"])(LeaveMeetingStoreWaiting, _LeaveMeetingStoreBas);
   return (0, _createClass2["default"])(LeaveMeetingStoreWaiting, [{
-    key: _ref,
+    key: "localUserId",
+    get: function get() {
+      return this._localUserId;
+    }
+  }, {
+    key: "localUserRole",
+    get: function get() {
+      return this._localUserRole;
+    }
+  }, {
+    key: "hostAvailibleRemoteUsers",
     get: function get() {
       return [];
     }

package/lib/modules/components/member-window/components/member-actions/components/more-actions.js

@@ -111,8 +111,7 @@ var MoreActions = exports.MoreActions = (0, _mobxReact.observer)(function (_ref)
           boxShadow: 'var(--fcr_web_light_dropup_m)',
           borderRadius: 'var(--fcr_cornerradius_l)',
           minWidth: '210px',
-          maxWidth: '300px',
-          width: 'fit-content'
+          maxWidth: '300px'
         },
         overlayClassName: "member-window-actions__more-actions",
         mouseEnterDelay: 0,

package/lib/modules/components/member-window/components/video-player/components/local-video-player-with-zoom.js

@@ -20,14 +20,15 @@ var FcrUILocalCameraVideoPlayer = (0, _mobxReact.observer)(function (props) {
     cameraEnabled = _context$localVideoRe.cameraEnabled,
     cameraId = _context$localVideoRe.cameraId,
     startCameraPreview = _context$localVideoRe.startCameraPreview,
-    stopCameraPreview = _context$localVideoRe.stopCameraPreview;
+    stopCameraPreview = _context$localVideoRe.stopCameraPreview,
+    isLocalMirrorEnabled = _context$localVideoRe.isLocalMirrorEnabled;
   (0, _react.useEffect)(function () {
     var dom = divRef.current;
     if (dom && cameraEnabled) {
       isPreviewingRef.current = true;
       startCameraPreview(dom, {
         renderMode: renderMode,
-        isMirror: false
+        isMirror: isLocalMirrorEnabled
       });
     }
     return function () {
@@ -38,7 +39,7 @@ var FcrUILocalCameraVideoPlayer = (0, _mobxReact.observer)(function (props) {
         stopCameraPreview(dom);
       }
     };
-  }, [cameraEnabled, cameraId]);
+  }, [cameraEnabled, cameraId, isLocalMirrorEnabled]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "fcr-member-window-body fcr-member-window-body-video",
     ref: divRef

package/lib/modules/components/member-window/components/video-player/components/zoomable-container.js

@@ -33,7 +33,6 @@ var ZoomableContainer = exports.ZoomableContainer = function ZoomableContainer(_
     onScaleChange = _ref.onScaleChange,
     onPositionChange = _ref.onPositionChange;
   var containerRef = (0, _react.useRef)(null);
-  var contentRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(initialScale),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     scale = _useState2[0],
@@ -63,13 +62,6 @@ var ZoomableContainer = exports.ZoomableContainer = function ZoomableContainer(_
     _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
     containerSize = _useState0[0],
     setContainerSize = _useState0[1];
-  var _useState1 = (0, _react.useState)({
-      width: 0,
-      height: 0
-    }),
-    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
-    contentSize = _useState10[0],
-    setContentSize = _useState10[1];
 
   // 处理鼠标按下
   var handleMouseDown = (0, _react.useCallback)(function (e) {
@@ -85,9 +77,12 @@ var ZoomableContainer = exports.ZoomableContainer = function ZoomableContainer(_
 
   // 计算边界限制
   var getBoundedPosition = (0, _react.useCallback)(function (newPosition) {
-    if (!containerSize.width || !contentSize.width) return newPosition;
-    var scaledContentWidth = contentSize.width * scale;
-    var scaledContentHeight = contentSize.height * scale;
+    if (!containerSize.width) return newPosition;
+
+    // 计算缩放后的内容尺寸
+    // 内容的 width 和 height 均为 100%，所以内容基础尺寸即为容器尺寸
+    var scaledContentWidth = containerSize.width * scale;
+    var scaledContentHeight = containerSize.height * scale;
 
     // 计算边界
     var maxX = Math.max(0, (scaledContentWidth - containerSize.width) / 2);
@@ -98,7 +93,7 @@ var ZoomableContainer = exports.ZoomableContainer = function ZoomableContainer(_
       x: Math.max(minX, Math.min(maxX, newPosition.x)),
       y: Math.max(minY, Math.min(maxY, newPosition.y))
     };
-  }, [containerSize, contentSize, scale]);
+  }, [containerSize, scale]);
 
   // 处理鼠标移动
   var handleMouseMove = (0, _react.useCallback)(function (e) {
@@ -144,26 +139,18 @@ var ZoomableContainer = exports.ZoomableContainer = function ZoomableContainer(_
 
   // 监听容器和内容尺寸变化
   (0, _react.useEffect)(function () {
-    var updateSizes = function updateSizes() {
-      if (containerRef.current) {
-        var rect = containerRef.current.getBoundingClientRect();
-        setContainerSize({
-          width: rect.width,
-          height: rect.height
-        });
-      }
-      if (contentRef.current) {
-        var _rect = contentRef.current.getBoundingClientRect();
-        setContentSize({
-          width: _rect.width,
-          height: _rect.height
-        });
-      }
-    };
-    updateSizes();
-    window.addEventListener('resize', updateSizes);
+    var container = containerRef.current;
+    if (!container) return;
+    var resizeObserver = new ResizeObserver(function () {
+      var rect = container.getBoundingClientRect();
+      setContainerSize({
+        width: rect.width,
+        height: rect.height
+      });
+    });
+    resizeObserver.observe(container);
     return function () {
-      return window.removeEventListener('resize', updateSizes);
+      resizeObserver.disconnect();
     };
   }, []);
 
@@ -241,7 +228,6 @@ var ZoomableContainer = exports.ZoomableContainer = function ZoomableContainer(_
       userSelect: 'none'
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      ref: contentRef,
       style: {
         width: '100%',
         height: '100%',

package/lib/modules/components/toolbar/hooks/use-resize-visible.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useResizeVisible = void 0;
+require("core-js/modules/web.timers.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _item = require("../components/item");
@@ -27,16 +28,27 @@ var useResizeVisible = exports.useResizeVisible = function useResizeVisible() {
   var actionbar = document.querySelector(".".concat(_constants.actionBarClassName));
   var actionBarHeight = (actionbar === null || actionbar === void 0 ? void 0 : actionbar.getBoundingClientRect().height) || 0;
   var bottomHeight = 20;
+  var timer = (0, _react.useRef)(null);
   var handleResize = (0, _react.useCallback)(function () {
-    var offsetHeight = document.body.offsetHeight;
-    var coverSize = threshold - offsetHeight;
+    var _document$documentEle = document.documentElement.getBoundingClientRect(),
+      height = _document$documentEle.height;
+    var coverSize = threshold - height;
     var coverCount = Math.floor(coverSize / itemHeight);
     setCoverCount(coverCount);
   }, [threshold]);
   (0, _react.useEffect)(function () {
     window.addEventListener('resize', handleResize);
+    window.addEventListener('animationend', handleResize);
+    if (timer.current) {
+      window.clearTimeout(timer.current);
+    }
+    timer.current = window.setTimeout(handleResize);
     return function () {
       window.removeEventListener('resize', handleResize);
+      window.removeEventListener('animationend', handleResize);
+      if (timer.current) {
+        window.clearTimeout(timer.current);
+      }
     };
   }, [threshold]);
   var setToolbarDom = (0, _react.useCallback)(function (dom) {

package/lib/modules/control-bar/components/boundary-detector.d.ts

@@ -1,6 +1,8 @@
-import { PropsWithChildren, FC } from 'react';
-type BoundaryDetectorProps = PropsWithChildren<{
+export type DetectorRef = {
+    getBoundaries: () => FcrUI.FcrUIRectangle;
+};
+export declare const BoundaryDetector: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
     onBoundariesChanged: (boundaries: FcrUI.FcrUIRectangle) => void;
-}>;
-export declare const BoundaryDetector: FC<BoundaryDetectorProps>;
-export {};
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<DetectorRef>>>;

package/lib/modules/control-bar/components/boundary-detector.js

@@ -9,13 +9,32 @@ var _react = require("react");
 var _context = require("../context");
 var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-var BoundaryDetector = exports.BoundaryDetector = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+var BoundaryDetector = exports.BoundaryDetector = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     onBoundariesChanged = _ref.onBoundariesChanged;
   var _useContext = (0, _react.useContext)(_context.DragContext),
     position = _useContext.position,
     isDragging = _useContext.isDragging;
   var containerRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      getBoundaries: function getBoundaries() {
+        if (!containerRef.current) return {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0
+        };
+        var bounds = containerRef.current.getBoundingClientRect();
+        return {
+          x: bounds.x,
+          y: bounds.y,
+          width: bounds.width,
+          height: bounds.height
+        };
+      }
+    };
+  }, []);
   var boundaryCallbacks = (0, _react.useMemo)(function () {
     return {
       onBoundariesChanged: onBoundariesChanged
@@ -24,6 +43,7 @@ var BoundaryDetector = exports.BoundaryDetector = /*#__PURE__*/(0, _react.memo)(
   (0, _hooks.useBoundaryDetect)(containerRef, boundaryCallbacks);
   (0, _react.useEffect)(function () {
     if (!isDragging) {
+      if (!containerRef.current) return;
       var bounds = containerRef.current.getBoundingClientRect();
       boundaryCallbacks.onBoundariesChanged(bounds);
     }
@@ -33,4 +53,4 @@ var BoundaryDetector = exports.BoundaryDetector = /*#__PURE__*/(0, _react.memo)(
     className: "fcr-control-bar__sizer",
     children: children
   });
-});
+}));

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

@@ -25,6 +25,7 @@ var CloudRecordingButtons = exports.CloudRecordingButtons = (0, _mobxReact.obser
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "fcr-control-bar-cloud-recording-buttons",
     children: [cloudRecordingState === _type.FcrRecordingState.Paused ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      mouseEnterDelay: 0,
       content: transI18n('fmt_record_button_Cloudrecording_restore'),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
         onClick: resumeCloudRecording,
@@ -37,6 +38,7 @@ var CloudRecordingButtons = exports.CloudRecordingButtons = (0, _mobxReact.obser
         })
       })
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      mouseEnterDelay: 0,
       content: transI18n('fmt_settings_options_pausecloudrecording'),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
         onClick: pauseCloudRecording,
@@ -51,6 +53,7 @@ var CloudRecordingButtons = exports.CloudRecordingButtons = (0, _mobxReact.obser
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_stopRecordDialog.StopCloudRecording, {
       stopCloudRecording: stopCloudRecording,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        mouseEnterDelay: 0,
         content: transI18n('fmt_record_button_Cloudrecording_stop'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {

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

@@ -22,7 +22,8 @@ var useBoundaryDetect = exports.useBoundaryDetect = function useBoundaryDetect(r
         if (ref.current === null) return;
         var contentRect = ref.current.getBoundingClientRect();
         callbacks.onBoundariesChanged(contentRect);
-      }, 100);
+        // 部分气泡动画需要时间渲染完成后才能获取到正确的位置
+      }, 300);
     };
     restartTask();
     return function () {

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

@@ -102,5 +102,6 @@ export default class ControlBarStore implements FcrUIManagedObject {
     handleLeaveRoom(): void;
     closeLeaveMeetingDialog(): void;
     handleMoreClick(actionKey: MoreAction): void;
+    updateWindowBounds(): void;
 }
 export declare const StoreContext: import("react").Context<ControlBarStore>;

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

@@ -127,8 +127,10 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
         _this.titleHeight = (0, _platform.isWindows)() ? 0 : topOffset !== null && topOffset !== void 0 ? topOffset : 0;
         (0, _mobx.runInAction)(function () {
           _this.currentShareDisplayId = _this._renderer.getDisplayNearestPoint(_this.draggableArea).id;
+          _this._mouseDetectProvider.setDisplayId(_this.currentShareDisplayId);
         });
         _this._mouseDetectProvider.setDetectionPositionOffset(display.bounds);
+        _this.updateWindowBounds();
       },
       onShareSourceReplaced: function onShareSourceReplaced() {
         var display = _this._renderer.getDisplayNearestPoint(_this.draggableArea);
@@ -138,6 +140,7 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
         _this.titleHeight = (0, _platform.isWindows)() ? 0 : topOffset !== null && topOffset !== void 0 ? topOffset : 0;
         (0, _mobx.runInAction)(function () {
           _this.currentShareDisplayId = _this._renderer.getDisplayNearestPoint(_this.draggableArea).id;
+          _this._mouseDetectProvider.setDisplayId(_this.currentShareDisplayId);
         });
         _this._mouseDetectProvider.setDetectionPositionOffset(display.bounds);
       },
@@ -704,10 +707,16 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
           break;
       }
     }
+  }, {
+    key: "updateWindowBounds",
+    value: function updateWindowBounds() {
+      var sharingDisplayBounds = this._screenShareProvider.sharingDisplayBounds;
+      this._controlBarWindow.setBounds(sharingDisplayBounds);
+    }
   }]);
 }();
 _ControlBarStore = ControlBarStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ControlBarStore, [[_mobx.observable, 1, "roomDuration"], [_mobx.observable, 1, "startTime"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "playUrl"], [_mobx.observable, 1, "liveStreamingState"], [_mobx.observable, 1, "allApplicationWindows"], [_mobx.observable, 1, "boardOwnerUser"], [_mobx.observable, 1, "currentShareDisplayId"], [_mobx.observable, 1, "position"], [_mobx.computed, 3, "hasEndRoomPermission"], [_mobx.computed, 3, "hasGetLiveStreamingUrlPermission"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStartLiveStreamingPermission"], [_mobx.computed, 3, "hasChatPermission"], [_mobx.computed, 3, "liveStreamingButtonVisible"], [_mobx.computed, 3, "recordingButtonVisible"], [_mobx.computed, 3, "isConnecting"], [_setCheckedStateMapDecs, 18, "setCheckedStateMap"], [_decorator.bound, 2, "setShareWithAudioState"], [_decorator.bound, 2, "setShareInSmoothMode"], [_showLockedRoomToastDecs, 18, "showLockedRoomToast"], [_handleNewShareDecs, 18, "handleNewShare"], [_handlerStopShareDecs, 18, "handlerStopShare"], [_decorator.bound, 2, "handleMouseEnter"], [_decorator.bound, 2, "handleMouseLeave"], [_decorator.bound, 2, "openLiveStreamingDialog"], [_decorator.bound, 2, "setShareAudioMode"], [_pauseCloudRecordingDecs, 2, "pauseCloudRecording"], [_resumeCloudRecordingDecs, 2, "resumeCloudRecording"], [_stopCloudRecordingDecs, 2, "stopCloudRecording"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "startLiveStreaming"], [_decorator.bound, 2, "stopLiveStreaming"], [_showToastDecs, 18, "showToast"], [_decorator.bound, 2, "handleOpenParticipant"], [_decorator.bound, 2, "handleOpenLiveStreaming"], [_decorator.bound, 2, "setEnableWaitingRoom"], [_decorator.bound, 2, "getLocalMeetingTime"], [[_decorator.bound, _decorator.trace], 2, "setStateNavArea"], [[_decorator.bound, _decorator.trace], 2, "setControlBarContentArea"], [[_decorator.bound, _decorator.trace], 2, "setPopoverArea"], [_handleLeaveRoomDecs, 18, "handleLeaveRoom"], [_closeLeaveMeetingDialogDecs, 18, "closeLeaveMeetingDialog"], [_handleMoreClickDecs, 18, "handleMoreClick"]], []).e, 10);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ControlBarStore, [[_mobx.observable, 1, "roomDuration"], [_mobx.observable, 1, "startTime"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "playUrl"], [_mobx.observable, 1, "liveStreamingState"], [_mobx.observable, 1, "allApplicationWindows"], [_mobx.observable, 1, "boardOwnerUser"], [_mobx.observable, 1, "currentShareDisplayId"], [_mobx.observable, 1, "position"], [_mobx.computed, 3, "hasEndRoomPermission"], [_mobx.computed, 3, "hasGetLiveStreamingUrlPermission"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStartLiveStreamingPermission"], [_mobx.computed, 3, "hasChatPermission"], [_mobx.computed, 3, "liveStreamingButtonVisible"], [_mobx.computed, 3, "recordingButtonVisible"], [_mobx.computed, 3, "isConnecting"], [_setCheckedStateMapDecs, 18, "setCheckedStateMap"], [_decorator.bound, 2, "setShareWithAudioState"], [_decorator.bound, 2, "setShareInSmoothMode"], [_showLockedRoomToastDecs, 18, "showLockedRoomToast"], [_handleNewShareDecs, 18, "handleNewShare"], [_handlerStopShareDecs, 18, "handlerStopShare"], [_decorator.bound, 2, "handleMouseEnter"], [_decorator.bound, 2, "handleMouseLeave"], [_decorator.bound, 2, "openLiveStreamingDialog"], [_decorator.bound, 2, "setShareAudioMode"], [_pauseCloudRecordingDecs, 2, "pauseCloudRecording"], [_resumeCloudRecordingDecs, 2, "resumeCloudRecording"], [_stopCloudRecordingDecs, 2, "stopCloudRecording"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "startLiveStreaming"], [_decorator.bound, 2, "stopLiveStreaming"], [_showToastDecs, 18, "showToast"], [_decorator.bound, 2, "handleOpenParticipant"], [_decorator.bound, 2, "handleOpenLiveStreaming"], [_decorator.bound, 2, "setEnableWaitingRoom"], [_decorator.bound, 2, "getLocalMeetingTime"], [[_decorator.bound, _decorator.trace], 2, "setStateNavArea"], [[_decorator.bound, _decorator.trace], 2, "setControlBarContentArea"], [[_decorator.bound, _decorator.trace], 2, "setPopoverArea"], [_handleLeaveRoomDecs, 18, "handleLeaveRoom"], [_closeLeaveMeetingDialogDecs, 18, "closeLeaveMeetingDialog"], [_handleMoreClickDecs, 18, "handleMoreClick"], [[_decorator.trace, _decorator.bound], 2, "updateWindowBounds"]], []).e, 10);
 _init_roomDuration = _applyDecs$e[0];
 _init_startTime = _applyDecs$e[1];
 _init_cloudRecordingState = _applyDecs$e[2];