fcr-ui-scene 3.4.5 → 3.5.0

package/lib/modules/participant/components/participants/components/participants/index.js

@@ -0,0 +1,108 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrParticipants = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _reactVirtualized = require("react-virtualized");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _input = require("agora-ui-foundation/lib/components/input");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _userRow = require("./components/user-row");
+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 FcrParticipants = exports.FcrParticipants = function FcrParticipants(props) {
+  var _props = _objectSpread({}, props),
+    searchText = _props.searchText,
+    onSearch = _props.onSearch,
+    userList = _props.userList,
+    userRenderer = _props.userRenderer,
+    onInvite = _props.onInvite,
+    hasPinnedStream = _props.hasPinnedStream,
+    toggleParticipantAction = _props.toggleParticipantAction,
+    toggleRoomControlAction = _props.toggleRoomControlAction,
+    footer = _props.footer,
+    header = _props.header,
+    hasInvite = _props.hasInvite;
+
+  // 使用 useMemo 初始化 value 状态
+  var _useState = (0, _react.useState)((0, _react.useMemo)(function () {
+      return searchText || '';
+    }, [searchText])),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var t = (0, _i18n.useI18n)();
+  var handleChange = function handleChange(val) {
+    setValue(val);
+    onSearch(val);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-participant",
+    children: [header, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-participant__search-and-invite",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_input.FcrInput, {
+        size: "small",
+        placeholder: t('fmt_attendies_button_serach'),
+        value: value,
+        shape: "rounded",
+        onChange: handleChange,
+        maxLength: 21,
+        style: {
+          background: 'var(--fcr_ui_scene_input2)'
+        }
+        // autoFocus
+        ,
+        iconPrefix: {
+          type: _type.FcrIconType.FCR_V2_SEARCH,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+          }
+        }
+      }), hasInvite && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        className: "fcr_participants_button_invite",
+        type: "secondary-bordered",
+        shape: "rounded",
+        size: "XS",
+        onClick: onInvite,
+        children: t('fmt_participants_button_invite')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-participant__list",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.AutoSizer, {
+        children: function children(_ref) {
+          var height = _ref.height,
+            width = _ref.width;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.List, {
+            width: width,
+            height: height,
+            rowCount: userList.length,
+            rowHeight: _userRow.cache.rowHeight,
+            rowRenderer: (0, _userRow.userRowRenderer)(userList, userRenderer, hasPinnedStream, toggleParticipantAction)
+          });
+        }
+      })
+    }), footer ? footer : null]
+  });
+};

package/lib/modules/participant/components/participants/components/render-tab/index.d.ts

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

package/lib/modules/participant/components/participants/components/render-tab/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _tabs = require("agora-ui-foundation/lib/components/tabs");
+var _react = require("react");
+var _store = require("../../../../store");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _type = require("../../../../../../type");
+var _jsxRuntime = require("react/jsx-runtime");
+var RenderTabs = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    waitingRoomUserCount = _useContext.waitingRoomUserCount,
+    isNewWaitingRoomUserEnter = _useContext.isNewWaitingRoomUserEnter,
+    activeTab = _useContext.activeTab,
+    handleActiveTab = _useContext.handleActiveTab;
+  var transI18n = (0, _i18n.useI18n)();
+  var renderTabs = (0, _react.useCallback)(function () {
+    if (waitingRoomUserCount > 0) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.FcrTabs, {
+        items: [{
+          label: transI18n('fmt_waitingroom_sidebar_chat_label_meeting'),
+          key: _type.FcrUIRoomType.MAIN_ROOM
+        }, {
+          label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "participants-container-icon",
+            children: [isNewWaitingRoomUserEnter ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "participants-container-red"
+            }) : null, transI18n('fmt_waitingroom_sidebar_label_waiting', {
+              reason1: waitingRoomUserCount
+            })]
+          }),
+          key: _type.FcrUIRoomType.WAITING_ROOM
+        }],
+        activeKey: activeTab,
+        onChange: function onChange(key) {
+          handleActiveTab(key);
+        }
+      });
+    }
+    return null;
+  }, [waitingRoomUserCount, isNewWaitingRoomUserEnter, transI18n, activeTab, handleActiveTab]);
+  return renderTabs();
+});
+var _default = exports["default"] = RenderTabs;

package/lib/modules/participant/components/participants/components/render-user/components/attendee/components/interpreter-tag/index.d.ts

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

package/lib/modules/participant/components/participants/components/render-user/components/attendee/components/interpreter-tag/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParticipantAttendeeinterpreterTag = void 0;
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _store = require("../../../../../../../../store");
+var _useLanguageConfig = require("../../../../../../../../../interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig");
+var _jsxRuntime = require("react/jsx-runtime");
+var ParticipantAttendeeinterpreterTag = exports.ParticipantAttendeeinterpreterTag = (0, _mobxReact.observer)(function (_ref) {
+  var _interpreterInputLang;
+  var userId = _ref.userId;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    interpreterUserList = _useContext.interpreterUserList,
+    isInterpreterOpened = _useContext.isInterpreterEnabled,
+    interpreterInputLanguageList = _useContext.interpreterInputLanguageList;
+  var userInterpreterInputLanguage = (_interpreterInputLang = interpreterInputLanguageList.find(function (inputLanguageByUserId) {
+    return inputLanguageByUserId.userId === userId;
+  })) === null || _interpreterInputLang === void 0 ? void 0 : _interpreterInputLang.language;
+  var t = (0, _i18n.useI18n)();
+  var isUserIdInterpreter = (0, _react.useMemo)(function () {
+    return interpreterUserList === null || interpreterUserList === void 0 ? void 0 : interpreterUserList.find(function (ele) {
+      return ele.userId === userId;
+    });
+  }, [interpreterUserList]);
+  var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: isInterpreterOpened && isUserIdInterpreter && userInterpreterInputLanguage && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "attendee__host-badge attendee__interpreter-tag-bg",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "attendee__interpreter-tag-user",
+        children: t('fmt_ai_transcriptions_setting_label_translator')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "attendee__interpreter-tag-language",
+        children: getLanguageConfig(userInterpreterInputLanguage).abbr
+      })]
+    })
+  });
+});

package/lib/modules/participant/components/participants/components/render-user/components/attendee/components/microphone-indicator/index.d.ts

@@ -0,0 +1,6 @@
+export declare const MicrophoneIndicator: ({ audioDeviceType, hasAudio, isLocal, userId, }: {
+    hasAudio: boolean;
+    audioDeviceType: "none" | "computer-mic" | "phone-mic";
+    isLocal: boolean;
+    userId: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/participant/components/participants/components/render-user/components/attendee/components/microphone-indicator/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MicrophoneIndicator = void 0;
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _microphoneState = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/microphone-state");
+var _store = require("../../../../../../../../store");
+var _jsxRuntime = require("react/jsx-runtime");
+var MicrophoneIndicator = exports.MicrophoneIndicator = (0, _mobxReact.observer)(function (_ref) {
+  var audioDeviceType = _ref.audioDeviceType,
+    hasAudio = _ref.hasAudio,
+    isLocal = _ref.isLocal,
+    userId = _ref.userId;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    audioVolumeMap = _useContext.audioVolumeMap,
+    localMicVolume = _useContext.localMicVolume;
+  var volume = isLocal ? localMicVolume : audioVolumeMap.get(userId);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneState.MicrophoneState, {
+    isMicrophoneMuted: !hasAudio,
+    size: 28,
+    isPhoneMic: audioDeviceType === 'phone-mic',
+    voicePercent: volume || 0
+  });
+});

package/lib/modules/participant/components/participants/components/render-user/components/attendee/components/user-avatar/index.d.ts

@@ -0,0 +1,7 @@
+export declare const userAvatar: (userType: string) => {
+    icon: import("react/jsx-runtime").JSX.Element;
+    backgroundColor: string;
+} | {
+    icon: null;
+    backgroundColor: string;
+};

package/lib/modules/participant/components/participants/components/render-user/components/attendee/components/user-avatar/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.userAvatar = void 0;
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var userAvatar = exports.userAvatar = function userAvatar(userType) {
+  if (userType === 'meeting-system') {
+    return {
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_SIPDEVICE,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_white10)',
+          iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+        }
+      }),
+      backgroundColor: 'var(--fcr_ui_scene_ramp_purple7)'
+    };
+  }
+  if (userType === 'phone') {
+    return {
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_PHONECALL3,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_white10)'
+        }
+      }),
+      backgroundColor: 'var(--fcr_ui_scene_ramp_green6)'
+    };
+  }
+  return {
+    icon: null,
+    backgroundColor: ''
+  };
+};

package/lib/modules/participant/components/participants/components/render-user/components/attendee/index.css

@@ -0,0 +1,69 @@
+.attendee__user-info-avatar_speakerSpotlight {
+  position: relative;
+}
+.attendee__user-info-avatar_speakerSpotlight::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
+  border: 2px solid var(--fcr_ui_scene_ramp_green6);
+  border-radius: var(--fcr_cornerradius_l);
+}
+.attendee__more-actions {
+  max-width: 300px;
+  padding: 0;
+}
+
+.operate-waiting-room-dialog-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  padding: 20px;
+  border-radius: 20px;
+}
+
+.operate-waiting-room-dialog-title {
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.operate-waiting-room-dialog-tooltip {
+  margin-bottom: 10px;
+}
+
+.operate-waiting-room-dialog-confirm {
+  display: flex;
+}
+
+.operate-waiting-room-dialog-btns {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 10px;
+}
+
+.operate-waiting-room-dialog-btns .fcr-button-normal {
+  width: 48%;
+}
+
+.operate-waiting-room-dialog-btns .fcr-button-white {
+  background-color: var(--fcr_ui_scene_btn2);
+  color: var(--fcr_ui_scene_icontext2);
+  width: 48%;
+}
+
+.operate-waiting-room-dialog-btns .fcr-button-white:hover {
+  background-color: var(--fcr_ui_scene_btn2) !important;
+  color: var(--fcr_ui_scene_icontext2) !important;
+  width: 48%;
+}
+
+.operate-waiting-room-dialog-btns .fcr-button-danger {
+  width: 48%;
+}

package/lib/modules/participant/components/participants/components/render-user/components/attendee/index.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import './index.css';
+import './index.css';
+import { ParticipantAttendeeProps } from '../../../../../../type';
+export declare const ParticipantAttendee: (props: PropsWithChildren<ParticipantAttendeeProps>) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/participant/components/participants/components/render-user/components/attendee/index.js

@@ -0,0 +1,133 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParticipantAttendee = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _avatar = require("agora-ui-foundation/lib/components/avatar");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _cameraState = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/camera-state");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+require("./index.css");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _helper = require("agora-ui-foundation/lib/components/avatar/helper");
+var _microphoneIndicator = require("./components/microphone-indicator");
+var _userAvatar = require("./components/user-avatar");
+var _interpreterTag = require("./components/interpreter-tag");
+var _store = require("../../../../../../store");
+var _types = require("../../../../types");
+var _type2 = require("../../../../../../../../type");
+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 ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReact.observer)(function (props) {
+  var children = props.children,
+    user = props.user;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    activeTab = _useContext.activeTab,
+    enableSpotlight = _useContext.enableSpotlight;
+  var userId = user.userId,
+    userName = user.userName,
+    isMe = user.isMe,
+    hasAudio = user.hasAudio,
+    hasVideo = user.hasVideo,
+    isHost = user.isHost,
+    isScreenSharing = user.isScreenSharing,
+    userType = user.userType,
+    userRole = user.userRole,
+    isSpotlight = user.isSpotlight,
+    isBoardActive = user.isBoardActive,
+    audioDeviceType = user.audioDeviceType,
+    videoDeviceType = user.videoDeviceType;
+  var nameColor = (0, _helper.getNameColor)(userName);
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('attendee', {
+      'attendee-active': false
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "attendee__user-info",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])('attendee__user-info-avatar', {
+          'attendee__user-info-avatar_speakerSpotlight': isSpotlight && enableSpotlight
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, _objectSpread({
+          size: 32,
+          nickName: userName,
+          textSize: 14
+        }, (0, _userAvatar.userAvatar)(userType)))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "attendee__user-info-identity",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "attendee__name",
+          style: {
+            color: nameColor
+          },
+          children: [userName, isMe && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "attendee__me-badge",
+            children: ["(", t('fmt_participant_label_Me'), ")"]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "attendee__tag-group",
+          children: [isHost && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "attendee__host-badge",
+            children: t('fmt_role_host')
+          }), isHost && /*#__PURE__*/(0, _jsxRuntime.jsx)(_interpreterTag.ParticipantAttendeeinterpreterTag, {
+            userId: userId
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "attendee__tag-group",
+          children: [userRole === _types.FcrUserRole.COHOST && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "attendee__host-badge attendee__cohost-tag-bg",
+            children: t('fmt_role_cohost')
+          }), !isHost && /*#__PURE__*/(0, _jsxRuntime.jsx)(_interpreterTag.ParticipantAttendeeinterpreterTag, {
+            userId: userId
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "attendee__user-media",
+      children: [isScreenSharing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_SCREENSHARING_1,
+        size: 28,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+        }
+      }), isBoardActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_WHITEBOARD,
+        size: 28,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_ramp_green6)'
+        }
+      }), audioDeviceType !== 'none' && activeTab === _type2.FcrUIRoomType.MAIN_ROOM && /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneIndicator.MicrophoneIndicator, {
+        audioDeviceType: audioDeviceType,
+        hasAudio: hasAudio,
+        isLocal: !!isMe,
+        userId: userId
+      }), videoDeviceType !== 'none' && activeTab === _type2.FcrUIRoomType.MAIN_ROOM && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
+        isCameraMuted: !hasVideo,
+        size: 28,
+        renderIconType: 'surface'
+      })]
+    }), children]
+  }, userId);
+});

package/lib/modules/participant/components/participants/components/render-user/components/user-action/components/audio-button/index.d.ts

@@ -0,0 +1,7 @@
+import { ParticipantActionType } from 'agora-ui-foundation/lib/components/participants/attendee';
+export declare const AudioButton: (props: {
+    hasAudio: boolean;
+    userId: string;
+    onParticipantsButtonClick: (action: ParticipantActionType, userId: string) => void;
+    actionAudioTag: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/participant/components/participants/components/render-user/components/user-action/components/audio-button/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AudioButton = void 0;
+var _action = require("agora-ui-foundation/lib/components/button/action");
+var _attendee = require("agora-ui-foundation/lib/components/participants/attendee");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+// 处理音频按钮点击的组件
+var AudioButton = exports.AudioButton = function AudioButton(props) {
+  var hasAudio = props.hasAudio,
+    userId = props.userId,
+    onParticipantsButtonClick = props.onParticipantsButtonClick,
+    actionAudioTag = props.actionAudioTag;
+  var t = (0, _i18n.useI18n)();
+  var handleAudioButtonClick = function handleAudioButtonClick() {
+    var action = hasAudio ? _attendee.ParticipantActionType.MUTE_AUDIO : _attendee.ParticipantActionType.UNMUTE_AUDIO;
+    onParticipantsButtonClick(action, userId);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
+    size: "small",
+    onClick: handleAudioButtonClick,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: hasAudio ? 'attendee__danger-operate' : 'attendee__normal-operate',
+      children: t(actionAudioTag)
+    })
+  });
+};

package/lib/modules/participant/components/participants/components/render-user/components/user-action/components/move-actions-popover/index.d.ts

@@ -0,0 +1,12 @@
+import { ParticipantActionType, User } from 'agora-ui-foundation/lib/components/participants/attendee';
+interface MoreActionsPopoverPropsType {
+    isShowDropMenu: boolean;
+    setIsShowDropMenu: React.Dispatch<React.SetStateAction<boolean>>;
+    clickRef: (dom: HTMLElement | null) => void;
+    handleMoreActionsClick: (action: ParticipantActionType, userId: string) => void;
+    user: User;
+    waitingRoomParticipateActionsNeedHiden: string[];
+    mainRoomParticipateActionsNeedHiden: string[];
+}
+export declare const MoreActionsPopover: (props: MoreActionsPopoverPropsType) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/participant/components/participants/components/render-user/components/user-action/components/move-actions-popover/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MoreActionsPopover = void 0;
+require("core-js/modules/web.timers.js");
+var _action = require("agora-ui-foundation/lib/components/button/action");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _participantsMore = require("agora-ui-foundation/lib/components/participants/participants-more");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _react = require("react");
+var _store = require("../../../../../../../../store");
+var _type2 = require("../../../../../../../../../../type");
+var _jsxRuntime = require("react/jsx-runtime");
+// 处理更多操作弹出框的组件
+var MoreActionsPopover = exports.MoreActionsPopover = function MoreActionsPopover(props) {
+  var isShowDropMenu = props.isShowDropMenu,
+    setIsShowDropMenu = props.setIsShowDropMenu,
+    clickRef = props.clickRef,
+    handleMoreActionsClick = props.handleMoreActionsClick,
+    waitingRoomParticipateActionsNeedHiden = props.waitingRoomParticipateActionsNeedHiden,
+    mainRoomParticipateActionsNeedHiden = props.mainRoomParticipateActionsNeedHiden,
+    user = props.user;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    activeTab = _useContext.activeTab,
+    hasPinnedStream = _useContext.hasPinnedStream;
+  var t = (0, _i18n.useI18n)();
+  var timeoutId = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    visible: isShowDropMenu,
+    overlayInnerStyle: {
+      border: 0,
+      boxShadow: '0px 0px 15px var(--fcr_web_light_dropup_m)',
+      borderRadius: 'var(--fcr_cornerradius_l)',
+      minWidth: '210px',
+      maxWidth: '300px',
+      width: 'fit-content'
+    },
+    overlayClassName: "attendee__more-actions",
+    mouseEnterDelay: 0,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: clickRef,
+      onMouseEnter: function onMouseEnter() {
+        if (timeoutId.current) {
+          clearTimeout(timeoutId.current);
+        }
+      },
+      onMouseLeave: function onMouseLeave() {
+        timeoutId.current = setTimeout(function () {
+          setIsShowDropMenu(false);
+        }, 200);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_participantsMore.FcrParticipantsMoreActions, {
+        onParticipantsButtonClick: handleMoreActionsClick,
+        user: user,
+        hasPinnedStream: hasPinnedStream,
+        hideActions: activeTab === _type2.FcrUIRoomType.MAIN_ROOM ? mainRoomParticipateActionsNeedHiden : waitingRoomParticipateActionsNeedHiden
+      })
+    }),
+    placement: "bottomRight",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
+      onClick: function onClick() {
+        if (!isShowDropMenu) {
+          setIsShowDropMenu(true);
+        }
+      },
+      size: "small",
+      iconType: _type.FcrIconType.FCR_DROPDOWN,
+      children: t('fmt_participants_member_button_more')
+    })
+  });
+};

package/lib/modules/participant/components/participants/components/render-user/components/user-action/components/move-to-mainroom-button/index.d.ts

@@ -0,0 +1,4 @@
+export declare const MoveToMainRoomButton: (props: {
+    userId: string;
+    moveToMainRoomByUserIds: (userId: string[]) => void;
+}) => import("react/jsx-runtime").JSX.Element;