fcr-ui-scene 3.7.4 → 3.7.5

package/lib/modules/chat/store.js

@@ -3,8 +3,6 @@
 require("core-js/modules/es.symbol.js");
 require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.symbol.to-primitive.js");
-require("core-js/modules/es.error.cause.js");
-require("core-js/modules/es.error.to-string.js");
 require("core-js/modules/es.array.is-array.js");
 require("core-js/modules/es.date.to-primitive.js");
 require("core-js/modules/es.function.bind.js");
@@ -23,6 +21,9 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.StoreContext = void 0;
 exports.isManager = isManager;
 exports.sortUsers = sortUsers;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.error.to-string.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");
@@ -53,6 +54,7 @@ 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -60,14 +62,17 @@ var _mobx = require("mobx");
 var _type = require("fcr-core/lib/type");
 var _decorator = require("agora-foundation/lib/decorator");
 var _constant = require("../../utilities/constant");
-var _type2 = require("fcr-core/lib/room-control/type");
+var _type2 = require("fcr-core/lib/room-control/chatroom-control/type");
+var _type3 = require("fcr-core/lib/room-control/type");
 var _observable = require("agora-foundation/lib/utilities/observable");
 var _react = require("react");
 var _types = require("./types");
 var _chatRoomStore = require("./chat-room-store");
-var _type3 = require("../../type");
+var _type4 = require("../../type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _objectManager = require("../../object-manager");
 var _ChatStore;
-var _initProto, _init_chatRoomStores, _init_activeTabIndex, _init_copyMap, _handleReceiveMessageDecs, _handlerActiveTabDecs, _handleSelectMsgDecs, _clearCopyMapDecs, _releaseDecs, _ref;
+var _initProto, _init_chatRoomStores, _init_activeTabIndex, _init_copyMap, _handlerActiveTabDecs, _handleSelectMsgDecs, _changeChatAsideDecs, _clearCopyMapDecs, _releaseDecs, _handleReceiveMessageDecs, _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; }
@@ -81,72 +86,77 @@ function _checkInRHS(e) { if (Object(e) !== e) throw TypeError("right-hand side
 var _A = /*#__PURE__*/new WeakMap();
 var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
-_ref = (_handleReceiveMessageDecs = [_mobx.action, _mobx.action.bound], _handlerActiveTabDecs = [_mobx.action, _mobx.action.bound], _handleSelectMsgDecs = [_mobx.action, _mobx.action.bound], _clearCopyMapDecs = [_mobx.action, _mobx.action.bound], _releaseDecs = [_mobx.action, _mobx.action.bound], "_disposers");
+_ref = (_handlerActiveTabDecs = [_mobx.action, _mobx.action.bound], _handleSelectMsgDecs = [_mobx.action, _mobx.action.bound], _changeChatAsideDecs = [_mobx.action, _mobx.action.bound], _clearCopyMapDecs = [_mobx.action, _mobx.action.bound], _releaseDecs = [_mobx.action, _mobx.action.bound], _handleReceiveMessageDecs = [_mobx.action, _mobx.action.bound], "_disposers");
 var ChatStore = exports["default"] = /*#__PURE__*/function () {
   function ChatStore(_ref2) {
     var _this = this,
       _roomControl$getRoomI;
-    var chatRoomControl = _ref2.chatRoomControl,
-      userControl = _ref2.userControl,
-      uiEventStore = _ref2.uiEventStore,
-      securityStore = _ref2.securityStore,
-      roomControl = _ref2.roomControl,
-      waitingRoomControlProvider = _ref2.waitingRoomControlProvider,
-      roomProvider = _ref2.roomProvider,
-      chatProvider = _ref2.chatProvider,
-      sharedLayoutDataSource = _ref2.sharedLayoutDataSource,
-      sharedWaitingRoomDataSource = _ref2.sharedWaitingRoomDataSource,
-      sharedChatDataSource = _ref2.sharedChatDataSource;
+    var objectManager = _ref2.objectManager;
     (0, _classCallCheck2["default"])(this, ChatStore);
     (0, _defineProperty2["default"])(this, _ref, (_initProto(this), []));
     (0, _defineProperty2["default"])(this, "_observable", new _observable.AgoraObservable());
     _classPrivateFieldInitSpec(this, _A, _init_chatRoomStores(this, {}));
-    _classPrivateFieldInitSpec(this, _B, _init_activeTabIndex(this, _type3.FcrUIRoomType.MAIN_ROOM));
+    _classPrivateFieldInitSpec(this, _B, _init_activeTabIndex(this, _type4.FcrUIRoomType.MAIN_ROOM));
     _classPrivateFieldInitSpec(this, _C, _init_copyMap(this, new Map()));
-    this._securityStore = securityStore;
-    this._uiEventStore = uiEventStore;
+    var dialogProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_DIALOG_PROVIDER);
+    var roomProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_ROOM_PROVIDER);
+    var eventProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_EVENT_PROVIDER);
+    var privilegeProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_PRIVILEGE_PROVIDER);
+    var waitingRoomControlProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_WAITING_ROOM_CONTROL_PROVIDER);
+    var sharedLayoutDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_LAYOUT_DATA_SOURCE);
+    var chatProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_CHAT_PROVIDER);
+    var sharedWaitingRoomDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_WAITING_ROOM_DATA_SOURCE);
+    var sharedChatDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_CHAT_DATA_SOURCE);
+    var roomControl = roomProvider.currentRoomControl;
+    var userControl = roomControl.getUserControl();
+    var chatRoomControl = roomControl.getChatRoomControl();
+    var messageProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_MESSAGE_PROVIDER);
+    this._privilegeProvider = privilegeProvider;
+    this._eventProvider = eventProvider;
     this._chatProvider = chatProvider;
     this._sharedLayoutDataSource = sharedLayoutDataSource;
-    this._sharedWaitingRoomDataSource = sharedWaitingRoomDataSource;
     this._sharedChatDataSource = sharedChatDataSource;
     this._roomControl = roomControl;
+    this._messageProvider = messageProvider;
+    this._dialogProvider = dialogProvider;
     var roomObserver = {
       onJoinWaitingRoom: function onJoinWaitingRoom(room) {
         var userControl = room.getUserControl();
         var chatRoomControl = room.getChatRoomControl();
-        _this.chatRoomStores[_type3.FcrUIRoomType.WAITING_ROOM] = new _chatRoomStore.ChatRoomStore({
+        _this.chatRoomStores[_type4.FcrUIRoomType.WAITING_ROOM] = new _chatRoomStore.ChatRoomStore({
           chatRoomControl: chatRoomControl,
           userControl: userControl,
-          uiEventStore: _this._uiEventStore,
-          securityStore: waitingRoomControlProvider.privilegeProvider,
-          type: _type3.FcrUIRoomType.WAITING_ROOM,
+          messageProvider: messageProvider,
+          privilegeProvider: waitingRoomControlProvider.privilegeProvider,
+          type: _type4.FcrUIRoomType.WAITING_ROOM,
           chatStoreObservable: _this._observable,
           chatProvider: _this._chatProvider
         });
       },
       onWaitingRoomManageCanceled: function onWaitingRoomManageCanceled() {
-        var _this$chatRoomStores$;
-        _this.handlerActiveTab(_type3.FcrUIRoomType.MAIN_ROOM);
-        (_this$chatRoomStores$ = _this.chatRoomStores[_type3.FcrUIRoomType.WAITING_ROOM]) === null || _this$chatRoomStores$ === void 0 || _this$chatRoomStores$.release();
-        delete _this.chatRoomStores[_type3.FcrUIRoomType.WAITING_ROOM];
+        _this.handlerActiveTab(_type4.FcrUIRoomType.MAIN_ROOM);
+        _this.getChatRoomStore(_type4.FcrUIRoomType.WAITING_ROOM).release();
+        delete _this.chatRoomStores[_type4.FcrUIRoomType.WAITING_ROOM];
       }
     };
     var chatStoreObserver = {
       onReceiveMessage: this._handleReceiveMessage
     };
-    var isMainRoom = ((_roomControl$getRoomI = roomControl.getRoomInfo()) === null || _roomControl$getRoomI === void 0 ? void 0 : _roomControl$getRoomI.roomType) === _type2.FcrRoomType.Mainroom;
+    var isMainRoom = ((_roomControl$getRoomI = roomControl.getRoomInfo()) === null || _roomControl$getRoomI === void 0 ? void 0 : _roomControl$getRoomI.roomType) === _type3.FcrRoomType.Mainroom;
+
+    // TODO: remove observers in release
     if (isMainRoom) {
       roomProvider.addObserver(roomObserver);
     }
     this._observable.addObserver(chatStoreObserver);
     this._isMainRoom = isMainRoom;
-    var type = isMainRoom ? _type3.FcrUIRoomType.MAIN_ROOM : _type3.FcrUIRoomType.WAITING_ROOM;
-    this.activeTabIndex = isMainRoom ? _type3.FcrUIRoomType.MAIN_ROOM : _type3.FcrUIRoomType.WAITING_ROOM;
+    var type = isMainRoom ? _type4.FcrUIRoomType.MAIN_ROOM : _type4.FcrUIRoomType.WAITING_ROOM;
+    this.activeTabIndex = isMainRoom ? _type4.FcrUIRoomType.MAIN_ROOM : _type4.FcrUIRoomType.WAITING_ROOM;
     this.chatRoomStores[type] = new _chatRoomStore.ChatRoomStore({
       chatRoomControl: chatRoomControl,
       userControl: userControl,
-      uiEventStore: uiEventStore,
-      securityStore: securityStore,
+      messageProvider: messageProvider,
+      privilegeProvider: privilegeProvider,
       type: type,
       chatStoreObservable: this._observable,
       chatProvider: this._chatProvider
@@ -155,14 +165,13 @@ var ChatStore = exports["default"] = /*#__PURE__*/function () {
       return sharedWaitingRoomDataSource.totalWaitingRoomUser;
     }, function (count) {
       if (count === 0) {
-        _this.handlerActiveTab(_type3.FcrUIRoomType.MAIN_ROOM);
+        _this.handlerActiveTab(_type4.FcrUIRoomType.MAIN_ROOM);
       }
     }), (0, _mobx.reaction)(function () {
       return _this._sharedLayoutDataSource.asideLayout.chat;
     }, function (visible) {
       if (visible === true) {
-        var _this$chatRoomStores$2;
-        (_this$chatRoomStores$2 = _this.chatRoomStores[_this.activeTabIndex]) === null || _this$chatRoomStores$2 === void 0 || _this$chatRoomStores$2.setUnReadMsgCount(0);
+        _this.getChatRoomStore(_this.activeTabIndex).setUnReadMsgCount(0);
       }
     }), (0, _mobx.reaction)(function () {
       return _this._sharedChatDataSource.activeTab;
@@ -203,29 +212,35 @@ var ChatStore = exports["default"] = /*#__PURE__*/function () {
       return this._isMainRoom;
     }
   }, {
-    key: "hasWaitingRoomPermission",
-    value: function hasWaitingRoomPermission() {
-      return this._securityStore.isWaitingRoomEnabled() && this._securityStore.hasWaitingRoomPermission();
+    key: "chatRoomState",
+    get: function get() {
+      return this._chatProvider.chatConnectionState === _type2.FcrChatRoomConnectionState.Connected ? (0, _i18n.transI18n)('fmt_chat_label_chat') : (0, _i18n.transI18n)('fmt_aside_status_connecting');
     }
   }, {
-    key: "_handleReceiveMessage",
-    value: function _handleReceiveMessage(notifyMsgs, type) {
-      if (this.activeTabIndex !== type || !this._sharedLayoutDataSource.asideLayout.chat) {
-        var _this$chatRoomStores$3, _this$chatRoomStores$4;
-        (_this$chatRoomStores$3 = this.chatRoomStores[type]) === null || _this$chatRoomStores$3 === void 0 || _this$chatRoomStores$3.setUnReadMsgCount(notifyMsgs.length + ((_this$chatRoomStores$4 = this.chatRoomStores[type]) === null || _this$chatRoomStores$4 === void 0 ? void 0 : _this$chatRoomStores$4.unReadMsgCount));
-        this._chatProvider.latestsMessageInfo = {
-          notifyMsgs: notifyMsgs,
-          currentRoomType: type
-        };
+    key: "getChatRoomStore",
+    value: function getChatRoomStore(type) {
+      if (!this.chatRoomStores[this.activeTabIndex]) {
+        throw new Error('Chat room store not found');
       }
+      return this.chatRoomStores[type];
+    }
+  }, {
+    key: "localUserId",
+    get: function get() {
+      var userId = this._roomControl.getUserControl().getLocalUser().userId;
+      return userId;
+    }
+  }, {
+    key: "hasWaitingRoomPermission",
+    value: function hasWaitingRoomPermission() {
+      return this._privilegeProvider.isWaitingRoomEnabled() && this._privilegeProvider.hasWaitingRoomPermission();
     }
   }, {
     key: "handlerActiveTab",
     value: function handlerActiveTab(key) {
-      var _this$chatRoomStores$5;
       this.activeTabIndex = key;
-      (_this$chatRoomStores$5 = this.chatRoomStores[key]) === null || _this$chatRoomStores$5 === void 0 || _this$chatRoomStores$5.setUnReadMsgCount(0);
-      this._uiEventStore.sendEvent(_constant.FcrUIAction.CHAT_ROOM_TAB_CHANGE, key);
+      this.getChatRoomStore(key).setUnReadMsgCount(0);
+      this._eventProvider.sendEvent(_constant.FcrUIAction.CHAT_ROOM_TAB_CHANGE, key);
     }
   }, {
     key: "handleSelectMsg",
@@ -236,6 +251,15 @@ var ChatStore = exports["default"] = /*#__PURE__*/function () {
         this.copyMap["delete"](idx);
       }
     }
+  }, {
+    key: "changeChatAside",
+    value: function changeChatAside() {
+      this._dialogProvider.closeDialog(_constant.FcrUIDialogKey.CHAT);
+      this._sharedLayoutDataSource.setChatRenderAt('aside');
+      this._sharedLayoutDataSource.setAsideLayout({
+        chat: true
+      });
+    }
   }, {
     key: "clearCopyMap",
     value: function clearCopyMap() {
@@ -253,10 +277,71 @@ var ChatStore = exports["default"] = /*#__PURE__*/function () {
       });
       this._disposers = [];
     }
+  }, {
+    key: "sendMessage",
+    value: function () {
+      var _sendMessage = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(msg, type) {
+        var chatRoomStore, _error$reason, error, toastContent, _t;
+        return _regenerator["default"].wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              chatRoomStore = this.getChatRoomStore(this.activeTabIndex);
+              _context.prev = 1;
+              _context.next = 2;
+              return chatRoomStore.sendMessage(msg, type);
+            case 2:
+              _context.next = 5;
+              break;
+            case 3:
+              _context.prev = 3;
+              _t = _context["catch"](1);
+              error = _t;
+              if (!(error.error_code === 'MODERATION_001')) {
+                _context.next = 4;
+                break;
+              }
+              this._messageProvider.showToast({
+                type: 'error',
+                message: (0, _i18n.transI18n)('fmt_chat_toast_infraction_error')
+              });
+              return _context.abrupt("return");
+            case 4:
+              toastContent = (_error$reason = error.reason) !== null && _error$reason !== void 0 ? _error$reason : (0, _i18n.transI18n)('fmt_chat_tips_Networkconnect');
+              chatRoomStore.handleToast({
+                id: 'send-msg',
+                toastProps: {
+                  content: toastContent,
+                  type: 'error',
+                  size: 'small'
+                }
+              });
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this, [[1, 3]]);
+      }));
+      function sendMessage(_x, _x2) {
+        return _sendMessage.apply(this, arguments);
+      }
+      return sendMessage;
+    }()
+  }, {
+    key: "_handleReceiveMessage",
+    value: function _handleReceiveMessage(notifyMsgs, type) {
+      var chatRoomStore = this.getChatRoomStore(type);
+      if (this.activeTabIndex !== type || !this._sharedLayoutDataSource.asideLayout.chat) {
+        chatRoomStore.setUnReadMsgCount(notifyMsgs.length + chatRoomStore.unReadMsgCount);
+        this._chatProvider.latestsMessageInfo = {
+          notifyMsgs: notifyMsgs,
+          currentRoomType: type
+        };
+      }
+    }
   }]);
 }();
 _ChatStore = ChatStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ChatStore, [[_mobx.observable, 1, "chatRoomStores"], [_mobx.observable, 1, "activeTabIndex"], [_mobx.observable, 1, "copyMap"], [_decorator.bound, 2, "hasWaitingRoomPermission"], [_handleReceiveMessageDecs, 18, "_handleReceiveMessage"], [_handlerActiveTabDecs, 18, "handlerActiveTab"], [_handleSelectMsgDecs, 18, "handleSelectMsg"], [_clearCopyMapDecs, 18, "clearCopyMap"], [_releaseDecs, 18, "release"]], []).e, 4);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ChatStore, [[_mobx.observable, 1, "chatRoomStores"], [_mobx.observable, 1, "activeTabIndex"], [_mobx.observable, 1, "copyMap"], [_decorator.bound, 2, "hasWaitingRoomPermission"], [_handlerActiveTabDecs, 18, "handlerActiveTab"], [_handleSelectMsgDecs, 18, "handleSelectMsg"], [_changeChatAsideDecs, 18, "changeChatAside"], [_clearCopyMapDecs, 18, "clearCopyMap"], [_releaseDecs, 18, "release"], [_handleReceiveMessageDecs, 18, "_handleReceiveMessage"]], []).e, 4);
 _init_chatRoomStores = _applyDecs$e[0];
 _init_activeTabIndex = _applyDecs$e[1];
 _init_copyMap = _applyDecs$e[2];

package/lib/modules/chat/types.d.ts

@@ -1,10 +1,15 @@
 import { AllowChatLevelType } from 'agora-ui-foundation/lib/components/chat-manager';
 import { RoleType } from 'agora-ui-foundation/lib/components/message-bubble';
-import { FcrChatRoomReceivedImageMessage, FcrChatRoomReceivedTextMessage } from 'fcr-core/lib/room-control/chatroom-control/type';
-import { FcrUserInfo } from 'fcr-core/lib/type';
+import { FcrChatRoomControl, FcrChatRoomReceivedImageMessage, FcrChatRoomReceivedTextMessage } from 'fcr-core/lib/room-control/chatroom-control/type';
+import { FcrUserInfo, FcrUserControl } from 'fcr-core/lib/type';
 import { CSSProperties } from 'react';
 import { ChatRoomStore } from './chat-room-store';
 import { FcrUIRoomType } from '../../type';
+import { FcrUIObjectManager } from '../../object-manager';
+import { AgoraObservable } from 'fcr-core/lib/imports';
+import { FcrUIChatProvider } from '../../providers/chat-provider';
+import { FcrUIPrivilegeProvider } from '../../providers/privilege-provider';
+import { FcrUIMessageProvider } from '../../providers/message/type';
 export interface MessageBarProps {
     styles?: CSSProperties;
     users?: FcrUserInfo[];
@@ -69,3 +74,15 @@ export type ChatRoomStoreMap = {
     [K in FcrUIRoomType]?: ChatRoomStore;
 };
 export type RoomTypeKeys = keyof typeof FcrUIRoomType;
+export type ChatStoreArgs = {
+    objectManager: FcrUIObjectManager;
+};
+export type ChatRoomStoreArgs = {
+    type: FcrUIRoomType;
+    chatRoomControl: FcrChatRoomControl;
+    userControl: FcrUserControl;
+    messageProvider: FcrUIMessageProvider;
+    privilegeProvider: FcrUIPrivilegeProvider;
+    chatStoreObservable: AgoraObservable<FcrChatStoreObserver>;
+    chatProvider: FcrUIChatProvider;
+};

package/lib/modules/chat/view.js

@@ -45,11 +45,11 @@ var _chatBar = require("./components/chat-bar");
 var _type = require("../../type");
 var _type2 = require("fcr-core/lib/type");
 var _util = require("./util");
-var _copyText = require("../../utilities/copyText");
 var _type3 = require("fcr-core/lib/room-control/chatroom-control/type");
 var _fcrCore = require("fcr-core");
 var _types = require("./types");
 var _chatTabs = _interopRequireDefault(require("./components/chat-tabs"));
+var _browserApi = require("../../utilities/browser-api");
 var _jsxRuntime = require("react/jsx-runtime");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -145,7 +145,7 @@ var Chat = exports.Chat = (0, _mobxReact.observer)(function (_ref) {
             }
             msg = messageList[msgIndex[0]].msg;
             _context.next = 1;
-            return (0, _copyText.copyText)(msg);
+            return (0, _browserApi.copyText)(msg);
           case 1:
             return _context.abrupt("return");
           case 2:
@@ -169,7 +169,7 @@ var Chat = exports.Chat = (0, _mobxReact.observer)(function (_ref) {
               }
             });
             _context.next = 3;
-            return (0, _copyText.copyText)(msgHandled);
+            return (0, _browserApi.copyText)(msgHandled);
           case 3:
           case "end":
             return _context.stop();

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

@@ -28,8 +28,6 @@ var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _type2 = require("../../whiteboard/type");
-var _rendererEvent = require("../../../utilities/renderer-event");
 var _jsxRuntime = require("react/jsx-runtime");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -40,10 +38,7 @@ var AnnotationMenu = function AnnotationMenu(_ref) {
     setAllowAnnotationWrite = _ref.setAllowAnnotationWrite;
   var transI18n = (0, _i18n.useI18n)();
   function onClearAllAnnotation() {
-    (0, _rendererEvent.sendEvent)({
-      action: _type2.ToolbarEvents.CLEAN,
-      payload: null
-    });
+    // renderer.sendEvent({ action: ToolbarEvents.CLEAN, payload: null });
   }
   var hostMenu = hasAnnotationAllowWritePermission ? [{
     title: transI18n('fmt_screenshare_controlbar_settings_label_annotation_settings'),

package/lib/modules/components/control-bar/components/switch-theme/index.js

@@ -37,7 +37,7 @@ var WhiteboardSwitchTheme = function WhiteboardSwitchTheme(props) {
     overlayInnerStyle: {
       width: '100%'
     },
-    overlayOffset: 2,
+    overlayOffset: 4,
     showArrow: false
     // getTooltipContainer={() => {
     //   const target = document.getElementById('fcr-whiteboard-controlbar') as HTMLElement;
@@ -47,7 +47,7 @@ var WhiteboardSwitchTheme = function WhiteboardSwitchTheme(props) {
     ,
     visible: whiteboardVisible,
     content: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "whiteboard-switch-theme",
+      className: "fcr-whiteboard-switch-theme",
       children: [(0, _libs["default"])(t).map(function (theme, idx) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item["default"], {
           colors: theme.showColors,

package/lib/modules/components/control-bar/index.css

@@ -21,14 +21,13 @@
 }
 .fcr-whiteboard-controlbar-body {
   width: 100%;
-  height: calc(100vh - 28px);
-  display: flex;
+  height: 100%;
+  /* display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: center; */
   position: absolute;
-  top: 28px;
+  top: 0;
   bottom: 0;
-  overflow: hidden;
   background-color: #e5e7eb;
 }
 .fcr-whiteboard-controlbar-body-content {
@@ -37,6 +36,10 @@
   justify-content: center;
   align-items: center;
 }
+.fcr-whiteboard-view {
+  height: 100%;
+  width: 100%;
+}
 .fcr-whiteboard-controlbar-body-values {
   position: absolute;
   top: 0;
@@ -85,3 +88,14 @@
 .fcr-whiteboard-controlbar-item:hover {
   background: var(--fcr_ui_scene_ramp_brand0);
 }
+.whiteboard-action-prevent {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 1;
+  cursor:
+    url('data:image/svg+xml,%3Csvg width="18" height="18" viewBox="0 0  " 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;
+}

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

@@ -1,20 +1,27 @@
 import { PropsWithChildren } from 'react';
-import { FcrUserInfo } from 'fcr-core/lib/type';
 import { WhiteboardThemeType } from '../../whiteboard/type';
+import { FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
 import './index.css';
-export declare const WhiteboardControlbar: (props: PropsWithChildren<{
+type WhiteboardProps = {
     onClose: () => void;
     onEnable: (enable: boolean) => void;
-    setTheme?: (theme: WhiteboardThemeType) => void;
-    ownerUser: Pick<FcrUserInfo, "userId" | "userName">;
-    currentUser: FcrUserInfo;
+    setTheme: (theme: WhiteboardThemeType) => void;
     canWriteBoard: boolean;
     controlEnabled: boolean;
     isHost: boolean;
     currentTheme: WhiteboardThemeType;
-    sharingType: "whiteboard" | "annotation";
-    onZoomIn?: () => void;
-    onZoomOut?: () => void;
-    onAdaptive?: () => void;
-    onOrigin?: () => void;
-}>) => import("react/jsx-runtime").JSX.Element;
+    sharingType: 'whiteboard' | 'annotation';
+    currentTool?: FcrBoardToolType;
+    onZoomIn?: () => boolean;
+    onZoomOut?: () => boolean;
+    onAdaptive?: () => boolean;
+    onOrigin?: () => boolean;
+    onBoardDomLoaded?: (dom: HTMLDivElement) => void;
+    isSharingWithAudio?: boolean;
+    ownerUserName: string;
+    isMyBoard: boolean;
+};
+type PickRequired<T extends object, K extends keyof T> = Required<Pick<T, K>> & Omit<T, K>;
+type SharingType<T extends 'whiteboard' | 'screenshare' | undefined> = T extends 'whiteboard' ? WhiteboardProps : PickRequired<Partial<WhiteboardProps>, 'onZoomIn' | 'onZoomOut' | 'onAdaptive' | 'onOrigin' | 'isSharingWithAudio'>;
+export declare const WhiteboardControlbar: <T extends "whiteboard" | "screenshare">(props: PropsWithChildren<SharingType<T>>) => import("react/jsx-runtime").JSX.Element;
+export {};