fcr-ui-scene 3.6.1 → 3.6.2

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

@@ -25,6 +25,7 @@ import { FcrUISharedDevicePrivilegeDataSource } from '../../shared-data-source/d
 import { FcrUIMemberSharedDataSource } from '../../shared-data-source/member-data';
 import { FcrUIWidgetProvider } from '../../providers/widget-provider';
 import { FcrSecurityCheckedStateType, FcrUISecuritySharedDataSource } from '../../shared-data-source/security-data';
+import { FcrUIScreenShareSharedDataSource } from '../../shared-data-source/screen-share-data';
 import { FcrUIAbilityProviderImpl } from '../../providers/ability-provider';
 export declare enum AudioConnectType {
     NONE = 0,
@@ -57,6 +58,7 @@ export default class ActionBarStore {
     private _roomType;
     private _widgetProvider;
     private _sharedSecuritySharedDataSource;
+    private _sharedScreenShareSharedDataSource;
     private _abilityProvider;
     private _userObserver;
     private _roomObserver;
@@ -104,6 +106,7 @@ export default class ActionBarStore {
         sharedMemberDataSource: FcrUIMemberSharedDataSource;
         widgetProvider: FcrUIWidgetProvider;
         sharedSecuritySharedDataSource: FcrUISecuritySharedDataSource;
+        sharedScreenShareSharedDataSource: FcrUIScreenShareSharedDataSource;
         abilityProvider: FcrUIAbilityProviderImpl;
     });
     get checkedStateMap(): FcrSecurityCheckedStateType;
@@ -125,8 +128,8 @@ export default class ActionBarStore {
     get isNewWaitingRoomUserEnter(): boolean;
     get privilegeProvider(): FcrUIPrivilegeProvider;
     get asideLayout(): import("../../type").FcrUIUpdateAsideParams;
-    get chatRenderAt(): "aside" | "dialog";
-    get participantsRenderAt(): "aside" | "dialog";
+    get chatRenderAt(): "dialog" | "aside";
+    get participantsRenderAt(): "dialog" | "aside";
     get participantVisible(): boolean | undefined;
     get chatVisible(): boolean | undefined;
     get remoteUsers(): FcrUserInfo[];
@@ -180,6 +183,7 @@ export default class ActionBarStore {
     isAllowJoinWithAudioEnabled(): boolean;
     enableMicrophone(enable: boolean): void;
     setAllowWriteBoard(state: boolean): void;
+    setAllowAnnotation(state: boolean): void;
     setAllowScreenShare(state: boolean): void;
     setPopoverOpened(isShow: boolean): void;
     setStateBarLeaveMeeting(isShow: boolean): void;

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

@@ -28,7 +28,6 @@ require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.array.reduce.js");
 require("core-js/modules/es.array.some.js");
-require("core-js/modules/es.date.to-string.js");
 require("core-js/modules/es.function.bind.js");
 require("core-js/modules/es.map.js");
 require("core-js/modules/es.object.to-string.js");
@@ -199,6 +198,7 @@ var ActionBarStore = exports["default"] = /*#__PURE__*/function () {
     this._sharedMemberDataSource = args.sharedMemberDataSource;
     this._widgetProvider = args.widgetProvider;
     this._sharedSecuritySharedDataSource = args.sharedSecuritySharedDataSource;
+    this._sharedScreenShareSharedDataSource = args.sharedScreenShareSharedDataSource;
     this._abilityProvider = args.abilityProvider;
     this._streamControl = args.roomControl.getStreamControl();
     this._userControl = this._roomControl.getUserControl();
@@ -536,7 +536,7 @@ var ActionBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "sharingOwnerUser",
     get: function get() {
-      return this._screenShareProvider.screenSharingOwner;
+      return this._sharedScreenShareSharedDataSource.screenSharingOwner;
     }
   }, {
     key: "hasEnableStartScreenSharePermission",
@@ -638,7 +638,7 @@ var ActionBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "isBoardWriteEnabled",
     get: function get() {
-      return this._privilegeProvider.allowBoardWrite();
+      return this._privilegeProvider.allowBoardWriteState();
     }
   }, {
     key: "isWaterMarkEnabled",
@@ -790,6 +790,11 @@ var ActionBarStore = exports["default"] = /*#__PURE__*/function () {
     value: function setAllowWriteBoard(state) {
       this._privilegeProvider.setAllowWriteBoard(state);
     }
+  }, {
+    key: "setAllowAnnotation",
+    value: function setAllowAnnotation(state) {
+      this._privilegeProvider.setAllowWriteBoard(state);
+    }
   }, {
     key: "setAllowScreenShare",
     value: function setAllowScreenShare(state) {
@@ -993,10 +998,8 @@ var ActionBarStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "startScreenShare",
     value: function startScreenShare() {
-      console.log('performance: click button', new Date().getTime());
-      // if (!this._interceptShareBoard()) return;
       if (!this._interceptShareScreen()) return;
-      this._eventProvider.startShareScreen();
+      this._screenShareProvider.bootstrap();
     }
   }, {
     key: "openInterpreterDialog",
@@ -1199,10 +1202,13 @@ var ActionBarStore = exports["default"] = /*#__PURE__*/function () {
             reason1: ((_this$sharingOwnerUse3 = this.sharingOwnerUser) === null || _this$sharingOwnerUse3 === void 0 ? void 0 : _this$sharingOwnerUse3.userName) || (0, _i18n.transI18n)('fmt_actionbar_screenshare_labels_others')
           }),
           okText: (0, _i18n.transI18n)('fmt_screenshare_continue_share'),
+          okButtonProps: {
+            className: 'fcr-screenshare-continue-share'
+          },
           closable: false,
           alignCenter: true,
           onOk: function onOk() {
-            _this5._eventProvider.startShareScreen();
+            _this5._screenShareProvider.bootstrap();
             _this5._dialogProvider.closeConfirm(confirmKey);
           },
           onCancel: function onCancel() {
@@ -1227,7 +1233,7 @@ var ActionBarStore = exports["default"] = /*#__PURE__*/function () {
           closable: false,
           showCancel: false,
           onOk: function onOk() {
-            _this6._eventProvider.startShareScreen();
+            _this6._screenShareProvider.bootstrap();
             _this6._dialogProvider.closeDialog(confirmKey);
           },
           onCancel: function onCancel() {
@@ -1552,7 +1558,7 @@ var ActionBarStore = exports["default"] = /*#__PURE__*/function () {
   }]);
 }();
 _ActionBarStore = ActionBarStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ActionBarStore, [[_mobx.observable, 1, "newMessageTooltipVisible"], [_mobx.observable, 1, "totalWaitingRoomUser"], [_mobx.observable, 1, "liveStreamingState"], [_mobx.observable, 1, "currentMenuIs"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "connectionSettingVisible"], [_mobx.observable, 1, "folded"], [_mobx.observable, 1, "boardOwnerUser"], [_mobx.observable, 1, "hasScreenShare"], [_mobx.observable, 1, "showArrow"], [_mobx.observable, 1, "phoneMicEnabled"], [_mobx.observable, 1, "chatTabIndex"], [_mobx.observable, 1, "popoverOpened"], [_mobx.observable, 1, "stateBarLeaveMeeting"], [_mobx.observable, 1, "hasOfflineUserExistence"], [_mobx.observable, 1, "connectionState"], [_mobx.computed, 3, "checkedStateMap"], [_setCheckedStateMapDecs, 18, "setCheckedStateMap"], [_mobx.computed, 3, "registeredWidgetConfigs"], [_mobx.computed, 3, "asideLayout"], [_mobx.computed, 3, "chatRenderAt"], [_mobx.computed, 3, "participantsRenderAt"], [_mobx.computed, 3, "participantVisible"], [_mobx.computed, 3, "chatVisible"], [_mobx.computed, 3, "hasStartScreenSharePermission"], [_mobx.computed, 3, "hasStopScreenSharePermission"], [_mobx.computed, 3, "sharingOwnerUser"], [_mobx.computed, 3, "hasEnableStartScreenSharePermission"], [_mobx.computed, 3, "hasStartLiveStreamingPermission"], [_mobx.computed, 3, "hasEnableStartAudioPermission"], [_mobx.computed, 3, "hasEnableChangeNamePermission"], [_mobx.computed, 3, "hasEnableStartVideoPermission"], [_mobx.computed, 3, "hasLockRoomPermission"], [_mobx.computed, 3, "hasEnableJoinWithAudioPermission"], [_mobx.computed, 3, "hasWaitingRoomPermission"], [_mobx.computed, 3, "hasWatermarkDisablePermission"], [_mobx.computed, 3, "hasEnableStartSharePermission"], [_mobx.computed, 3, "hasAllowWriteBoardPermission"], [_mobx.computed, 3, "hasCloseWriteBoardPermission"], [_mobx.computed, 3, "hasAllowScreenShareAndBoardPermission"], [_mobx.computed, 3, "hasAllowChatPermission"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasAssignHostBeforeLeavingPermission"], [_mobx.computed, 3, "hasEndRoomPermission"], [_mobx.computed, 3, "isScreenShareAndBoardEnabled"], [_mobx.computed, 3, "isBoardWriteEnabled"], [_mobx.computed, 3, "isWaterMarkEnabled"], [_mobx.computed, 3, "isMulti"], [_mobx.computed, 3, "hasEnableInterpreterPermission"], [_mobx.computed, 3, "hasDisableInterpreterPermission"], [_mobx.computed, 3, "microphoneEnabled"], [_mobx.computed, 3, "allNewMessage"], [_mobx.computed, 3, "isMainRoom"], [_mobx.computed, 3, "hasAllowChangeNamePromission"], [_mobx.computed, 3, "hasDisallowChangeNamePromission"], [_mobx.computed, 3, "newMessageCount"], [_pauseCloudRecordingDecs, 2, "pauseCloudRecording"], [_resumeCloudRecordingDecs, 2, "resumeCloudRecording"], [_stopCloudRecordingDecs, 2, "stopCloudRecording"], [_decorator.bound, 2, "startCloudRecording"], [_showLockedRoomToastDecs, 18, "showLockedRoomToast"], [_toggleLayoutBarLockDecs, 18, "toggleLayoutBarLock"], [_showNewMessageTooltipDecs, 18, "showNewMessageTooltip"], [_hideNewMessageTooltipDecs, 18, "hideNewMessageTooltip"], [_switchMenuDecs, 18, "switchMenu"], [_mobx.computed, 3, "isLocked"], [_decorator.bound, 2, "isWaitingRoomEnabled"], [_decorator.bound, 2, "isAllowJoinWithAudioEnabled"], [_decorator.bound, 2, "enableMicrophone"], [_decorator.bound, 2, "setAllowWriteBoard"], [_decorator.bound, 2, "setAllowScreenShare"], [_setPopoverOpenedDecs, 18, "setPopoverOpened"], [_setStateBarLeaveMeetingDecs, 18, "setStateBarLeaveMeeting"], [_decorator.bound, 2, "getRoomType"], [_decorator.bound, 2, "allowJoinWithMuteAudio"], [_decorator.bound, 2, "setAllowJoinWithMuteAudio"], [_decorator.bound, 2, "isLockRoomEnabled"], [_decorator.bound, 2, "setLockRoomEnabled"], [_decorator.bound, 2, "setAllowShareScreen"], [_decorator.bound, 2, "allowShareScreen"], [_decorator.bound, 2, "allowWriteBoard"], [_decorator.bound, 2, "allowChat"], [_decorator.bound, 2, "setAllowChat"], [_decorator.bound, 2, "allowUnmuteSelfAudio"], [_decorator.bound, 2, "setAllowUnmuteSelfAudio"], [_decorator.bound, 2, "allowUnmuteSelfVideo"], [_decorator.bound, 2, "setAllowUnmuteSelfVideo"], [_decorator.bound, 2, "allowChangeName"], [_decorator.bound, 2, "toggleChat"], [_decorator.bound, 2, "openChat"], [_decorator.bound, 2, "closeChat"], [_decorator.bound, 2, "toggleParticipants"], [_decorator.bound, 2, "openParticipants"], [_decorator.bound, 2, "closeParticipants"], [_decorator.bound, 2, "openDeviceSettingDialog"], [_decorator.bound, 2, "startScreenShare"], [_decorator.bound, 2, "openInterpreterDialog"], [_decorator.bound, 2, "openWhiteboard"], [_decorator.bound, 2, "closeWhiteboard"], [_decorator.bound, 2, "closeShareScreen"], [_decorator.bound, 2, "openLiveStreamingDialog"], [_decorator.bound, 2, "toggleConnection"], [_decorator.bound, 2, "openConnection"], [_decorator.bound, 2, "closeConnection"], [_handleJoinWaitingRoomDecs, 18, "_handleJoinWaitingRoom"], [_toggleFoldDecs, 18, "toggleFold"], [_setShowArrowDecs, 18, "setShowArrow"], [_setEnableWaitingRoomDecs, 18, "setEnableWaitingRoom"], [_kickOutWaitingRoomAllMemberDecs, 18, "kickOutWaitingRoomAllMember"], [_moveToMainRoomAllMemberDecs, 18, "moveToMainRoomAllMember"], [_decorator.bound, 2, "_interceptShareScreen"], [_decorator.bound, 2, "_interceptShareBoard"], [_handleRemoteUsersJoinedDecs, 18, "_handleRemoteUsersJoined"], [_handleRemoteUsersLeftDecs, 18, "_handleRemoteUsersLeft"], [_handleLiveStreamingStateUpdatedDecs, 18, "_handleLiveStreamingStateUpdated"], [_handleChatVisibleDecs, 18, "_handleChatVisible"], [_handlerTraceScreenCaptureStateUpdateDecs, 18, "_handlerTraceScreenCaptureStateUpdate"], [_decorator.bound, 2, "setAllowWaterMark"], [_decorator.bound, 2, "setWaterMarkLineType"], [_decorator.bound, 2, "setAlllowChangeName"], [_decorator.bound, 2, "_onEvent"], [_operateWaitingRoomDecs, 18, "_operateWaitingRoom"], [_handleCloudRecordingStateUpdatedDecs, 18, "_handleCloudRecordingStateUpdated"], [_handleStreamsAddedOrUpdatedDecs, 18, "_handleStreamsAddedOrUpdated"], [_setOutputLanguageDecs, 18, "setOutputLanguage"], [_subscribeLanguageDecs, 18, "subscribeLanguage"], [_subscribeExtraOriginLanguageDecs, 18, "subscribeExtraOriginLanguage"], [_getOfflineUserExistenceStateDecs, 18, "getOfflineUserExistenceState"], [_openWidgetDecs, 18, "openWidget"], [_closeWidgetDecs, 18, "closeWidget"]], []).e, 17);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ActionBarStore, [[_mobx.observable, 1, "newMessageTooltipVisible"], [_mobx.observable, 1, "totalWaitingRoomUser"], [_mobx.observable, 1, "liveStreamingState"], [_mobx.observable, 1, "currentMenuIs"], [_mobx.observable, 1, "cloudRecordingState"], [_mobx.observable, 1, "connectionSettingVisible"], [_mobx.observable, 1, "folded"], [_mobx.observable, 1, "boardOwnerUser"], [_mobx.observable, 1, "hasScreenShare"], [_mobx.observable, 1, "showArrow"], [_mobx.observable, 1, "phoneMicEnabled"], [_mobx.observable, 1, "chatTabIndex"], [_mobx.observable, 1, "popoverOpened"], [_mobx.observable, 1, "stateBarLeaveMeeting"], [_mobx.observable, 1, "hasOfflineUserExistence"], [_mobx.observable, 1, "connectionState"], [_mobx.computed, 3, "checkedStateMap"], [_setCheckedStateMapDecs, 18, "setCheckedStateMap"], [_mobx.computed, 3, "registeredWidgetConfigs"], [_mobx.computed, 3, "asideLayout"], [_mobx.computed, 3, "chatRenderAt"], [_mobx.computed, 3, "participantsRenderAt"], [_mobx.computed, 3, "participantVisible"], [_mobx.computed, 3, "chatVisible"], [_mobx.computed, 3, "hasStartScreenSharePermission"], [_mobx.computed, 3, "hasStopScreenSharePermission"], [_mobx.computed, 3, "sharingOwnerUser"], [_mobx.computed, 3, "hasEnableStartScreenSharePermission"], [_mobx.computed, 3, "hasStartLiveStreamingPermission"], [_mobx.computed, 3, "hasEnableStartAudioPermission"], [_mobx.computed, 3, "hasEnableChangeNamePermission"], [_mobx.computed, 3, "hasEnableStartVideoPermission"], [_mobx.computed, 3, "hasLockRoomPermission"], [_mobx.computed, 3, "hasEnableJoinWithAudioPermission"], [_mobx.computed, 3, "hasWaitingRoomPermission"], [_mobx.computed, 3, "hasWatermarkDisablePermission"], [_mobx.computed, 3, "hasEnableStartSharePermission"], [_mobx.computed, 3, "hasAllowWriteBoardPermission"], [_mobx.computed, 3, "hasCloseWriteBoardPermission"], [_mobx.computed, 3, "hasAllowScreenShareAndBoardPermission"], [_mobx.computed, 3, "hasAllowChatPermission"], [_mobx.computed, 3, "hasStartCloudRecordingPermission"], [_mobx.computed, 3, "hasAssignHostBeforeLeavingPermission"], [_mobx.computed, 3, "hasEndRoomPermission"], [_mobx.computed, 3, "isScreenShareAndBoardEnabled"], [_mobx.computed, 3, "isBoardWriteEnabled"], [_mobx.computed, 3, "isWaterMarkEnabled"], [_mobx.computed, 3, "isMulti"], [_mobx.computed, 3, "hasEnableInterpreterPermission"], [_mobx.computed, 3, "hasDisableInterpreterPermission"], [_mobx.computed, 3, "microphoneEnabled"], [_mobx.computed, 3, "allNewMessage"], [_mobx.computed, 3, "isMainRoom"], [_mobx.computed, 3, "hasAllowChangeNamePromission"], [_mobx.computed, 3, "hasDisallowChangeNamePromission"], [_mobx.computed, 3, "newMessageCount"], [_pauseCloudRecordingDecs, 2, "pauseCloudRecording"], [_resumeCloudRecordingDecs, 2, "resumeCloudRecording"], [_stopCloudRecordingDecs, 2, "stopCloudRecording"], [_decorator.bound, 2, "startCloudRecording"], [_showLockedRoomToastDecs, 18, "showLockedRoomToast"], [_toggleLayoutBarLockDecs, 18, "toggleLayoutBarLock"], [_showNewMessageTooltipDecs, 18, "showNewMessageTooltip"], [_hideNewMessageTooltipDecs, 18, "hideNewMessageTooltip"], [_switchMenuDecs, 18, "switchMenu"], [_mobx.computed, 3, "isLocked"], [_decorator.bound, 2, "isWaitingRoomEnabled"], [_decorator.bound, 2, "isAllowJoinWithAudioEnabled"], [_decorator.bound, 2, "enableMicrophone"], [_decorator.bound, 2, "setAllowWriteBoard"], [_decorator.bound, 2, "setAllowAnnotation"], [_decorator.bound, 2, "setAllowScreenShare"], [_setPopoverOpenedDecs, 18, "setPopoverOpened"], [_setStateBarLeaveMeetingDecs, 18, "setStateBarLeaveMeeting"], [_decorator.bound, 2, "getRoomType"], [_decorator.bound, 2, "allowJoinWithMuteAudio"], [_decorator.bound, 2, "setAllowJoinWithMuteAudio"], [_decorator.bound, 2, "isLockRoomEnabled"], [_decorator.bound, 2, "setLockRoomEnabled"], [_decorator.bound, 2, "setAllowShareScreen"], [_decorator.bound, 2, "allowShareScreen"], [_decorator.bound, 2, "allowWriteBoard"], [_decorator.bound, 2, "allowChat"], [_decorator.bound, 2, "setAllowChat"], [_decorator.bound, 2, "allowUnmuteSelfAudio"], [_decorator.bound, 2, "setAllowUnmuteSelfAudio"], [_decorator.bound, 2, "allowUnmuteSelfVideo"], [_decorator.bound, 2, "setAllowUnmuteSelfVideo"], [_decorator.bound, 2, "allowChangeName"], [_decorator.bound, 2, "toggleChat"], [_decorator.bound, 2, "openChat"], [_decorator.bound, 2, "closeChat"], [_decorator.bound, 2, "toggleParticipants"], [_decorator.bound, 2, "openParticipants"], [_decorator.bound, 2, "closeParticipants"], [_decorator.bound, 2, "openDeviceSettingDialog"], [_decorator.bound, 2, "startScreenShare"], [_decorator.bound, 2, "openInterpreterDialog"], [_decorator.bound, 2, "openWhiteboard"], [_decorator.bound, 2, "closeWhiteboard"], [_decorator.bound, 2, "closeShareScreen"], [_decorator.bound, 2, "openLiveStreamingDialog"], [_decorator.bound, 2, "toggleConnection"], [_decorator.bound, 2, "openConnection"], [_decorator.bound, 2, "closeConnection"], [_handleJoinWaitingRoomDecs, 18, "_handleJoinWaitingRoom"], [_toggleFoldDecs, 18, "toggleFold"], [_setShowArrowDecs, 18, "setShowArrow"], [_setEnableWaitingRoomDecs, 18, "setEnableWaitingRoom"], [_kickOutWaitingRoomAllMemberDecs, 18, "kickOutWaitingRoomAllMember"], [_moveToMainRoomAllMemberDecs, 18, "moveToMainRoomAllMember"], [_decorator.bound, 2, "_interceptShareScreen"], [_decorator.bound, 2, "_interceptShareBoard"], [_handleRemoteUsersJoinedDecs, 18, "_handleRemoteUsersJoined"], [_handleRemoteUsersLeftDecs, 18, "_handleRemoteUsersLeft"], [_handleLiveStreamingStateUpdatedDecs, 18, "_handleLiveStreamingStateUpdated"], [_handleChatVisibleDecs, 18, "_handleChatVisible"], [_handlerTraceScreenCaptureStateUpdateDecs, 18, "_handlerTraceScreenCaptureStateUpdate"], [_decorator.bound, 2, "setAllowWaterMark"], [_decorator.bound, 2, "setWaterMarkLineType"], [_decorator.bound, 2, "setAlllowChangeName"], [_decorator.bound, 2, "_onEvent"], [_operateWaitingRoomDecs, 18, "_operateWaitingRoom"], [_handleCloudRecordingStateUpdatedDecs, 18, "_handleCloudRecordingStateUpdated"], [_handleStreamsAddedOrUpdatedDecs, 18, "_handleStreamsAddedOrUpdated"], [_setOutputLanguageDecs, 18, "setOutputLanguage"], [_subscribeLanguageDecs, 18, "subscribeLanguage"], [_subscribeExtraOriginLanguageDecs, 18, "subscribeExtraOriginLanguage"], [_getOfflineUserExistenceStateDecs, 18, "getOfflineUserExistenceState"], [_openWidgetDecs, 18, "openWidget"], [_closeWidgetDecs, 18, "closeWidget"]], []).e, 17);
 _init_newMessageTooltipVisible = _applyDecs$e[0];
 _init_totalWaitingRoomUser = _applyDecs$e[1];
 _init_liveStreamingState = _applyDecs$e[2];

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

@@ -0,0 +1,48 @@
+.annotation-control-bar {
+  /* position: absolute;
+  top: 0;
+  left: 0; */
+  width: 100%;
+  height: 28px;
+  background-color: var(--fcr_web_ui_scene_fill2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  border-top: 2px solid var(--fcr_web_ui_scene_border1);
+  border-bottom: 4px solid var(--fcr_web_ui_scene_border1);
+  padding: 10px;
+}
+
+.annotation-control-bar-username {
+  margin-right: 10px;
+}
+
+.fcr-annotation-exit-draw-btn {
+  margin-left: 12px;
+}
+
+.fcr-annotation-exit-draw-btn p,
+.fcr-annotation-exit-draw-btn div {
+  min-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.annotation-control-bar-without-exit {
+  margin-left: 12px;
+  width: 20px;
+}
+
+.annotation-toolbar-btn {
+  margin-left: 0px !important;
+  width: 80px !important;
+}
+
+.annotation-toolbar-btn p {
+  width: 80px !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,3 @@
+import './index.css';
+declare const FcrAnnotationControlBar: () => import("react/jsx-runtime").JSX.Element;
+export default FcrAnnotationControlBar;

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

@@ -0,0 +1,101 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+require("./index.css");
+var _store = require("../../store");
+var _fcrCore = require("fcr-core");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _mobxReact = require("mobx-react");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrAnnotationControlBar = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.AnnotationStoreContext),
+    screenShareWindowData = _useContext.screenShareWindowData,
+    zoomIn = _useContext.zoomIn,
+    zoomOut = _useContext.zoomOut,
+    fullContainer = _useContext.fullContainer,
+    setOriginScalc = _useContext.setOriginScalc,
+    allowAnnotationWriteState = _useContext.allowAnnotationWriteState,
+    setToolsShow = _useContext.setToolsShow,
+    isShowToolbar = _useContext.isShowToolbar;
+  var transI18n = (0, _i18n.useI18n)();
+  var isMinimum = false;
+  var isMaxmum = false;
+  var isAdaptived = false;
+  var isOriginal = false;
+  var hasScreenSharing = screenShareWindowData && screenShareWindowData.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN;
+  var hasLoopbackAudioStream = hasScreenSharing && screenShareWindowData.hasLoopbackSharing && screenShareWindowData.hasMicrophoneAudioStream;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "annotation-control-bar",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "whiteboard-controlbar-left",
+      children: screenShareWindowData ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "annotation-control-bar-username",
+          children: [screenShareWindowData.userName, transI18n('fmt_uimanager_labels_sharing')]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: !!hasLoopbackAudioStream ? _type.FcrIconType.FCR_DEVICEAUDIOON : _type.FcrIconType.FCR_DEVICEAUDIOOFF,
+          size: 22,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+          },
+          style: {
+            marginRight: '10px'
+          }
+        })]
+      }) : null
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "whiteboard-controlbar-center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: isMinimum ? transI18n('fmt_screenshare_whiteboard_tips_alreadyminumumsize') : transI18n('fmt_screenshare_whiteboard_button_narrow'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "whiteboard-controlbar-item",
+          onClick: zoomOut,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_ZOOMOUT,
+            size: 22,
+            colors: {
+              iconPrimary: isMinimum ? 'gray' : 'var(--fcr_ui_scene_icontext1)'
+            }
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: isMaxmum ? transI18n('fmt_screenshare_whiteboard_tips_alreadymaximumsize') : transI18n('fmt_screenshare_whiteboard_button_enlarge'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "whiteboard-controlbar-item",
+          onClick: zoomIn,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_ZOOMIN,
+            size: 22,
+            colors: {
+              iconPrimary: isMaxmum ? 'gray' : 'var(--fcr_ui_scene_icontext1)'
+            }
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        content: isOriginal ? transI18n('fmt_screenshare_tips_alreadyoriginalsize') : transI18n('fmt_screenshare_lables_originalsize'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "whiteboard-controlbar-item",
+          onClick: setOriginScalc,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_EQUALRATIO,
+            size: 22,
+            colors: {
+              iconPrimary: isOriginal ? 'gray' : 'var(--fcr_ui_scene_icontext1)'
+            }
+          })
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "whiteboard-controlbar-right"
+    })]
+  });
+});
+var _default = exports["default"] = FcrAnnotationControlBar;

package/lib/modules/annotation/components/toolbar/components/color-tool/color-panel/index.d.ts

@@ -0,0 +1,3 @@
+export declare const AnnotationColorPanel: (props: {
+    onClick: (color: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/annotation/components/toolbar/components/color-tool/color-panel/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnnotationColorPanel = void 0;
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _item = require("../../item/item");
+var _panel = require("../../panel");
+var _mobxReact = require("mobx-react");
+var _store = require("../../../store");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationColorPanel = exports.AnnotationColorPanel = (0, _mobxReact.observer)(function (props) {
+  var onClick = props.onClick;
+  var _useContext = (0, _react.useContext)(_store.AnnotationToolbarContext),
+    _useContext$observabl = _useContext.observables,
+    colors = _useContext$observabl.colors,
+    currentColor = _useContext$observabl.currentColor;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {
+    header: colors.map(function (color, index) {
+      return index < colors.length / 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        active: currentColor === color,
+        iconType: _type.FcrIconType.FCR_COLOR,
+        color: color,
+        lineColor: currentColor === color ? color : 'transparent',
+        onClick: onClick,
+        selected: currentColor === color
+      }, color);
+    }),
+    footer: colors.map(function (color, index) {
+      return index >= colors.length / 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        active: currentColor === color,
+        iconType: _type.FcrIconType.FCR_COLOR,
+        color: color,
+        lineColor: currentColor === color ? color : 'transparent',
+        onClick: onClick,
+        selected: currentColor === color
+      }, color);
+    })
+  });
+});

package/lib/modules/annotation/components/toolbar/components/color-tool/index.d.ts

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

package/lib/modules/annotation/components/toolbar/components/color-tool/index.js

@@ -0,0 +1,52 @@
+"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.AnnotationColorTool = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _item = require("../item/item");
+var _colorPanel = require("./color-panel");
+var _mobxReact = require("mobx-react");
+var _store = require("../../store");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationColorTool = exports.AnnotationColorTool = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.AnnotationToolbarContext),
+    currentColor = _useContext.observables.currentColor,
+    setStrokeColor = _useContext.setStrokeColor,
+    popoverVisible = _useContext.popoverVisible,
+    setPopoverVisible = _useContext.setPopoverVisible;
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var handleClick = function handleClick(color) {
+    setStrokeColor(color);
+    setVisible(!visible);
+    setPopoverVisible(!visible);
+  };
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    setVisible(visible);
+    setPopoverVisible(visible);
+  };
+  (0, _react.useEffect)(function () {
+    !popoverVisible && setVisible(false);
+  }, [popoverVisible]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    iconType: _type.FcrIconType.FCR_COLOR,
+    color: currentColor,
+    title: t('fmt_whiteboard_labels_colour'),
+    lineColor: "transparent",
+    visible: visible && popoverVisible,
+    onVisibleChange: handleVisibleChange,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorPanel.AnnotationColorPanel, {
+      onClick: handleClick
+    })
+  });
+});

package/lib/modules/annotation/components/toolbar/components/graphic-tool/graphic-panel/index.d.ts

@@ -0,0 +1,3 @@
+export declare const AnnotationGraphicPanel: (props: {
+    onClick: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/annotation/components/toolbar/components/graphic-tool/graphic-panel/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnnotationGraphicPanel = void 0;
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _item = require("../../item/item");
+var _panel = require("../../panel");
+var _mobxReact = require("mobx-react");
+var _store = require("../../../store");
+var _react = require("react");
+var _libs = require("./libs");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationGraphicPanel = exports.AnnotationGraphicPanel = (0, _mobxReact.observer)(function (props) {
+  var _useContext = (0, _react.useContext)(_store.AnnotationToolbarContext),
+    _useContext$observabl = _useContext.observables,
+    currentShape = _useContext$observabl.currentShape,
+    currentStrokeWidth = _useContext$observabl.currentStrokeWidth,
+    setShape = _useContext.setShape,
+    setTool = _useContext.setTool,
+    setStrokeWidth = _useContext.setStrokeWidth;
+  var onClick = props.onClick;
+  var handleShapeClick = function handleShapeClick(shape) {
+    return function () {
+      // onClick();
+      setShape(shape);
+      setTool((0, _libs.convertShapeToBoardToolType)(shape));
+    };
+  };
+  var handleLineWidthClick = function handleLineWidthClick(lineWidth) {
+    return function () {
+      // onClick();
+      setStrokeWidth(lineWidth);
+    };
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {
+    header: _libs.tools.map(function (tool) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        onClick: handleShapeClick(tool.shape),
+        active: currentShape === tool.shape,
+        iconType: tool.iconType
+      }, tool.shape);
+    }),
+    footer: _libs.lineWidths.map(function (_ref, index) {
+      var iconType = _ref.iconType,
+        width = _ref.width;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        onClick: handleLineWidthClick(width),
+        active: currentStrokeWidth === width,
+        iconType: iconType,
+        level: index + 1
+      }, width);
+    })
+  });
+});

package/lib/modules/annotation/components/toolbar/components/graphic-tool/graphic-panel/libs.d.ts

@@ -0,0 +1,11 @@
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrBoardShape, FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+export declare const tools: {
+    iconType: FcrIconType;
+    shape: FcrBoardShape;
+}[];
+export declare const lineWidths: {
+    iconType: FcrIconType;
+    width: number;
+}[];
+export declare function convertShapeToBoardToolType(shape: FcrBoardShape): FcrBoardToolType;

package/lib/modules/annotation/components/toolbar/components/graphic-tool/graphic-panel/libs.js

@@ -0,0 +1,59 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertShapeToBoardToolType = convertShapeToBoardToolType;
+exports.tools = exports.lineWidths = void 0;
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var tools = exports.tools = [{
+  iconType: _type.FcrIconType.FCR_WHITEBOARD_SHAP_SQUARE,
+  shape: _enums.FcrBoardShape.Rectangle
+}, {
+  iconType: _type.FcrIconType.FCR_WHITEBOARD_SHAP_CIRCLE,
+  shape: _enums.FcrBoardShape.Ellipse
+}, {
+  iconType: _type.FcrIconType.FCR_WHITEBOARD_SHAP_TRIANGLE,
+  shape: _enums.FcrBoardShape.Triangle
+}, {
+  iconType: _type.FcrIconType.FCR_WHITEBOARD_SHAP_LINE,
+  shape: _enums.FcrBoardShape.Straight
+}, {
+  iconType: _type.FcrIconType.FCR_WHITEBOARD_SHAP_ARROW,
+  shape: _enums.FcrBoardShape.Arrow
+}];
+var lineWidths = exports.lineWidths = [{
+  iconType: _type.FcrIconType.FCR_PENSIZE,
+  width: 2
+}, {
+  iconType: _type.FcrIconType.FCR_PENSIZE,
+  width: 4
+}, {
+  iconType: _type.FcrIconType.FCR_PENSIZE,
+  width: 5
+}, {
+  iconType: _type.FcrIconType.FCR_PENSIZE,
+  width: 6
+}];
+function convertShapeToBoardToolType(shape) {
+  switch (shape) {
+    case _enums.FcrBoardShape.Arrow:
+      return _enums.FcrBoardToolType.ARROW;
+    case _enums.FcrBoardShape.Curve:
+      return _enums.FcrBoardToolType.CURVE;
+    case _enums.FcrBoardShape.Ellipse:
+      return _enums.FcrBoardToolType.ELLIPSE;
+    case _enums.FcrBoardShape.Pentagram:
+      return _enums.FcrBoardToolType.PENTAGRAM;
+    case _enums.FcrBoardShape.Rectangle:
+      return _enums.FcrBoardToolType.RECTANGLE;
+    case _enums.FcrBoardShape.Straight:
+      return _enums.FcrBoardToolType.STRAIGHT;
+    case _enums.FcrBoardShape.Triangle:
+      return _enums.FcrBoardToolType.TRIANGLE;
+    default:
+      return _enums.FcrBoardToolType.NONE;
+  }
+}

package/lib/modules/annotation/components/toolbar/components/graphic-tool/index.d.ts

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

package/lib/modules/annotation/components/toolbar/components/graphic-tool/index.js

@@ -0,0 +1,68 @@
+"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.AnnotationGraphicTool = void 0;
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.some.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.async-iterator.some.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.some.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _item = require("../item/item");
+var _graphicPanel = require("./graphic-panel");
+var _mobxReact = require("mobx-react");
+var _store = require("../../store");
+var _react = require("react");
+var _libs = require("./graphic-panel/libs");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationGraphicTool = exports.AnnotationGraphicTool = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.AnnotationToolbarContext),
+    _useContext$observabl = _useContext.observables,
+    currentColor = _useContext$observabl.currentColor,
+    currentShape = _useContext$observabl.currentShape,
+    currentTool = _useContext$observabl.currentTool,
+    setTool = _useContext.setTool,
+    popoverVisible = _useContext.popoverVisible,
+    setPopoverVisible = _useContext.setPopoverVisible;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var t = (0, _i18n.useI18n)();
+  var handleClick = function handleClick() {
+    setVisible(!visible);
+    setPopoverVisible(!visible);
+    setTool((0, _libs.convertShapeToBoardToolType)(currentShape));
+  };
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    setVisible(visible);
+    setPopoverVisible(visible);
+  };
+  (0, _react.useEffect)(function () {
+    !popoverVisible && setVisible(false);
+  }, [popoverVisible]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    active: _libs.tools.some(function (tool) {
+      return (0, _libs.convertShapeToBoardToolType)(tool.shape) === currentTool;
+    }),
+    iconType: _libs.tools.find(function (tool) {
+      return tool.shape === currentShape;
+    }).iconType,
+    title: t('fmt_screenshare_whiteboard_button_shape'),
+    color: currentColor,
+    visible: visible && popoverVisible,
+    onVisibleChange: handleVisibleChange,
+    onClick: handleClick,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphicPanel.AnnotationGraphicPanel, {
+      onClick: handleClick
+    })
+  });
+});

package/lib/modules/annotation/components/toolbar/components/item/item.d.ts

@@ -0,0 +1,17 @@
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import './style.css';
+export declare const AnnotationToolItem: (props: {
+    iconType: FcrIconType;
+    title?: string;
+    size?: number;
+    active?: boolean;
+    content?: React.ReactNode;
+    color?: string;
+    disabled?: boolean;
+    lineColor?: string;
+    onClick?: (value: string) => void;
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    level?: number;
+    selected?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;