fcr-ui-scene 3.6.4 → 3.7.0

package/lib/modules/annotation/style.css

@@ -24,3 +24,13 @@
   top: 0px;
   z-index: 100;
 }
+
+.fcr-annotation-receiver-wrapper {
+  width: 100%;
+  position: absolute;
+  z-index: 10;
+}
+
+.fcr-annotation-receiver-wrapper:not(.fcr-annotation-receiver-wrapper--editing) * {
+  pointer-events: unset !important;
+}

package/lib/modules/annotation/view.js

@@ -9,12 +9,12 @@ exports.Annotation = void 0;
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _store = require("./store");
-var _store2 = require("../whiteboard/components/toolbar/store");
-var _toolbar = require("../whiteboard/components/toolbar");
 require("./style.css");
 require("./board-cursor.css");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var _annotationToolbarStore = require("./annotation-toolbar-store");
+var _annotationIndex = require("./annotation-index");
 var _jsxRuntime = require("react/jsx-runtime");
 var Annotation = exports.Annotation = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.AnnotationStoreContext),
@@ -22,25 +22,23 @@ var Annotation = exports.Annotation = (0, _mobxReact.observer)(function () {
     handleBoardContainerDomLoad = _useContext.handleBoardContainerDomLoad,
     isShowToolbar = _useContext.isShowToolbar,
     getToolbarStore = _useContext.getToolbarStore,
-    resetToolbarStore = _useContext.resetToolbarStore,
+    receiverAllOpenStateReady = _useContext.receiverAllOpenStateReady,
     currentTool = _useContext.currentTool;
-  var cursorClassname = resetToolbarStore && isShowToolbar ? "board-widget-cursor-".concat([_enums.FcrBoardToolType[currentTool || _enums.FcrBoardToolType.NONE]]) : 'board-widget-cursor-normal';
-  var boardWidgetAppCls = (0, _classnames["default"])('netless-whiteboard-wrapper', cursorClassname.toLowerCase());
+  var cursorClassname = receiverAllOpenStateReady && isShowToolbar ? "board-widget-cursor-".concat([_enums.FcrBoardToolType[currentTool || _enums.FcrBoardToolType.NONE]]) : 'board-widget-cursor-normal';
+  var boardWidgetAppCls = (0, _classnames["default"])('fcr-annotation-receiver-wrapper', 'netless-whiteboard-wrapper', {
+    'fcr-annotation-receiver-wrapper--editing': isShowToolbar
+  }, cursorClassname.toLowerCase());
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      width: '100%',
-      position: 'absolute'
-    },
     className: boardWidgetAppCls,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "annotation-container",
       ref: handleBoardContainerDomLoad,
-      children: resetToolbarStore ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_store2.ToolbarContext.Provider, {
+      children: receiverAllOpenStateReady ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_annotationToolbarStore.AnnotationReceiverToolbarContext.Provider, {
         value: getToolbarStore(),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "annotation-main",
           ref: handleBoardDomLoad
-        }), isShowToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.Toolbar, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }), isShowToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_annotationIndex.Toolbar, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "annotation-action-prevent"
         })]
       }) : null

package/lib/modules/chat/chat-room-store.js

@@ -149,7 +149,8 @@ var ChatRoomStore = exports.ChatRoomStore = /*#__PURE__*/function () {
       userName: (0, _i18n.transI18n)('fmt_chat_tips_selecthost'),
       userRole: _type2.FcrUserRole.ROBOT,
       connectorType: _fcrCore.FcrRoomConnectorType.NONE,
-      platform: _type2.FcrPlatform.UNSUPPORTED
+      platform: _type2.FcrPlatform.UNSUPPORTED,
+      avatar: ''
     });
     _classPrivateFieldInitSpec(this, _A, _init__userInfo(this));
     _classPrivateFieldInitSpec(this, _B, _init_needRecomputeRowIdMap(this, new Map()));
@@ -432,6 +433,7 @@ var ChatRoomStore = exports.ChatRoomStore = /*#__PURE__*/function () {
         userId = _message$from.userId,
         userName = _message$from.userName,
         userRole = _message$from.userRole,
+        avatar = _message$from.avatar,
         type = message.type,
         timestamp = message.timestamp,
         isPrivate = message.isPrivate;
@@ -459,7 +461,8 @@ var ChatRoomStore = exports.ChatRoomStore = /*#__PURE__*/function () {
         nickName: userName,
         uid: userId,
         isPrivate: isPrivate,
-        target: target || (isPrivate ? (0, _i18n.transI18n)('fmt_participant_label_Me') : 'All')
+        target: target || (isPrivate ? (0, _i18n.transI18n)('fmt_participant_label_Me') : 'All'),
+        avatar: avatar
       }, type === _type.FcrChatRoomMessageType.Text ? {
         msg: message.content
       } : {

package/lib/modules/chat/components/chat-select/index.js

@@ -39,7 +39,7 @@ var ChatSelect = exports.ChatSelect = (0, _mobxReact.observer)(function (_ref) {
     (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.recomputeGridSize();
   }, [selectedUid]);
   var filterUsers = users.filter(function (user) {
-    return user.userName.includes(filterKey);
+    return user.userName.toLowerCase().includes(filterKey.toLowerCase());
   });
   var listHeight = 0;
   if (filterUsers.length < 5) {

package/lib/modules/chat/components/chat-select/select-item/index.js

@@ -74,7 +74,8 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
         isShowFirstLetter: true,
         size: 32,
         nickName: currentUser.userName === _types.USER_ALL ? t('fmt_chat_option_all') : currentUser.userName,
-        textSize: 14
+        textSize: 14,
+        avatarImage: currentUser.avatar
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "candidate",
@@ -125,8 +126,12 @@ function highlightMatches(str, matchStr) {
       isHighlight: false
     }];
   }
+
+  // 转换为小写进行匹配，但保留原始字符串用于显示
+  var lowerStr = str.toLowerCase();
+  var lowerMatchStr = matchStr.toLowerCase();
   while (start < str.length) {
-    var matchStart = str.indexOf(matchStr, start);
+    var matchStart = lowerStr.indexOf(lowerMatchStr, start);
     if (matchStart === -1) {
       result.push({
         data: str.slice(start),
@@ -140,8 +145,10 @@ function highlightMatches(str, matchStr) {
         isHighlight: false
       });
     }
+
+    // 使用原始字符串中对应位置的文本进行高亮
     result.push({
-      data: matchStr,
+      data: str.slice(matchStart, matchStart + matchLen),
       isHighlight: true
     });
     start = matchStart + matchLen;

package/lib/modules/chat/components/message-list/message-item/index.js

@@ -76,7 +76,8 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
     publisherUid = datum.uid,
     isPrivate = datum.isPrivate,
     targetNickname = datum.target,
-    chatLevel = datum.chatLevel;
+    chatLevel = datum.chatLevel,
+    avatar = datum.avatar;
   var arr = messageList;
   var idx = index;
   var systemMsg = datum.systemMsg;
@@ -206,7 +207,8 @@ var _default = exports["default"] = (0, _mobxReact.observer)(function (props) {
             avatar: publisherUid !== localUserId ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
               size: 24,
               textSize: 24,
-              nickName: publisherNickName
+              nickName: publisherNickName,
+              avatarImage: avatar
             }) : null,
             publisherIsSelf: publisherIsSelf,
             targetIsSelf: isPrivate,

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

@@ -8,6 +8,7 @@ import { FcrUIChatProvider } from '../../providers/chat-provider';
 import { FcrUISharedLayoutDataSource } from '../../shared-data-source/layout-data';
 import { FcrUISharedWaitingRoomDataSource } from '../../shared-data-source/waiting-room';
 import { FcrUISharedChatDataSource } from '../../shared-data-source/chat-data';
+import { FcrUIMessageProvider } from '../../providers/message-provider';
 export { CHAT_WRAPPER_CLASS };
 export declare class ChatUIModule extends UIModule {
     private _store?;
@@ -21,6 +22,7 @@ export declare class ChatUIModule extends UIModule {
     sharedLayoutDataSource?: FcrUISharedLayoutDataSource;
     sharedWaitingRoomDataSource?: FcrUISharedWaitingRoomDataSource;
     sharedChatDataSource?: FcrUISharedChatDataSource;
+    messageProvider?: FcrUIMessageProvider;
     onNodeWillActive(): void;
     onNodeWillInactive(): void;
     getComponent(params?: {

package/lib/modules/chat/index.js

@@ -168,7 +168,7 @@ var ChatUIModule = exports.ChatUIModule = /*#__PURE__*/function (_UIModule) {
     key: "sendMessage",
     value: function () {
       var _sendMessage = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(msg, type) {
-        var _chatRoomStores$activ, _chatRoomStores$activ2, _reason, _t;
+        var _chatRoomStores$activ, _chatRoomStores$activ2, _reason, _this$messageProvider, _t;
         return _regenerator["default"].wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -176,11 +176,21 @@ var ChatUIModule = exports.ChatUIModule = /*#__PURE__*/function (_UIModule) {
               _context.next = 1;
               return (_chatRoomStores$activ = this._store.chatRoomStores[this._store.activeTabIndex]) === null || _chatRoomStores$activ === void 0 ? void 0 : _chatRoomStores$activ.sendMessage(msg, type);
             case 1:
-              _context.next = 3;
+              _context.next = 4;
               break;
             case 2:
               _context.prev = 2;
               _t = _context["catch"](0);
+              if (!(_t.error_code === 'MODERATION_001')) {
+                _context.next = 3;
+                break;
+              }
+              (_this$messageProvider = this.messageProvider) === null || _this$messageProvider === void 0 || _this$messageProvider.showToast({
+                type: 'error',
+                message: (0, _i18n.transI18n)('fmt_chat_toast_infraction_error')
+              });
+              return _context.abrupt("return");
+            case 3:
               (_chatRoomStores$activ2 = this._store.chatRoomStores[this._store.activeTabIndex]) === null || _chatRoomStores$activ2 === void 0 || _chatRoomStores$activ2.handleToast({
                 id: 'send-msg',
                 toastProps: {
@@ -189,7 +199,7 @@ var ChatUIModule = exports.ChatUIModule = /*#__PURE__*/function (_UIModule) {
                   size: 'small'
                 }
               });
-            case 3:
+            case 4:
             case "end":
               return _context.stop();
           }

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

@@ -20,6 +20,8 @@ export default class ChatStore {
     private _sharedLayoutDataSource;
     private _sharedChatDataSource;
     private _sharedWaitingRoomDataSource;
+    private _roomControl;
+    private _isMainRoom;
     accessor chatRoomStores: ChatRoomStoreMap;
     accessor activeTabIndex: FcrUIRoomType;
     accessor copyMap: Map<number, boolean>;
@@ -37,6 +39,7 @@ export default class ChatStore {
         sharedWaitingRoomDataSource: FcrUISharedWaitingRoomDataSource;
         sharedChatDataSource: FcrUISharedChatDataSource;
     });
+    get isMainRoom(): boolean;
     hasWaitingRoomPermission(): boolean;
     private _handleReceiveMessage;
     handlerActiveTab(key: FcrUIRoomType): void;

package/lib/modules/chat/store.js

@@ -85,8 +85,7 @@ _ref = (_handleReceiveMessageDecs = [_mobx.action, _mobx.action.bound], _handler
 var ChatStore = exports["default"] = /*#__PURE__*/function () {
   function ChatStore(_ref2) {
     var _this = this,
-      _roomControl$getRoomI,
-      _roomControl$getRoomI2;
+      _roomControl$getRoomI;
     var chatRoomControl = _ref2.chatRoomControl,
       userControl = _ref2.userControl,
       uiEventStore = _ref2.uiEventStore,
@@ -110,6 +109,7 @@ var ChatStore = exports["default"] = /*#__PURE__*/function () {
     this._sharedLayoutDataSource = sharedLayoutDataSource;
     this._sharedWaitingRoomDataSource = sharedWaitingRoomDataSource;
     this._sharedChatDataSource = sharedChatDataSource;
+    this._roomControl = roomControl;
     var roomObserver = {
       onJoinWaitingRoom: function onJoinWaitingRoom(room) {
         var userControl = room.getUserControl();
@@ -134,13 +134,14 @@ var ChatStore = exports["default"] = /*#__PURE__*/function () {
     var chatStoreObserver = {
       onReceiveMessage: this._handleReceiveMessage
     };
-    if (((_roomControl$getRoomI = roomControl.getRoomInfo()) === null || _roomControl$getRoomI === void 0 ? void 0 : _roomControl$getRoomI.roomType) === _type2.FcrRoomType.Mainroom) {
+    var isMainRoom = ((_roomControl$getRoomI = roomControl.getRoomInfo()) === null || _roomControl$getRoomI === void 0 ? void 0 : _roomControl$getRoomI.roomType) === _type2.FcrRoomType.Mainroom;
+    if (isMainRoom) {
       roomProvider.addObserver(roomObserver);
     }
     this._observable.addObserver(chatStoreObserver);
-    var isMainroom = ((_roomControl$getRoomI2 = roomControl.getRoomInfo()) === null || _roomControl$getRoomI2 === void 0 ? void 0 : _roomControl$getRoomI2.roomType) === _type2.FcrRoomType.Mainroom;
-    var type = isMainroom ? _type3.FcrUIRoomType.MAIN_ROOM : _type3.FcrUIRoomType.WAITING_ROOM;
-    this.activeTabIndex = isMainroom ? _type3.FcrUIRoomType.MAIN_ROOM : _type3.FcrUIRoomType.WAITING_ROOM;
+    this._isMainRoom = isMainRoom;
+    var type = isMainRoom ? _type3.FcrUIRoomType.MAIN_ROOM : _type3.FcrUIRoomType.WAITING_ROOM;
+    this.activeTabIndex = isMainRoom ? _type3.FcrUIRoomType.MAIN_ROOM : _type3.FcrUIRoomType.WAITING_ROOM;
     this.chatRoomStores[type] = new _chatRoomStore.ChatRoomStore({
       chatRoomControl: chatRoomControl,
       userControl: userControl,
@@ -196,6 +197,11 @@ var ChatStore = exports["default"] = /*#__PURE__*/function () {
     set: function set(v) {
       _classPrivateFieldSet(_C, this, v);
     }
+  }, {
+    key: "isMainRoom",
+    get: function get() {
+      return this._isMainRoom;
+    }
   }, {
     key: "hasWaitingRoomPermission",
     value: function hasWaitingRoomPermission() {

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

@@ -57,6 +57,7 @@ export interface MsgListType {
     chatLevel?: AllowChatLevelType;
     isPrivate?: boolean;
     target?: string;
+    avatar?: string;
 }
 export declare const USER_ALL = "All";
 export declare const USER_NONE = "NONE";

package/lib/modules/chat/types.js

@@ -14,5 +14,6 @@ var ALL_TO_USER = exports.ALL_TO_USER = {
   userName: USER_ALL,
   userRole: _type.FcrUserRole.ROBOT,
   connectorType: _fcrCore.FcrRoomConnectorType.NONE,
-  platform: _type.FcrPlatform.WEB_DESKTOP
+  platform: _type.FcrPlatform.WEB_DESKTOP,
+  avatar: ''
 };

package/lib/modules/chat/util.js

@@ -9,6 +9,7 @@ require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.slice.js");
 require("core-js/modules/es.date.to-string.js");
 var _type = require("../../type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
 var handleMessageTime = exports.handleMessageTime = function handleMessageTime(time) {
   if (typeof time === 'string') {
     return time;
@@ -21,7 +22,7 @@ var handleMessageTime = exports.handleMessageTime = function handleMessageTime(t
   var day = date.getDate();
   var hour = date.getHours();
   var minute = date.getMinutes();
-  var amOrPm = hour >= 12 ? 'PM' : 'AM';
+  var amOrPm = hour >= 12 ? (0, _i18n.transI18n)('fmt_chat_label_pm') : (0, _i18n.transI18n)('fmt_chat_label_am');
   var hh = hour % 12;
   var mm = minute < 10 ? '0' + minute : minute;
   if (year === nowYear) {

package/lib/modules/chat/view.js

@@ -65,13 +65,15 @@ var Chat = exports.Chat = (0, _mobxReact.observer)(function (_ref) {
     chatRoomStores = _useContext.chatRoomStores,
     activeTabIndex = _useContext.activeTabIndex,
     copyMap = _useContext.copyMap,
-    clearCopyMap = _useContext.clearCopyMap;
+    clearCopyMap = _useContext.clearCopyMap,
+    isMainRoom = _useContext.isMainRoom;
   var defaultProps = {
     errorMsg: t('fmt_chat_tips_exceedlimit'),
     forbiddenTxt: t('fmt_chat_button_muteall'),
     styles: {
       display: 'flex',
-      height: (_chatRoomStores$FcrUI = chatRoomStores[_type.FcrUIRoomType.WAITING_ROOM]) !== null && _chatRoomStores$FcrUI !== void 0 && _chatRoomStores$FcrUI.userCount || 0 > 0 ? 'calc(100% - 34px)' : '100%'
+      height: ((_chatRoomStores$FcrUI = chatRoomStores[_type.FcrUIRoomType.WAITING_ROOM]) !== null && _chatRoomStores$FcrUI !== void 0 && _chatRoomStores$FcrUI.userCount || 0 > 0) && isMainRoom ? 'calc(100% - 34px)' : '100%',
+      width: '100%'
     }
   };
   var styles = defaultProps.styles,
@@ -111,7 +113,8 @@ var Chat = exports.Chat = (0, _mobxReact.observer)(function (_ref) {
         userName: t('fmt_chat_option_all'),
         userRole: _type.FcrUserRole.ROBOT,
         connectorType: _fcrCore.FcrRoomConnectorType.NONE,
-        platform: _type2.FcrPlatform.WEB_DESKTOP
+        platform: _type2.FcrPlatform.WEB_DESKTOP,
+        avatar: ''
       });
     }
     users = users.filter(function (user) {

package/lib/modules/{action-bar/components → components}/apps/app-item/index.d.ts

@@ -1,3 +1,3 @@
 import './index.css';
-import { AppItemProps } from '../../../types';
+import { AppItemProps } from '../types';
 export declare const Appitem: (props: AppItemProps) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/apps/app-list.d.ts

@@ -0,0 +1,3 @@
+import { AppListProps } from './types';
+import './index.css';
+export declare const AppList: (props: AppListProps) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/{action-bar/components → components}/apps/app-list.js

@@ -25,17 +25,15 @@ require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _mobxReact = require("mobx-react");
 var _appItem = require("./app-item");
-var _useAppItemOptions = _interopRequireDefault(require("./useAppItemOptions"));
 require("./index.css");
 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; }
 var AppList = exports.AppList = (0, _mobxReact.observer)(function (props) {
-  var onAppClick = props.onAppClick;
-  var options = (0, _useAppItemOptions["default"])(onAppClick);
+  var appItemProps = props.appItemProps;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "action-bar-apps-container",
-    children: options.map(function (config) {
+    children: appItemProps.map(function (config) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_appItem.Appitem, _objectSpread({}, config), config.name);
     })
   });

package/lib/modules/components/apps/types.d.ts

@@ -0,0 +1,14 @@
+import { FcrIconProps } from 'agora-ui-foundation/lib/components/icon';
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+import { MouseEventHandler } from 'react';
+export interface AppListProps {
+    appItemProps: AppItemProps[];
+}
+export interface AppItemProps {
+    name: string;
+    onClick: MouseEventHandler<HTMLDivElement>;
+    fcrToolTipProps?: ToolTipProps;
+    fcrIconProps?: FcrIconProps;
+    permission: boolean;
+    imgSrc?: string;
+}

package/lib/modules/components/apps/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -11,26 +11,26 @@ var _hooks = _interopRequireDefault(require("../../hooks"));
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
-var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 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 _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 _useContext = (0, _react.useContext)(_store.DeviceControlStoreContext),
-    cameraEnabled = _useContext.cameraEnabled,
-    enableCamera = _useContext.enableCamera,
-    cameraList = _useContext.cameraList,
-    checkMediaPermission = _useContext.checkMediaPermission;
+  var _useContext2 = (0, _react.useContext)(_store.DeviceControlStoreContext),
+    cameraEnabled = _useContext2.cameraEnabled,
+    enableCamera = _useContext2.enableCamera,
+    cameraList = _useContext2.cameraList,
+    checkMediaPermission = _useContext2.checkMediaPermission;
   var _useDeviceTooltipVisi = (0, _hooks["default"])(),
-    tooltipVisible = _useDeviceTooltipVisi.tooltipVisible,
     popoverOpened = _useDeviceTooltipVisi.popoverOpened,
     handlePopoverVisibleChanged = _useDeviceTooltipVisi.handlePopoverVisibleChanged,
-    handleTooltipVisibleChanged = _useDeviceTooltipVisi.handleTooltipVisibleChanged,
     setPopoverOpened = _useDeviceTooltipVisi.setPopoverOpened;
   var muteColor = {
     iconPrimary: cameraEnabled ? "var(--fcr_web_ui_scene_mainicon1)" : 'var(--fcr_ui_scene_ramp_red6)',
@@ -38,73 +38,76 @@ var CameraControl = exports.CameraControl = (0, _mobxReact.observer)(function (p
   };
   var icon = cameraEnabled ? _type.FcrIconType.FCR_CAMERA : _type.FcrIconType.FCR_CAMERAOFF;
   var title = cameraEnabled ? transI18n('fmt_toolbar_label_camera') : transI18n('fmt_toolbar_options_enablecamera');
-  var tooltip = title;
   var noCam = cameraList.length === 0;
   var noCamColor = {
     iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
     iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-    mouseEnterDelay: 0,
-    onVisibleChange: handleTooltipVisibleChanged,
-    visible: tooltipVisible,
-    content: tooltip,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "device-control-item-wrapper",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "device-control ".concat(popoverOpened ? 'active' : ''),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "device-control-inner",
-          children: !noCam ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            onClick: function onClick() {
-              enableCamera(!cameraEnabled);
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-              type: icon,
-              colors: muteColor,
-              size: 32
-            }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "device-control-text",
-              children: title
-            })]
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            onClick: function onClick() {
-              return checkMediaPermission('camera');
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-              type: _type.FcrIconType.FCR_CAMERACRASH,
-              colors: noCamColor,
-              size: 32
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "device-control-text",
-              children: transI18n('fmt_internalsetting_status_nodevice')
-            })]
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
-          showArrow: false,
-          visible: popoverOpened,
-          onVisibleChange: handlePopoverVisibleChanged,
-          overlayClassName: "device-control--device-popover",
-          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoMenu["default"], {
-            setPopoverOpened: setPopoverOpened,
-            onMoreClick: function onMoreClick() {}
-          }),
-          trigger: "click",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            onClick: function onClick(e) {
-              e.stopPropagation();
+  var handleBlur = function handleBlur() {
+    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", {
+    className: "device-control-item-wrapper",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "device-control ".concat(popoverOpened ? 'active' : ''),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "device-control-inner",
+        children: !noCam ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          onClick: function onClick() {
+            enableCamera(!cameraEnabled);
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: icon,
+            colors: muteColor,
+            size: 32
+          }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "device-control-text",
+            children: title
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          onClick: function onClick() {
+            return checkMediaPermission('camera');
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_CAMERACRASH,
+            colors: noCamColor,
+            size: 32
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "device-control-text",
+            children: transI18n('fmt_internalsetting_status_nodevice')
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+        showArrow: false,
+        visible: popoverOpened,
+        onVisibleChange: handlePopoverVisibleChanged,
+        overlayClassName: "device-control--device-popover",
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_videoMenu["default"], {
+          setPopoverOpened: setPopoverOpened,
+          onMoreClick: function onMoreClick() {}
+        }),
+        trigger: "click",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: function onClick(e) {
+            e.stopPropagation();
+          },
+          className: "device-control-extra ".concat(popoverOpened ? 'active' : ''),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_DROPUP4,
+            colors: {
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
             },
-            className: "device-control-extra ".concat(popoverOpened ? 'active' : ''),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-              type: _type.FcrIconType.FCR_DROPUP4,
-              colors: {
-                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
-              },
-              size: 24
-            })
+            size: 24
           })
-        })]
-      })
+        })
+      })]
     })
   });
 });