fcr-ui-scene 3.6.1 → 3.6.3

package/lib/modules/share-screen/view.js

@@ -17,13 +17,13 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.StoreContext),
     screenSharingState = _useContext.screenSharingState,
     handleStopShare = _useContext.handleStopShare,
-    startPreview = _useContext.startPreview;
+    startRenderSharePreview = _useContext.startRenderSharePreview;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "share-screen",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       children: screenSharingState === _fcrCore.FcrMediaSourceState.OPEN && !(0, _env.isElectron)() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_shareStateBar.ShareStateBar, {
         ref: function ref(dom) {
-          return startPreview(dom);
+          return startRenderSharePreview(dom);
         },
         onStopShare: handleStopShare
       })

package/lib/modules/state-bar/assets/fcr_grid_big.svg

@@ -1,3 +1,3 @@
 <svg width="68" height="38" viewBox="0 0 68 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="fcr_grid_big" fill-rule="evenodd" clipRule="evenodd" d="M2.72 0C1.21779 0 0 1.21523 0 2.71429V9.21213C0 9.84809 0.516635 10.3636 1.15394 10.3636H14.2797C14.917 10.3636 15.4336 9.84809 15.4336 9.21213V1.15152C15.4336 0.515551 14.917 0 14.2797 0H2.72ZM18.7373 0C18.1 0 17.5833 0.51555 17.5833 1.15152V9.21213C17.5833 9.84809 18.1 10.3636 18.7373 10.3636H31.863C32.5003 10.3636 33.0169 9.84809 33.0169 9.21213V1.15152C33.0169 0.515551 32.5003 0 31.863 0H18.7373ZM52.5664 1.15152C52.5664 0.51555 53.083 0 53.7203 0H65.28C66.7822 0 68 1.21523 68 2.71429V9.21213C68 9.84809 67.4834 10.3636 66.8461 10.3636H53.7203C53.083 10.3636 52.5664 9.84809 52.5664 9.21213V1.15152ZM36.2291 0C35.5918 0 35.0752 0.51555 35.0752 1.15152V9.21213C35.0752 9.84809 35.5918 10.3636 36.2291 10.3636H49.3549C49.9922 10.3636 50.5088 9.84809 50.5088 9.21213V1.15152C50.5088 0.515551 49.9922 0 49.3549 0H36.2291ZM17.5833 27.6364C17.5833 27.0004 18.1 26.4848 18.7373 26.4848H31.863C32.5003 26.4848 33.0169 27.0004 33.0169 27.6364V36.8485C33.0169 37.4845 32.5003 38 31.863 38H18.7373C18.1 38 17.5833 37.4845 17.5833 36.8485V27.6364ZM1.15394 26.4848C0.516636 26.4848 0 27.0004 0 27.6364V35.2857C0 36.7848 1.21778 38 2.72 38H14.2797C14.917 38 15.4336 37.4845 15.4336 36.8485V27.6364C15.4336 27.0004 14.917 26.4848 14.2797 26.4848H1.15394ZM52.5664 27.6364C52.5664 27.0004 53.083 26.4848 53.7203 26.4848H66.8461C67.4834 26.4848 68 27.0004 68 27.6364V35.2857C68 36.7848 66.7822 38 65.28 38H53.7203C53.083 38 52.5664 37.4845 52.5664 36.8485V27.6364ZM36.2291 26.4848C35.5918 26.4848 35.0752 27.0004 35.0752 27.6364V36.8485C35.0752 37.4845 35.5918 38 36.2291 38H49.3549C49.9922 38 50.5088 37.4845 50.5088 36.8485V27.6364C50.5088 27.0004 49.9922 26.4848 49.3549 26.4848H36.2291ZM17.5833 13.8184C17.5833 13.1824 18.1 12.6669 18.7373 12.6669H31.863C32.5003 12.6669 33.0169 13.1824 33.0169 13.8184V23.0305C33.0169 23.6665 32.5003 24.1821 31.863 24.1821H18.7373C18.1 24.1821 17.5833 23.6665 17.5833 23.0305V13.8184ZM1.15394 12.6669C0.516636 12.6669 0 13.1824 0 13.8184V23.0305C0 23.6665 0.516635 24.1821 1.15394 24.1821H14.2797C14.917 24.1821 15.4336 23.6665 15.4336 23.0305V13.8184C15.4336 13.1824 14.917 12.6669 14.2797 12.6669H1.15394ZM52.5664 13.8184C52.5664 13.1824 53.083 12.6669 53.7203 12.6669H66.8461C67.4834 12.6669 68 13.1824 68 13.8184V23.0305C68 23.6665 67.4834 24.1821 66.8461 24.1821H53.7203C53.083 24.1821 52.5664 23.6665 52.5664 23.0305V13.8184ZM36.2291 12.6669C35.5918 12.6669 35.0752 13.1824 35.0752 13.8184V23.0305C35.0752 23.6665 35.5918 24.1821 36.2291 24.1821H49.3549C49.9922 24.1821 50.5088 23.6665 50.5088 23.0305V13.8184C50.5088 13.1824 49.9922 12.6669 49.3549 12.6669H36.2291Z" fill="#E5EAF3" fillOpacity="0.9"/>
+<path id="fcr_grid_big" fillRule="evenodd" clipRule="evenodd" d="M2.72 0C1.21779 0 0 1.21523 0 2.71429V9.21213C0 9.84809 0.516635 10.3636 1.15394 10.3636H14.2797C14.917 10.3636 15.4336 9.84809 15.4336 9.21213V1.15152C15.4336 0.515551 14.917 0 14.2797 0H2.72ZM18.7373 0C18.1 0 17.5833 0.51555 17.5833 1.15152V9.21213C17.5833 9.84809 18.1 10.3636 18.7373 10.3636H31.863C32.5003 10.3636 33.0169 9.84809 33.0169 9.21213V1.15152C33.0169 0.515551 32.5003 0 31.863 0H18.7373ZM52.5664 1.15152C52.5664 0.51555 53.083 0 53.7203 0H65.28C66.7822 0 68 1.21523 68 2.71429V9.21213C68 9.84809 67.4834 10.3636 66.8461 10.3636H53.7203C53.083 10.3636 52.5664 9.84809 52.5664 9.21213V1.15152ZM36.2291 0C35.5918 0 35.0752 0.51555 35.0752 1.15152V9.21213C35.0752 9.84809 35.5918 10.3636 36.2291 10.3636H49.3549C49.9922 10.3636 50.5088 9.84809 50.5088 9.21213V1.15152C50.5088 0.515551 49.9922 0 49.3549 0H36.2291ZM17.5833 27.6364C17.5833 27.0004 18.1 26.4848 18.7373 26.4848H31.863C32.5003 26.4848 33.0169 27.0004 33.0169 27.6364V36.8485C33.0169 37.4845 32.5003 38 31.863 38H18.7373C18.1 38 17.5833 37.4845 17.5833 36.8485V27.6364ZM1.15394 26.4848C0.516636 26.4848 0 27.0004 0 27.6364V35.2857C0 36.7848 1.21778 38 2.72 38H14.2797C14.917 38 15.4336 37.4845 15.4336 36.8485V27.6364C15.4336 27.0004 14.917 26.4848 14.2797 26.4848H1.15394ZM52.5664 27.6364C52.5664 27.0004 53.083 26.4848 53.7203 26.4848H66.8461C67.4834 26.4848 68 27.0004 68 27.6364V35.2857C68 36.7848 66.7822 38 65.28 38H53.7203C53.083 38 52.5664 37.4845 52.5664 36.8485V27.6364ZM36.2291 26.4848C35.5918 26.4848 35.0752 27.0004 35.0752 27.6364V36.8485C35.0752 37.4845 35.5918 38 36.2291 38H49.3549C49.9922 38 50.5088 37.4845 50.5088 36.8485V27.6364C50.5088 27.0004 49.9922 26.4848 49.3549 26.4848H36.2291ZM17.5833 13.8184C17.5833 13.1824 18.1 12.6669 18.7373 12.6669H31.863C32.5003 12.6669 33.0169 13.1824 33.0169 13.8184V23.0305C33.0169 23.6665 32.5003 24.1821 31.863 24.1821H18.7373C18.1 24.1821 17.5833 23.6665 17.5833 23.0305V13.8184ZM1.15394 12.6669C0.516636 12.6669 0 13.1824 0 13.8184V23.0305C0 23.6665 0.516635 24.1821 1.15394 24.1821H14.2797C14.917 24.1821 15.4336 23.6665 15.4336 23.0305V13.8184C15.4336 13.1824 14.917 12.6669 14.2797 12.6669H1.15394ZM52.5664 13.8184C52.5664 13.1824 53.083 12.6669 53.7203 12.6669H66.8461C67.4834 12.6669 68 13.1824 68 13.8184V23.0305C68 23.6665 67.4834 24.1821 66.8461 24.1821H53.7203C53.083 24.1821 52.5664 23.6665 52.5664 23.0305V13.8184ZM36.2291 12.6669C35.5918 12.6669 35.0752 13.1824 35.0752 13.8184V23.0305C35.0752 23.6665 35.5918 24.1821 36.2291 24.1821H49.3549C49.9922 24.1821 50.5088 23.6665 50.5088 23.0305V13.8184C50.5088 13.1824 49.9922 12.6669 49.3549 12.6669H36.2291Z" fill="#E5EAF3" fillOpacity="0.9"/>
 </svg>

package/lib/modules/state-bar/assets/fcr_listontop_big.svg

@@ -1,3 +1,3 @@
 <svg width="68" height="38" viewBox="0 0 68 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="fcr_listontop_big" fill-rule="evenodd" clipRule="evenodd" d="M4.08 0C1.82668 0 0 1.82284 0 4.07143V6.84848C0 7.48445 0.516634 8 1.15394 8H11.3724C12.0097 8 12.5263 7.48445 12.5263 6.84848V1.15152C12.5263 0.515551 12.0097 0 11.3724 0H4.08ZM2.72 10C1.21779 10 0 11.2152 0 12.7143V33.9286C0 36.1772 1.82668 38 4.08 38H63.92C66.1733 38 68 36.1772 68 33.9286V12.7143C68 11.2152 66.7822 10 65.28 10H2.72ZM28.0352 1.15152C28.0352 0.515553 28.5518 0 29.1891 0H39.4076C40.0449 0 40.5615 0.515551 40.5615 1.15152V6.84848C40.5615 7.48445 40.0449 8 39.4076 8H29.1891C28.5518 8 28.0352 7.48445 28.0352 6.84848V1.15152ZM57.224 0C56.5867 0 56.07 0.515553 56.07 1.15152V6.84848C56.07 7.48445 56.5867 8 57.224 8H66.8459C67.4832 8 67.9998 7.48445 67.9998 6.84848V4.07143C67.9998 1.82284 66.1732 0 63.9198 0H57.224ZM14.3159 1.15152C14.3159 0.515553 14.8325 0 15.4699 0H25.0918C25.7291 0 26.2457 0.515551 26.2457 1.15152V6.84848C26.2457 7.48445 25.7291 8 25.0918 8H15.4699C14.8325 8 14.3159 7.48445 14.3159 6.84848V1.15152ZM43.5047 0C42.8674 0 42.3508 0.515553 42.3508 1.15152V6.84848C42.3508 7.48445 42.8674 8 43.5047 8H53.1266C53.7639 8 54.2806 7.48445 54.2806 6.84848V1.15152C54.2806 0.515551 53.7639 0 53.1266 0H43.5047Z" fill="#E5EAF3" fillOpacity="0.9"/>
+<path id="fcr_listontop_big" fillRule="evenodd" clipRule="evenodd" d="M4.08 0C1.82668 0 0 1.82284 0 4.07143V6.84848C0 7.48445 0.516634 8 1.15394 8H11.3724C12.0097 8 12.5263 7.48445 12.5263 6.84848V1.15152C12.5263 0.515551 12.0097 0 11.3724 0H4.08ZM2.72 10C1.21779 10 0 11.2152 0 12.7143V33.9286C0 36.1772 1.82668 38 4.08 38H63.92C66.1733 38 68 36.1772 68 33.9286V12.7143C68 11.2152 66.7822 10 65.28 10H2.72ZM28.0352 1.15152C28.0352 0.515553 28.5518 0 29.1891 0H39.4076C40.0449 0 40.5615 0.515551 40.5615 1.15152V6.84848C40.5615 7.48445 40.0449 8 39.4076 8H29.1891C28.5518 8 28.0352 7.48445 28.0352 6.84848V1.15152ZM57.224 0C56.5867 0 56.07 0.515553 56.07 1.15152V6.84848C56.07 7.48445 56.5867 8 57.224 8H66.8459C67.4832 8 67.9998 7.48445 67.9998 6.84848V4.07143C67.9998 1.82284 66.1732 0 63.9198 0H57.224ZM14.3159 1.15152C14.3159 0.515553 14.8325 0 15.4699 0H25.0918C25.7291 0 26.2457 0.515551 26.2457 1.15152V6.84848C26.2457 7.48445 25.7291 8 25.0918 8H15.4699C14.8325 8 14.3159 7.48445 14.3159 6.84848V1.15152ZM43.5047 0C42.8674 0 42.3508 0.515553 42.3508 1.15152V6.84848C42.3508 7.48445 42.8674 8 43.5047 8H53.1266C53.7639 8 54.2806 7.48445 54.2806 6.84848V1.15152C54.2806 0.515551 53.7639 0 53.1266 0H43.5047Z" fill="#E5EAF3" fillOpacity="0.9"/>
 </svg>

package/lib/modules/state-bar/index.css

@@ -255,12 +255,6 @@
   }
 }
 
-.fcr-state-bar__time {
-}
-
-.fcr-state-bar__layout {
-}
-
 .fcr-state-bar__full-screen {
   border-radius: var(--fcr_cornerradius_xxs);
   border: 1px solid var(--fcr_ui_scene_line1);
@@ -631,3 +625,11 @@
     display: none;
   }
 }
+
+.layout-set-options-item-disable .fcr-layout-config-panel__option-text {
+  color: var(--fcr_ui_scene_icontext3);
+}
+
+.layout-set-options-item-disable .fcr-layout-config-panel__option-layout-img-wrapper {
+  opacity: 0.5;
+}

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

@@ -10,7 +10,9 @@ import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-dat
 import { FcrUILocalStorageProvider } from '../../providers/local-storage-provider';
 import { FcrUIAbilityProviderImpl } from 'fcr-ui-scene/src/providers/ability-provider';
 import { FcrUIMeetingTimeSharedDataSource } from '../../shared-data-source/meeting-time';
+import { FcrUIAnnotationProvider } from '../../providers/annotation-provider';
 import { FcrUIDialogProvider } from '../../providers/dialog-provider';
+import { FcrUIScreenShareSharedDataSource } from '../../shared-data-source/screen-share-data';
 export declare class StateBarUIModule extends UIModule {
     private _store?;
     currentRoomControlProvider?: FcrUICurrentRoomControlProvider;
@@ -26,7 +28,9 @@ export declare class StateBarUIModule extends UIModule {
     messageProvider?: FcrUIMessageProvider;
     localStorageProvider?: FcrUILocalStorageProvider;
     abilityProvider?: FcrUIAbilityProviderImpl;
+    annotationProvider: FcrUIAnnotationProvider;
     dialogProvider?: FcrUIDialogProvider;
+    sharedScreenShareSharedDataSource?: FcrUIScreenShareSharedDataSource;
     onNodeWillActive(): void;
     getComponent(): import("react/jsx-runtime").JSX.Element;
     onNodeWillInactive(): void;

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

@@ -58,7 +58,9 @@ var StateBarUIModule = exports.StateBarUIModule = /*#__PURE__*/function (_UIModu
         localStorageProvider: this.localStorageProvider,
         abilityProvider: this.abilityProvider,
         sharedMeetingTimeDataSource: this.sharedMeetingTimeDataSource,
-        dialogProvider: this.dialogProvider
+        annotationProvider: this.annotationProvider,
+        dialogProvider: this.dialogProvider,
+        sharedScreenShareSharedDataSource: this.sharedScreenShareSharedDataSource
       });
     }
   }, {

package/lib/modules/state-bar/layout-config.d.ts

@@ -1,5 +1,6 @@
 import './index.css';
 interface LayoutConfigProps {
+    disable: boolean;
 }
 export declare const LayoutConfig: (props: LayoutConfigProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/modules/state-bar/layout-config.js

@@ -14,7 +14,6 @@ var _i18n = require("agora-ui-foundation/lib/i18n");
 var _mobxReact = require("mobx-react");
 var _useNamespace = require("../../utilities/useNamespace");
 require("./index.css");
-var _view = require("./view");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _react = require("react");
@@ -24,6 +23,7 @@ var _fcr_listontop_big = _interopRequireDefault(require("../../../public/assets/
 var _fcr_grid_big = _interopRequireDefault(require("../../../public/assets/fcr_grid_big.svg"));
 var _store = require("./store");
 var _store2 = require("../setting/store");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
 var LayoutPanel = (0, _mobxReact.observer)(function (props) {
   var ns = (0, _useNamespace.useNamespace)('layout-config-panel');
@@ -53,9 +53,13 @@ var LayoutPanel = (0, _mobxReact.observer)(function (props) {
     className: ns.b(),
     children: [options.map(function (item) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames["default"])(ns.e('option'), ns.is('active', props.layoutView === item.type)),
+        className: (0, _classnames["default"])(ns.e('option'), ns.is('active', !props.disable && props.layoutView === item.type), {
+          'layout-set-options-item-disable': props.disable
+        }),
         onClick: function onClick() {
-          return props.setLayoutView(item.type);
+          if (!props.disable) {
+            props.setLayoutView(item.type);
+          }
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: ns.e('option-layout'),
@@ -93,6 +97,7 @@ var LayoutConfig = exports.LayoutConfig = (0, _mobxReact.observer)(function (pro
     layoutView = _useContext2.layoutView,
     toggleLayoutBarLock = _useContext2.toggleLayoutBarLock,
     galleryWidth = _useContext2.galleryWidth;
+  var disable = props.disable;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isOpen = _useState2[0],
@@ -111,7 +116,11 @@ var LayoutConfig = exports.LayoutConfig = (0, _mobxReact.observer)(function (pro
     _setIsOpen(false);
     toggleLayout(view);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.MyFcrToolTip, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    disable: disable,
+    trigger: "hover",
+    placement: 'bottom',
+    mouseEnterDelay: 0,
     content: t('fmt_uimanager_labels_Switchview'),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
       showArrow: false,
@@ -123,7 +132,8 @@ var LayoutConfig = exports.LayoutConfig = (0, _mobxReact.observer)(function (pro
         setIsOpen: function setIsOpen(visible) {
           _setIsOpen(visible);
           toggleLayoutBarLock(visible);
-        }
+        },
+        disable: disable
       }),
       visible: isOpen,
       onVisibleChange: function onVisibleChange(visible) {

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

@@ -13,7 +13,9 @@ import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-dat
 import { FcrUILocalStorageProvider } from '../../providers/local-storage-provider';
 import { FcrUIAbilityProviderImpl } from 'fcr-ui-scene/src/providers/ability-provider';
 import { FcrUIMeetingTimeSharedDataSource } from '../../shared-data-source/meeting-time';
+import { FcrUIAnnotationProvider } from '../../providers/annotation-provider';
 import { FcrUIDialogProvider } from '../../providers/dialog-provider';
+import { FcrUIScreenShareSharedDataSource } from '../../shared-data-source/screen-share-data';
 export type NetworkStatus = 'excellent' | 'average' | 'poor' | 'unknown';
 export declare const GALLERY_MIN_SIZE = 825;
 export default class StateBarStore {
@@ -27,11 +29,13 @@ export default class StateBarStore {
     private _sharedLayoutDataSource;
     private _sharedVideoWindowDataSource;
     private _sharedMeetingTimeDataSource;
+    private _sharedScreenShareSharedDataSource;
     private _messageProvider;
     private _sharedMemberDataSource;
     private _localStorageProvider;
     private _roomObserver;
     private _abilityProvider;
+    private _annotationProvider;
     private _dialogProvider;
     accessor networkStatus: NetworkStatus;
     accessor roomInfo: FcrRoomInfo | undefined;
@@ -47,6 +51,7 @@ export default class StateBarStore {
     accessor attendeeCount: number;
     accessor asideOpenedItem: Set<string>;
     accessor cloudRecordingState: FcrRecordingState;
+    get annotationHasStart(): boolean;
     get localUser(): FcrUserInfo;
     get isUserHost(): boolean;
     get shouldShowMeetingTime(): boolean;
@@ -59,12 +64,13 @@ export default class StateBarStore {
     get meetingTimeStatus(): import("../../shared-data-source/meeting-time").MeetingStatus;
     get meetingTime(): string;
     get password(): string | undefined;
+    get isSharingScreen(): boolean;
     get layoutSize(): number;
     get layoutView(): import("../../type").FcrUIVideoWindowLayoutType;
     get asideLayout(): import("../../type").FcrUIUpdateAsideParams;
     get isRoomDetailSupported(): boolean;
     get roomDetailCopyText(): string;
-    constructor({ roomControl, uiEventStore, securityStore, config, parameters, sharedLayoutDataSource, roomProvider, sharedVideoWindowDataSource, messageProvider, sharedMemberDataSource, localStorageProvider, abilityProvider, sharedMeetingTimeDataSource, dialogProvider, }: {
+    constructor({ roomControl, uiEventStore, securityStore, config, parameters, sharedLayoutDataSource, roomProvider, sharedVideoWindowDataSource, messageProvider, sharedMemberDataSource, localStorageProvider, abilityProvider, sharedMeetingTimeDataSource, annotationProvider, dialogProvider, sharedScreenShareSharedDataSource, }: {
         roomControl: FcrMainRoomControl | FcrWaitingRoomControl;
         uiEventStore: FcrUIEventProvider;
         securityStore: FcrUIPrivilegeProvider;
@@ -78,7 +84,9 @@ export default class StateBarStore {
         localStorageProvider: FcrUILocalStorageProvider;
         abilityProvider: FcrUIAbilityProviderImpl;
         sharedMeetingTimeDataSource: FcrUIMeetingTimeSharedDataSource;
+        annotationProvider: FcrUIAnnotationProvider;
         dialogProvider: FcrUIDialogProvider;
+        sharedScreenShareSharedDataSource: FcrUIScreenShareSharedDataSource;
     });
     get roomId(): string | undefined;
     get meetingId(): string | undefined;

package/lib/modules/state-bar/store.js

@@ -130,7 +130,9 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       localStorageProvider = _ref2.localStorageProvider,
       abilityProvider = _ref2.abilityProvider,
       sharedMeetingTimeDataSource = _ref2.sharedMeetingTimeDataSource,
-      dialogProvider = _ref2.dialogProvider;
+      annotationProvider = _ref2.annotationProvider,
+      dialogProvider = _ref2.dialogProvider,
+      sharedScreenShareSharedDataSource = _ref2.sharedScreenShareSharedDataSource;
     (0, _classCallCheck2["default"])(this, StateBarStore);
     (0, _defineProperty2["default"])(this, _ref, (_initProto(this), (0, _logger.createLogger)({
       prefix: 'StateBarStore'
@@ -174,9 +176,11 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
     this._sharedMeetingTimeDataSource = sharedMeetingTimeDataSource;
     this._messageProvider = messageProvider;
     this._sharedMemberDataSource = sharedMemberDataSource;
+    this._sharedScreenShareSharedDataSource = sharedScreenShareSharedDataSource;
     this._localStorageProvider = localStorageProvider;
     this._roomControl.addObserver(this._roomObserver);
     this._abilityProvider = abilityProvider;
+    this._annotationProvider = annotationProvider;
     this._uiEventStore.addObserver({
       onEvent: this._uiEvents.bind(this)
     });
@@ -293,6 +297,12 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
     set: function set(v) {
       _classPrivateFieldSet(_J, this, v);
     }
+  }, {
+    key: "annotationHasStart",
+    get: function get() {
+      //return !!this._annotationProvider?.annotationHasStart;
+      return false;
+    }
   }, {
     key: "localUser",
     get: function get() {
@@ -355,6 +365,11 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
       var _this$_roomControl$ge2;
       return (_this$_roomControl$ge2 = this._roomControl.getRoomInfo()) === null || _this$_roomControl$ge2 === void 0 ? void 0 : _this$_roomControl$ge2.password;
     }
+  }, {
+    key: "isSharingScreen",
+    get: function get() {
+      return this._sharedScreenShareSharedDataSource.isSharingScreen;
+    }
   }, {
     key: "layoutSize",
     get: function get() {
@@ -626,7 +641,7 @@ var StateBarStore = exports["default"] = /*#__PURE__*/function () {
   }]);
 }();
 _StateBarStore = StateBarStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_StateBarStore, [[_mobx.observable, 1, "networkStatus"], [_mobx.observable, 1, "roomInfo"], [_mobx.observable, 1, "isLiveStreaming"], [_mobx.observable, 1, "liveStreamingPlayUrl"], [_mobx.observable, 1, "galleryWidth"], [_mobx.observable, 1, "browserWidth"], [_mobx.observable, 1, "networkStats"], [_mobx.observable, 1, "attendeeCount"], [_mobx.observable, 1, "asideOpenedItem"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.computed, 3, "shouldShowMeetingTime"], [_mobx.computed, 3, "isMainRoom"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStopLiveStreamingPermission"], [_mobx.computed, 3, "hasGetLiveStreamingLinkPermission"], [_mobx.computed, 3, "totalHourText"], [_mobx.computed, 3, "totalMinuteText"], [_mobx.computed, 3, "meetingTimeStatus"], [_mobx.computed, 3, "meetingTime"], [_mobx.computed, 3, "password"], [_mobx.computed, 3, "roomId"], [_mobx.computed, 3, "meetingId"], [_mobx.computed, 3, "scheduleInfo"], [_decorator.bound, 2, "isLockRoomEnabled"], [_setNetworkStatusDecs, 18, "setNetworkStatus"], [_setRoomInfoDecs, 18, "setRoomInfo"], [_decorator.bound, 2, "openDeviceSettingDialog"], [_stopLiveStreamingDialogDecs, 18, "stopLiveStreamingDialog"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "pauseCloudRecording"], [_decorator.bound, 2, "resumeCloudRecording"], [_decorator.bound, 2, "stopCloudRecording"], [_decorator.bound, 2, "getShareLink"], [_decorator.bound, 2, "showToast"], [_decorator.bound, 2, "showNotification"], [_decorator.bound, 2, "closeNotification"], [_uiEventsDecs, 18, "_uiEvents"], [_setBrowserWidthDecs, 18, "_setBrowserWidth"], [_onNetworkStatsUpdatedDecs, 18, "_onNetworkStatsUpdated"], [_onLiveStreamingStateUpdatedDecs, 18, "_onLiveStreamingStateUpdated"], [_decorator.bound, 2, "getLocalMeetingTime"]], []).e, 11);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_StateBarStore, [[_mobx.observable, 1, "networkStatus"], [_mobx.observable, 1, "roomInfo"], [_mobx.observable, 1, "isLiveStreaming"], [_mobx.observable, 1, "liveStreamingPlayUrl"], [_mobx.observable, 1, "galleryWidth"], [_mobx.observable, 1, "browserWidth"], [_mobx.observable, 1, "networkStats"], [_mobx.observable, 1, "attendeeCount"], [_mobx.observable, 1, "asideOpenedItem"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.computed, 3, "localUser"], [_mobx.computed, 3, "shouldShowMeetingTime"], [_mobx.computed, 3, "isMainRoom"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasStopLiveStreamingPermission"], [_mobx.computed, 3, "hasGetLiveStreamingLinkPermission"], [_mobx.computed, 3, "totalHourText"], [_mobx.computed, 3, "totalMinuteText"], [_mobx.computed, 3, "meetingTimeStatus"], [_mobx.computed, 3, "meetingTime"], [_mobx.computed, 3, "password"], [_mobx.computed, 3, "roomId"], [_mobx.computed, 3, "meetingId"], [_mobx.computed, 3, "scheduleInfo"], [_decorator.bound, 2, "isLockRoomEnabled"], [_setNetworkStatusDecs, 18, "setNetworkStatus"], [_setRoomInfoDecs, 18, "setRoomInfo"], [_decorator.bound, 2, "openDeviceSettingDialog"], [_stopLiveStreamingDialogDecs, 18, "stopLiveStreamingDialog"], [_decorator.bound, 2, "startCloudRecording"], [_decorator.bound, 2, "pauseCloudRecording"], [_decorator.bound, 2, "resumeCloudRecording"], [_decorator.bound, 2, "stopCloudRecording"], [_decorator.bound, 2, "getShareLink"], [_decorator.bound, 2, "showToast"], [_decorator.bound, 2, "showNotification"], [_decorator.bound, 2, "closeNotification"], [_uiEventsDecs, 18, "_uiEvents"], [_setBrowserWidthDecs, 18, "_setBrowserWidth"], [_onNetworkStatsUpdatedDecs, 18, "_onNetworkStatsUpdated"], [_onLiveStreamingStateUpdatedDecs, 18, "_onLiveStreamingStateUpdated"], [_decorator.bound, 2, "getLocalMeetingTime"]], []).e, 11);
 _init_networkStatus = _applyDecs$e[0];
 _init_roomInfo = _applyDecs$e[1];
 _init_isLiveStreaming = _applyDecs$e[2];

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

@@ -66,7 +66,8 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
     showToast = _useContext.showToast,
     showNotification = _useContext.showNotification,
     closeNotification = _useContext.closeNotification,
-    isRoomDetailSupported = _useContext.isRoomDetailSupported;
+    isRoomDetailSupported = _useContext.isRoomDetailSupported,
+    isSharingScreen = _useContext.isSharingScreen;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isFullScreen = _useState2[0],
@@ -210,10 +211,14 @@ var View = exports.View = (0, _mobxReact.observer)(function () {
         className: ns.e('time'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingTime.MeetingTime, {})
       }), attendeeCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
-        content: t('fmt_statusbar_label_switchlayout'),
+        content: isSharingScreen ? t('fmt_statusbar_hover_unable_switch_grid_view') : t('fmt_statusbar_label_switchlayout'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: ns.e('layout'),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_layoutConfig.LayoutConfig, {})
+          className: (0, _classnames["default"])(ns.e('layout'), {
+            'fcr-state-bar_layout_disable': isSharingScreen
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_layoutConfig.LayoutConfig, {
+            disable: isSharingScreen
+          })
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
         placement: "bottom",

package/lib/modules/video-window/components/members/index.js

@@ -103,7 +103,8 @@ var Members = exports.Members = (0, _mobxReact.observer)(function () {
           videoStreamType: _type3.AgoraRtcVideoStreamType.LOW_STREAM,
           windowData: windowData,
           showAvatar: true,
-          isVideoSuspended: false
+          isVideoSuspended: false,
+          scalcValue: 1
         })
       }, windowData.windowId);
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/lib/modules/waiting-room-layout/store.js

@@ -78,7 +78,7 @@ var LayoutStore = exports["default"] = /*#__PURE__*/function () {
     (0, _classCallCheck2["default"])(this, LayoutStore);
     (0, _defineProperty2["default"])(this, _ref, void _initProto(this));
     (0, _defineProperty2["default"])(this, "_roomProviderObserver", {
-      onLeaveJBH: function onLeaveJBH() {
+      onLeaveWaitingRoom: function onLeaveWaitingRoom() {
         _this.isJbhToMainRoom = true;
       }
     });

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

@@ -2,6 +2,7 @@ import { FcrUIEventProvider } from '../../../../providers/event-provider';
 import { FcrUserInfo } from 'fcr-core/lib/type';
 import { FcrStreamControl, FcrUserControl } from 'fcr-core';
 import { FcrUIPrivilegeProvider } from '../../../../providers/privilege-provider';
+import { FcrUIAnnotationProvider } from '../../../../providers/annotation-provider';
 export declare class WhiteboardControlBarStore {
     accessor ownerUser: FcrUserInfo | undefined;
     accessor currentUser: FcrUserInfo | undefined;
@@ -16,12 +17,15 @@ export declare class WhiteboardControlBarStore {
     private _uiEventStore;
     private _userControl;
     private _securityStore;
-    constructor({ uiEventStore, userControl, securityStore, }: {
+    private _annotationProvider;
+    constructor({ uiEventStore, userControl, securityStore, annotationProvider, }: {
         uiEventStore: FcrUIEventProvider;
         streamControl: FcrStreamControl;
         userControl: FcrUserControl;
         securityStore: FcrUIPrivilegeProvider;
+        annotationProvider: FcrUIAnnotationProvider;
     });
+    get annotationHasStart(): boolean;
     get canWriteBoard(): boolean;
     onZoomin(): void;
     onZoomout(): void;

package/lib/modules/whiteboard/components/control-bar/store.js

@@ -84,7 +84,8 @@ var WhiteboardControlBarStore = exports.WhiteboardControlBarStore = /*#__PURE__*
       _this = this;
     var uiEventStore = _ref2.uiEventStore,
       userControl = _ref2.userControl,
-      securityStore = _ref2.securityStore;
+      securityStore = _ref2.securityStore,
+      annotationProvider = _ref2.annotationProvider;
     (0, _classCallCheck2["default"])(this, WhiteboardControlBarStore);
     _classPrivateFieldInitSpec(this, _A, (_initProto(this), _init_ownerUser(this, undefined)));
     _classPrivateFieldInitSpec(this, _B, _init_currentUser(this, undefined));
@@ -100,6 +101,7 @@ var WhiteboardControlBarStore = exports.WhiteboardControlBarStore = /*#__PURE__*
     this._userControl = userControl;
     this.currentUser = userControl.getLocalUser();
     this._securityStore = securityStore;
+    this._annotationProvider = annotationProvider;
     this.isHost = [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes((_userControl$getLocal = userControl.getLocalUser()) === null || _userControl$getLocal === void 0 ? void 0 : _userControl$getLocal.userRole);
     uiEventStore.addObserver({
       onEvent: function onEvent(action, payload) {
@@ -208,6 +210,11 @@ var WhiteboardControlBarStore = exports.WhiteboardControlBarStore = /*#__PURE__*
     set: function set(v) {
       _classPrivateFieldSet(_J, this, v);
     }
+  }, {
+    key: "annotationHasStart",
+    get: function get() {
+      return this._annotationProvider.annotationHasStart;
+    }
   }, {
     key: "canWriteBoard",
     get: function get() {
@@ -255,6 +262,7 @@ var WhiteboardControlBarStore = exports.WhiteboardControlBarStore = /*#__PURE__*
   }, {
     key: "onClose",
     value: function onClose() {
+      this._uiEventStore.sendEvent(_constant.FcrUIAction.RESET_WHITEBOARD_TOOLBAR_VARS);
       this._uiEventStore.sendEvent(_constant.FcrUIAction.CLOSE_WHITEBOARD);
     }
   }, {
@@ -269,6 +277,7 @@ var WhiteboardControlBarStore = exports.WhiteboardControlBarStore = /*#__PURE__*
         action: _type.WhiteboardControlbarEvents.ENABLE_CONTROL,
         payload: controlEnabled
       });
+      this._uiEventStore.sendEvent(_constant.FcrUIAction.RESET_WHITEBOARD_TOOLBAR_VARS);
     }
   }]);
 }();

package/lib/modules/whiteboard/components/toolbar/components/color-picker/components/picker.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Picker = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.string.includes.js");
 var _mobxReact = require("mobx-react");
@@ -16,6 +17,7 @@ var _popover = require("agora-ui-foundation/lib/components/popover");
 var _panel = require("./panel");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
 var _jsxRuntime = require("react/jsx-runtime");
 var Picker = exports.Picker = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.ToolbarContext),
@@ -23,26 +25,35 @@ var Picker = exports.Picker = (0, _mobxReact.observer)(function () {
     currentColor = _useContext$observabl.currentColor,
     currentShape = _useContext$observabl.currentShape,
     toolbarDockPosition = _useContext$observabl.toolbarDockPosition,
-    commonColors = _useContext$observabl.commonColors;
+    commonColors = _useContext$observabl.commonColors,
+    currentTool = _useContext$observabl.currentTool;
   var isOtherColorActive = !!currentColor && !commonColors.includes(currentColor);
-  var isDisabled = !currentShape;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var canShowColorPicker = !!currentShape || currentTool === _enums.FcrBoardToolType.TEXT;
   var cls = (0, _classnames["default"])('fcr-board-toolbar__color-item fcr-board-toolbar__color-item--picker', {
     // 'fcr-board-toolbar__color-item--active': isOtherColorActive,
-    'fcr-board-toolbar__color-item--disabled': isDisabled
+    'fcr-board-toolbar__color-item--disabled': !canShowColorPicker
   });
   // const [currentPickVisible, setCurrentPickVisible] = useState(false);
 
-  return isDisabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  (0, _react.useEffect)(function () {
+    setVisible(false);
+  }, [currentColor]);
+  return !canShowColorPicker ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: cls
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
     showArrow: false,
     content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.ColorPickerPanel, {}),
+    visible: visible,
     trigger: "click",
     placement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
     overlayClassName: "fcr-board-toolbar__picker__overlay",
     overlayOffset: 18,
     onVisibleChange: function onVisibleChange(visible) {
-      // setCurrentPickVisible(visible);
+      setVisible(visible);
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: cls,

package/lib/modules/whiteboard/components/toolbar/components/eraser-picker.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EraserPickerItem = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -24,19 +25,47 @@ var EraserPickerItem = exports.EraserPickerItem = (0, _mobxReact.observer)(funct
     currentTool = _useContext$observabl.currentTool,
     toolbarDockPosition = _useContext$observabl.toolbarDockPosition;
   var transI18n = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isHover = _useState2[0],
+    setIsHover = _useState2[1];
   var isActive = currentTool === _enums.FcrBoardToolType.ERASER;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_expansion.ExpansionToolbarItem, {
-    isActive: isActive,
-    tooltip: transI18n('fmt_screenshare_whiteboard_button_eraser'),
-    tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
-    popoverPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
-    icon: _type.FcrIconType.FCR_WHITEBOARD_ERASER,
-    popoverOverlayClassName: "fcr-board-toolbar__picker__overlay",
-    popoverContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(EraserPickerPanel, {}),
-    popoverOffset: offset
+  var handleMouseEnter = function handleMouseEnter() {
+    setIsHover(true);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    setIsHover(false);
+  };
+  var popoverRef = (0, _react.useRef)(null);
+  var hidePopover = function hidePopover() {
+    var _popoverRef$current;
+    (_popoverRef$current = popoverRef.current) === null || _popoverRef$current === void 0 || _popoverRef$current.closePopover();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_expansion.ExpansionToolbarItem, {
+      ref: popoverRef,
+      isActive: isActive,
+      tooltip: transI18n('fmt_screenshare_whiteboard_button_eraser'),
+      tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
+      popoverPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
+      icon: _type.FcrIconType.FCR_WHITEBOARD_ERASER,
+      popoverOverlayClassName: "fcr-board-toolbar__picker__overlay",
+      popoverContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(EraserPickerPanel, {
+        hidePopover: hidePopover
+      }),
+      popoverOffset: offset,
+      iconProps: {
+        colors: {
+          iconPrimary: isActive || isHover ? 'var(--fcr_ui_scene_ramp_brand6)' : 'var(--fcr_ui_scene_black8)'
+        }
+      }
+    })
   });
 });
-var EraserPickerPanel = (0, _mobxReact.observer)(function () {
+var EraserPickerPanel = (0, _mobxReact.observer)(function (_ref2) {
+  var hidePopover = _ref2.hidePopover;
   var _useContext2 = (0, _react.useContext)(_store.ToolbarContext),
     _useContext2$observab = _useContext2.observables,
     currentTool = _useContext2$observab.currentTool,
@@ -48,11 +77,33 @@ var EraserPickerPanel = (0, _mobxReact.observer)(function () {
     'fcr-board-toolbar-panel--active': currentTool === _enums.FcrBoardToolType.ERASER
   });
   var handleEraserClick = function handleEraserClick() {
+    hidePopover();
     setTool(_enums.FcrBoardToolType.ERASER);
   };
   var handleCleanClick = function handleCleanClick() {
+    hidePopover();
     clean();
   };
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isEraserHover = _useState4[0],
+    setIsEraserHover = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isCleanHover = _useState6[0],
+    setIsCleanHover = _useState6[1];
+  var handleMouseEnter = function handleMouseEnter() {
+    setIsEraserHover(true);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    setIsEraserHover(false);
+  };
+  var handleCleanMouseEnter = function handleCleanMouseEnter() {
+    setIsCleanHover(true);
+  };
+  var handleCleanMouseLeave = function handleCleanMouseLeave() {
+    setIsCleanHover(false);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "fcr-board-toolbar-panel fcr-board-toolbar-panel--eraser",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
@@ -62,11 +113,13 @@ var EraserPickerPanel = (0, _mobxReact.observer)(function () {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: eraserCls,
         onClick: handleEraserClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
           type: _type.FcrIconType.FCR_WHITEBOARD_ERASER,
           size: 28,
           colors: {
-            iconPrimary: currentTool === _enums.FcrBoardToolType.ERASER ? 'var(--fcr_ui_scene_ramp_brand6)' : 'var(--fcr_ui_scene_black8)'
+            iconPrimary: currentTool === _enums.FcrBoardToolType.ERASER || isEraserHover ? 'var(--fcr_ui_scene_ramp_brand6)' : 'var(--fcr_ui_scene_black8)'
           }
         })
       })
@@ -76,11 +129,13 @@ var EraserPickerPanel = (0, _mobxReact.observer)(function () {
       placement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         onClick: handleCleanClick,
+        onMouseEnter: handleCleanMouseEnter,
+        onMouseLeave: handleCleanMouseLeave,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
           type: _type.FcrIconType.FCR_WHITEBOARD_ELIMINATE,
           size: 28,
           colors: {
-            iconPrimary: 'var(--fcr_ui_scene_black8)'
+            iconPrimary: isCleanHover ? 'var(--fcr_ui_scene_ramp_brand6)' : 'var(--fcr_ui_scene_black8)'
           }
         })
       })