fcr-ui-scene 3.7.4 → 3.7.6

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();
@@ -194,7 +194,8 @@ var Chat = exports.Chat = (0, _mobxReact.observer)(function (_ref) {
       }
     });
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-chat-container-box",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_chatTabs["default"], {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: _objectSpread({}, styles),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatWrapper.ChatWrapper, {

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,11 @@
 }
 .fcr-whiteboard-controlbar-body {
   width: 100%;
-  height: calc(100vh - 28px);
-  display: flex;
+  /* display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: center; */
   position: absolute;
-  top: 28px;
   bottom: 0;
-  overflow: hidden;
   background-color: #e5e7eb;
 }
 .fcr-whiteboard-controlbar-body-content {
@@ -37,6 +34,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 +86,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,28 @@
 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;
+    showControlBar?: 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 {};

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

@@ -19,27 +19,34 @@ var _button = require("agora-ui-foundation/lib/components/button");
 var _divider = _interopRequireDefault(require("agora-ui-foundation/lib/components/divider"));
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _type2 = require("../../whiteboard/type");
+var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
 require("./index.css");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _jsxRuntime = require("react/jsx-runtime");
 var initWidth = 1920;
-var initHeight = 1220;
+var initHeight = 1080;
 var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardControlbar(props) {
   var transI18n = (0, _i18n.useI18n)();
   var onClose = props.onClose,
     onEnable = props.onEnable,
     setTheme = props.setTheme,
-    ownerUser = props.ownerUser,
-    currentUser = props.currentUser,
+    ownerUserName = props.ownerUserName,
+    isMyBoard = props.isMyBoard,
     canWriteBoard = props.canWriteBoard,
     controlEnabled = props.controlEnabled,
     isHost = props.isHost,
     children = props.children,
     currentTheme = props.currentTheme,
     sharingType = props.sharingType,
+    currentTool = props.currentTool,
+    onBoardDomLoaded = props.onBoardDomLoaded,
     onZoomIn = props.onZoomIn,
     onZoomOut = props.onZoomOut,
     onAdaptive = props.onAdaptive,
-    onOrigin = props.onOrigin;
+    onOrigin = props.onOrigin,
+    isSharingWithAudio = props.isSharingWithAudio,
+    _props$showControlBar = props.showControlBar,
+    showControlBar = _props$showControlBar === void 0 ? true : _props$showControlBar;
   var boardRef = (0, _react.useRef)(undefined);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -73,18 +80,35 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
     _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
     contianHeight = _useState14[0],
     setContianHeight = _useState14[1];
+  var isWhiteboard = sharingType === 'whiteboard';
+  var cursor = (0, _react.useMemo)(function () {
+    return _enums.FcrBoardToolType[currentTool || _enums.FcrBoardToolType.NONE].toLowerCase();
+  }, [currentTool]);
+  var resetHeight = (0, _react.useCallback)(function () {
+    var _boardRef$current;
+    var height = ((_boardRef$current = boardRef.current) === null || _boardRef$current === void 0 ? void 0 : _boardRef$current.clientHeight) || 0;
+    setContianHeight(height);
+  }, []);
+  var resetHeightDebounce = (0, _react.useCallback)((0, _debounce["default"])(resetHeight, 100), []);
   (0, _react.useEffect)(function () {
+    window.addEventListener('resize', resetHeightDebounce);
     return function () {
-      return setLoading(false);
+      setLoading(false);
+      window.removeEventListener('resize', resetHeightDebounce);
+      if (boardRef.current) {
+        boardRef.current.removeEventListener('transitionend', resetHeight);
+      }
     };
   }, []);
   var handleBoardRef = function handleBoardRef(ref) {
-    var _boardRef$current;
     boardRef.current = ref;
-    var height = ((_boardRef$current = boardRef.current) === null || _boardRef$current === void 0 ? void 0 : _boardRef$current.clientHeight) || 0;
-    setContianHeight(height);
+    resetHeight();
+    if (boardRef.current) {
+      boardRef.current.addEventListener('transitionend', resetHeight);
+    }
   };
-  var isMeOwner = (ownerUser === null || ownerUser === void 0 ? void 0 : ownerUser.userId) === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId);
+  var showEditButton = !controlEnabled && !isMyBoard && !isHost && isWhiteboard;
+  var showChangeThemeButton = (canWriteBoard || isMyBoard || isHost) && setTheme && currentTheme;
   function setCanvasBound(oprate) {
     if (!Object.values(_type2.WhiteboardControlbarEvents).includes(oprate) || oprate === _type2.WhiteboardControlbarEvents.ENABLE_CONTROL) {
       return;
@@ -95,7 +119,11 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
     setIsOriginal(false);
     var step = 3;
     if (oprate === _type2.WhiteboardControlbarEvents.ZOOMIN) {
-      if (onZoomIn) return onZoomIn();
+      if (onZoomIn) {
+        var result = onZoomIn();
+        setIsMaxmum(!result);
+        return;
+      }
       if (scaleValue < step) {
         setIsMaxmum(false);
         setScaleValue(scaleValue + 1);
@@ -104,7 +132,11 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
       }
     }
     if (oprate === _type2.WhiteboardControlbarEvents.ZOOMOUT) {
-      if (onZoomOut) return onZoomOut();
+      if (onZoomOut) {
+        var _result = onZoomOut();
+        setIsMinimum(!_result);
+        return;
+      }
       if (scaleValue > 1) {
         setScaleValue(scaleValue - 1);
       } else {
@@ -112,12 +144,20 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
       }
     }
     if (oprate === _type2.WhiteboardControlbarEvents.ORIGIN) {
-      if (onOrigin) return onOrigin();
+      if (onOrigin) {
+        var _result2 = onOrigin();
+        setIsOriginal(!_result2);
+        return;
+      }
       setIsOriginal(true);
       setScaleValue(1);
     }
     if (oprate === _type2.WhiteboardControlbarEvents.ADAPTIVE) {
-      if (onAdaptive) return onAdaptive();
+      if (onAdaptive) {
+        var _result3 = onAdaptive();
+        setIsAdaptived(!_result3);
+        return;
+      }
       setIsAdaptived(true);
       setScaleValue(2);
     }
@@ -128,19 +168,44 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
   var height = (0, _react.useMemo)(function () {
     return initHeight * (contianHeight / initHeight) * scaleValue;
   }, [contianHeight, scaleValue]);
+  var preventAction = (0, _react.useMemo)(function () {
+    var prevent = true;
+
+    // 我是分享者，或者我是主持人，不阻止
+    if (isMyBoard || isHost) {
+      prevent = false;
+    }
+
+    // 我不是分享者, 也不是主持人，我没有开启编辑功能时阻止
+    if (!isHost && !isMyBoard && !controlEnabled) {
+      prevent = true;
+    } else {
+      prevent = false;
+    }
+    return prevent;
+  }, [controlEnabled, isMyBoard, canWriteBoard, isHost]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "fcr-whiteboard-controlbar",
     id: "fcr-whiteboard-controlbar",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      height: isWhiteboard ? '100%' : 'auto'
+    },
+    children: [showControlBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "fcr-whiteboard-controlbar-header",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "fcr-whiteboard-controlbar-left",
-        children: transI18n('fmt_screenshare_whiteboard_tips_someonesharing', {
-          reason1: isMeOwner ? transI18n('fmt_settings_labels_you') : (ownerUser === null || ownerUser === void 0 ? void 0 : ownerUser.userName) || ''
+        children: transI18n(isWhiteboard ? 'fmt_screenshare_whiteboard_tips_someonesharing' : 'fmt_screenshare_room_new_screen_share', {
+          reason1: isMyBoard ? transI18n('fmt_settings_labels_you') : ownerUserName
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "fcr-whiteboard-controlbar-center",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+        children: [!isWhiteboard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: isSharingWithAudio ? _type.FcrIconType.FCR_DEVICEAUDIOON : _type.FcrIconType.FCR_DEVICEAUDIOOFF,
+          size: 22,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+          }
+        }), /*#__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: "fcr-whiteboard-controlbar-item",
@@ -200,7 +265,7 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
               }
             })
           })
-        }), (canWriteBoard || isMeOwner || isHost) && setTheme && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        }), showChangeThemeButton && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_divider["default"], {
             type: "vertical"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -215,7 +280,7 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
             })
           })]
         })]
-      }), !controlEnabled && !isMeOwner && !isHost && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      }), showEditButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
         content: canWriteBoard ? transI18n('fmt_screenshare_options_enableedit') : transI18n('fmt_screenshare_tips_unenabled'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "fcr-whiteboard-controlbar-item",
@@ -226,40 +291,42 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
               iconPrimary: canWriteBoard ? 'var(--fcr_ui_scene_icontext1)' : 'gray'
             },
             onClick: function onClick() {
-              return canWriteBoard ? onEnable(true) : null;
+              return canWriteBoard ? onEnable === null || onEnable === void 0 ? void 0 : onEnable(true) : null;
             }
           })
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "fcr-whiteboard-controlbar-right",
-        children: [isMeOwner && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        children: [isMyBoard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
           loading: loading,
           size: "XXS",
           styleType: "danger",
           shape: "rounded",
           onClick: function onClick() {
-            onClose();
+            onClose === null || onClose === void 0 || onClose();
             setLoading(true);
           },
           children: transI18n('fmt_screenshare_controlbar_button_stop')
-        }), controlEnabled && !isMeOwner && canWriteBoard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        }), controlEnabled && !isMyBoard && canWriteBoard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
           loading: loading,
           size: "XXS",
           styleType: "normal",
           shape: "rounded",
           onClick: function onClick() {
-            return onEnable(false);
+            return onEnable === null || onEnable === void 0 ? void 0 : onEnable(false);
           },
           children: transI18n('fmt_screenshare_whiteboard_button_exitdrawing')
         })]
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), isWhiteboard && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fcr-whiteboard-controlbar-body",
       ref: handleBoardRef,
       style: {
-        backgroundColor: sharingType === 'annotation' ? 'transparent' : '#e5e7eb'
+        backgroundColor: '#e5e7eb',
+        height: showControlBar ? 'calc(100% - 28px)' : '100%',
+        top: showControlBar ? '28px' : '0'
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "fcr-whiteboard-controlbar-body-content",
         style: {
           width: "".concat(width, "px"),
@@ -267,9 +334,14 @@ var WhiteboardControlbar = exports.WhiteboardControlbar = function WhiteboardCon
           position: 'absolute',
           left: "-".concat(width / 2, "px"),
           marginLeft: '50%',
-          top: "-".concat((height - contianHeight) / 2, "px")
+          top: "-".concat(height === contianHeight ? 0 : (height - contianHeight) / 2, "px")
         },
-        children: children
+        children: [onBoardDomLoaded && preventAction && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "whiteboard-action-prevent"
+        }), onBoardDomLoaded ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-whiteboard-view board-widget-cursor-".concat(cursor),
+          ref: onBoardDomLoaded
+        }) : children]
       })
     })]
   });

package/lib/modules/components/device-control/components/audio-menu/index.js

@@ -15,16 +15,16 @@ var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _icon = require("agora-ui-foundation/lib/components/icon");
-var _store = require("../../../../setting/store");
-var _store2 = require("../../store");
+var _store = require("../../store.base");
 require("../../index.css");
 var _type2 = require("../../../../../type");
+var _type3 = require("../../../../setting/type");
 var _jsxRuntime = require("react/jsx-runtime");
 var AudioMenu = (0, _mobxReact.observer)(function (_ref) {
   var onConnectClick = _ref.onConnectClick,
     setPopoverOpened = _ref.setPopoverOpened;
   var transI18n = (0, _i18n.useI18n)();
-  var _useContext = (0, _react.useContext)(_store2.DeviceControlStoreContext),
+  var _useContext = (0, _react.useContext)(_store.DeviceControlStoreContext),
     microphoneId = _useContext.microphoneId,
     microphoneList = _useContext.microphoneList,
     speakerId = _useContext.speakerId,
@@ -50,7 +50,7 @@ var AudioMenu = (0, _mobxReact.observer)(function (_ref) {
   var openDeviceSetting = function openDeviceSetting() {
     setPopoverOpened(false);
     openDeviceSettingDialog({
-      activeTab: _store.DeviceSettingTab.AUDIO
+      activeTab: _type3.DeviceSettingTab.AUDIO
     });
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/lib/modules/components/device-control/components/carmera/index.js

@@ -14,20 +14,18 @@ var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _popover = require("agora-ui-foundation/lib/components/popover");
 var _videoMenu = _interopRequireDefault(require("../video-menu"));
-var _store = require("../../store");
-var _view = require("../../../../control-bar/view");
+var _store = require("../../store.base");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _jsxRuntime = require("react/jsx-runtime");
 var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function (props) {
   var _props$showTitle = props.showTitle,
     showTitle = _props$showTitle === void 0 ? true : _props$showTitle;
-  var _useContext = (0, _react.useContext)(_view.ControlbarContext),
-    browserWindow = _useContext.browserWindow;
   var transI18n = (0, _i18n.useI18n)();
-  var _useContext2 = (0, _react.useContext)(_store.DeviceControlStoreContext),
-    cameraEnabled = _useContext2.cameraEnabled,
-    enableCamera = _useContext2.enableCamera,
-    cameraList = _useContext2.cameraList,
-    checkMediaPermission = _useContext2.checkMediaPermission;
+  var _useContext = (0, _react.useContext)(_store.DeviceControlStoreContext),
+    cameraEnabled = _useContext.cameraEnabled,
+    enableCamera = _useContext.enableCamera,
+    cameraList = _useContext.cameraList,
+    checkMediaPermission = _useContext.checkMediaPermission;
   var _useDeviceTooltipVisi = (0, _hooks["default"])(),
     popoverOpened = _useDeviceTooltipVisi.popoverOpened,
     handlePopoverVisibleChanged = _useDeviceTooltipVisi.handlePopoverVisibleChanged,
@@ -47,13 +45,7 @@ var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function (p
     setPopoverOpened(false);
     handlePopoverVisibleChanged(false);
   };
-  (0, _react.useEffect)(function () {
-    browserWindow === null || browserWindow === void 0 || browserWindow.on('blur', handleBlur);
-    return function () {
-      browserWindow === null || browserWindow === void 0 || browserWindow.off('blur', handleBlur);
-    };
-  }, [popoverOpened]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  var cameraControlButton = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "device-control-item-wrapper",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "device-control ".concat(popoverOpened ? 'active' : ''),
@@ -110,4 +102,12 @@ var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function (p
       })]
     })
   });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: showTitle ? cameraControlButton : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      mouseEnterDelay: 0,
+      trigger: "hover",
+      content: title,
+      children: cameraControlButton
+    })
+  });
 });

package/lib/modules/components/device-control/components/microphone/index.d.ts

@@ -1,6 +1,7 @@
-export declare const AudioRecordinDeviceIcon: ({ size, micEnabled }: {
+import { FcrUIMicrophoneState } from '../../../../../type';
+export declare const AudioRecordinDeviceIcon: ({ size, state, }: {
     size?: number;
-    micEnabled?: boolean;
+    state?: FcrUIMicrophoneState;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const MicrophoneControl: (props: {
     showTitle: boolean;