fcr-ui-scene 3.4.0 → 3.4.2

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

@@ -0,0 +1,70 @@
+import { AllowChatLevelType } from 'agora-ui-foundation/lib/components/chat-manager';
+import { RoleType } from 'agora-ui-foundation/lib/components/message-bubble';
+import { FcrChatRoomFile, FcrChatRoomReceiveImageMessage, FcrChatRoomReceiveTextMessage } from 'fcr-core/lib/room-control/chatroom-control/type';
+import { FcrRoomType } from 'fcr-core/lib/room-control/type';
+import { FcrUserInfo } from 'fcr-core/lib/type';
+import { CSSProperties } from 'react';
+import { ChatRoomStore } from './chat-room-store';
+export interface MessageBarProps {
+    styles?: CSSProperties;
+    users?: FcrUserInfo[];
+    onTargetChange?: (target: FcrUserInfo) => void;
+    selectedUser?: FcrUserInfo;
+    title?: React.ReactNode;
+}
+export interface ChatSelectProps {
+    type: 'assign-host' | 'private-chat';
+    title?: React.ReactNode;
+    bottomBar?: React.ReactNode;
+    candidateUsers: FcrUserInfo[];
+    selectedUid: string;
+    onSelect: (user: FcrUserInfo) => void;
+}
+export type HighlightedPart = {
+    data: string;
+    isHighlight: boolean;
+};
+export interface MessageListProps {
+    styles?: CSSProperties;
+    onCopy?: (msgInfo: {
+        msg: string;
+        time: string;
+        sender: number;
+    }) => void;
+    updateReadMsgIndex?: (data?: {
+        index: number;
+        msgId: string;
+    }) => void;
+    userId?: string;
+    setMultiSelectActive?: (active: boolean) => void;
+    multiSelectActive?: boolean;
+    copyMap?: Map<number, boolean>;
+    setCopyMap?: (copyMap: Map<number, boolean>) => void;
+    selectCnt?: number;
+    copyTips?: () => void;
+}
+export type FcrChatRoomReceiveMessage = FcrChatRoomReceiveTextMessage | FcrChatRoomReceiveImageMessage;
+export interface MsgListType {
+    id: string;
+    nickName: string;
+    uid: string;
+    role: RoleType;
+    time: number | string;
+    msg?: string;
+    img?: FcrChatRoomFile;
+    color: string;
+    systemMsg?: boolean;
+    chatLevel?: AllowChatLevelType;
+    isPrivate?: boolean;
+    target?: string;
+}
+export declare const USER_ALL = "All";
+export declare const USER_NONE = "NONE";
+export declare const ALL_TO_USER: FcrUserInfo;
+export type FcrChatStoreObserver = {
+    onReceiveMessage: (msgs: FcrChatRoomReceiveMessage[], type: FcrRoomType) => void;
+};
+export type ChatRoomStoreMap = {
+    [K in FcrRoomType]?: ChatRoomStore;
+};
+export type RoomTypeKeys = keyof typeof FcrRoomType;

package/lib/modules/chat/types.js

@@ -0,0 +1,17 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.USER_NONE = exports.USER_ALL = exports.ALL_TO_USER = void 0;
+var _fcrCore = require("fcr-core");
+var _type = require("fcr-core/lib/type");
+var USER_ALL = exports.USER_ALL = 'All';
+var USER_NONE = exports.USER_NONE = 'NONE';
+var ALL_TO_USER = exports.ALL_TO_USER = {
+  userId: USER_ALL,
+  userName: USER_ALL,
+  userRole: _type.FcrUserRole.ROBOT,
+  connectorType: _fcrCore.FcrRoomConnectorType.NONE
+};

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

@@ -0,0 +1,10 @@
+export declare const Chat: ({ updateReadIndex, sendMsg, userId: localUserId, singling, handleClickUploadImage, }: {
+    updateReadIndex: (data?: {
+        index: number;
+        msgId: string;
+    }) => void;
+    sendMsg: (msg: string) => void;
+    userId: string;
+    singling?: boolean;
+    handleClickUploadImage: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/chat/view.js

@@ -0,0 +1,372 @@
+"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.Chat = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.from.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.sort.js");
+require("core-js/modules/es.array.unshift.js");
+require("core-js/modules/es.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.iterator.map.js");
+require("core-js/modules/esnext.map.delete-all.js");
+require("core-js/modules/esnext.map.emplace.js");
+require("core-js/modules/esnext.map.every.js");
+require("core-js/modules/esnext.map.filter.js");
+require("core-js/modules/esnext.map.find.js");
+require("core-js/modules/esnext.map.find-key.js");
+require("core-js/modules/esnext.map.includes.js");
+require("core-js/modules/esnext.map.key-of.js");
+require("core-js/modules/esnext.map.map-keys.js");
+require("core-js/modules/esnext.map.map-values.js");
+require("core-js/modules/esnext.map.merge.js");
+require("core-js/modules/esnext.map.reduce.js");
+require("core-js/modules/esnext.map.some.js");
+require("core-js/modules/esnext.map.update.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _mobxReact = require("mobx-react");
+var _messageList = require("./components/message-list");
+var _store = require("./store");
+var _chatWrapper = require("agora-ui-foundation/lib/components/chat-wrapper");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _react = require("react");
+var _chatBar = require("./components/chat-bar");
+var _type = require("../../type");
+var _util = require("./util");
+var _copyText = require("../../utilities/copyText");
+var _type2 = require("fcr-core/lib/room-control/chatroom-control/type");
+var _fcrCore = require("fcr-core");
+var _tabs = require("agora-ui-foundation/lib/components/tabs");
+var _fcr_chat_reddot = _interopRequireDefault(require("../../../public/assets/fcr_chat_reddot.svg"));
+var _type3 = require("fcr-core/lib/room-control/type");
+var _types = require("./types");
+var _jsxRuntime = require("react/jsx-runtime");
+var Chat = exports.Chat = (0, _mobxReact.observer)(function (_ref) {
+  var _chatRoomStores$FcrRo, _chatRoomStores$FcrRo2, _chatRoomStores$FcrRo3, _chatRoomStores$FcrRo4, _chatRoomStores$FcrRo5, _chatRoomStores$FcrRo6, _chatRoomStores$FcrRo7;
+  var updateReadIndex = _ref.updateReadIndex,
+    sendMsg = _ref.sendMsg,
+    localUserId = _ref.userId,
+    singling = _ref.singling,
+    handleClickUploadImage = _ref.handleClickUploadImage;
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    chatRoomStores = _useContext.chatRoomStores,
+    hasWaitingRoomPermission = _useContext.hasWaitingRoomPermission,
+    activeTabIndex = _useContext.activeTabIndex,
+    handlerActiveTab = _useContext.handlerActiveTab;
+  var defaultProps = {
+    errorMsg: t('fmt_chat_tips_exceedlimit'),
+    forbiddenTxt: t('fmt_chat_button_muteall'),
+    styles: {
+      display: 'flex',
+      height: (_chatRoomStores$FcrRo = chatRoomStores[_type3.FcrRoomType.Waitingroom]) !== null && _chatRoomStores$FcrRo !== void 0 && _chatRoomStores$FcrRo.userCount || 0 > 0 ? 'calc(100% - 28px)' : '100%'
+    }
+  };
+  var styles = defaultProps.styles,
+    forbiddenTxt = defaultProps.forbiddenTxt,
+    errorMsg = defaultProps.errorMsg;
+  var _ref2 = chatRoomStores[activeTabIndex],
+    setTargetUser = _ref2.setTargetUser,
+    privateTargetUser = _ref2.privateTargetUser,
+    remoteUsers = _ref2.remoteUsers,
+    targetUserIsOnline = _ref2.targetUserIsOnline,
+    localIsManager = _ref2.localIsManager,
+    chatLevel = _ref2.chatLevel,
+    messageList = _ref2.messageList,
+    textMsg = _ref2.textMsg,
+    updateChatTextMsg = _ref2.updateChatTextMsg,
+    privateTargetList = _ref2.privateTargetList,
+    resetTargetUser = _ref2.resetTargetUser,
+    handleToast = _ref2.handleToast,
+    chatRoomState = _ref2.chatRoomState,
+    isHost = _ref2.isHost,
+    hasChatPermission = _ref2.hasChatPermission,
+    hasChatSendPrivatePermission = _ref2.hasChatSendPrivatePermission,
+    filterChatMember = _ref2.filterChatMember,
+    hasSendMessagePermission = _ref2.hasSendMessagePermission,
+    hasSendAllPermission = _ref2.hasSendAllPermission;
+  var handleTargetChange = function handleTargetChange(user) {
+    setTargetUser(user);
+  };
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    multiSelectActive = _useState2[0],
+    setMultiSelectActive = _useState2[1];
+  var _useState3 = (0, _react.useState)(new Map()),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    copyMap = _useState4[0],
+    setCopyMap = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    selectCnt = _useState6[0],
+    setSelectCnt = _useState6[1];
+  var targetList = (0, _react.useMemo)(function () {
+    var _users$;
+    var users = (0, _toConsumableArray2["default"])(remoteUsers);
+    if (((_users$ = users[0]) === null || _users$ === void 0 ? void 0 : _users$.userId) === _types.USER_ALL) {
+      if (!hasSendAllPermission) {
+        users.shift();
+      }
+    } else if (hasSendAllPermission) {
+      users.unshift({
+        userId: _types.USER_ALL,
+        userName: t('fmt_chat_option_all'),
+        userRole: _type.FcrUserRole.ROBOT,
+        connectorType: _fcrCore.FcrRoomConnectorType.NONE
+      });
+    }
+    users = users.filter(function (user) {
+      return remoteUsers.find(function (u) {
+        return u.userId === user.userId;
+      }) || user.userId === privateTargetUser.userId || user.userId === _types.USER_ALL;
+    });
+    users = users.map(function (user) {
+      var _remoteUsers$find;
+      return (_remoteUsers$find = remoteUsers.find(function (u) {
+        return u.userId === user.userId;
+      })) !== null && _remoteUsers$find !== void 0 ? _remoteUsers$find : user;
+    });
+    users = filterChatMember(users);
+    return users;
+  }, [chatLevel, remoteUsers, activeTabIndex, hasChatPermission, hasChatSendPrivatePermission]);
+  var handleMultiCopyMsg = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var msgHandled, msgIndex;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            msgHandled = '';
+            msgIndex = Array.from(copyMap.keys()).sort();
+            msgIndex.forEach(function (msgIdx, arrIdx) {
+              var _messageList$msgIndex, _messageList$msgIndex2, _messageList$msgIndex3;
+              var _messageList$msgIdx = messageList[msgIdx],
+                msg = _messageList$msgIdx.msg,
+                time = _messageList$msgIdx.time,
+                publisherUid = _messageList$msgIdx.uid,
+                publisherNickName = _messageList$msgIdx.nickName,
+                targetNickname = _messageList$msgIdx.target,
+                isPrivate = _messageList$msgIdx.isPrivate,
+                publisherRole = _messageList$msgIdx.role;
+              var senderNickname = publisherUid === localUserId && isPrivate ? t('fmt_settings_labels_you') : publisherNickName;
+              var needLabel = ((_messageList$msgIndex = messageList[msgIndex[arrIdx - 1]]) === null || _messageList$msgIndex === void 0 ? void 0 : _messageList$msgIndex.uid) !== publisherUid || ((_messageList$msgIndex2 = messageList[msgIndex[arrIdx - 1]]) === null || _messageList$msgIndex2 === void 0 ? void 0 : _messageList$msgIndex2.isPrivate) !== isPrivate || ((_messageList$msgIndex3 = messageList[msgIndex[arrIdx - 1]]) === null || _messageList$msgIndex3 === void 0 ? void 0 : _messageList$msgIndex3.role) !== publisherRole;
+              // 2. 复制多条消息, 一个人发的多条消息, 时间前缀只会有一个, 消息累加
+              if (needLabel) {
+                msgHandled += (0, _i18n.getLanguage)() === 'zh' ? "".concat(senderNickname, "\u5BF9").concat(targetNickname, "\u8BF4(").concat((0, _util.handleMessageTime)(time), ")\n").concat(msg, "\n") : "".concat(senderNickname, " said to ").concat(targetNickname, "(").concat((0, _util.handleMessageTime)(time), ")\n").concat(msg, "\n");
+              } else {
+                msgHandled += "".concat(msg, "\n");
+              }
+            });
+            _context.next = 5;
+            return (0, _copyText.copyText)(msgHandled);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleMultiCopyMsg() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  (0, _react.useEffect)(function () {
+    setSelectCnt(copyMap.size);
+  }, [copyMap.size]);
+  var resetMultiSelectStates = function resetMultiSelectStates() {
+    setMultiSelectActive(false);
+    copyMap.clear();
+    setCopyMap(copyMap);
+    setSelectCnt(0);
+  };
+  var chatSelectNoTitle = localIsManager || chatLevel === 'everyone' || chatLevel === 'no_one';
+  var copyTips = function copyTips() {
+    handleToast({
+      id: 'copy-multi-msg',
+      toastProps: {
+        type: 'normal',
+        content: t('fmt_statusbar_status_coppied'),
+        size: 'small'
+      }
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "chat-tabs-container",
+      children: chatRoomStores[_type3.FcrRoomType.Waitingroom] && chatRoomStores[_type3.FcrRoomType.Mainroom] && chatRoomStores[_type3.FcrRoomType.Waitingroom].userCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.FcrTabs, {
+        items: [{
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "chat-container-icon",
+            children: [((_chatRoomStores$FcrRo2 = chatRoomStores[_type3.FcrRoomType.Mainroom]) === null || _chatRoomStores$FcrRo2 === void 0 ? void 0 : _chatRoomStores$FcrRo2.unReadMsgCount) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "fcr-action-bar-chat-unread-count",
+              children: ((_chatRoomStores$FcrRo3 = chatRoomStores[_type3.FcrRoomType.Mainroom]) === null || _chatRoomStores$FcrRo3 === void 0 ? void 0 : _chatRoomStores$FcrRo3.unReadMsgCount) > 99 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: _fcr_chat_reddot["default"]
+              }) : (_chatRoomStores$FcrRo4 = chatRoomStores[_type3.FcrRoomType.Mainroom]) === null || _chatRoomStores$FcrRo4 === void 0 ? void 0 : _chatRoomStores$FcrRo4.unReadMsgCount
+            }), t('fmt_waitingroom_sidebar_chat_label_meeting', {
+              reason1: chatRoomStores[_type3.FcrRoomType.Mainroom].userCount
+            })]
+          }),
+          key: "".concat(_type3.FcrRoomType.Mainroom)
+        }, {
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "chat-container-icon",
+            children: [((_chatRoomStores$FcrRo5 = chatRoomStores[_type3.FcrRoomType.Waitingroom]) === null || _chatRoomStores$FcrRo5 === void 0 ? void 0 : _chatRoomStores$FcrRo5.unReadMsgCount) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "fcr-action-bar-chat-unread-count",
+              children: ((_chatRoomStores$FcrRo6 = chatRoomStores[_type3.FcrRoomType.Waitingroom]) === null || _chatRoomStores$FcrRo6 === void 0 ? void 0 : _chatRoomStores$FcrRo6.unReadMsgCount) > 99 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: _fcr_chat_reddot["default"]
+              }) : (_chatRoomStores$FcrRo7 = chatRoomStores[_type3.FcrRoomType.Waitingroom]) === null || _chatRoomStores$FcrRo7 === void 0 ? void 0 : _chatRoomStores$FcrRo7.unReadMsgCount
+            }), t('fmt_waitingroom_sidebar_label_waiting', {
+              reason1: chatRoomStores[_type3.FcrRoomType.Waitingroom].userCount
+            })]
+          }),
+          key: "".concat(_type3.FcrRoomType.Waitingroom)
+        }],
+        activeKey: "".concat(activeTabIndex),
+        onChange: function onChange(key) {
+          handlerActiveTab(key);
+        }
+      }) : null
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatWrapper.ChatWrapper, {
+      styles: styles,
+      errorMsg: errorMsg,
+      forbiddenTxt: forbiddenTxt,
+      singling: singling,
+      forbidden: !localIsManager && !hasChatPermission && !hasChatSendPrivatePermission,
+      isHost: isHost,
+      handMsg: function handMsg(msg) {
+        if (chatRoomState !== _type2.FcrChatRoomConnectionState.Connected) {
+          handleToast({
+            id: 'send-msg-offline',
+            toastProps: {
+              type: 'error',
+              content: t('fmt_chat_tips_Networkconnect'),
+              size: 'small'
+            }
+          });
+          return;
+        }
+        if (!localIsManager) {
+          if (privateTargetUser.userId === _types.USER_NONE) {
+            handleToast({
+              id: 'send-msg-to-none',
+              toastProps: {
+                type: 'normal',
+                content: t('fmt_chat_tips_selectchat'),
+                size: 'small'
+              }
+            });
+            return;
+          }
+
+          // if (
+          //   chatLevel === 'no_one' ||
+          //   (chatLevel !== 'everyone' &&
+          //     privateTargetUser.userId !== USER_ALL &&
+          //     !isManager(privateTargetUser.userRole))
+          // ) {
+          //   handleToast({
+          //     id: 'send-msg-to-none',
+          //     toastProps: {
+          //       type: 'normal',
+          //       content: t('fmt_chat_tips_permissionchange'),
+          //       size: 'small',
+          //     },
+          //   });
+          //   resetTargetUser();
+          //   return;
+          // }
+
+          if (privateTargetUser.userId === _types.USER_ALL && !hasSendMessagePermission()) {
+            handleToast({
+              id: 'send-msg-to-none',
+              toastProps: {
+                type: 'normal',
+                content: t('fmt_chat_tips_permissionchange'),
+                size: 'small'
+              }
+            });
+            return;
+          } else if (privateTargetUser.userId !== _types.USER_ALL && !hasChatSendPrivatePermission) {
+            handleToast({
+              id: 'send-msg-to-none',
+              toastProps: {
+                type: 'normal',
+                content: t('fmt_chat_tips_permissionchange'),
+                size: 'small'
+              }
+            });
+            resetTargetUser();
+            return;
+          }
+        }
+        sendMsg(msg);
+      },
+      handleClickUploadImage: handleClickUploadImage,
+      msgBarElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatBar.MessageBar, {
+        selectedUser: privateTargetUser,
+        users: targetList,
+        onTargetChange: handleTargetChange,
+        title: chatSelectNoTitle ? undefined : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "assign-host-title",
+          children: chatLevel === 'public' ? t('fmt_chat_option_onlypublic') : t('fmt_chat_option_onlyprivate')
+        })
+      }),
+      targetUserIsOnline: targetUserIsOnline,
+      privateTarget: privateTargetUser.userId,
+      selectTargetNickname: privateTargetUser.userName,
+      multiSelectActive: multiSelectActive,
+      selectCnt: selectCnt,
+      onSelectCancel: function onSelectCancel() {
+        resetMultiSelectStates();
+      },
+      onSelectConfirm: /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return handleMultiCopyMsg();
+            case 2:
+              resetMultiSelectStates();
+              copyTips();
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      })),
+      defaultMsg: textMsg,
+      updateChatTextMsg: updateChatTextMsg,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_messageList.MessageList, {
+        updateReadMsgIndex: updateReadIndex,
+        userId: localUserId,
+        setMultiSelectActive: setMultiSelectActive,
+        multiSelectActive: multiSelectActive,
+        copyMap: copyMap,
+        setCopyMap: setCopyMap,
+        selectCnt: selectCnt,
+        copyTips: copyTips
+      })
+    })]
+  });
+});

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

@@ -17,7 +17,7 @@ var _icon = require("agora-ui-foundation/lib/components/icon");
 var _store = require("../../../../setting/store");
 var _store2 = require("../../store");
 require("../../index.css");
-var _deviceStore = require("../../../../../common/device-store");
+var _type2 = require("../../../../../type");
 var _jsxRuntime = require("react/jsx-runtime");
 var AudioMenu = (0, _mobxReact.observer)(function (_ref) {
   var onConnectClick = _ref.onConnectClick,
@@ -119,13 +119,13 @@ var AudioMenu = (0, _mobxReact.observer)(function (_ref) {
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "fcr-device-popover-content-more",
-      children: [connectType === _deviceStore.ConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: [connectType === _type2.FcrUIConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "fcr-device-popover-content-more-item fcr-device-popover-content-more-item--danger",
+        onClick: function onClick() {
+          onConnectClick();
+          stopAudioByComputer();
+        },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          onClick: function onClick() {
-            onConnectClick();
-            stopAudioByComputer();
-          },
           children: transI18n('fmt_device_label_audio_list_leaveComputerAudio')
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

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

@@ -20,7 +20,7 @@ var _phoneMenu = _interopRequireDefault(require("../phone-menu"));
 var _hooks = _interopRequireDefault(require("../../hooks"));
 var _mic = require("agora-ui-foundation/lib/components/icon/mic");
 var _store = require("../../store");
-var _deviceStore = require("../../../../../common/device-store");
+var _type2 = require("../../../../../type");
 var _jsxRuntime = require("react/jsx-runtime");
 var AudioRecordinDeviceIcon = exports.AudioRecordinDeviceIcon = (0, _mobxReact.observer)(function (_ref) {
   var _ref$size = _ref.size,
@@ -82,7 +82,7 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
         className: "device-control",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "device-control-inner",
-          children: [connectType === _deviceStore.ConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [connectType === _type2.FcrUIConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             onClick: function onClick() {
               return openConnection('computer');
             },
@@ -97,7 +97,7 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
               className: "device-control-text",
               children: transI18n('fmt_toolbar_label_connectaudio')
             })]
-          }), connectType === _deviceStore.ConnectType.COMPUTER && (!noMic ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          }), connectType === _type2.FcrUIConnectType.COMPUTER && (!noMic ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             onClick: function onClick() {
               enableMicrophone(!microphoneEnabled);
             },
@@ -119,7 +119,7 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
               className: "device-control-text",
               children: transI18n('fmt_internalsetting_status_nodevice')
             })]
-          })), connectType === _deviceStore.ConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          })), connectType === _type2.FcrUIConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPhoneCall.FcrIconPhoneCall, {
               isMuted: !phoneMicEnabled
             }), showTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -133,17 +133,17 @@ var MicrophoneControl = exports.MicrophoneControl = (0, _mobxReact.observer)(fun
           onVisibleChange: handlePopoverVisibleChanged,
           trigger: "click",
           content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [connectType === _deviceStore.ConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_noneMenu["default"], {
+            children: [connectType === _type2.FcrUIConnectType.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_noneMenu["default"], {
               onItemClick: function onItemClick() {
                 handlePopoverVisibleChanged(false);
                 setPopoverOpened(false);
               }
-            }), connectType === _deviceStore.ConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)(_audioMenu["default"], {
+            }), connectType === _type2.FcrUIConnectType.COMPUTER && /*#__PURE__*/(0, _jsxRuntime.jsx)(_audioMenu["default"], {
               setPopoverOpened: setPopoverOpened,
               onConnectClick: function onConnectClick() {
                 handlePopoverVisibleChanged(false);
               }
-            }), connectType === _deviceStore.ConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_phoneMenu["default"], {
+            }), connectType === _type2.FcrUIConnectType.PHONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_phoneMenu["default"], {
               onItemClick: function onItemClick() {
                 handlePopoverVisibleChanged(false);
                 setPopoverOpened(false);

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

@@ -156,6 +156,9 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.fcr-device-popover-content-more-item--danger {
+  color: var(--fcr_ui_scene_ramp_red6);
+}
 
 .fcr-device-popover-content-more-item--danger:hover {
   color: var(--fcr_ui_scene_ramp_red6);

package/lib/modules/components/device-control/store.d.ts

@@ -1,18 +1,16 @@
-import { FcrDeviceStore } from '../../../common/device-store';
-import { FcrDesktopMediaControl, FcrStreamControl, FcrUserControl } from 'fcr-core';
-import { FcrUIEventStore } from '../../../common/event-store';
 import { DeviceSettingDialogConfig } from '../../setting/store';
 import { FcrMainRoomControl, FcrWaitingRoomControl } from 'fcr-core/lib/room-control/type';
-import { FcrDeviceStreamStore } from '../../../common/device-stream-store';
 import { ConnectionTabType } from '../../video-window/type';
+import { FcrUIEventProvider } from '../../../providers/event-provider';
+import { FcrUIDeviceProvider } from '../../../providers/device-provider';
+import { FcrUISharedDevicePrivilegeDataSource } from '../../../shared-data-source/device-privilege-data';
+import { FcrUIDeviceStreamProvider } from '../../../providers/device-stream-provider';
 export declare class DeviceControlStore {
-    private _mediaControl;
     private _roomControl;
-    private _userControl;
-    private _streamControl;
-    private _deviceStreamStore;
-    private _uiEventStore;
-    private _deviceStore;
+    private _deviceProvider;
+    private _eventProvider;
+    private _deviceStreamProvider;
+    private _sharedDevicePrivilegeDataSource;
     private _connectionWindowId;
     accessor isPstnUser: boolean;
     accessor phoneMicEnabled: boolean;
@@ -25,8 +23,8 @@ export declare class DeviceControlStore {
     get microphoneVolumeLevel(): number;
     get microphoneList(): import("agora-rte-sdk").AgoraRtcDeviceInfo[];
     get cameraList(): import("agora-rte-sdk").AgoraRtcDeviceInfo[];
-    get connectType(): import("../../../common/device-store").ConnectType;
-    constructor(_mediaControl: FcrDesktopMediaControl, _roomControl: FcrMainRoomControl | FcrWaitingRoomControl, _userControl: FcrUserControl, _streamControl: FcrStreamControl, _deviceStreamStore: FcrDeviceStreamStore, _uiEventStore: FcrUIEventStore, _deviceStore: FcrDeviceStore);
+    get connectType(): import("../../../type").FcrUIConnectType;
+    constructor(_roomControl: FcrMainRoomControl | FcrWaitingRoomControl, _deviceProvider: FcrUIDeviceProvider, _eventProvider: FcrUIEventProvider, _deviceStreamProvider: FcrUIDeviceStreamProvider, _sharedDevicePrivilegeDataSource: FcrUISharedDevicePrivilegeDataSource);
     openDeviceSettingDialog(arg: Partial<DeviceSettingDialogConfig>): void;
     openConnection(type: ConnectionTabType): void;
     closeConnection(): void;
@@ -37,6 +35,7 @@ export declare class DeviceControlStore {
     setMicrophoneId(microphoneId: string): void;
     setCameraId(cameraId: string): void;
     stopAudioByComputer(): void;
+    release(): void;
     private _handleStreamUpdate;
 }
 export declare const DeviceControlStoreContext: import("react").Context<DeviceControlStore>;