fcr-ui-scene 3.7.5 → 3.7.7

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

@@ -60,18 +60,14 @@ var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(p
     onCaptureScreen = props.onCaptureScreen,
     setProgress = props.setProgress;
   var t = (0, _i18n.useI18n)();
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)('right'),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    popoverVisible = _useState2[0],
-    setPopoverVisible = _useState2[1];
-  var _useState3 = (0, _react.useState)('right'),
+    placement = _useState2[0],
+    setPlacement = _useState2[1];
+  var _useState3 = (0, _react.useState)(-1),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    placement = _useState4[0],
-    setPlacement = _useState4[1];
-  var _useState5 = (0, _react.useState)(-1),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    coverCount = _useState6[0],
-    setCoverCount = _useState6[1];
+    coverCount = _useState4[0],
+    setCoverCount = _useState4[1];
   var effects = [coverCount, currentTool, currentColor, currentShape, currentStrokeWidth, commonColors, undoSteps, redoSteps, placement];
   var needHiddenTools = (0, _react.useMemo)(function () {
     return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_graphicTool.AnnotationGraphicTool, {
@@ -88,9 +84,6 @@ var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(p
       direction: direction
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
       size: size,
-      onVisibleChange: function onVisibleChange() {
-        return setPopoverVisible(false);
-      },
       active: currentTool === _enums.FcrBoardToolType.TEXT,
       onClick: function onClick() {
         return setTool(_enums.FcrBoardToolType.TEXT);
@@ -101,9 +94,6 @@ var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(p
       placement: placement
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
       size: size,
-      onVisibleChange: function onVisibleChange() {
-        return setPopoverVisible(false);
-      },
       active: currentTool === _enums.FcrBoardToolType.HAND,
       onClick: function onClick() {
         return setTool(_enums.FcrBoardToolType.HAND);
@@ -122,9 +112,6 @@ var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(p
       direction: direction
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
       size: size,
-      onVisibleChange: function onVisibleChange() {
-        return setPopoverVisible(false);
-      },
       active: currentTool === _enums.FcrBoardToolType.ERASER,
       onClick: function onClick() {
         return setTool(_enums.FcrBoardToolType.ERASER);
@@ -134,8 +121,6 @@ var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(p
       hideTitle: true,
       placement: placement
     }), (0, _env.isElectron)() && onCaptureScreen && commonColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_captureTool.AnnotationCaptureTool, {
-      popoverVisible: popoverVisible,
-      setPopoverVisible: setPopoverVisible,
       size: size,
       direction: direction,
       hideTitle: true,
@@ -143,9 +128,6 @@ var WhiteboardToolbar = exports.WhiteboardToolbar = function WhiteboardToolbar(p
       onClick: onCaptureScreen
     }), !commonColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
       size: size,
-      onVisibleChange: function onVisibleChange() {
-        return setPopoverVisible(false);
-      },
       onClick: clean,
       iconType: _type.FcrIconType.FCR_DELETE5,
       title: t('fmt_screenshare_whiteboard_button_empty'),

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

@@ -0,0 +1 @@
+export declare const AnnotationButton: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,72 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnnotationButton = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _tooltipsButton = require("agora-ui-foundation/lib/components/tooltips-button");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _annotationMenu = _interopRequireDefault(require("../../../components/annotation-menu"));
+var _react = require("react");
+var _mobxReact = require("mobx-react");
+var _store = require("../../store");
+var _view = require("../../view");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationButton = exports.AnnotationButton = (0, _mobxReact.observer)(function () {
+  var transI18n = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useContext = (0, _react.useContext)(_view.ControlbarContext),
+    browserWindow = _useContext.browserWindow;
+  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
+    toggleAnnotation = _useContext2.toggleAnnotation,
+    hasAnnotationAllowWritePermission = _useContext2.hasAnnotationAllowWritePermission,
+    allowAnnotationWriteState = _useContext2.allowAnnotationWriteState,
+    setAllAnnotationWrite = _useContext2.setAllAnnotationWrite,
+    isSharingScreen = _useContext2.isSharingScreen,
+    log = _useContext2.log;
+  var handleBlur = function handleBlur() {
+    setVisible(false);
+  };
+  (0, _react.useEffect)(function () {
+    browserWindow === null || browserWindow === void 0 || browserWindow.on('blur', handleBlur);
+    return function () {
+      browserWindow === null || browserWindow === void 0 || browserWindow.off('blur', handleBlur);
+    };
+  }, [browserWindow]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltipsButton.FrcTooltipButton, {
+    active: visible,
+    tooltip: {
+      content: transI18n('fmt_screenshare_controlbar_button_annotations'),
+      icon: {
+        type: _type.FcrIconType.FCR_RENAME,
+        size: 32,
+        colors: {
+          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+        }
+      }
+    },
+    onTooltipButtonClick: isSharingScreen ? toggleAnnotation : function () {
+      return log('share screen is starting, please wait a moment to operate');
+    },
+    withPopover: true,
+    popover: {
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_annotationMenu["default"], {
+        allowAnnotationWriteState: allowAnnotationWriteState,
+        hasAnnotationAllowWritePermission: hasAnnotationAllowWritePermission,
+        setAllowAnnotationWrite: setAllAnnotationWrite,
+        showClear: true
+      }),
+      onVisibleChange: function onVisibleChange(visible) {
+        setVisible(visible);
+      },
+      visible: visible
+    }
+  });
+});

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.d.ts

@@ -1 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { StopCloudRecordingProps } from '../../action-bar/type';
 export declare const CloudRecordingButtons: () => import("react/jsx-runtime").JSX.Element;
+export declare const StopCloudRecording: ({ stopCloudRecording, children }: PropsWithChildren<StopCloudRecordingProps>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,12 @@
 "use strict";
 
 require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CloudRecordingButtons = void 0;
+exports.StopCloudRecording = exports.CloudRecordingButtons = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _type = require("fcr-core/lib/type");
@@ -12,8 +14,10 @@ var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type2 = require("agora-ui-foundation/lib/components/icon/type");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _store = require("../store");
-var _stopRecordDialog = require("../../action-bar/components/record/stop-record-dialog");
 var _i18n = require("agora-ui-foundation/lib/i18n");
+var _boundaryDetector = require("./boundary-detector");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _context = require("../context");
 var _jsxRuntime = require("react/jsx-runtime");
 var CloudRecordingButtons = exports.CloudRecordingButtons = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.StoreContext),
@@ -25,6 +29,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 +42,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,
@@ -48,9 +54,10 @@ var CloudRecordingButtons = exports.CloudRecordingButtons = (0, _mobxReact.obser
           }
         })
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_stopRecordDialog.StopCloudRecording, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(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, {
@@ -64,4 +71,62 @@ var CloudRecordingButtons = exports.CloudRecordingButtons = (0, _mobxReact.obser
       })
     })]
   });
+});
+
+// TODO: 删除重复的 StopCloudRecording 组件
+var StopCloudRecording = exports.StopCloudRecording = (0, _mobxReact.observer)(function (_ref) {
+  var stopCloudRecording = _ref.stopCloudRecording,
+    children = _ref.children;
+  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
+    setPopoverArea = _useContext2.setPopoverArea;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var transI18n = (0, _i18n.useI18n)();
+  var handleBoundariesChanged = (0, _react.useCallback)(function (boundaries) {
+    setPopoverArea(boundaries);
+  }, []);
+  var _useContext3 = (0, _react.useContext)(_context.ControlBarCalculationContext),
+    isShareActionNavHidden = _useContext3.isShareActionNavHidden;
+  (0, _react.useEffect)(function () {
+    if (isShareActionNavHidden) {
+      setVisible(false);
+      setPopoverArea({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      });
+    }
+  }, [isShareActionNavHidden]);
+  var content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
+    onBoundariesChanged: handleBoundariesChanged,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "leave-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "leave-title",
+        children: transI18n('fmt_actionbar_record_tips_stoprecord')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "leave-confirm",
+        onClick: stopCloudRecording,
+        children: transI18n('fmt_actionbar_record_option_stoprecord')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "leave-cancel",
+        onClick: function onClick() {
+          return setVisible(false);
+        },
+        children: transI18n('fmt_security_buttons_cancel')
+      })]
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    showArrow: false,
+    overlayClassName: "fcr-stop-cloud-recording-popover",
+    visible: visible,
+    onVisibleChange: setVisible,
+    trigger: "click",
+    content: content,
+    children: children
+  });
 });

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);
       },
@@ -146,13 +149,17 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
       }
     });
     (0, _defineProperty2["default"])(this, "_mouseDetectObserver", {
-      onMouseEnterDetectArea: function onMouseEnterDetectArea() {
-        _this._controlBarWindow.setIgnoreMouseEvents(false);
+      onMouseEnterDetectArea: function onMouseEnterDetectArea(areaId) {
+        if (areaId === _struct.FcrUIDetectAreaID.ControlBar) {
+          _this._controlBarWindow.setIgnoreMouseEvents(false);
+        }
       },
-      onMouseLeaveDetectArea: function onMouseLeaveDetectArea() {
-        _this._controlBarWindow.setIgnoreMouseEvents(true, {
-          forward: true
-        });
+      onMouseLeaveDetectArea: function onMouseLeaveDetectArea(areaId) {
+        if (areaId === _struct.FcrUIDetectAreaID.ControlBar) {
+          _this._controlBarWindow.setIgnoreMouseEvents(true, {
+            forward: true
+          });
+        }
       }
     });
     (0, _defineProperty2["default"])(this, "_stateNavArea", {
@@ -619,6 +626,7 @@ var ControlBarStore = exports["default"] = /*#__PURE__*/function () {
       this._mainRoomControl.removeObserver(this._roomObserver);
       this._screenShareProvider.removeObserver(this._screenShareObserver);
       this._mouseDetectProvider.removeObserver(this._mouseDetectObserver);
+      this._mouseDetectProvider.deleteDetectArea(_struct.FcrUIDetectAreaID.ControlBar);
     }
   }, {
     key: "setStateNavArea",
@@ -704,10 +712,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];

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

@@ -1,4 +1,3 @@
-import { FcrUIObjectManager } from '../../object-manager';
 import { TransferPosition } from './enums';
 export interface MorePopoverContentProps {
     hasChatPermission: boolean;
@@ -13,19 +12,9 @@ export interface ITransferPositionIconProps {
     currentPosition: TransferPosition;
     onTransferPositionButtonClick: (targetPosition: TransferPosition) => void;
 }
-export type ControlBarStoreArgs = {
-    objectManager: FcrUIObjectManager;
+export type CurrentShareBounds = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
 };
-export interface DragState {
-    position: {
-        x: number;
-        y: number;
-    };
-    isDragging: boolean;
-}
-export interface ControlBarCalculation {
-    isHitBottom: boolean;
-    isHitTop: boolean;
-    area: TransferPosition;
-    isShareActionNavHidden: boolean;
-}

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

@@ -27,6 +27,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.View = void 0;
 require("core-js/modules/es.array.concat.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");
@@ -61,6 +62,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 HIDDEN_TIMEOUT = 3000;
 var NAV_HEIGHT = 84;
+var WINDOW_RENDER_DELAY = 500;
+var FADE_ANIMATION_DURATION = 350;
 var View = exports.View = (0, _mobxReact.observer)(function () {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DraggableControlBarProvider, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DraggableContainer, {
@@ -287,11 +290,16 @@ var ControlBar = (0, _mobxReact.observer)(function () {
   var calculation = (0, _react.useContext)(_context.ControlBarCalculationContext);
   var _useContext5 = (0, _react.useContext)(_store.StoreContext),
     draggableArea = _useContext5.draggableArea,
-    currentShareDisplayId = _useContext5.currentShareDisplayId;
+    currentShareDisplayId = _useContext5.currentShareDisplayId,
+    updateWindowBounds = _useContext5.updateWindowBounds;
   var updatePosition = (0, _react.useContext)(_context.DragStateUpdaterContext);
   var _useContext6 = (0, _react.useContext)(_context.ControlBarCalculationUpdaterContext),
     setDimensions = _useContext6.setDimensions,
     setNavPosition = _useContext6.setNavPosition;
+  var _useState9 = (0, _react.useState)('hidden'),
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    visibility = _useState0[0],
+    setVisibility = _useState0[1];
   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,
@@ -301,31 +309,51 @@ var ControlBar = (0, _mobxReact.observer)(function () {
       'completely-hidden-in-top': calculation.isAttachToTop
     });
   }, [calculation]);
+  (0, _react.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();
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    setVisibility('hidden');
+  }, [currentShareDisplayId]);
   (0, _react.useLayoutEffect)(function () {
-    if (currentShareDisplayId) {
-      var ro = new ResizeObserver(function () {
-        var bounds = containerRef.current.getBoundingClientRect();
-        setDimensions({
-          width: bounds.width,
-          height: bounds.height
+    if (visibility === 'hidden') {
+      var timerId = setTimeout(function () {
+        updateWindowBounds();
+        timerId = setTimeout(function () {
+          if (!containerRef.current) return;
+          var bounds = containerRef.current.getBoundingClientRect();
+          updatePosition({
+            position: {
+              x: draggableArea.width / 2 - bounds.width / 2,
+              y: 0
+            }
+          });
+          setNavPosition(_enums.TransferPosition.TOP);
+          setVisibility('visible');
         });
-        updatePosition({
-          position: {
-            x: draggableArea.width / 2 - bounds.width / 2,
-            y: 0
-          }
-        });
-        setNavPosition(_enums.TransferPosition.TOP);
-      });
-      ro.observe(containerRef.current);
+      }, WINDOW_RENDER_DELAY);
       return function () {
-        return ro.disconnect();
+        return clearTimeout(timerId);
       };
     }
-  }, [currentShareDisplayId]);
+  }, [visibility]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: containerRef,
     className: rootClassNames,
+    style: {
+      visibility: visibility
+    },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ControlBarContent, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShareStateNavigation, {})]
   });
 });
@@ -357,8 +385,34 @@ var ControlBarContent = /*#__PURE__*/(0, _react.memo)(function () {
     console.log('ControlBarContent boundaries changed');
     setControlBarContentArea(boundaries);
   }, []);
+  var detector = (0, _react.useRef)(null);
+  (0, _react.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__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
     onBoundariesChanged: handleBoundariesChanged,
+    ref: detector,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: navClassName,
       onMouseEnter: handleMouseEnterNav,
@@ -414,10 +468,10 @@ var SecurityMenuSection = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
     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 _useState1 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
+    showSecurityPopover = _useState10[0],
+    setShowSecurityPopover = _useState10[1];
   var handleVisibilityChange = (0, _react.useCallback)(function (visible) {
     setShowSecurityPopover(visible);
   }, []);
@@ -482,14 +536,14 @@ var ShareScreenSection = /*#__PURE__*/(0, _react.memo)(function () {
 
 // 更多操作区块
 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];
+    moreVisible = _useState12[0],
+    setMoreVisible = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    isShowMeetingDetailPortal = _useState14[0],
+    setIsShowMeetingDetailPortal = _useState14[1];
   var _useContext12 = (0, _react.useContext)(_store.StoreContext),
     newMessageCount = _useContext12.newMessageCount,
     hasChatPermission = _useContext12.hasChatPermission,
@@ -609,8 +663,22 @@ var ShareStateNavigation = /*#__PURE__*/(0, _react.memo)(function () {
     console.log('ShareStateNavigation boundaries changed');
     setStateNavArea(boundaries);
   }, []);
+  var detector = (0, _react.useRef)(null);
+  (0, _react.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__*/(0, _jsxRuntime.jsx)(_boundaryDetector.BoundaryDetector, {
     onBoundariesChanged: handleBoundariesChanged,
+    ref: detector,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareStateNav.ShareStateNav, {
       onMouseEnter: handleMouseEnterNav,
       onMouseLeave: handleMouseLeaveNav,