fcr-ui-scene 3.6.1 → 3.6.2

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,38 @@ var CommonVideoRenderer = exports.CommonVideoRenderer = (0, _mobxReact.observer)
         videoSourceType = windowData.videoSourceType;
       var isBoard = type === _type.FcrUIWindowType.BOARD;
       var isScreenSharing = videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN;
+      var isMainWindow = data.length === 1;
+      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: [isScreenSharing && layoutType === _type.FcrUILayoutType.GALLERY && 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;

package/lib/modules/layout/store.js

@@ -110,7 +110,7 @@ var _view = require("./view");
 var _logger = require("../../utilities/logger");
 var _env = require("agora-foundation/lib/utilities/env");
 var _LayoutStore;
-var _initProto, _participantDecs, _init_participant, _chatDecs, _init_chat, _chatActionDecs, _init_chatAction, _stateBarDecs, _init_stateBar, _actionBarDecs, _init_actionBar, _layersDecs, _init_layers, _whiteboardDecs, _init_whiteboard, _init_collapsed, _init_aside, _init_barHovering, _init_barLocked, _init_barHidden, _init_asideWidth, _init_userVolumeMap, _init_chatRoomState, _init_whiteboardActive, _init_ownerUser, _addPinMessageDecs, _cancelPinMessageDecs, _setWhiteboardActiveDecs, _setAsideWidthDecs, _updateSlotsDecs, _toggleLayoutDecs, _toggleCollapsedDecs, _toggleAsideDecs, _asideWidthChangedDecs, _toggleLayoutBarLockDecs, _toggleLayoutBarHiddenDecs, _resetLockTimerDecs, _setHoveringHandlerDecs, _setHoveringLeaveHandlerDecs, _handleLiveLayoutChangeDecs, _onUserInfoUpdatedDecs, _handleLayoutUpdatedDecs, _init__handleLayoutUpdated, _handleFoldListChangedDecs, _handleMainListLengthChangedDecs, _handleMainListChangedDecs, _setBarHoveringDecs, _handleConnectionUpdatedDecs, _onAudioVolumeUpdatedDecs, _ref;
+var _initProto, _participantDecs, _init_participant, _chatDecs, _init_chat, _chatActionDecs, _init_chatAction, _stateBarDecs, _init_stateBar, _actionBarDecs, _init_actionBar, _layersDecs, _init_layers, _whiteboardDecs, _init_whiteboard, _annotationDecs, _init_annotation, _annotationControlDecs, _init_annotationControl, _init_collapsed, _init_aside, _init_barHovering, _init_barLocked, _init_barHidden, _init_asideWidth, _init_userVolumeMap, _init_chatRoomState, _init_whiteboardActive, _init_ownerUser, _addPinMessageDecs, _cancelPinMessageDecs, _setWhiteboardActiveDecs, _setAsideWidthDecs, _updateSlotsDecs, _toggleLayoutDecs, _toggleCollapsedDecs, _toggleAsideDecs, _asideWidthChangedDecs, _toggleLayoutBarLockDecs, _toggleLayoutBarHiddenDecs, _resetLockTimerDecs, _setHoveringHandlerDecs, _setHoveringLeaveHandlerDecs, _handleLiveLayoutChangeDecs, _onUserInfoUpdatedDecs, _handleLayoutUpdatedDecs, _init__handleLayoutUpdated, _handleFoldListChangedDecs, _handleMainListLengthChangedDecs, _handleMainListChangedDecs, _setBarHoveringDecs, _handleConnectionUpdatedDecs, _onAudioVolumeUpdatedDecs, _ref;
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
@@ -138,7 +138,9 @@ var _N = /*#__PURE__*/new WeakMap();
 var _O = /*#__PURE__*/new WeakMap();
 var _P = /*#__PURE__*/new WeakMap();
 var _Q = /*#__PURE__*/new WeakMap();
-_ref = (_participantDecs = [_mobx.observable, _mobx.observable.ref], _chatDecs = [_mobx.observable, _mobx.observable.ref], _chatActionDecs = [_mobx.observable, _mobx.observable.ref], _stateBarDecs = [_mobx.observable, _mobx.observable.ref], _actionBarDecs = [_mobx.observable, _mobx.observable.ref], _layersDecs = [_mobx.observable, _mobx.observable.ref], _whiteboardDecs = [_mobx.observable, _mobx.observable.ref], _addPinMessageDecs = [_mobx.action, _mobx.action.bound], _cancelPinMessageDecs = [_mobx.action, _mobx.action.bound], _setWhiteboardActiveDecs = [_mobx.action, _mobx.action.bound], _setAsideWidthDecs = [_mobx.action, _mobx.action.bound], _updateSlotsDecs = [_mobx.action, _mobx.action.bound], _toggleLayoutDecs = [_mobx.action, _mobx.action.bound], _toggleCollapsedDecs = [_mobx.action, _mobx.action.bound], _toggleAsideDecs = [_mobx.action, _mobx.action.bound], _asideWidthChangedDecs = [_mobx.action, _mobx.action.bound], _toggleLayoutBarLockDecs = [_mobx.action, _mobx.action.bound], _toggleLayoutBarHiddenDecs = [_mobx.action, _mobx.action.bound], _resetLockTimerDecs = [_mobx.action, _mobx.action.bound], _setHoveringHandlerDecs = [_mobx.action, _mobx.action.bound], _setHoveringLeaveHandlerDecs = [_mobx.action, _mobx.action.bound], _handleLiveLayoutChangeDecs = [_mobx.action, _mobx.action.bound], _onUserInfoUpdatedDecs = [_mobx.action, _mobx.action.bound], _handleLayoutUpdatedDecs = [_mobx.action, _mobx.action.bound], _handleFoldListChangedDecs = [_mobx.action, _mobx.action.bound], _handleMainListLengthChangedDecs = [_mobx.action, _mobx.action.bound], _handleMainListChangedDecs = [_mobx.action, _mobx.action.bound], _setBarHoveringDecs = [_mobx.action, _mobx.action.bound], _handleConnectionUpdatedDecs = [_mobx.action, _mobx.action.bound], _onAudioVolumeUpdatedDecs = [_mobx.action, _mobx.action.bound], "logger");
+var _R = /*#__PURE__*/new WeakMap();
+var _S = /*#__PURE__*/new WeakMap();
+_ref = (_participantDecs = [_mobx.observable, _mobx.observable.ref], _chatDecs = [_mobx.observable, _mobx.observable.ref], _chatActionDecs = [_mobx.observable, _mobx.observable.ref], _stateBarDecs = [_mobx.observable, _mobx.observable.ref], _actionBarDecs = [_mobx.observable, _mobx.observable.ref], _layersDecs = [_mobx.observable, _mobx.observable.ref], _whiteboardDecs = [_mobx.observable, _mobx.observable.ref], _annotationDecs = [_mobx.observable, _mobx.observable.ref], _annotationControlDecs = [_mobx.observable, _mobx.observable.ref], _addPinMessageDecs = [_mobx.action, _mobx.action.bound], _cancelPinMessageDecs = [_mobx.action, _mobx.action.bound], _setWhiteboardActiveDecs = [_mobx.action, _mobx.action.bound], _setAsideWidthDecs = [_mobx.action, _mobx.action.bound], _updateSlotsDecs = [_mobx.action, _mobx.action.bound], _toggleLayoutDecs = [_mobx.action, _mobx.action.bound], _toggleCollapsedDecs = [_mobx.action, _mobx.action.bound], _toggleAsideDecs = [_mobx.action, _mobx.action.bound], _asideWidthChangedDecs = [_mobx.action, _mobx.action.bound], _toggleLayoutBarLockDecs = [_mobx.action, _mobx.action.bound], _toggleLayoutBarHiddenDecs = [_mobx.action, _mobx.action.bound], _resetLockTimerDecs = [_mobx.action, _mobx.action.bound], _setHoveringHandlerDecs = [_mobx.action, _mobx.action.bound], _setHoveringLeaveHandlerDecs = [_mobx.action, _mobx.action.bound], _handleLiveLayoutChangeDecs = [_mobx.action, _mobx.action.bound], _onUserInfoUpdatedDecs = [_mobx.action, _mobx.action.bound], _handleLayoutUpdatedDecs = [_mobx.action, _mobx.action.bound], _handleFoldListChangedDecs = [_mobx.action, _mobx.action.bound], _handleMainListLengthChangedDecs = [_mobx.action, _mobx.action.bound], _handleMainListChangedDecs = [_mobx.action, _mobx.action.bound], _setBarHoveringDecs = [_mobx.action, _mobx.action.bound], _handleConnectionUpdatedDecs = [_mobx.action, _mobx.action.bound], _onAudioVolumeUpdatedDecs = [_mobx.action, _mobx.action.bound], "logger");
 var LayoutStore = exports["default"] = /*#__PURE__*/function () {
   function LayoutStore(params) {
     var _this = this;
@@ -159,17 +161,19 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
     _classPrivateFieldInitSpec(this, _E, _init_actionBar(this, null));
     _classPrivateFieldInitSpec(this, _F, _init_layers(this, null));
     _classPrivateFieldInitSpec(this, _G, _init_whiteboard(this, null));
+    _classPrivateFieldInitSpec(this, _H, _init_annotation(this, null));
+    _classPrivateFieldInitSpec(this, _I, _init_annotationControl(this, null));
     // State
-    _classPrivateFieldInitSpec(this, _H, _init_collapsed(this, true));
-    _classPrivateFieldInitSpec(this, _I, _init_aside(this, false));
-    _classPrivateFieldInitSpec(this, _J, _init_barHovering(this, true));
-    _classPrivateFieldInitSpec(this, _K, _init_barLocked(this, true));
-    _classPrivateFieldInitSpec(this, _L, _init_barHidden(this, false));
-    _classPrivateFieldInitSpec(this, _M, _init_asideWidth(this, _view.MinAsideWidth));
-    _classPrivateFieldInitSpec(this, _N, _init_userVolumeMap(this, new Map()));
-    _classPrivateFieldInitSpec(this, _O, _init_chatRoomState(this, _type4.FcrChatRoomConnectionState.Disconnected));
-    _classPrivateFieldInitSpec(this, _P, _init_whiteboardActive(this, false));
-    _classPrivateFieldInitSpec(this, _Q, _init_ownerUser(this, undefined));
+    _classPrivateFieldInitSpec(this, _J, _init_collapsed(this, true));
+    _classPrivateFieldInitSpec(this, _K, _init_aside(this, false));
+    _classPrivateFieldInitSpec(this, _L, _init_barHovering(this, true));
+    _classPrivateFieldInitSpec(this, _M, _init_barLocked(this, true));
+    _classPrivateFieldInitSpec(this, _N, _init_barHidden(this, false));
+    _classPrivateFieldInitSpec(this, _O, _init_asideWidth(this, _view.MinAsideWidth));
+    _classPrivateFieldInitSpec(this, _P, _init_userVolumeMap(this, new Map()));
+    _classPrivateFieldInitSpec(this, _Q, _init_chatRoomState(this, _type4.FcrChatRoomConnectionState.Disconnected));
+    _classPrivateFieldInitSpec(this, _R, _init_whiteboardActive(this, false));
+    _classPrivateFieldInitSpec(this, _S, _init_ownerUser(this, undefined));
     (0, _defineProperty2["default"])(this, "getAllowedOperations", (0, _mobxUtils.computedFn)(function (targetRole, isSelf) {
       return _this._privilegeProvider.getAllowedOperations(targetRole, isSelf);
     }));
@@ -191,7 +195,7 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
     this._userControl = roomControl.getUserControl();
     this._streamControl = roomControl.getStreamControl();
     this._chatRoomControl = roomControl.getChatRoomControl();
-    this._whiteBoardControl = roomControl.getBoardControl();
+    this._whiteBoardControl = roomControl.getSharingControl().getBoardControl();
     this._roomControl = roomControl;
     this._sharedLayoutDataSource = params.sharedLayoutDataSource;
     this._eventProvider = params.eventProvider;
@@ -206,6 +210,8 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
     this._screenShareProvider = params.screenShareProvider;
     this._pinDataSource = params.sharedPinDataSource;
     this.chatRoomState = this._chatRoomControl.getConnectionState();
+    this._annotationProvider = params.annotationProvider;
+    this._sharedScreenShareDataSource = params.sharedScreenShareDataSource;
     this._interpreterProvider = params.interpreterProvider;
     this._addListeners();
     //@ts-ignore
@@ -215,7 +221,7 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
     this._handleMainListChanged();
     this._handleMainListLengthChanged();
     this._handleLayoutUpdated(this._videoWindowDataSource.layoutType);
-    this.setWhiteboardActive(this._whiteBoardControl.getBoardActiveInfo().isActive);
+    this.setWhiteboardActive(this._whiteBoardControl.getActivity());
   }
   return (0, _createClass2["default"])(LayoutStore, [{
     key: "participant",
@@ -274,7 +280,7 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_G, this, v);
     }
   }, {
-    key: "collapsed",
+    key: "annotation",
     get: function get() {
       return _classPrivateFieldGet(_H, this);
     },
@@ -282,7 +288,7 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_H, this, v);
     }
   }, {
-    key: "aside",
+    key: "annotationControl",
     get: function get() {
       return _classPrivateFieldGet(_I, this);
     },
@@ -290,7 +296,7 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_I, this, v);
     }
   }, {
-    key: "barHovering",
+    key: "collapsed",
     get: function get() {
       return _classPrivateFieldGet(_J, this);
     },
@@ -298,7 +304,7 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_J, this, v);
     }
   }, {
-    key: "barLocked",
+    key: "aside",
     get: function get() {
       return _classPrivateFieldGet(_K, this);
     },
@@ -306,7 +312,7 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_K, this, v);
     }
   }, {
-    key: "barHidden",
+    key: "barHovering",
     get: function get() {
       return _classPrivateFieldGet(_L, this);
     },
@@ -314,7 +320,7 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_L, this, v);
     }
   }, {
-    key: "asideWidth",
+    key: "barLocked",
     get: function get() {
       return _classPrivateFieldGet(_M, this);
     },
@@ -322,7 +328,7 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_M, this, v);
     }
   }, {
-    key: "userVolumeMap",
+    key: "barHidden",
     get: function get() {
       return _classPrivateFieldGet(_N, this);
     },
@@ -330,7 +336,7 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_N, this, v);
     }
   }, {
-    key: "chatRoomState",
+    key: "asideWidth",
     get: function get() {
       return _classPrivateFieldGet(_O, this);
     },
@@ -338,7 +344,7 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_O, this, v);
     }
   }, {
-    key: "whiteboardActive",
+    key: "userVolumeMap",
     get: function get() {
       return _classPrivateFieldGet(_P, this);
     },
@@ -346,13 +352,29 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
       _classPrivateFieldSet(_P, this, v);
     }
   }, {
-    key: "ownerUser",
+    key: "chatRoomState",
     get: function get() {
       return _classPrivateFieldGet(_Q, this);
     },
     set: function set(v) {
       _classPrivateFieldSet(_Q, this, v);
     }
+  }, {
+    key: "whiteboardActive",
+    get: function get() {
+      return _classPrivateFieldGet(_R, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_R, this, v);
+    }
+  }, {
+    key: "ownerUser",
+    get: function get() {
+      return _classPrivateFieldGet(_S, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_S, this, v);
+    }
   }, {
     key: "streamControl",
     get: function get() {
@@ -403,6 +425,16 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
     get: function get() {
       return this._videoWindowDataSource.manualLayout;
     }
+  }, {
+    key: "scalcValue",
+    get: function get() {
+      return this._annotationProvider.scalcValue;
+    }
+  }, {
+    key: "annotationHasStart",
+    get: function get() {
+      return this._annotationProvider.annotationHasStart;
+    }
   }, {
     key: "sourceList",
     get: function get() {
@@ -578,8 +610,8 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "isVideoSuspended",
     get: function get() {
-      var isSharingScreen = this._screenShareProvider.isSharingScreen;
-      var shareScreenOwner = this._screenShareProvider.screenSharingOwner;
+      var isSharingScreen = !!this._sharedScreenShareDataSource.isSharingScreen;
+      var shareScreenOwner = this._sharedScreenShareDataSource.screenSharingOwner;
       var isSharingScreenBySelf = this.localUserId === (shareScreenOwner === null || shareScreenOwner === void 0 ? void 0 : shareScreenOwner.userId);
       if ((0, _env.isElectron)() && isSharingScreen && isSharingScreenBySelf) {
         return true;
@@ -917,9 +949,8 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
           if (isLoneyWindow) {
             this._videoWindowDataSource.removeBoard();
           } else {
-            var _this$_whiteBoardCont = this._whiteBoardControl.getBoardActiveInfo(),
-              ownerUserId = _this$_whiteBoardCont.ownerUserId,
-              isActive = _this$_whiteBoardCont.isActive;
+            var isActive = this._whiteBoardControl.getActivity();
+            var ownerUserId = this._whiteBoardControl.getOwnerId();
             if (isActive) {
               var ownerUser = this._userControl.getUser(ownerUserId);
               this._videoWindowDataSource.addBoard(ownerUser, ownerUserId === this.localUserId, this._privilegeProvider.hasWriteBoardPermission());
@@ -1002,9 +1033,8 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
         return _this5.whiteboardActive;
       }, function (opened) {
         if (opened) {
-          var _this5$_whiteBoardCon = _this5._whiteBoardControl.getBoardActiveInfo(),
-            ownerUserId = _this5$_whiteBoardCon.ownerUserId,
-            isActive = _this5$_whiteBoardCon.isActive;
+          var isActive = _this5._whiteBoardControl.getActivity();
+          var ownerUserId = _this5._whiteBoardControl.getOwnerId();
           if (isActive) {
             var ownerUser = _this5._userControl.getUser(ownerUserId);
             _this5._videoWindowDataSource.addBoard(ownerUser, ownerUserId === _this5.localUserId);
@@ -1269,7 +1299,7 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
   }]);
 }();
 _LayoutStore = LayoutStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_LayoutStore, [[_participantDecs, 17, "participant"], [_chatDecs, 17, "chat"], [_chatActionDecs, 17, "chatAction"], [_stateBarDecs, 17, "stateBar"], [_actionBarDecs, 17, "actionBar"], [_layersDecs, 17, "layers"], [_whiteboardDecs, 17, "whiteboard"], [_mobx.observable, 1, "collapsed"], [_mobx.observable, 1, "aside"], [_mobx.observable, 1, "barHovering"], [_mobx.observable, 1, "barLocked"], [_mobx.observable, 1, "barHidden"], [_mobx.observable, 1, "asideWidth"], [_mobx.observable, 1, "userVolumeMap"], [_mobx.observable, 1, "chatRoomState"], [_mobx.observable, 1, "whiteboardActive"], [_mobx.observable, 1, "ownerUser"], [_mobx.computed, 3, "isWaterMarkEnabled"], [_mobx.computed, 3, "isMulti"], [_mobx.computed, 3, "layout"], [_mobx.computed, 3, "manualLayout"], [_mobx.computed, 3, "sourceList"], [_mobx.computed, 3, "layoutMainList"], [_mobx.computed, 3, "mainList"], [_mobx.computed, 3, "mainListMapByAudioStreamId"], [_mobx.computed, 3, "spotlightStreamId"], [_mobx.computed, 3, "foldList"], [_mobx.computed, 3, "galleryList"], [_mobx.computed, 3, "asideLayout"], [_mobx.computed, 3, "carouselList"], [_mobx.computed, 3, "hasPinnedStream"], [_mobx.computed, 3, "isRobot"], [_mobx.computed, 3, "findSpotlightUser"], [_mobx.computed, 3, "microphoneEnabled"], [_mobx.computed, 3, "galleryMaxSize"], [_mobx.computed, 3, "isVideoSuspended"], [_mobx.computed, 3, "asideContent"], [_mobx.computed, 3, "participantsRenderAt"], [_mobx.computed, 3, "chatRenderAt"], [_decorator.bound, 2, "getWaterMarkContent"], [_decorator.bound, 2, "hasMutePermission"], [_decorator.bound, 2, "hasUnmutePermission"], [_decorator.bound, 2, "hasRequestStartAudioPermission"], [_decorator.bound, 2, "toggleMainStream"], [_addPinMessageDecs, 18, "addPinMessage"], [_cancelPinMessageDecs, 18, "cancelPinMessage"], [_decorator.bound, 2, "addPin"], [_decorator.bound, 2, "removePin"], [_decorator.bound, 2, "setVideoOrientation"], [_decorator.bound, 2, "setAllowChat"], [_decorator.bound, 2, "handleSetPinState"], [_setWhiteboardActiveDecs, 18, "setWhiteboardActive"], [_setAsideWidthDecs, 18, "setAsideWidth"], [_updateSlotsDecs, 18, "updateSlots"], [_decorator.bound, 2, "closeParticipantFromAside"], [_decorator.bound, 2, "moveParticipantFromAsideToDialog"], [_decorator.bound, 2, "closeChatFromAside"], [_decorator.bound, 2, "closeAsideChat"], [_decorator.bound, 2, "moveChatFromAsideToDialog"], [_decorator.bound, 2, "openPrivateChat"], [_decorator.bound, 2, "openRenameDialog"], [_toggleLayoutDecs, 18, "toggleLayout"], [_toggleCollapsedDecs, 18, "toggleCollapsed"], [_toggleAsideDecs, 18, "toggleAside"], [_asideWidthChangedDecs, 18, "asideWidthChanged"], [_toggleLayoutBarLockDecs, 18, "toggleLayoutBarLock"], [_toggleLayoutBarHiddenDecs, 18, "toggleLayoutBarHidden"], [_resetLockTimerDecs, 18, "resetLockTimer"], [_setHoveringHandlerDecs, 18, "setHoveringHandler"], [_setHoveringLeaveHandlerDecs, 18, "setHoveringLeaveHandler"], [_handleLiveLayoutChangeDecs, 18, "handleLiveLayoutChange"], [_onUserInfoUpdatedDecs, 18, "onUserInfoUpdated"], [_decorator.bound, 2, "stopLocalPreview"], [_decorator.bound, 2, "startLocalPreview"], [_decorator.bound, 2, "setAllowChatWithPayload"], [_decorator.bound, 2, "muteAudio"], [_decorator.bound, 2, "sendParticipantEvent"], [_decorator.bound, 2, "onEvent"], [_decorator.bound, 2, "_addListeners"], [_mobx.computed, 3, "_hasVideoStreamUser"], [_handleFoldListChangedDecs, 18, "_handleFoldListChanged"], [_handleMainListLengthChangedDecs, 18, "_handleMainListLengthChanged"], [_handleMainListChangedDecs, 18, "_handleMainListChanged"], [_mobx.action, 2, "_switchToSpeaker"], [_mobx.action, 2, "_switchToGallery"], [_setBarHoveringDecs, 18, "_setBarHovering"], [_decorator.bound, 2, "_initStream"], [_decorator.bound, 2, "_isSetSpotlightEnable"], [_handleConnectionUpdatedDecs, 18, "_handleConnectionUpdated"], [_decorator.bound, 2, "_handleLiveStreamingStateUpdated"], [_decorator.bound, 2, "_handleStreamAdded"], [_decorator.bound, 2, "_onStreamsAdded"], [_decorator.bound, 2, "_onStreamsUpdated"], [_decorator.bound, 2, "_onStreamsRemoved"], [_onAudioVolumeUpdatedDecs, 18, "_onAudioVolumeUpdated"], [_handleLayoutUpdatedDecs, 16, "_handleLayoutUpdated"]], []).e, 19);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_LayoutStore, [[_participantDecs, 17, "participant"], [_chatDecs, 17, "chat"], [_chatActionDecs, 17, "chatAction"], [_stateBarDecs, 17, "stateBar"], [_actionBarDecs, 17, "actionBar"], [_layersDecs, 17, "layers"], [_whiteboardDecs, 17, "whiteboard"], [_annotationDecs, 17, "annotation"], [_annotationControlDecs, 17, "annotationControl"], [_mobx.observable, 1, "collapsed"], [_mobx.observable, 1, "aside"], [_mobx.observable, 1, "barHovering"], [_mobx.observable, 1, "barLocked"], [_mobx.observable, 1, "barHidden"], [_mobx.observable, 1, "asideWidth"], [_mobx.observable, 1, "userVolumeMap"], [_mobx.observable, 1, "chatRoomState"], [_mobx.observable, 1, "whiteboardActive"], [_mobx.observable, 1, "ownerUser"], [_mobx.computed, 3, "isWaterMarkEnabled"], [_mobx.computed, 3, "isMulti"], [_mobx.computed, 3, "layout"], [_mobx.computed, 3, "manualLayout"], [_mobx.computed, 3, "scalcValue"], [_mobx.computed, 3, "sourceList"], [_mobx.computed, 3, "layoutMainList"], [_mobx.computed, 3, "mainList"], [_mobx.computed, 3, "mainListMapByAudioStreamId"], [_mobx.computed, 3, "spotlightStreamId"], [_mobx.computed, 3, "foldList"], [_mobx.computed, 3, "galleryList"], [_mobx.computed, 3, "asideLayout"], [_mobx.computed, 3, "carouselList"], [_mobx.computed, 3, "hasPinnedStream"], [_mobx.computed, 3, "isRobot"], [_mobx.computed, 3, "findSpotlightUser"], [_mobx.computed, 3, "microphoneEnabled"], [_mobx.computed, 3, "galleryMaxSize"], [_mobx.computed, 3, "isVideoSuspended"], [_mobx.computed, 3, "asideContent"], [_mobx.computed, 3, "participantsRenderAt"], [_mobx.computed, 3, "chatRenderAt"], [_decorator.bound, 2, "getWaterMarkContent"], [_decorator.bound, 2, "hasMutePermission"], [_decorator.bound, 2, "hasUnmutePermission"], [_decorator.bound, 2, "hasRequestStartAudioPermission"], [_decorator.bound, 2, "toggleMainStream"], [_addPinMessageDecs, 18, "addPinMessage"], [_cancelPinMessageDecs, 18, "cancelPinMessage"], [_decorator.bound, 2, "addPin"], [_decorator.bound, 2, "removePin"], [_decorator.bound, 2, "setVideoOrientation"], [_decorator.bound, 2, "setAllowChat"], [_decorator.bound, 2, "handleSetPinState"], [_setWhiteboardActiveDecs, 18, "setWhiteboardActive"], [_setAsideWidthDecs, 18, "setAsideWidth"], [_updateSlotsDecs, 18, "updateSlots"], [_decorator.bound, 2, "closeParticipantFromAside"], [_decorator.bound, 2, "moveParticipantFromAsideToDialog"], [_decorator.bound, 2, "closeChatFromAside"], [_decorator.bound, 2, "closeAsideChat"], [_decorator.bound, 2, "moveChatFromAsideToDialog"], [_decorator.bound, 2, "openPrivateChat"], [_decorator.bound, 2, "openRenameDialog"], [_toggleLayoutDecs, 18, "toggleLayout"], [_toggleCollapsedDecs, 18, "toggleCollapsed"], [_toggleAsideDecs, 18, "toggleAside"], [_asideWidthChangedDecs, 18, "asideWidthChanged"], [_toggleLayoutBarLockDecs, 18, "toggleLayoutBarLock"], [_toggleLayoutBarHiddenDecs, 18, "toggleLayoutBarHidden"], [_resetLockTimerDecs, 18, "resetLockTimer"], [_setHoveringHandlerDecs, 18, "setHoveringHandler"], [_setHoveringLeaveHandlerDecs, 18, "setHoveringLeaveHandler"], [_handleLiveLayoutChangeDecs, 18, "handleLiveLayoutChange"], [_onUserInfoUpdatedDecs, 18, "onUserInfoUpdated"], [_decorator.bound, 2, "stopLocalPreview"], [_decorator.bound, 2, "startLocalPreview"], [_decorator.bound, 2, "setAllowChatWithPayload"], [_decorator.bound, 2, "muteAudio"], [_decorator.bound, 2, "sendParticipantEvent"], [_decorator.bound, 2, "onEvent"], [_decorator.bound, 2, "_addListeners"], [_mobx.computed, 3, "_hasVideoStreamUser"], [_handleFoldListChangedDecs, 18, "_handleFoldListChanged"], [_handleMainListLengthChangedDecs, 18, "_handleMainListLengthChanged"], [_handleMainListChangedDecs, 18, "_handleMainListChanged"], [_mobx.action, 2, "_switchToSpeaker"], [_mobx.action, 2, "_switchToGallery"], [_setBarHoveringDecs, 18, "_setBarHovering"], [_decorator.bound, 2, "_initStream"], [_decorator.bound, 2, "_isSetSpotlightEnable"], [_handleConnectionUpdatedDecs, 18, "_handleConnectionUpdated"], [_decorator.bound, 2, "_handleLiveStreamingStateUpdated"], [_decorator.bound, 2, "_handleStreamAdded"], [_decorator.bound, 2, "_onStreamsAdded"], [_decorator.bound, 2, "_onStreamsUpdated"], [_decorator.bound, 2, "_onStreamsRemoved"], [_onAudioVolumeUpdatedDecs, 18, "_onAudioVolumeUpdated"], [_handleLayoutUpdatedDecs, 16, "_handleLayoutUpdated"]], []).e, 21);
 _init_participant = _applyDecs$e[0];
 _init_chat = _applyDecs$e[1];
 _init_chatAction = _applyDecs$e[2];
@@ -1277,17 +1307,19 @@ _init_stateBar = _applyDecs$e[3];
 _init_actionBar = _applyDecs$e[4];
 _init_layers = _applyDecs$e[5];
 _init_whiteboard = _applyDecs$e[6];
-_init_collapsed = _applyDecs$e[7];
-_init_aside = _applyDecs$e[8];
-_init_barHovering = _applyDecs$e[9];
-_init_barLocked = _applyDecs$e[10];
-_init_barHidden = _applyDecs$e[11];
-_init_asideWidth = _applyDecs$e[12];
-_init_userVolumeMap = _applyDecs$e[13];
-_init_chatRoomState = _applyDecs$e[14];
-_init_whiteboardActive = _applyDecs$e[15];
-_init_ownerUser = _applyDecs$e[16];
-_init__handleLayoutUpdated = _applyDecs$e[17];
-_initProto = _applyDecs$e[18];
+_init_annotation = _applyDecs$e[7];
+_init_annotationControl = _applyDecs$e[8];
+_init_collapsed = _applyDecs$e[9];
+_init_aside = _applyDecs$e[10];
+_init_barHovering = _applyDecs$e[11];
+_init_barLocked = _applyDecs$e[12];
+_init_barHidden = _applyDecs$e[13];
+_init_asideWidth = _applyDecs$e[14];
+_init_userVolumeMap = _applyDecs$e[15];
+_init_chatRoomState = _applyDecs$e[16];
+_init_whiteboardActive = _applyDecs$e[17];
+_init_ownerUser = _applyDecs$e[18];
+_init__handleLayoutUpdated = _applyDecs$e[19];
+_initProto = _applyDecs$e[20];
 (0, _defineProperty2["default"])(LayoutStore, "MIN_USERS_TO_ENABLE_SPOTLIGHT", 2);
 var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

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

@@ -22,6 +22,7 @@ import { FcrUIDialogProvider } from '../../providers/dialog-provider';
 import { FcrUIAbilityProviderImpl } from '../../providers/ability-provider';
 import { FcrUIMessageProvider } from '../../providers/message-provider';
 import { FcrUISecuritySharedDataSource } from '../../shared-data-source/security-data';
+import { FcrUIScreenShareSharedDataSource } from '../../shared-data-source/screen-share-data';
 export declare class ParticipantUIModule extends UIModule {
     private _store;
     deviceStreamProvider?: FcrUIDeviceStreamProvider;
@@ -46,6 +47,7 @@ export declare class ParticipantUIModule extends UIModule {
     messageProvider?: FcrUIMessageProvider;
     abilityProvider?: FcrUIAbilityProviderImpl;
     sharedSecuritySharedDataSource?: FcrUISecuritySharedDataSource;
+    sharedScreenShareSharedDataSource?: FcrUIScreenShareSharedDataSource;
     onNodeWillActive(): void;
     onNodeWillInactive(): void;
     getComponent(): import("react/jsx-runtime").JSX.Element;

package/lib/modules/participant/index.js

@@ -87,7 +87,8 @@ var ParticipantUIModule = exports.ParticipantUIModule = /*#__PURE__*/function (_
         dialogProvider: this.dialogProvider,
         abilityProvider: this.abilityProvider,
         messageProvider: this.messageProvider,
-        sharedSecuritySharedDataSource: this.sharedSecuritySharedDataSource
+        sharedSecuritySharedDataSource: this.sharedSecuritySharedDataSource,
+        sharedScreenShareSharedDataSource: this.sharedScreenShareSharedDataSource
       });
     }
   }, {

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

@@ -28,9 +28,9 @@ import { FcrUIDialogProvider } from '../../providers/dialog-provider';
 import { FcrUIMessageProvider } from '../../providers/message-provider';
 import { FcrUIAbilityProviderImpl } from '../../providers/ability-provider';
 import { FcrUISecuritySharedDataSource } from '../../shared-data-source/security-data';
+import { FcrUIScreenShareSharedDataSource } from '../../shared-data-source/screen-share-data';
 export default class ParticipantStore {
     protected logger: import("agora-foundation/lib/logger").Logger;
-    private _screenSharingState;
     private _roomStore;
     private _chatProvider;
     private _roomControl;
@@ -57,6 +57,7 @@ export default class ParticipantStore {
     private _sharedWaitingRoomDataSource;
     private _sharedMemberDataSource;
     private _sharedChatDataSource;
+    private _sharedScreenShareSharedDataSource;
     private _peerSessionObserver;
     private _dialogProvider;
     private _abilityProvider;
@@ -93,6 +94,7 @@ export default class ParticipantStore {
     get localUserRole(): FcrUserRole;
     get isLocalUserHost(): boolean;
     get enableSpotlight(): boolean;
+    get screenSharingOwner(): FcrUserInfo | undefined;
     get userListSource(): import("./member-list-data-source").FcrUIMemberDataImpl[];
     get spotlightStreamId(): string;
     get mergeUserInfo(): FcrUserInfo | undefined;
@@ -115,7 +117,7 @@ export default class ParticipantStore {
     get isHostKeyEnabled(): boolean;
     get hasInvite(): boolean;
     get checkedStateMap(): import("../../shared-data-source/security-data").FcrSecurityCheckedStateType;
-    constructor({ roomControl, securityStore, uiEventStore, deviceStore, deviceStreamStore, roomStore, sessionProvider, sharedSpeakerSpotlightDataSource, sharedPinDataSource, sharedLayoutDataSource, sharedInterpreterDataSource, sharedSettingDataSource, sharedWaitingRoomDataSource, chatProvider, sharedVideoWindowDataSource, sharedMemberDataSource, sharedChatDataSource, dialogProvider, abilityProvider, messageProvider, sharedSecuritySharedDataSource, }: {
+    constructor({ roomControl, securityStore, uiEventStore, deviceStore, deviceStreamStore, roomStore, sessionProvider, sharedSpeakerSpotlightDataSource, sharedPinDataSource, sharedLayoutDataSource, sharedInterpreterDataSource, sharedSettingDataSource, sharedWaitingRoomDataSource, chatProvider, sharedVideoWindowDataSource, sharedMemberDataSource, sharedChatDataSource, dialogProvider, abilityProvider, messageProvider, sharedSecuritySharedDataSource, sharedScreenShareSharedDataSource, }: {
         roomControl: FcrMainRoomControl;
         securityStore: FcrUIPrivilegeProvider;
         uiEventStore: FcrUIEventProvider;
@@ -137,6 +139,7 @@ export default class ParticipantStore {
         abilityProvider: FcrUIAbilityProviderImpl;
         messageProvider: FcrUIMessageProvider;
         sharedSecuritySharedDataSource: FcrUISecuritySharedDataSource;
+        sharedScreenShareSharedDataSource: FcrUIScreenShareSharedDataSource;
     });
     release(): void;
     allowedOperations: (userId: string, userRole: FcrUserRole) => string[];