fcr-ui-scene 3.6.1 → 3.6.3

package/lib/modules/event-confirm/store.js

@@ -101,7 +101,7 @@ var ConfirmStore = exports["default"] = /*#__PURE__*/function () {
     var uiEventStore = _ref2.uiEventStore,
       dialogProvider = _ref2.dialogProvider,
       screenShareProvider = _ref2.screenShareProvider,
-      screenShareDataSource = _ref2.screenShareDataSource;
+      sharedScreenShareSharedDataSource = _ref2.sharedScreenShareSharedDataSource;
     (0, _classCallCheck2["default"])(this, ConfirmStore);
     (0, _defineProperty2["default"])(this, _ref, (_initProto(this), (0, _logger.createLogger)({
       prefix: 'ConfirmStore'
@@ -117,8 +117,7 @@ var ConfirmStore = exports["default"] = /*#__PURE__*/function () {
     _classPrivateFieldInitSpec(this, _E, _init_screenBounds(this, (0, _env.isElectron)() ? window.runtime.browserWindow.getBounds() : null));
     this._uiEventProvider = uiEventStore;
     this._dialogProvider = dialogProvider;
-    this._screenShareProvider = screenShareProvider;
-    this._screenShareDataSource = screenShareDataSource;
+    this._sharedScreenShareSharedDataSource = sharedScreenShareSharedDataSource;
     this._uiEventProvider.addObserver(this._handleConfirmEventObserver);
     this._dialogProvider.addObserver(this._handleConfirmEventObserver);
     this._disposers.push((0, _mobx.reaction)(function () {
@@ -129,20 +128,22 @@ var ConfirmStore = exports["default"] = /*#__PURE__*/function () {
         value === null || value === void 0 || (_value$timer = value.timer) === null || _value$timer === void 0 || _value$timer.call(value);
       });
     }), (0, _mobx.reaction)(function () {
-      var _this$_screenShareDat;
-      return (_this$_screenShareDat = _this._screenShareDataSource) === null || _this$_screenShareDat === void 0 ? void 0 : _this$_screenShareDat.currentShareBounds;
+      var _this$_sharedScreenSh;
+      return (_this$_sharedScreenSh = _this._sharedScreenShareSharedDataSource) === null || _this$_sharedScreenSh === void 0 ? void 0 : _this$_sharedScreenSh.currentSelectionBounds;
     }, function (bounds) {
       if (bounds) {
-        var _ref3 = (0, _tools.followCorrectDisplay)({
-            dialogKey: _constant.FcrUIDialogKey.CONFIRM,
-            alwaysFollowScreen: true
-          }),
-          nearDisplayBounds = _ref3.nearDisplayBounds;
-        _this.calculateMethods.forEach(function (method) {
-          return method(nearDisplayBounds);
+        var res = (0, _tools.followCorrectDisplay)({
+          dialogKey: _constant.FcrUIDialogKey.CONFIRM,
+          alwaysFollowScreen: true
         });
-        _this.logger.info("new sharing bounds is ".concat(JSON.stringify(nearDisplayBounds)));
-        _this.screenBounds = nearDisplayBounds;
+        if (res) {
+          var nearDisplayBounds = res.nearDisplayBounds;
+          _this.calculateMethods.forEach(function (method) {
+            return method(nearDisplayBounds);
+          });
+          _this.logger.info("new sharing bounds is ".concat(JSON.stringify(nearDisplayBounds)));
+          _this.screenBounds = nearDisplayBounds;
+        }
       } else {
         _this.logger.error("there is have no bounds ".concat(JSON.stringify(bounds)));
       }
@@ -150,12 +151,12 @@ var ConfirmStore = exports["default"] = /*#__PURE__*/function () {
       return _this.isSeizeScreen;
     }, function (isSeize) {
       if (isSeize && (0, _env.isElectron)()) {
-        var _ref4 = (0, _tools.followCorrectDisplay)({
+        var _ref3 = (0, _tools.followCorrectDisplay)({
             dialogKey: _constant.FcrUIDialogKey.CONFIRM,
             alwaysFollowScreen: true,
             extraRefControlbarCondition: isSeize
           }),
-          nearDisplayBounds = _ref4.nearDisplayBounds;
+          nearDisplayBounds = _ref3.nearDisplayBounds;
         _this.screenBounds = nearDisplayBounds;
         _this.logger.info("new sharing bounds is ".concat(JSON.stringify(nearDisplayBounds), ", when seize screen emit"));
       }
@@ -199,7 +200,8 @@ var ConfirmStore = exports["default"] = /*#__PURE__*/function () {
     }
   }, {
     key: "screenBounds",
-    get: function get() {
+    get: // @observable accessor mousePosition: { x: number; y: number } = { x: 0, y: 0 };
+    function get() {
       return _classPrivateFieldGet(_E, this);
     },
     set: function set(v) {
@@ -216,8 +218,7 @@ var ConfirmStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "isSeizeScreen",
     get: function get() {
-      var _this$_screenSharePro;
-      return (_this$_screenSharePro = this._screenShareProvider) === null || _this$_screenSharePro === void 0 ? void 0 : _this$_screenSharePro.isSeizeStream;
+      return this._sharedScreenShareSharedDataSource.isSeizeStream;
     }
   }, {
     key: "addConfirm",
@@ -282,6 +283,12 @@ var ConfirmStore = exports["default"] = /*#__PURE__*/function () {
     value: function resetIsReplace() {
       this.isReplaceShare = false;
     }
+
+    // @action.bound
+    // setMousePosition(e: MouseEvent) {
+    //   console.log('setMousePosition', e.pageX, e.pageY);
+    //   this.mousePosition = { x: e.pageX, y: e.pageY };
+    // }
   }, {
     key: "release",
     value: function release() {
@@ -304,13 +311,15 @@ var ConfirmStore = exports["default"] = /*#__PURE__*/function () {
       if ((payload === null || payload === void 0 ? void 0 : payload.dialogKey) === _constant.FcrUIDialogKey.CONFIRM) {
         switch (action) {
           case _constant.FcrUIAction.OPEN_DIALOG:
-            var _ref6 = (0, _tools.followCorrectDisplay)({
-                dialogKey: _constant.FcrUIDialogKey.CONFIRM,
-                alwaysFollowScreen: true
-              }),
-              nearDisplayBounds = _ref6.nearDisplayBounds;
-            this.screenBounds = nearDisplayBounds;
-            this.logger.info("open confirm dialog with bounds ".concat(JSON.stringify(nearDisplayBounds)));
+            if ((0, _env.isElectron)()) {
+              var _ref5 = (0, _tools.followCorrectDisplay)({
+                  dialogKey: _constant.FcrUIDialogKey.CONFIRM,
+                  alwaysFollowScreen: true
+                }),
+                nearDisplayBounds = _ref5.nearDisplayBounds;
+              this.screenBounds = nearDisplayBounds;
+              this.logger.info("open confirm dialog with bounds ".concat(JSON.stringify(nearDisplayBounds)));
+            }
             this.addConfirm(payload);
             break;
           case _constant.FcrUIAction.CLOSE_DIALOG:

package/lib/modules/event-confirm/view.js

@@ -1,55 +1,35 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.for-each.js");
-require("core-js/modules/es.array.push.js");
-require("core-js/modules/es.object.define-properties.js");
 require("core-js/modules/es.object.define-property.js");
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-require("core-js/modules/es.object.keys.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/esnext.async-iterator.filter.js");
-require("core-js/modules/esnext.async-iterator.for-each.js");
-require("core-js/modules/esnext.iterator.constructor.js");
-require("core-js/modules/esnext.iterator.filter.js");
-require("core-js/modules/esnext.iterator.for-each.js");
-require("core-js/modules/web.dom-collections.for-each.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.View = void 0;
-require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.map.js");
-require("core-js/modules/es.date.to-json.js");
-require("core-js/modules/es.json.stringify.js");
 require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.map.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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _store = require("./store");
-require("./index.css");
-var _confirmContent = require("agora-ui-foundation/lib/components/confirm-content");
 var _useElectron = require("../dialog/hooks/useElectron");
-var _react2 = require("@use-gesture/react");
 var _env = require("agora-foundation/lib/utilities/env");
-var _tools = require("../../utilities/tools");
-var _platform = require("../../utilities/platform");
+var _window = require("./components/window");
+require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var View = exports.View = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     confirmList = _useContext.confirmList;
   var _ref = (0, _env.isElectron)() ? (0, _react.useContext)(_useElectron.DialogInstanceContext) : {},
     browserWindow = _ref.browserWindow;
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    activeConfirm = _useState2[0],
+    setActiveConfirm = _useState2[1];
   (0, _react.useEffect)(function () {
+    // window.addEventListener('mousemove', setMousePosition);
     if ((0, _toConsumableArray2["default"])(confirmList).length === 0) {
       browserWindow === null || browserWindow === void 0 || browserWindow.setIgnoreMouseEvents(true);
       browserWindow === null || browserWindow === void 0 || browserWindow.blur();
@@ -57,155 +37,27 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
       browserWindow === null || browserWindow === void 0 || browserWindow.focus();
       browserWindow === null || browserWindow === void 0 || browserWindow.setAlwaysOnTop(true, 'screen-saver');
     }
+    // return () => {
+    //   window.removeEventListener('mousemove', setMousePosition);
+    // };
   }, [confirmList]);
+  var handleMouseEnter = function handleMouseEnter(title) {
+    setActiveConfirm(title);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    setActiveConfirm(undefined);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "confirm-wrapper",
-      children: (0, _toConsumableArray2["default"])(confirmList).map(function (confirm, idx) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfirmWindow, {
-          confirm: confirm
+      children: (0, _toConsumableArray2["default"])(confirmList).map(function (confirm) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_window.ConfirmWindow, {
+          confirm: confirm,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          activeConfirm: activeConfirm
         }, confirm.title);
       })
     })
   });
-});
-var ConfirmWindow = (0, _mobxReact.observer)(function (_ref2) {
-  var _rndRef$current;
-  var confirm = _ref2.confirm;
-  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
-    screenBounds = _useContext2.screenBounds,
-    calculateMethods = _useContext2.calculateMethods,
-    log = _useContext2.log;
-  var _ref3 = (0, _env.isElectron)() ? (0, _react.useContext)(_useElectron.DialogInstanceContext) : {},
-    browserWindow = _ref3.browserWindow;
-  var rndRef = (0, _react.useRef)(null);
-  var windowFocusTimerRef = (0, _react.useRef)();
-  var defaultSize = {
-    width: confirm.width || 320,
-    height: confirm.height ? confirm.height : ((_rndRef$current = rndRef.current) === null || _rndRef$current === void 0 ? void 0 : _rndRef$current.getBoundingClientRect().height) || (confirm.icon ? 160 : 150)
-  };
-  var baseBounds = (0, _react.useMemo)(function () {
-    var _ref4 = screenBounds || {
-        width: window.innerWidth,
-        height: window.innerHeight
-      },
-      width = _ref4.width,
-      height = _ref4.height;
-    return {
-      x: width / 2 - defaultSize.width / 2,
-      y: height / 2 - defaultSize.height / 2,
-      width: width,
-      height: height
-    };
-  }, [screenBounds]);
-  var _useState = (0, _react.useState)({
-      x: baseBounds.x,
-      y: baseBounds.y
-    }),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    bounds = _useState2[0],
-    setBounds = _useState2[1];
-  var bind = (0, _react2.useDrag)(function (_ref5) {
-    var _ref5$delta = (0, _slicedToArray2["default"])(_ref5.delta, 2),
-      dx = _ref5$delta[0],
-      dy = _ref5$delta[1];
-    var x = bounds.x + dx;
-    var y = bounds.y + dy;
-    var maxX = baseBounds.width - defaultSize.width;
-    var maxY = baseBounds.height - defaultSize.height;
-    var coord = {
-      x: Math.max(0, Math.min(maxX, x)),
-      y: Math.max(0, Math.min(maxY, y))
-    };
-    setBounds(coord);
-  });
-  var ignoreMouseTimer = (0, _react.useRef)();
-  function recalculate(bounds) {
-    if (windowFocusTimerRef.current) {
-      clearTimeout(windowFocusTimerRef.current);
-      windowFocusTimerRef.current = undefined;
-    }
-    log("call handle checkMouseOver condition:  ".concat((0, _env.isElectron)(), " && ").concat((0, _platform.isWindows)(), " && ").concat(browserWindow, " && ").concat(rndRef.current, " && ").concat(JSON.stringify(screenBounds)));
-    if ((0, _env.isElectron)() && (0, _platform.isWindows)() && browserWindow && rndRef.current && screenBounds) {
-      log("handleCheckMouseOver called , the bounds is ".concat(JSON.stringify(bounds || screenBounds)));
-      (0, _tools.handleCheckMouseOver)({
-        elem: rndRef.current,
-        browserWindow: browserWindow,
-        screenBounds: bounds || screenBounds,
-        callback: function callback(timerId) {
-          windowFocusTimerRef.current = timerId;
-        }
-      });
-    }
-  }
-  var handleRecalculate = function handleRecalculate() {
-    return recalculate();
-  };
-  (0, _react.useEffect)(function () {
-    browserWindow === null || browserWindow === void 0 || browserWindow.setIgnoreMouseEvents(true, {
-      forward: true
-    });
-    recalculate();
-    !calculateMethods.has(confirm) && calculateMethods.set(confirm, recalculate);
-    (0, _env.isElectron)() && (0, _platform.isWindows)() && window.runtime.screen.addListener('display-removed', handleRecalculate);
-    return function () {
-      clearTimeout(windowFocusTimerRef.current);
-      calculateMethods["delete"](confirm);
-      ignoreMouseTimer.current && clearInterval(ignoreMouseTimer.current);
-      (0, _env.isElectron)() && (0, _platform.isWindows)() && window.runtime.screen.removeListener('display-removed', handleRecalculate);
-    };
-  }, [rndRef.current /** hack 处理 windows 下，弹出窗口层级不对的问题 */]);
-  (0, _react.useEffect)(function () {
-    log("when screen bounds changed ".concat(JSON.stringify(screenBounds)));
-    (0, _platform.isWindows)() && setBounds({
-      x: baseBounds.x,
-      y: baseBounds.y
-    });
-  }, [screenBounds]);
-  var handleMouseEnter = function handleMouseEnter() {
-    ignoreMouseTimer.current && clearInterval(ignoreMouseTimer.current);
-    if ((0, _env.isElectron)()) {
-      browserWindow === null || browserWindow === void 0 || browserWindow.setIgnoreMouseEvents(false);
-      browserWindow === null || browserWindow === void 0 || browserWindow.focus();
-    }
-  };
-  var handleMouseLeave = function handleMouseLeave() {
-    if ((0, _env.isElectron)()) {
-      browserWindow === null || browserWindow === void 0 || browserWindow.setIgnoreMouseEvents(true, {
-        forward: true
-      });
-      // 修复老版本的 mac 下，ignore 会失效的问题
-      ignoreMouseTimer.current = setInterval(function () {
-        browserWindow === null || browserWindow === void 0 || browserWindow.setIgnoreMouseEvents(true, {
-          forward: true
-        });
-      }, 1000);
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, bind()), {}, {
-    onMouseLeave: handleMouseLeave,
-    onMouseEnter: handleMouseEnter,
-    style: {
-      width: defaultSize.width,
-      height: confirm.height || 'auto',
-      left: "".concat(bounds.x, "px"),
-      top: "".concat(bounds.y, "px"),
-      position: 'absolute',
-      touchAction: 'none'
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      ref: rndRef,
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      },
-      onKeyUp: function onKeyUp(e) {
-        return e.stopPropagation();
-      },
-      onKeyDown: function onKeyDown(e) {
-        return e.stopPropagation();
-      },
-      className: "fcr-confirm-dialog-wrapper_web",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirmContent.ConfirmContent, _objectSpread({}, confirm))
-    })
-  }));
 });

package/lib/modules/event-sound/index.js

@@ -132,7 +132,7 @@ var SoundEffectUIModule = exports.SoundEffectUIModule = /*#__PURE__*/function (_
       this._chatRoomControl = this.currentRoomControlProvider.currentRoomControl.getChatRoomControl();
       this._streamControl = this.currentRoomControlProvider.currentRoomControl.getStreamControl();
       this._roomControl = this.currentRoomControlProvider.currentRoomControl;
-      this._whiteboardControl = this.currentRoomControlProvider.currentRoomControl.getBoardControl();
+      this._whiteboardControl = this.currentRoomControlProvider.currentRoomControl.getSharingControl().getBoardControl();
       this._userControl = this.currentRoomControlProvider.currentRoomControl.getUserControl();
       this._deviceStore = this.deviceProvider;
       this._connectionControl = this.connectionProvider;

package/lib/modules/layout/components/CommonVideoRenderer.js

@@ -111,7 +111,11 @@ var CommonVideoRenderer = exports.CommonVideoRenderer = (0, _mobxReact.observer)
     interpreterUserList = _useContext3.interpreterUserList,
     isInterpreterEnabled = _useContext3.isInterpreterEnabled,
     openRenameDialog = _useContext3.openRenameDialog,
-    isVideoSuspended = _useContext3.isVideoSuspended;
+    isVideoSuspended = _useContext3.isVideoSuspended,
+    scalcValue = _useContext3.scalcValue,
+    annotationHasStart = _useContext3.annotationHasStart,
+    annotationControl = _useContext3.annotationControl,
+    annotation = _useContext3.annotation;
   var getFormatWindowData = useFormatWindowData();
   var commonProps = useCommonProps(layoutType);
   var toggleFullScreen = function toggleFullScreen() {
@@ -186,28 +190,41 @@ var CommonVideoRenderer = exports.CommonVideoRenderer = (0, _mobxReact.observer)
         videoSourceType = windowData.videoSourceType;
       var isBoard = type === _type.FcrUIWindowType.BOARD;
       var isScreenSharing = videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN;
+      /**
+       * 在只有一个用户时，无法开启网格布局，所以可以通过 data.length 和 layoutType 判断是否是主窗口。
+       */
+      var isMainWindow = data.length === 1 && layoutType === _type.FcrUILayoutType.GALLERY;
+      var isShowScreenSharingInMainWindow = isScreenSharing && isMainWindow;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: commonProps.className,
         style: {
           width: cols && cols > 1 ? "calc(".concat(100 / cols, "% - ").concat(_Gallery.Gap * 2, "px)") : dimensions.width,
           height: dimensions.height
         },
-        children: isBoard ? renderBoardContent(windowData, windowId) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindow, {
-          memberWindowPreviewType: commonProps.memberWindowPreviewType,
-          canShowSpeakerSpotlight: commonProps.canShowSpeakerSpotlight,
-          width: dimensions.width,
-          height: dimensions.height,
-          slot: renderMemberWindowActions(windowData, false),
-          videoRenderMode: _imports.AgoraRtcRenderMode.FIT,
-          videoStreamType: commonProps.videoStreamType,
-          windowData: windowData,
-          showAvatar: true,
-          onRemovePin: removePin,
-          onDoubleClick: function onDoubleClick() {
-            return handleDoubleClick(windowId, isScreenSharing, isPin);
+        children: isBoard ? renderBoardContent(windowData, windowId) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            width: dimensions.width,
+            height: dimensions.height
           },
-          isVideoSuspended: isVideoSuspended
-        }, windowId)
+          children: [isShowScreenSharingInMainWindow && annotationControl, /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindow, {
+            memberWindowPreviewType: commonProps.memberWindowPreviewType,
+            canShowSpeakerSpotlight: commonProps.canShowSpeakerSpotlight,
+            width: dimensions.width,
+            height: dimensions.height,
+            slot: !isShowScreenSharingInMainWindow && renderMemberWindowActions(windowData, false),
+            videoRenderMode: _imports.AgoraRtcRenderMode.FIT,
+            videoStreamType: commonProps.videoStreamType,
+            windowData: windowData,
+            showAvatar: true,
+            onRemovePin: removePin,
+            onDoubleClick: function onDoubleClick() {
+              return handleDoubleClick(windowId, isScreenSharing, isPin);
+            },
+            isVideoSuspended: isVideoSuspended,
+            scalcValue: isMainWindow ? scalcValue : 1,
+            annotation: annotation
+          }, windowId)]
+        })
       }, windowId);
     })
   });

package/lib/modules/layout/index.d.ts

@@ -14,6 +14,8 @@ import { FcrUIVideoWindowDataSource } from '../../shared-data-source/video-windo
 import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
 import { FcrUIScreenShareProvider } from '../../providers/screen-share-provider';
 import { FcrUISharedPinDataSource } from '../../shared-data-source/pin-data';
+import { FcrUIAnnotationProvider } from '../../providers/annotation-provider';
+import { FcrUIScreenShareSharedDataSource } from '../../shared-data-source/screen-share-data';
 import { FcrUIInterpreterProvider } from '../../providers/interpreter-provider';
 export declare class LayoutUIModule extends UIModule {
     private _store?;
@@ -31,6 +33,8 @@ export declare class LayoutUIModule extends UIModule {
     sharedMemberDataSource?: FcrUIMemberSharedDataSource;
     screenShareProvider?: FcrUIScreenShareProvider;
     sharedPinDataSource?: FcrUISharedPinDataSource;
+    annotationProvider?: FcrUIAnnotationProvider;
+    sharedScreenShareSharedDataSource?: FcrUIScreenShareSharedDataSource;
     interpreterProvider?: FcrUIInterpreterProvider;
     onNodeWillActive(): void;
     onNodeWillInactive(): void;

package/lib/modules/layout/index.js

@@ -57,6 +57,8 @@ var LayoutUIModule = exports.LayoutUIModule = /*#__PURE__*/function (_UIModule)
         sharedMemberDataSource: this.sharedMemberDataSource,
         screenShareProvider: this.screenShareProvider,
         sharedPinDataSource: this.sharedPinDataSource,
+        annotationProvider: this.annotationProvider,
+        sharedScreenShareDataSource: this.sharedScreenShareSharedDataSource,
         interpreterProvider: this.interpreterProvider
       });
     }

package/lib/modules/layout/store.d.ts

@@ -19,6 +19,8 @@ import { FcrUIVideoWindowDataSource } from '../../shared-data-source/video-windo
 import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
 import { FcrUIScreenShareProvider } from '../../providers/screen-share-provider';
 import { FcrUISharedPinDataSource } from '../../shared-data-source/pin-data';
+import { FcrUIAnnotationProvider } from '../../providers/annotation-provider';
+import { FcrUIScreenShareSharedDataSource } from '../../shared-data-source/screen-share-data';
 import { FcrUIInterpreterProvider } from '../../providers/interpreter-provider';
 export interface FcrLayoutSlots {
     participant: React.ReactNode;
@@ -28,6 +30,8 @@ export interface FcrLayoutSlots {
     actionBar: React.ReactNode;
     layers: React.ReactNode;
     whiteboard: React.ReactNode;
+    annotation: React.ReactNode;
+    annotationControl: React.ReactNode;
 }
 export interface FcrUILayoutAsideContent {
     participant: boolean;
@@ -48,6 +52,8 @@ export interface LayoutStoreParams {
     sharedMemberDataSource: FcrUIMemberSharedDataSource;
     screenShareProvider: FcrUIScreenShareProvider;
     sharedPinDataSource: FcrUISharedPinDataSource;
+    annotationProvider: FcrUIAnnotationProvider;
+    sharedScreenShareDataSource: FcrUIScreenShareSharedDataSource;
     interpreterProvider: FcrUIInterpreterProvider;
 }
 export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
@@ -74,6 +80,8 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     private _chatProvider;
     private _screenShareProvider;
     private _pinDataSource;
+    private _annotationProvider;
+    private _sharedScreenShareDataSource;
     private _interpreterProvider;
     accessor participant: React.ReactNode;
     accessor chat: React.ReactNode;
@@ -82,6 +90,8 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     accessor actionBar: React.ReactNode;
     accessor layers: React.ReactNode;
     accessor whiteboard: React.ReactNode;
+    accessor annotation: React.ReactNode;
+    accessor annotationControl: React.ReactNode;
     accessor collapsed: boolean;
     accessor aside: boolean;
     accessor barHovering: boolean;
@@ -102,6 +112,8 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     get isMulti(): boolean;
     get layout(): import("../../type").FcrUIVideoWindowLayoutType;
     get manualLayout(): import("../../type").FcrUIVideoWindowLayoutType | undefined;
+    get scalcValue(): number;
+    get annotationHasStart(): boolean;
     get sourceList(): import("../../shared-data-source/video-window").FcrUIVideoWindowDataImpl[];
     get layoutMainList(): import("../../shared-data-source/video-window").FcrUIVideoWindowDataImpl[];
     get mainList(): import("../../shared-data-source/video-window").FcrUIVideoWindowDataImpl[];
@@ -133,8 +145,8 @@ export default class LayoutStore implements FcrLayoutSlots, FcrUIEventObserver {
     get participantCount(): number;
     get isVideoSuspended(): boolean;
     get asideContent(): import("../../type").FcrUIUpdateAsideParams;
-    get participantsRenderAt(): "aside" | "dialog";
-    get chatRenderAt(): "aside" | "dialog";
+    get participantsRenderAt(): "dialog" | "aside";
+    get chatRenderAt(): "dialog" | "aside";
     getWaterMarkContent(): string;
     hasMutePermission(targetRole: FcrPrivilegeUserRole | FcrUserRole): boolean;
     hasUnmutePermission(targetRole: FcrPrivilegeUserRole | FcrUserRole): boolean;