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

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/components/capture-tool/index.d.ts

@@ -1,6 +1,5 @@
 import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
 export declare const AnnotationCaptureTool: (props: {
-    popoverVisible?: boolean;
     placement: ToolTipProps["placement"];
     size?: number;
     hideTitle?: boolean;

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

@@ -17,7 +17,6 @@ var AnnotationCaptureTool = exports.AnnotationCaptureTool = function AnnotationC
   var t = (0, _i18n.useI18n)();
   var size = props.size,
     hideTitle = props.hideTitle,
-    popoverVisible = props.popoverVisible,
     placement = props.placement,
     direction = props.direction,
     setPopoverVisible = props.setPopoverVisible,
@@ -43,7 +42,7 @@ var AnnotationCaptureTool = exports.AnnotationCaptureTool = function AnnotationC
     iconType: _type.FcrIconType.FCR_WHITEBOARD_SLICE,
     title: t('fmt_screenshare_whiteboard_button_cutting'),
     lineColor: "transparent",
-    visible: visible && popoverVisible,
+    visible: visible,
     onVisibleChange: handleVisibleChange,
     showArrow: true,
     content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {

package/lib/modules/components/toolbar/components/vertical-frame/index.js

@@ -126,7 +126,7 @@ function VerticalBar(props) {
       api.start(_position);
     }
   }, []);
-  var handleRefMount = function handleRefMount(dom) {
+  var handleRefMount = (0, _react2.useCallback)(function (dom) {
     if (dom) {
       var top = dom.getBoundingClientRect().top;
       if (topTemp !== top) {
@@ -135,7 +135,7 @@ function VerticalBar(props) {
         toolbarDom.current = dom;
       }
     }
-  };
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       onClick: function onClick() {

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

@@ -9,47 +9,60 @@ exports.useResizeVisible = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _item = require("../components/item");
-var _constants = require("../../../action-bar/constants");
+var _lodash = require("lodash");
 var useResizeVisible = exports.useResizeVisible = function useResizeVisible() {
-  var toolbar = (0, _react.useRef)();
-  var _useState = (0, _react.useState)(0),
+  var _useState = (0, _react.useState)(-1),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    threshold = _useState2[0],
-    setThreshold = _useState2[1];
-  var _useState3 = (0, _react.useState)(-1),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    coverCount = _useState4[0],
-    setCoverCount = _useState4[1];
-  var _useState5 = (0, _react.useState)(0),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    itemHeight = _useState6[0],
-    setItemHeight = _useState6[1];
-  var actionbar = document.querySelector(".".concat(_constants.actionBarClassName));
-  var actionBarHeight = (actionbar === null || actionbar === void 0 ? void 0 : actionbar.getBoundingClientRect().height) || 0;
+    coverCount = _useState2[0],
+    setCoverCount = _useState2[1];
   var bottomHeight = 20;
+  var toolbarRef = (0, _react.useRef)();
+  var containerRef = (0, _react.useRef)(null);
+  var thresholdRef = (0, _react.useRef)(0);
+  var itemHeightRef = (0, _react.useRef)(0);
   var handleResize = (0, _react.useCallback)(function () {
-    var offsetHeight = document.body.offsetHeight;
-    var coverSize = threshold - offsetHeight;
-    var coverCount = Math.floor(coverSize / itemHeight);
-    setCoverCount(coverCount);
-  }, [threshold]);
+    var container = containerRef.current;
+    var _ref = (container === null || container === void 0 ? void 0 : container.getBoundingClientRect()) || document.documentElement.getBoundingClientRect(),
+      height = _ref.height;
+    var threshold = thresholdRef.current;
+    var itemHeight = itemHeightRef.current;
+    var coverSize = 0;
+    var coverCountTemp = -1;
+    coverSize = threshold - height;
+    coverCountTemp = Math.round(coverSize / itemHeight);
+    setCoverCount(coverCountTemp);
+  }, []);
+  (0, _react.useEffect)(function () {
+    handleResize();
+  }, []);
+  var handleResizeDebounce = (0, _react.useCallback)((0, _lodash.debounce)(handleResize, 200), []);
   (0, _react.useEffect)(function () {
-    window.addEventListener('resize', handleResize);
+    var container = containerRef.current;
+    if (container) {
+      container.addEventListener('transitionend', handleResizeDebounce);
+    }
     return function () {
-      window.removeEventListener('resize', handleResize);
+      if (container) {
+        container.removeEventListener('transitionend', handleResizeDebounce);
+      }
     };
-  }, [threshold]);
+  }, []);
+  var reCalcThreshold = (0, _react.useCallback)(function () {
+    var toolbar = toolbarRef.current;
+    if (toolbar) {
+      var _toolbar$getBoundingC = toolbar.getBoundingClientRect(),
+        height = _toolbar$getBoundingC.height;
+      var items = toolbar.querySelectorAll(".".concat(_item.toolBarItemClassName));
+      itemHeightRef.current = items[0].getBoundingClientRect().height;
+      var threshold = height + bottomHeight;
+      thresholdRef.current = threshold;
+    }
+  }, []);
   var setToolbarDom = (0, _react.useCallback)(function (dom) {
     if (dom) {
-      var _items$;
-      toolbar.current = dom;
-      var _dom$getBoundingClien = dom.getBoundingClientRect(),
-        top = _dom$getBoundingClien.top,
-        height = _dom$getBoundingClien.height;
-      var items = dom.querySelectorAll(".".concat(_item.toolBarItemClassName));
-      setItemHeight((_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.getBoundingClientRect().height);
-      var _threshold = height + top + actionBarHeight + bottomHeight;
-      setThreshold(_threshold);
+      toolbarRef.current = dom;
+      containerRef.current = document.querySelector('.fcr-whiteboard-controlbar-body-content');
+      reCalcThreshold();
     }
   }, []);
   return {

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/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];