fcr-ui-scene 3.6.1 → 3.6.3

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

@@ -17,7 +17,9 @@ var FcrUIRemoteVideoPlayer = exports.FcrUIRemoteVideoPlayer = (0, _mobxReact.obs
   var streamId = _ref.streamId,
     hasVideoStream = _ref.hasVideoStream,
     videoStreamType = _ref.videoStreamType,
-    renderMode = _ref.renderMode;
+    renderMode = _ref.renderMode,
+    hasScreenSharing = _ref.hasScreenSharing,
+    scalcValue = _ref.scalcValue;
   var divRef = (0, _react.useRef)(null);
   var context = (0, _react.useContext)(_videoTrackRenderContext.FcrVideoTrackRenderContext);
   var t = (0, _i18n.useI18n)();
@@ -44,6 +46,9 @@ var FcrUIRemoteVideoPlayer = exports.FcrUIRemoteVideoPlayer = (0, _mobxReact.obs
       className: (0, _classnames["default"])('fcr-member-window-body fcr-member-window-body-video-remote', {
         'fcr-member-window-body-video-remote-render': isFirstRemoteVideoFrameRendered && hasVideoStream
       }),
+      style: {
+        transform: "scale(".concat(scalcValue, ")")
+      },
       ref: divRef
     })
   });

package/lib/modules/components/member-window/components/video-player/index.d.ts

@@ -6,4 +6,5 @@ export declare const FcrUIVideoPlayer: (props: {
     videoStreamType: AgoraRtcVideoStreamType;
     renderMode: AgoraRtcRenderMode;
     hasScreenSharing: boolean;
+    scalcValue: number;
 }) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/member-window/index.css

@@ -13,30 +13,39 @@
   position: relative;
   overflow: hidden;
 }
+
 .fcr-member-window button,
 .fcr-member-board button {
   border: none;
   outline: none;
 }
+
 .fcr-member-window button:focus,
 .fcr-member-board button:focus {
   border: none;
   outline: none;
 }
+
 .fcr-member-board {
   width: 100%;
   height: 100%;
   position: relative;
+  cursor:
+    url('data:image/svg+xml,%3Csvg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0_71146_163811)"%3E%3Cg filter="url(%23filter0_d_71146_163811)"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4.95701 14.2575L1.05431 2.41514C0.867777 1.84912 1.1772 1.23963 1.74543 1.05381C1.96805 0.981012 2.20837 0.982105 2.43032 1.05693L14.264 5.04624C14.8305 5.23722 15.1343 5.84949 14.9426 6.4138C14.8422 6.70924 14.6183 6.94694 14.3288 7.0656L9.3004 9.12601C9.08832 9.21291 8.92123 9.38255 8.83806 9.59543L6.99502 14.3123C6.77809 14.8675 6.15043 15.1423 5.59309 14.9263C5.29135 14.8093 5.058 14.5639 4.95701 14.2575Z" fill="%234262FF"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4.95701 14.2575L1.05431 2.41514C0.867777 1.84912 1.1772 1.23963 1.74543 1.05381C1.96805 0.981012 2.20837 0.982105 2.43032 1.05693L14.264 5.04624C14.8305 5.23722 15.1343 5.84949 14.9426 6.4138C14.8422 6.70924 14.6183 6.94694 14.3288 7.0656L9.3004 9.12601C9.08832 9.21291 8.92123 9.38255 8.83806 9.59543L6.99502 14.3123C6.77809 14.8675 6.15043 15.1423 5.59309 14.9263C5.29135 14.8093 5.058 14.5639 4.95701 14.2575Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_d_71146_163811" x="-2.5" y="-1.5" width="23" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dx="1" dy="2"/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="out"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_71146_163811"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_71146_163811" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0_71146_163811"%3E%3Crect width="18" height="18" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E'),
+    auto;
 }
+
 .fcr-member-board-mask {
   display: none;
   position: absolute;
   inset: 0;
   z-index: 2;
 }
+
 .fcr-member-board-mask-show {
   display: block;
 }
+
 /* .fcr-member-window.fcr-member-window-suspend {
   background-color: var(--fcr_ui_scene_video_s);
   border-radius: 0;
@@ -51,6 +60,7 @@
   pointer-events: none;
   visibility: hidden;
 }
+
 .fcr-member-window-is-broken {
   visibility: visible;
 }
@@ -72,6 +82,7 @@
   inset: 0;
   font-size: 0;
 }
+
 .fcr-member-window-body-render-video-loading {
   border-radius: 10px;
   position: absolute;
@@ -88,6 +99,7 @@
   align-items: center;
   justify-content: center;
 }
+
 .fcr-member-window-body-render-video-loading span {
   color: #fff;
   font-size: 14px;
@@ -96,6 +108,7 @@
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
   white-space: pre-wrap;
 }
+
 .fcr-member-window-body-render-video-loading .render-video-loading-icon {
   animation: loading-rotate 1s linear infinite;
 }
@@ -104,16 +117,20 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
 }
+
 .fcr-member-window-body.fcr-member-window-body-video-remote {
   visibility: hidden;
 }
+
 .fcr-member-window-body.fcr-member-window-body-video-remote-render {
   visibility: visible;
 }
+
 .fcr-member-window-excitation {
   position: absolute;
   inset: 0;
@@ -121,9 +138,11 @@
   border: 3px solid var(--fcr_ui_scene_ramp_green6);
   opacity: 0;
 }
+
 .fcr-member-window-excitation-show {
   opacity: 1;
 }
+
 .fcr-member-window-pin {
   display: none;
   justify-content: center;
@@ -139,14 +158,17 @@
   /* transition: opacity 0.2s; */
   z-index: 11;
 }
+
 .fcr-member-window-pin-show {
   /* opacity: 1; */
   display: flex;
 }
+
 .fcr-member-board:hover .fcr-user-window-actions-top,
 .fcr-member-window:hover .fcr-user-window-actions-top {
   opacity: 1;
 }
+
 .fcr-member-window-members-sharebtn {
   display: none;
   align-items: center;
@@ -157,6 +179,7 @@
   height: 18px;
   margin-right: 2px;
 }
+
 .fcr-member-window-members-shareSound {
   display: none;
   align-items: center;
@@ -166,6 +189,7 @@
   height: 18px;
   margin-right: 2px;
 }
+
 .fcr-member-window-members-sharebtn-show {
   margin-left: 0px;
   display: flex;
@@ -175,6 +199,7 @@
   height: 24px;
   margin-right: 6px;
 }
+
 /* fcr-member-window-action start */
 
 .fcr-user-window-actions {
@@ -217,6 +242,7 @@
   bottom: 20px;
   z-index: 1;
 }
+
 .fcr-user-window-actions-bottom-layout {
   color: var(--fcr_ui_scene_icontext1);
   font-weight: var(--fcr_font_weight_m);
@@ -226,6 +252,7 @@
   align-items: center;
   overflow: hidden;
 }
+
 .fcr-user-window-actions-bottom-layout-info {
   border-radius: var(--fcr_cornerradius_xs);
   background-color: var(--fcr_ui_scene_view_toast);
@@ -233,17 +260,21 @@
   align-items: center;
   overflow: hidden;
 }
+
 .fcr-user-window-actions-bottom-interpreter-tag {
   margin-left: 8px;
 }
+
 .fcr-member-board .fcr-user-window-actions-bottom-show,
 .fcr-member-window .fcr-user-window-actions-bottom-show {
   opacity: 1;
 }
+
 .fcr-member-board:hover .fcr-user-window-actions-bottom,
 .fcr-member-window:hover .fcr-user-window-actions-bottom {
   opacity: 1;
 }
+
 .fcr-member-window-gallery .fcr-user-window-actions-bottom {
   height: 24px;
   font-size: 12px;
@@ -320,6 +351,7 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+
 .fcr-user-window-actions-tag:has(~ .fcr-user-window-actions-microphone) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -383,9 +415,11 @@
   transition: opacity 0.2s;
   z-index: 10;
 }
+
 .fcr-member-window .fcr-user-window-actions-top-active {
   opacity: 1;
 }
+
 .fcr-user-window-actions-more {
   padding: 3px;
   border-radius: var(--fcr_cornerradius_xxs);
@@ -435,13 +469,16 @@
 .fcr-user-window-actions-tag_large {
   margin-bottom: 8px;
 }
+
 .fcr-user-window-actions-bottom .fcr-device-settings-video__video-flip-container {
   position: static;
   margin-left: 2px;
 }
+
 .fcr-user-window-actions-bottom .fcr-device-settings-video__video-flip-container:hover {
   background: var(--fcr_ui_scene_white10);
 }
+
 .fcr-user-window-actions-bottom
   .fcr-device-settings-video__video-flip-container
   .fcr-clickable-icon-small {

package/lib/modules/components/member-window/index.d.ts

@@ -8,4 +8,4 @@ export declare const AvatarTextSizeRatio = 0.32;
 export declare const HideControlsTimeout = 3000;
 export declare const meetingConnectorTypes: Set<FcrRoomConnectorType>;
 export declare const clamp: (val: number, min: number, max: number) => number;
-export declare const MemberWindow: ({ showAvatar, windowData, onDoubleClick, slot, width, height, canShowSpeakerSpotlight, onRemovePin, memberWindowPreviewType, videoRenderMode, videoStreamType, isVideoSuspended, }: MemberWindowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MemberWindow: ({ showAvatar, windowData, onDoubleClick, slot, width, height, canShowSpeakerSpotlight, onRemovePin, memberWindowPreviewType, videoRenderMode, videoStreamType, isVideoSuspended, annotation, scalcValue, }: MemberWindowProps) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/member-window/index.js

@@ -66,7 +66,9 @@ var MemberWindow = exports.MemberWindow = (0, _mobxReact.observer)(function (_re
     memberWindowPreviewType = _ref.memberWindowPreviewType,
     videoRenderMode = _ref.videoRenderMode,
     videoStreamType = _ref.videoStreamType,
-    isVideoSuspended = _ref.isVideoSuspended;
+    isVideoSuspended = _ref.isVideoSuspended,
+    annotation = _ref.annotation,
+    scalcValue = _ref.scalcValue;
   var userName = windowData.userName,
     videoStreamId = windowData.videoStreamId,
     userId = windowData.userId,
@@ -78,7 +80,8 @@ var MemberWindow = exports.MemberWindow = (0, _mobxReact.observer)(function (_re
     windowId = windowData.windowId,
     audioStreamConnectorType = windowData.audioStreamConnectorType,
     videoStreamConnectorType = windowData.videoStreamConnectorType,
-    hasScreenSharing = windowData.hasScreenSharing;
+    hasScreenSharing = windowData.hasScreenSharing,
+    videoSourceType = windowData.videoSourceType;
   var t = (0, _i18n.useI18n)();
   var connectorType = audioStreamConnectorType !== _fcrCore.FcrRoomConnectorType.NONE ? audioStreamConnectorType : videoStreamConnectorType;
   var isPhone = audioStreamConnectorType === _fcrCore.FcrRoomConnectorType.PSTN;
@@ -128,7 +131,6 @@ var MemberWindow = exports.MemberWindow = (0, _mobxReact.observer)(function (_re
     "data-user-id": userId,
     "data-stream-id": videoStreamId,
     "data-user-name": userName,
-    onDoubleClick: onDoubleClick,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames["default"])('fcr-member-window-background', {
         // 'fcr-member-window-is-broken': isBroken,
@@ -149,8 +151,9 @@ var MemberWindow = exports.MemberWindow = (0, _mobxReact.observer)(function (_re
       videoStreamType: videoStreamType,
       renderMode: videoRenderMode,
       hasVideoStream: hasVideoStream,
-      hasScreenSharing: hasScreenSharing
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      hasScreenSharing: hasScreenSharing,
+      scalcValue: scalcValue
+    }), hasScreenSharing && videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN ? annotation : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames["default"])("fcr-member-window-excitation", {
         'fcr-member-window-excitation-show': canShowSpeakerSpotlight && isSpeakerSpotlight
       })

package/lib/modules/components/member-window/types.d.ts

@@ -7,6 +7,7 @@ export interface MemberWindowCustomProps {
     onDoubleClick?: () => void;
     onRemovePin: (streamId: string) => void;
     slot?: React.ReactNode;
+    annotation?: React.ReactNode;
     width?: number;
     height?: number;
     canShowSpeakerSpotlight: boolean;
@@ -17,6 +18,7 @@ export interface MemberWindowCustomProps {
 }
 export interface MemberWindowProps extends MemberWindowCustomProps {
     windowData: FcrUIVideoWindowData;
+    scalcValue: number;
 }
 export interface MicVolumeProps {
     id: string | undefined;

package/lib/modules/components/security-menu/index.js

@@ -45,7 +45,8 @@ var SecurityMenu = (0, _mobxReact.observer)(function (props) {
     setCheckedStateMap = props.setCheckedStateMap;
   var transI18n = (0, _i18n.useI18n)();
   var allActions = [];
-  var setLockRoomEnabled = privilege.setLockRoomEnabled,
+  var setAllowAnnotation = privilege.setAllowAnnotation,
+    setLockRoomEnabled = privilege.setLockRoomEnabled,
     setAllowChat = privilege.setAllowChat,
     setAllowUnmuteSelfAudio = privilege.setAllowUnmuteSelfAudio,
     setAllowUnmuteSelfVideo = privilege.setAllowUnmuteSelfVideo,
@@ -281,17 +282,17 @@ var SecurityMenu = (0, _mobxReact.observer)(function (props) {
   if (hasAllowWriteBoardPermission()) {
     allActions.push({
       title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-        checked: checkedStateMap.shareWhiteboard,
-        label: transI18n('fmt_screenshare_options_editable'),
+        checked: checkedStateMap.allowBoardWriteState,
+        label: transI18n('fmt_security_mainwindow_label_interactive_annotations'),
         styleType: "white"
       }),
-      key: 'share_whiteboard',
+      key: 'enable_annotations',
       type: 'primary',
       onButtonClick: function onButtonClick() {
         setCheckedStateMap(_objectSpread(_objectSpread({}, checkedStateMap), {
-          shareWhiteboard: !checkedStateMap.shareWhiteboard
+          enableAnnotation: !checkedStateMap.allowBoardWriteState
         }));
-        setAllowWriteBoard(!checkedStateMap.shareWhiteboard);
+        setAllowWriteBoard(!checkedStateMap.allowBoardWriteState);
       }
     });
   }

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

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

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

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

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

@@ -1,6 +1,5 @@
 import { UIModule } from '../../base';
 import './index.css';
-import { FcrUIAction } from '../../utilities/constant';
 import { FcrUIEventProvider } from '../../providers/event-provider';
 import { FcrUIMainRoomControlProvider, FcrUIRoomProvider } from '../../providers/room-provider';
 import { FcrUIPrivilegeProvider } from '../../providers/privilege-provider';
@@ -11,7 +10,6 @@ import { FcrUIScreenShareProvider } from '../../providers/screen-share-provider'
 import { FcrUISharedChatDataSource } from '../../shared-data-source/chat-data';
 import { FcrUIDevicePrivilegeProvider } from '../../providers/device-privilege-provider';
 import { FcrUISharedDevicePrivilegeDataSource } from '../../shared-data-source/device-privilege-data';
-import { CurrentShareScreenTypes } from '../share-screen/types';
 import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
 import { FcrUILocalStorageProvider } from '../../providers/local-storage-provider';
 import { FcrUIAbilityProviderImpl } from '../../providers/ability-provider';
@@ -19,7 +17,9 @@ import { FcrUIDialogProvider } from '../../providers/dialog-provider';
 import { FcrUIMeetingTimeSharedDataSource } from '../../shared-data-source/meeting-time';
 import { FcrUIMessageProvider } from '../../providers/message-provider';
 import { FcrUISecuritySharedDataSource } from '../../shared-data-source/security-data';
-import { FcrUIScreenShareDataSource } from '../../shared-data-source/screen-share-data-source';
+import { FcrUIAnnotationProvider } from '../../providers/annotation-provider';
+import { FcrUISharingProvider } from '../../providers/sharing-provider';
+import { FcrUIScreenShareSharedDataSource } from '../../shared-data-source/screen-share-data';
 export declare class ControlBarUIModule extends UIModule {
     private _store?;
     private _deviceControlStore?;
@@ -42,13 +42,13 @@ export declare class ControlBarUIModule extends UIModule {
     sharedMeetingTimeDataSource?: FcrUIMeetingTimeSharedDataSource;
     messageProvider?: FcrUIMessageProvider;
     sharedSecuritySharedDataSource?: FcrUISecuritySharedDataSource;
-    screenShareDataSource?: FcrUIScreenShareDataSource;
+    annotationProvider?: FcrUIAnnotationProvider;
+    sharingProvider?: FcrUISharingProvider;
+    sharedScreenShareSharedDataSource?: FcrUIScreenShareSharedDataSource;
     onNodeWillActive(): void;
     onNodeWillInactive(): void;
     getComponent(props: {
-        params: any;
         browserWindow: Electron.BrowserWindow;
     }): import("react/jsx-runtime").JSX.Element;
-    onUiEvent(event: FcrUIAction, payload: CurrentShareScreenTypes): void;
     onProcessEvent(event: RendererCustomEvent): void;
 }

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

@@ -1,27 +1,14 @@
 "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.iterator.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/es.reflect.construct.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.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/esnext.weak-map.delete-all.js");
 require("core-js/modules/esnext.weak-map.emplace.js");
-require("core-js/modules/web.dom-collections.for-each.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -29,8 +16,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ControlBarUIModule = void 0;
-require("core-js/modules/es.function.bind.js");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -46,8 +31,6 @@ var _store3 = require("../components/leave-meeting/store");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var ControlBarUIModule = exports.ControlBarUIModule = /*#__PURE__*/function (_UIModule) {
@@ -74,16 +57,16 @@ var ControlBarUIModule = exports.ControlBarUIModule = /*#__PURE__*/function (_UI
         sharedMeetingTimeDataSource: this.sharedMeetingTimeDataSource,
         messageProvider: this.messageProvider,
         sharedSecuritySharedDataSource: this.sharedSecuritySharedDataSource,
-        dialogProvider: this.dialogProvider,
-        screenShareDataSource: this.screenShareDataSource
+        annotationProvider: this.annotationProvider,
+        sharingProvider: this.sharingProvider,
+        screenShareProvider: this.screenShareProvider,
+        sharedScreenShareSharedDataSource: this.sharedScreenShareSharedDataSource,
+        dialogProvider: this.dialogProvider
       });
       this.privilegeProvider = this.privilegeProvider;
       this.screenShareProvider = this.screenShareProvider;
       this._deviceControlStore = new _store2.DeviceControlStore((_this$mainRoomControl2 = this.mainRoomControlProvider) === null || _this$mainRoomControl2 === void 0 ? void 0 : _this$mainRoomControl2.mainRoomControl, this.deviceProvider, this.dialogProvider, this.deviceStreamProvider, this.sharedDevicePrivilegeDataSource);
       this._leaveMeetingStore = new _store3.LeaveMeetingStore(this.privilegeProvider, this.roomProvider, this.mainRoomControlProvider.mainRoomControl, this.sharedMemberDataSource, this.abilityProvider, this.dialogProvider);
-      this.eventProvider.addObserver({
-        onEvent: this.onUiEvent.bind(this)
-      });
     }
   }, {
     key: "onNodeWillInactive",
@@ -96,9 +79,6 @@ var ControlBarUIModule = exports.ControlBarUIModule = /*#__PURE__*/function (_UI
   }, {
     key: "getComponent",
     value: function getComponent(props) {
-      var params = props.params,
-        browserWindow = props.browserWindow;
-      this._store.initControlBar(params, browserWindow);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreContext.Provider, {
         value: this._store,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_store2.DeviceControlStoreContext.Provider, {
@@ -107,15 +87,6 @@ var ControlBarUIModule = exports.ControlBarUIModule = /*#__PURE__*/function (_UI
         })
       });
     }
-  }, {
-    key: "onUiEvent",
-    value: function onUiEvent(event, payload) {
-      switch (event) {
-        case _constant.FcrUIAction.SET_CURRENT_SHARE_SCREEN:
-          this._store.updateCurrentShareContent(_objectSpread({}, payload));
-          break;
-      }
-    }
   }, {
     key: "onProcessEvent",
     value: function onProcessEvent(event) {

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

@@ -10,7 +10,6 @@ import { FcrUIRoomProvider } from '../../providers/room-provider';
 import { MoreAction } from './enums';
 import { FcrUISharedChatDataSource } from '../../shared-data-source/chat-data';
 import { CurrentShareBounds } from './types';
-import { CurrentShareScreenTypes } from '../share-screen/types';
 import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
 import { FcrUILocalStorageProvider } from '../../providers/local-storage-provider';
 import { FcrUIAbilityProviderImpl } from '../../providers/ability-provider';
@@ -18,8 +17,11 @@ import { FcrUIMeetingTimeSharedDataSource } from '../../shared-data-source/meeti
 import { CurrentShareScreenWorkArea } from '../../utilities/tools';
 import { FcrUIMessageProvider } from '../../providers/message-provider';
 import { FcrSecurityCheckedStateType, FcrUISecuritySharedDataSource } from '../../shared-data-source/security-data';
+import { FcrUIAnnotationProvider } from '../../providers/annotation-provider';
+import { FcrUISharingProvider } from '../../providers/sharing-provider';
+import { FcrUIScreenShareProvider } from '../../providers/screen-share-provider';
+import { FcrUIScreenShareSharedDataSource } from '../../shared-data-source/screen-share-data';
 import { FcrUIDialogProvider } from '../../providers/dialog-provider';
-import { FcrUIScreenShareDataSource } from '../../shared-data-source/screen-share-data-source';
 export default class ControlBarStore {
     protected logger: import("agora-foundation/lib/logger").Logger;
     private _screenBounds;
@@ -39,16 +41,15 @@ export default class ControlBarStore {
     private _abilityProvider;
     private _sharedMeetingTimeDataSource;
     private _sharedSecuritySharedDataSource;
+    private _sharedScreenShareSharedDataSource;
     private _messageProvider;
+    private _annotationProvider;
+    private _sharingProvider;
+    private _screenShareProvider;
     private _dialogProvider;
-    private _screenShareDataSource;
     private _dialogObsever;
     private _participantDialogId;
     accessor leaveConfirmRef: React.ReactNode;
-    accessor shareWithAudio: boolean;
-    accessor currentShareId: string;
-    accessor currentShareType: AgoraRtcScreenCaptureType;
-    accessor currentShareBounds: CurrentShareBounds;
     accessor recordShareBounds: Map<CurrentShareBounds, CurrentShareScreenWorkArea>;
     accessor cloudRecordingState: FcrRecordingState;
     accessor isHost: boolean;
@@ -62,7 +63,10 @@ export default class ControlBarStore {
     accessor hiddenShareActionNav: boolean;
     accessor boardOwnerUser: string;
     accessor currentShareDisplayId: number;
-    get shareAudioProcessingChannel(): AudioProcessingChannel;
+    get shareWithAudio(): boolean;
+    get currentShareId(): string;
+    get currentShareType(): AgoraRtcScreenCaptureType;
+    get currentShareBounds(): CurrentShareBounds;
     get privilegeProvider(): FcrUIPrivilegeProvider;
     get localUser(): import("fcr-core/lib/type").FcrUserInfo;
     get remoteUsers(): import("fcr-core/lib/type").FcrUserInfo[];
@@ -80,6 +84,9 @@ export default class ControlBarStore {
     get hasStartLiveStreamingPermission(): boolean;
     get hasAssignHostBeforeLeavingPermission(): boolean;
     get hasEndRoomPermission(): boolean;
+    get hasAnnotationAllowWritePermission(): boolean;
+    get hasAnnotationStartPermission(): boolean;
+    get allowAnnotationWriteState(): boolean;
     get totalHourText(): string;
     get totalMinuteText(): string;
     get meetingTimeStatus(): import("../../shared-data-source/meeting-time").MeetingStatus;
@@ -95,7 +102,11 @@ export default class ControlBarStore {
     get isPstnUser(): boolean;
     get localUserRole(): import("fcr-core").FcrUserRole;
     get users(): import("fcr-core/lib/type").FcrUserInfo[];
-    constructor({ uiEventStore, securityStore, roomControl, deviceProvider, sharedLayoutDataSource, roomProvider, sharedChatDataSource, sharedMemberDataSource, localStorageProvider, abilityProvider, sharedMeetingTimeDataSource, messageProvider, sharedSecuritySharedDataSource, dialogProvider, screenShareDataSource, }: {
+    get shareAudioProcessingChannel(): AudioProcessingChannel;
+    get checkedStateMap(): FcrSecurityCheckedStateType;
+    get isSharingScreen(): boolean;
+    get isReplaceScreen(): boolean;
+    constructor({ uiEventStore, securityStore, roomControl, deviceProvider, sharedLayoutDataSource, roomProvider, sharedChatDataSource, sharedMemberDataSource, localStorageProvider, abilityProvider, sharedMeetingTimeDataSource, messageProvider, sharedSecuritySharedDataSource, annotationProvider, sharingProvider, screenShareProvider, sharedScreenShareSharedDataSource, dialogProvider, }: {
         uiEventStore: FcrUIEventProvider;
         securityStore: FcrUIPrivilegeProvider;
         roomControl: FcrMainRoomControl;
@@ -109,13 +120,13 @@ export default class ControlBarStore {
         sharedMeetingTimeDataSource: FcrUIMeetingTimeSharedDataSource;
         messageProvider: FcrUIMessageProvider;
         sharedSecuritySharedDataSource: FcrUISecuritySharedDataSource;
+        annotationProvider: FcrUIAnnotationProvider;
+        sharingProvider: FcrUISharingProvider;
+        screenShareProvider: FcrUIScreenShareProvider;
+        sharedScreenShareSharedDataSource: FcrUIScreenShareSharedDataSource;
         dialogProvider: FcrUIDialogProvider;
-        screenShareDataSource: FcrUIScreenShareDataSource;
     });
-    get checkedStateMap(): FcrSecurityCheckedStateType;
     setCheckedStateMap(val: FcrSecurityCheckedStateType): void;
-    initControlBar(payload: any, _browserWindow: Electron.BrowserWindow): void;
-    updateCurrentShareContent(payload: CurrentShareScreenTypes): void;
     setShareWithAudioState(withAudio: boolean): void;
     showLockedRoomToast(enable: boolean): void;
     createNewShare(): void;
@@ -133,7 +144,10 @@ export default class ControlBarStore {
     setEnableWaitingRoom(enable: boolean): void;
     handleLeaveRoom(): void;
     getLocalMeetingTime(): string | null;
+    toggleAnnotation(): void;
+    setAllAnnotationWrite(allow: boolean): void;
     release(): void;
+    log(info: string): void;
     private _resetMessageCount;
 }
 export declare const StoreContext: import("react").Context<ControlBarStore>;