fcr-ui-scene 3.7.2 → 3.7.4-rc.1

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

@@ -26,8 +26,6 @@ var MemberWindowActions = exports.MemberWindowActions = function MemberWindowAct
     allowedOperations = _ref.allowedOperations,
     setVideoOrientation = _ref.setVideoOrientation,
     showActionBottomLabel = _ref.showActionBottomLabel,
-    isShowActionAudio = _ref.isShowActionAudio,
-    actionAudioTag = _ref.actionAudioTag,
     onVisibleChanged = _ref.onVisibleChanged,
     videoWindowCurrentWidth = _ref.videoWindowCurrentWidth,
     videoWindowCurrentHeight = _ref.videoWindowCurrentHeight,
@@ -39,7 +37,13 @@ var MemberWindowActions = exports.MemberWindowActions = function MemberWindowAct
     handleRename = _ref.handleRename,
     renderListLength = _ref.renderListLength,
     id = _ref.id,
-    volume = _ref.volume;
+    volume = _ref.volume,
+    _ref$isLocalCameraInS = _ref.isLocalCameraInSecondaryWindow,
+    isLocalCameraInSecondaryWindow = _ref$isLocalCameraInS === void 0 ? false : _ref$isLocalCameraInS,
+    deviceMicrophoneEnabled = _ref.deviceMicrophoneEnabled,
+    hasMutePermission = _ref.hasMutePermission,
+    hasUnmutePermission = _ref.hasUnmutePermission,
+    hasRequestStartAudioPermission = _ref.hasRequestStartAudioPermission;
   var audioStreamConnectorType = windowData.audioStreamConnectorType,
     videoStreamConnectorType = windowData.videoStreamConnectorType,
     hasMicrophoneAudioStream = windowData.hasMicrophoneAudioStream,
@@ -58,6 +62,7 @@ var MemberWindowActions = exports.MemberWindowActions = function MemberWindowAct
     videoWindowCurrentHeight: videoWindowCurrentHeight,
     videoWindowPreviewType: videoWindowPreviewType,
     renderListLength: renderListLength,
+    deviceMicrophoneEnabled: deviceMicrophoneEnabled,
     children: function children(store) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.MemberActionsLayout, {
         onContextMenu: function onContextMenu() {
@@ -71,11 +76,13 @@ var MemberWindowActions = exports.MemberWindowActions = function MemberWindowAct
           windowSize: windowSize
         }),
         topSlot: !store.isSharingWindow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_moreActions.MoreActions, {
-          isShowActionAudio: isShowActionAudio,
-          actionAudioTag: actionAudioTag,
           hasPinnedStream: hasPinnedStream,
           allowedOperations: allowedOperations,
-          hideAudioConnectIcon: false
+          hideAudioConnectIcon: false,
+          isLocalCameraInSecondaryWindow: isLocalCameraInSecondaryWindow,
+          hasMutePermission: hasMutePermission,
+          hasUnmutePermission: hasUnmutePermission,
+          hasRequestStartAudioPermission: hasRequestStartAudioPermission
         }),
         bottomSlot: /*#__PURE__*/(0, _jsxRuntime.jsx)(_userInfo.UserInfo, {
           iconSize: iconSize,

package/lib/modules/components/member-window/components/member-actions/provider.d.ts

@@ -16,6 +16,7 @@ export interface MemberWindowActionsProviderProps {
     videoWindowPreviewType?: FcrVideoWindowPreviewType;
     renderListLength?: number;
     children: React.ReactNode | ((store: MemberWindowActionsStore) => React.ReactNode);
+    deviceMicrophoneEnabled: boolean;
 }
 export declare const MemberWindowActionsProvider: FC<MemberWindowActionsProviderProps>;
 export declare const useMemberWindowActionsStore: () => MemberWindowActionsStore;

package/lib/modules/components/member-window/components/member-actions/provider.js

@@ -33,15 +33,16 @@ var MemberWindowActionsProvider = exports.MemberWindowActionsProvider = function
     handleRename = _ref.handleRename,
     onVisibleChanged = _ref.onVisibleChanged,
     interpreterUserList = _ref.interpreterUserList,
-    isInterpreterEnabled = _ref.isInterpreterEnabled;
+    isInterpreterEnabled = _ref.isInterpreterEnabled,
+    deviceMicrophoneEnabled = _ref.deviceMicrophoneEnabled;
   var focus = (0, _hooks.useWindowFocus)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isOnlyShowVideoStream = _useState2[0],
     setIsOnlyShowVideoStream = _useState2[1];
   var store = (0, _react.useMemo)(function () {
-    return new _store.MemberWindowActionsStore(windowData, sendParticipantEvent, muteAudio, handleRename, onVisibleChanged, interpreterUserList, isInterpreterEnabled);
-  }, [windowData, sendParticipantEvent, muteAudio, handleRename, onVisibleChanged, interpreterUserList, isInterpreterEnabled]);
+    return new _store.MemberWindowActionsStore(windowData, sendParticipantEvent, muteAudio, handleRename, deviceMicrophoneEnabled, onVisibleChanged, interpreterUserList, isInterpreterEnabled);
+  }, [windowData, sendParticipantEvent, muteAudio, handleRename, deviceMicrophoneEnabled, onVisibleChanged, interpreterUserList, isInterpreterEnabled]);
   (0, _react.useEffect)(function () {
     store.setOnlyShowVideoStream(isOnlyShowVideoStream);
   }, [store, isOnlyShowVideoStream]);

package/lib/modules/components/member-window/components/member-actions/store.d.ts

@@ -6,6 +6,7 @@ export declare class MemberWindowActionsStore {
     private _sendParticipantEvent;
     private _muteAudio;
     private _handleRename;
+    private _deviceMicrophoneEnabled;
     private _onVisibleChanged?;
     private _interpreterUsers?;
     private _interpreterState?;
@@ -13,7 +14,7 @@ export declare class MemberWindowActionsStore {
     accessor isShowDropMenu: boolean;
     accessor timerRef: NodeJS.Timeout | undefined;
     accessor interpreterUser: FcrInterpreterUserInfo | null;
-    constructor(_windowData: FcrUIVideoWindowData, _sendParticipantEvent: (event: any) => void, _muteAudio: (mute: boolean, userId: string) => void, _handleRename: (userId: string) => void, _onVisibleChanged?: ((visible: boolean) => void) | undefined, _interpreterUsers?: FcrInterpreterUserInfo[] | null | undefined, _interpreterState?: boolean | undefined);
+    constructor(_windowData: FcrUIVideoWindowData, _sendParticipantEvent: (event: any) => void, _muteAudio: (mute: boolean, userId: string) => void, _handleRename: (userId: string) => void, _deviceMicrophoneEnabled: boolean, _onVisibleChanged?: ((visible: boolean) => void) | undefined, _interpreterUsers?: FcrInterpreterUserInfo[] | null | undefined, _interpreterState?: boolean | undefined);
     get windowData(): FcrUIVideoWindowData;
     get userId(): string;
     get userName(): string;

package/lib/modules/components/member-window/components/member-actions/store.js

@@ -96,7 +96,7 @@ var _C = /*#__PURE__*/new WeakMap();
 var _D = /*#__PURE__*/new WeakMap();
 _ref = (_setOnlyShowVideoStreamDecs = [_mobx.action, _mobx.action.bound], _setIsShowDropMenuDecs = [_mobx.action, _mobx.action.bound], _onVisibleChangeDecs = [_mobx.action, _mobx.action.bound], "isOnlyShowVideoStream");
 var MemberWindowActionsStore = exports.MemberWindowActionsStore = /*#__PURE__*/function () {
-  function MemberWindowActionsStore(_windowData, _sendParticipantEvent, _muteAudio, _handleRename, _onVisibleChanged, _interpreterUsers, _interpreterState) {
+  function MemberWindowActionsStore(_windowData, _sendParticipantEvent, _muteAudio, _handleRename, _deviceMicrophoneEnabled, _onVisibleChanged, _interpreterUsers, _interpreterState) {
     (0, _classCallCheck2["default"])(this, MemberWindowActionsStore);
     _classPrivateFieldInitSpec(this, _A, (_initProto(this), _init_isOnlyShowVideoStream(this, false)));
     _classPrivateFieldInitSpec(this, _B, _init_isShowDropMenu(this, false));
@@ -106,6 +106,7 @@ var MemberWindowActionsStore = exports.MemberWindowActionsStore = /*#__PURE__*/f
     this._sendParticipantEvent = _sendParticipantEvent;
     this._muteAudio = _muteAudio;
     this._handleRename = _handleRename;
+    this._deviceMicrophoneEnabled = _deviceMicrophoneEnabled;
     this._onVisibleChanged = _onVisibleChanged;
     this._interpreterUsers = _interpreterUsers;
     this._interpreterState = _interpreterState;
@@ -235,6 +236,9 @@ var MemberWindowActionsStore = exports.MemberWindowActionsStore = /*#__PURE__*/f
     key: "hasMicrophoneAudioStream",
     get: function get() {
       var _this$_windowData0;
+      if (this.isMySelf && this.connectorType === _fcrCore.FcrRoomConnectorType.NONE) {
+        return this._deviceMicrophoneEnabled;
+      }
       return (_this$_windowData0 = this._windowData) === null || _this$_windowData0 === void 0 ? void 0 : _this$_windowData0.hasMicrophoneAudioStream;
     }
   }, {

package/lib/modules/components/member-window/components/video-player/components/local-video-player-with-zoom.d.ts

@@ -1,7 +1,7 @@
-import { AgoraRtcRenderMode } from 'fcr-core/lib/imports';
+import { FcrVideoRenderMode } from 'fcr-core/lib/type';
 import { FcrVideoSourceType } from 'fcr-core';
-export declare const FcrUILocalVideoPlayerWithZoom: (props: {
-    renderMode: AgoraRtcRenderMode;
+type FcrUILocalVideoPlayerProps = {
+    renderMode: FcrVideoRenderMode;
     hasScreenSharing: boolean;
     videoSourceType: FcrVideoSourceType;
     scalcValue: number;
@@ -9,4 +9,6 @@ export declare const FcrUILocalVideoPlayerWithZoom: (props: {
     minScale?: number;
     maxScale?: number;
     onScaleChange?: (scale: number) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const FcrUILocalVideoPlayerWithZoom: React.FC<FcrUILocalVideoPlayerProps>;
+export {};

package/lib/modules/components/member-window/components/video-player/components/local-video-player-with-zoom.js

@@ -11,58 +11,91 @@ var _videoTrackRenderContext = require("../../../../../../utilities/video-track-
 var _fcrCore = require("fcr-core");
 var _zoomableContainer = require("./zoomable-container");
 var _jsxRuntime = require("react/jsx-runtime");
-var FcrUILocalVideoPlayerWithZoom = exports.FcrUILocalVideoPlayerWithZoom = (0, _mobxReact.observer)(function (props) {
-  var renderMode = props.renderMode,
-    hasScreenSharing = props.hasScreenSharing,
-    videoSourceType = props.videoSourceType,
-    scalcValue = props.scalcValue,
-    _props$enableZoom = props.enableZoom,
-    enableZoom = _props$enableZoom === void 0 ? true : _props$enableZoom,
-    _props$minScale = props.minScale,
-    minScale = _props$minScale === void 0 ? 1 : _props$minScale,
-    _props$maxScale = props.maxScale,
-    maxScale = _props$maxScale === void 0 ? 4 : _props$maxScale,
-    onScaleChange = props.onScaleChange;
-
-  // const renderScalcVal = hasScreenSharing ? scalcValue : 1;
+var FcrUILocalCameraVideoPlayer = (0, _mobxReact.observer)(function (props) {
+  var renderMode = props.renderMode;
   var divRef = (0, _react.useRef)(null);
+  var isPreviewingRef = (0, _react.useRef)(false);
   var context = (0, _react.useContext)(_videoTrackRenderContext.FcrVideoTrackRenderContext);
-  var _ref = context.localVideoRenderProvider || {},
-    cameraEnabled = _ref.cameraEnabled,
-    cameraId = _ref.cameraId,
-    startCameraPreview = _ref.startCameraPreview,
-    stopCameraPreview = _ref.stopCameraPreview,
-    startScreenPreview = _ref.startScreenPreview,
-    stopScreenPreview = _ref.stopScreenPreview,
-    currentMirror = _ref.currentMirror;
+  var _context$localVideoRe = context.localVideoRenderProvider,
+    cameraEnabled = _context$localVideoRe.cameraEnabled,
+    cameraId = _context$localVideoRe.cameraId,
+    startCameraPreview = _context$localVideoRe.startCameraPreview,
+    stopCameraPreview = _context$localVideoRe.stopCameraPreview,
+    currentMirror = _context$localVideoRe.currentMirror;
   (0, _react.useEffect)(function () {
     var dom = divRef.current;
-    if (dom) {
-      if (hasScreenSharing && videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN) {
-        startScreenPreview(dom, {
-          renderMode: renderMode
-        });
-      } else if (cameraEnabled) {
-        startCameraPreview === null || startCameraPreview === void 0 || startCameraPreview(dom, {
-          renderMode: renderMode,
-          isMirror: currentMirror
-        });
+    if (dom && cameraEnabled) {
+      isPreviewingRef.current = true;
+      startCameraPreview(dom, {
+        renderMode: renderMode,
+        isMirror: currentMirror
+      });
+    }
+    return function () {
+      // 开启摄像头时 cameraEnabled 变为 true 后，会先触发一遍 useEffect cleanup
+      // 所以需要加一个 isPreviewing 的状态，来避免开启摄像头时先调用一遍 stopCameraPreview
+      if (dom && isPreviewingRef.current) {
+        isPreviewingRef.current = false;
+        stopCameraPreview(dom);
       }
+    };
+  }, [cameraEnabled, cameraId, currentMirror]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-member-window-body fcr-member-window-body-video",
+    ref: divRef
+  });
+});
+var FcrUILocalScreenVideoPlayer = function FcrUILocalScreenVideoPlayer(props) {
+  var renderMode = props.renderMode;
+  var divRef = (0, _react.useRef)(null);
+  var context = (0, _react.useContext)(_videoTrackRenderContext.FcrVideoTrackRenderContext);
+  var _context$localVideoRe2 = context.localVideoRenderProvider,
+    startScreenPreview = _context$localVideoRe2.startScreenPreview,
+    stopScreenPreview = _context$localVideoRe2.stopScreenPreview;
+  (0, _react.useEffect)(function () {
+    var dom = divRef.current;
+    if (dom) {
+      startScreenPreview(dom, {
+        renderMode: renderMode
+      });
     }
     return function () {
       if (dom) {
-        stopScreenPreview === null || stopScreenPreview === void 0 || stopScreenPreview(dom);
-        stopCameraPreview === null || stopCameraPreview === void 0 || stopCameraPreview(dom);
+        stopScreenPreview(dom);
       }
     };
-  }, [cameraEnabled, cameraId, startCameraPreview, stopCameraPreview, currentMirror, enableZoom]);
-  var videoContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "fcr-member-window-body",
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-member-window-body fcr-member-window-body-screen",
     ref: divRef
-    // style={{ transform: `scale(${renderScalcVal})` }}
   });
+};
+var FcrUILocalVideoPlayer = function FcrUILocalVideoPlayer(props) {
+  var videoSourceType = props.videoSourceType,
+    renderMode = props.renderMode;
+  return videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN ? /*#__PURE__*/(0, _jsxRuntime.jsx)(FcrUILocalScreenVideoPlayer, {
+    renderMode: renderMode
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(FcrUILocalCameraVideoPlayer, {
+    renderMode: renderMode
+  });
+};
+var FcrUILocalVideoPlayerWithZoom = exports.FcrUILocalVideoPlayerWithZoom = function FcrUILocalVideoPlayerWithZoom(props) {
+  var renderMode = props.renderMode,
+    hasScreenSharing = props.hasScreenSharing,
+    videoSourceType = props.videoSourceType,
+    scalcValue = props.scalcValue,
+    _props$enableZoom = props.enableZoom,
+    enableZoom = _props$enableZoom === void 0 ? true : _props$enableZoom,
+    _props$minScale = props.minScale,
+    minScale = _props$minScale === void 0 ? 1 : _props$minScale,
+    _props$maxScale = props.maxScale,
+    maxScale = _props$maxScale === void 0 ? 4 : _props$maxScale,
+    onScaleChange = props.onScaleChange;
   if (!enableZoom) {
-    return videoContent;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(FcrUILocalVideoPlayer, {
+      videoSourceType: videoSourceType,
+      renderMode: renderMode
+    });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_zoomableContainer.ZoomableContainer, {
     className: "fcr-local-video-zoomable-container",
@@ -70,6 +103,9 @@ var FcrUILocalVideoPlayerWithZoom = exports.FcrUILocalVideoPlayerWithZoom = (0,
     maxScale: maxScale,
     initialScale: scalcValue,
     onScaleChange: onScaleChange,
-    children: videoContent
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FcrUILocalVideoPlayer, {
+      videoSourceType: videoSourceType,
+      renderMode: renderMode
+    })
   });
-});
+};

package/lib/modules/components/member-window/components/video-player/components/remote-video-player-with-zoom.d.ts

@@ -1,9 +1,9 @@
-import { AgoraRtcRenderMode, AgoraRtcVideoStreamType } from 'fcr-core/lib/imports';
+import { FcrVideoRenderMode, FcrVideoStreamType } from 'fcr-core/lib/type';
 export declare const FcrUIRemoteVideoPlayerWithZoom: ({ streamId, hasVideoStream, videoStreamType, renderMode, scalcValue, enableZoom, minScale, maxScale, onScaleChange, }: {
     streamId: string;
     hasVideoStream: boolean;
-    videoStreamType: AgoraRtcVideoStreamType;
-    renderMode: AgoraRtcRenderMode;
+    videoStreamType: FcrVideoStreamType;
+    renderMode: FcrVideoRenderMode;
     scalcValue: number;
     enableZoom: boolean;
     minScale?: number;

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

@@ -1,12 +1,12 @@
-import { AgoraRtcRenderMode, AgoraRtcVideoStreamType } from 'fcr-core/lib/imports';
+import { FcrVideoRenderMode, FcrVideoStreamType } from 'fcr-core/lib/type';
 import { FcrVideoSourceType } from 'fcr-core';
 export declare const FcrUIVideoPlayer: (props: {
     isLocal: boolean;
     streamId: string;
     hasVideoStream: boolean;
-    videoStreamType: AgoraRtcVideoStreamType;
+    videoStreamType: FcrVideoStreamType;
     videoSourceType: FcrVideoSourceType;
-    renderMode: AgoraRtcRenderMode;
+    renderMode: FcrVideoRenderMode;
     hasScreenSharing: boolean;
     scalcValue: number;
     onScaleChange: (scale: number) => void;

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

@@ -15,6 +15,10 @@
   z-index: 0;
 }
 
+.fcr-member-window-with-share-controlbar .fcr-member-window {
+  height: calc(100% - 28px);
+}
+
 .fcr-member-window button,
 .fcr-member-board button {
   border: none;

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

@@ -1,7 +1,8 @@
-import { AgoraRtcRenderMode, AgoraRtcVideoStreamType } from 'fcr-core/lib/imports';
+import { FcrVideoRenderMode, FcrVideoStreamType } from 'fcr-core/lib/type';
 import { FcrUIVideoWindowData, FcrUserRole } from '../../../type';
 import { FcrVideoWindowPreviewType } from '../../video-window/type';
 import { FcrInterpreterUserInfo } from 'fcr-core/lib/room-control/interpreter-control/types';
+import { FcrPrivilegeUserRole } from 'fcr-core';
 export interface MemberWindowCustomProps {
     showAvatar: boolean;
     onDoubleClick?: () => void;
@@ -12,8 +13,8 @@ export interface MemberWindowCustomProps {
     height?: number;
     canShowSpeakerSpotlight: boolean;
     memberWindowPreviewType?: 'gallery' | 'carousel' | 'suspend';
-    videoRenderMode: AgoraRtcRenderMode;
-    videoStreamType: AgoraRtcVideoStreamType;
+    videoRenderMode: FcrVideoRenderMode;
+    videoStreamType: FcrVideoStreamType;
     isVideoSuspended: boolean;
 }
 export interface MemberWindowProps extends MemberWindowCustomProps {
@@ -60,8 +61,6 @@ export interface MemberWindowActionsProps {
     allowedOperations: string[];
     setVideoOrientation: () => void;
     showActionBottomLabel: boolean;
-    isShowActionAudio: boolean;
-    actionAudioTag: string;
     onVisibleChanged?: (visible: boolean) => void;
     videoWindowCurrentWidth?: number;
     videoWindowCurrentHeight?: number;
@@ -73,6 +72,11 @@ export interface MemberWindowActionsProps {
     renderListLength?: number;
     id: string | undefined;
     volume: number;
+    isLocalCameraInSecondaryWindow?: boolean;
+    deviceMicrophoneEnabled: boolean;
+    hasMutePermission: (targetRole: FcrUserRole | FcrPrivilegeUserRole) => boolean;
+    hasUnmutePermission: (targetRole: FcrUserRole | FcrPrivilegeUserRole) => boolean;
+    hasRequestStartAudioPermission: (targetRole: FcrUserRole | FcrPrivilegeUserRole) => boolean;
 }
 export type MemberWindowSlots = {
     topLeft?: React.ReactNode;

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

@@ -0,0 +1,9 @@
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+export declare const AnnotationCaptureTool: (props: {
+    popoverVisible?: boolean;
+    placement: ToolTipProps["placement"];
+    size?: number;
+    hideTitle?: boolean;
+    direction?: "horizontal" | "vertical";
+    setPopoverVisible?: (visible: boolean) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/toolbar/components/capture-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.AnnotationCaptureTool = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _item = require("../item");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _panel = require("../panel");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationCaptureTool = exports.AnnotationCaptureTool = function AnnotationCaptureTool(props) {
+  var t = (0, _i18n.useI18n)();
+  var size = props.size,
+    hideTitle = props.hideTitle,
+    popoverVisible = props.popoverVisible,
+    placement = props.placement,
+    direction = props.direction,
+    setPopoverVisible = props.setPopoverVisible;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    setVisible(visible);
+    setPopoverVisible === null || setPopoverVisible === void 0 || setPopoverVisible(visible);
+  };
+  var handleScreenshotClick = function handleScreenshotClick(hideWindow) {
+    return function () {
+      (window.parent.runtime || window.runtime).captureScreen({
+        hideWindow: hideWindow
+      });
+      handleVisibleChange(false);
+    };
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    placement: placement,
+    size: size,
+    hideTitle: hideTitle,
+    iconType: _type.FcrIconType.FCR_WHITEBOARD_SLICE,
+    title: t('fmt_screenshare_whiteboard_button_cutting'),
+    lineColor: "transparent",
+    visible: visible && popoverVisible,
+    onVisibleChange: handleVisibleChange,
+    showArrow: true,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {
+      direction: direction,
+      size: "small",
+      header: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: size,
+        onClick: handleScreenshotClick(false),
+        iconType: _type.FcrIconType.FCR_WHITEBOARD_SLICE,
+        title: t('fmt_screenshare_whiteboard_button_screenshot'),
+        hideTitle: true
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: size,
+        onClick: handleScreenshotClick(true),
+        iconType: _type.FcrIconType.FCR_WIHITEBOARD_SLICEWITHOUTCLASSROOM,
+        title: t('fmt_screenshare_whiteboard_options_hideshot'),
+        hideTitle: true
+      })]
+    })
+  });
+};

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

@@ -0,0 +1,11 @@
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+import { FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+export declare const AnnotationCleanTool: (props: {
+    currentTool: FcrBoardToolType;
+    placement: ToolTipProps["placement"];
+    size?: number;
+    hideTitle?: boolean;
+    direction?: "horizontal" | "vertical";
+    setTool: (tool: FcrBoardToolType) => void;
+    clean: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/toolbar/components/clean-tool/index.js

@@ -0,0 +1,71 @@
+"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.AnnotationCleanTool = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _item = require("../item");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _panel = require("../panel");
+var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationCleanTool = exports.AnnotationCleanTool = function AnnotationCleanTool(props) {
+  var t = (0, _i18n.useI18n)();
+  var size = props.size,
+    hideTitle = props.hideTitle,
+    currentTool = props.currentTool,
+    placement = props.placement,
+    direction = props.direction,
+    setTool = props.setTool,
+    clean = props.clean;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    setVisible(visible);
+  };
+  var handleEraserClick = function handleEraserClick() {
+    setTool(_enums.FcrBoardToolType.ERASER);
+    handleVisibleChange(false);
+  };
+  var handleEmptyClick = function handleEmptyClick() {
+    clean();
+    handleVisibleChange(false);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    placement: placement,
+    size: size,
+    hideTitle: hideTitle,
+    active: currentTool === _enums.FcrBoardToolType.ERASER,
+    iconType: _type.FcrIconType.FCR_WHITEBOARD_ERASER,
+    title: t('fmt_screenshare_whiteboard_button_eraser'),
+    lineColor: "transparent",
+    visible: visible,
+    onVisibleChange: handleVisibleChange,
+    showArrow: true,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {
+      direction: direction,
+      size: "small",
+      header: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: size,
+        active: currentTool === _enums.FcrBoardToolType.ERASER,
+        onClick: handleEraserClick,
+        iconType: _type.FcrIconType.FCR_WHITEBOARD_ERASER,
+        title: t('fmt_screenshare_whiteboard_button_eraser'),
+        hideTitle: true
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: size,
+        onClick: handleEmptyClick,
+        iconType: _type.FcrIconType.FCR_WHITEBOARD_ELIMINATE,
+        title: t('fmt_screenshare_whiteboard_button_empty'),
+        hideTitle: true
+      })]
+    })
+  });
+};

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

@@ -0,0 +1,11 @@
+export declare const AnnotationColorPanel: (props: {
+    size?: number;
+    hideTitle?: boolean;
+    colors: string[];
+    currentColor: string;
+    onClick: (color: string) => void;
+    direction?: "horizontal" | "vertical";
+    commonColors?: string[];
+    contextMenu?: React.ReactNode;
+    onContextMenuClick?: (color: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,77 @@
+"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.includes.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _item = require("../../item");
+var _panel = require("../../panel");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationColorPanel = exports.AnnotationColorPanel = function AnnotationColorPanel(props) {
+  var size = props.size,
+    hideTitle = props.hideTitle,
+    colors = props.colors,
+    currentColor = props.currentColor,
+    onClick = props.onClick,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+    commonColors = props.commonColors,
+    contextMenu = props.contextMenu,
+    onContextMenuClick = props.onContextMenuClick;
+  var transI18n = (0, _i18n.useI18n)();
+  return !contextMenu ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {
+    type: "color",
+    direction: direction,
+    header: colors.map(function (color, index) {
+      return index < colors.length / 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: size,
+        active: currentColor === color,
+        iconType: _type.FcrIconType.FCR_COLOR,
+        color: color,
+        lineColor: currentColor === color ? color : 'transparent',
+        onClick: onClick,
+        selected: currentColor === color,
+        hideTitle: hideTitle
+      }, color);
+    }),
+    footer: colors.map(function (color, index) {
+      return index >= colors.length / 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: size,
+        active: currentColor === color,
+        iconType: _type.FcrIconType.FCR_COLOR,
+        color: color,
+        lineColor: currentColor === color ? color : 'transparent',
+        onClick: onClick,
+        selected: currentColor === color,
+        hideTitle: hideTitle
+      }, color);
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {
+    size: "small",
+    footer: transI18n('fmt_screenshare_whiteboard_tips_righclick'),
+    direction: direction,
+    content: colors.map(function (color) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: size,
+        active: currentColor === color,
+        iconType: _type.FcrIconType.FCR_COLOR,
+        color: color,
+        lineColor: currentColor === color ? color : 'transparent',
+        onClick: onClick,
+        selected: commonColors ? commonColors === null || commonColors === void 0 ? void 0 : commonColors.includes(color) : currentColor === color,
+        hideTitle: hideTitle,
+        contextMenu: contextMenu,
+        onContextMenuClick: onContextMenuClick
+      }, color);
+    })
+  });
+};

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

@@ -0,0 +1,14 @@
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+export declare const AnnotationColorTool: (props: {
+    colors: string[];
+    currentColor: string;
+    placement: ToolTipProps["placement"];
+    size?: number;
+    hideTitle?: boolean;
+    direction?: "horizontal" | "vertical";
+    commonColors?: string[];
+    setStrokeColor: (color: string) => void;
+    contextMenu?: React.ReactNode;
+    onContextMenuClick?: (color: string) => void;
+    selected?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;