fcr-ui-scene 3.4.3 → 3.4.4

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

@@ -0,0 +1,135 @@
+"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.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.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;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MoveToMainRoomButton = void 0;
+var _action = require("agora-ui-foundation/lib/components/button/action");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+// 处理移入主房间按钮点击的组件
+var MoveToMainRoomButton = exports.MoveToMainRoomButton = function MoveToMainRoomButton(props) {
+  var userId = props.userId,
+    moveToMainRoomByUserIds = props.moveToMainRoomByUserIds;
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
+    size: "small",
+    onClick: function onClick() {
+      return moveToMainRoomByUserIds([userId]);
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: 'attendee__normal-operate',
+      children: t('fmt_waitingroom_sidebar_button_admit')
+    })
+  });
+};

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

@@ -0,0 +1,2 @@
+import { UserActionsPropsType } from '../../../../types';
+export declare const UserActions: (props: UserActionsPropsType) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,75 @@
+"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.UserActions = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _fcrCore = require("fcr-core");
+var _useClickAnywhere = require("agora-ui-foundation/lib/hooks/use-click-anywhere");
+var _audioButton = require("./components/audio-button");
+var _moveToMainroomButton = require("./components/move-to-mainroom-button");
+var _moveActionsPopover = require("./components/move-actions-popover");
+var _store = require("../../../../../../store");
+var _useElectron = require("../../../../../../../dialog/hooks/useElectron");
+var _muteAction = require("../../../../../../../../utilities/mute-action");
+var _type = require("../../../../../../../../type");
+var _jsxRuntime = require("react/jsx-runtime");
+var waitingRoomParticipateActionsNeedHiden = ['start_video', 'request_start_video', 'stop_video', 'pin', 'set_as_host', 'set_as_co_host', 'revoke_co_host', 'merge_video', 'put_into_waiting_room'];
+var UserActions = exports.UserActions = function UserActions(props) {
+  var user = props.user;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    activeTab = _useContext.activeTab,
+    hasMutePermission = _useContext.hasMutePermission,
+    hasUnmutePermission = _useContext.hasUnmutePermission,
+    hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission,
+    moveToMainRoomByUserIds = _useContext.moveToMainRoomByUserIds,
+    type = _useContext.currentModal,
+    onParticipantsButtonClick = _useContext.handlerUserAction;
+  var hasAudio = user.hasAudio,
+    userId = user.userId,
+    userRole = user.userRole,
+    isMe = user.isMe;
+  var dialogInstanceContext = (0, _react.useContext)(_useElectron.DialogInstanceContext);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isShowDropMenu = _useState2[0],
+    setIsShowDropMenu = _useState2[1];
+  var clickAnywhere = (0, _react.useCallback)(function () {
+    setIsShowDropMenu(false);
+  }, [setIsShowDropMenu]);
+  var clickRef = (0, _useClickAnywhere.useClickAnywhere)(clickAnywhere, type === 'modal' ? dialogInstanceContext === null || dialogInstanceContext === void 0 ? void 0 : dialogInstanceContext.newRendererWindow : window);
+  var mainRoomParticipateActionsNeedHiden = isMe ? ['private_chat'] : [];
+  var muteAudioPermission = hasMutePermission(isMe ? _fcrCore.FcrPrivilegeUserRole.SELF : userRole);
+  var startAudioPermission = hasUnmutePermission(isMe ? _fcrCore.FcrPrivilegeUserRole.SELF : userRole);
+  var requestStartAudioPermission = hasRequestStartAudioPermission(userRole);
+  var _actionMute = (0, _muteAction.actionMute)(!!isMe, hasAudio, muteAudioPermission, startAudioPermission, requestStartAudioPermission),
+    isShowActionAudio = _actionMute.isShowActionAudio,
+    actionAudioTag = _actionMute.actionAudioTag;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "attendee__user-action attendee__user-action-host ".concat(isShowDropMenu ? 'attendee__user-action-hovered' : ''),
+    children: [isShowActionAudio && activeTab === _type.FcrUIRoomType.MAIN_ROOM && /*#__PURE__*/(0, _jsxRuntime.jsx)(_audioButton.AudioButton, {
+      hasAudio: hasAudio,
+      userId: userId,
+      onParticipantsButtonClick: onParticipantsButtonClick,
+      actionAudioTag: actionAudioTag
+    }), activeTab === _type.FcrUIRoomType.WAITING_ROOM && /*#__PURE__*/(0, _jsxRuntime.jsx)(_moveToMainroomButton.MoveToMainRoomButton, {
+      userId: userId,
+      moveToMainRoomByUserIds: moveToMainRoomByUserIds
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_moveActionsPopover.MoreActionsPopover, {
+      user: user,
+      isShowDropMenu: isShowDropMenu,
+      setIsShowDropMenu: setIsShowDropMenu,
+      clickRef: clickRef,
+      handleMoreActionsClick: function handleMoreActionsClick(action, userId) {
+        onParticipantsButtonClick(action, userId);
+        setIsShowDropMenu(false);
+      },
+      waitingRoomParticipateActionsNeedHiden: waitingRoomParticipateActionsNeedHiden,
+      mainRoomParticipateActionsNeedHiden: mainRoomParticipateActionsNeedHiden
+    })]
+  });
+};

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

@@ -0,0 +1,5 @@
+import { User } from '../../types';
+declare const RenderUser: ({ user }: {
+    user: User;
+}) => import("react/jsx-runtime").JSX.Element;
+export default RenderUser;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _mobxReact = require("mobx-react");
+var _attendee = require("./components/attendee");
+var _userAction = require("./components/user-action");
+var _jsxRuntime = require("react/jsx-runtime");
+var RenderUser = (0, _mobxReact.observer)(function (_ref) {
+  var user = _ref.user;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_attendee.ParticipantAttendee, {
+    user: user,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_userAction.UserActions, {
+      user: user
+    })
+  });
+});
+var _default = exports["default"] = RenderUser;

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 require("core-js/modules/es.array.find.js");
 require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.find.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.find.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

package/lib/modules/participant/components/participants/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/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 _type = require("fcr-core/lib/room-control/type");
+var _react = require("react");
+var _store = require("../../../store");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _mobxReact = require("mobx-react");
+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.FcrRoomType.Mainroom
+        }, {
+          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.FcrRoomType.Waitingroom
+        }],
+        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/render-user/index.d.ts

@@ -0,0 +1,5 @@
+import { User } from 'agora-ui-foundation/lib/components/participants/attendee';
+declare const RenderUser: ({ user }: {
+    user: User;
+}) => import("react/jsx-runtime").JSX.Element;
+export default RenderUser;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _attendee = require("../../attendee");
+var _userAction = require("../../user-action");
+var _mobxReact = require("mobx-react");
+var _jsxRuntime = require("react/jsx-runtime");
+var RenderUser = (0, _mobxReact.observer)(function (_ref) {
+  var user = _ref.user;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_attendee.ParticipantAttendee, {
+    user: user,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_userAction.UserActions, {
+      user: user
+    })
+  });
+});
+var _default = exports["default"] = RenderUser;

package/lib/modules/participant/components/participants/types.d.ts

@@ -0,0 +1,96 @@
+export interface ParticipantProps {
+    type: 'window' | 'modal';
+    userList: User[];
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    userRenderer?: (user: User) => React.ReactNode;
+    toggleParticipantAction?: (action: ParticipantActionType, userId: string) => void;
+    toggleRoomControlAction?: (action: string, userId?: string) => void;
+    onSearch: (value: string) => void;
+    searchText?: string;
+    onInvite?: () => void;
+    hasPinnedStream: boolean;
+    hasInvite: boolean;
+}
+export interface User {
+    userId: string;
+    userName: string;
+    avatar?: string;
+    hasVideo: boolean;
+    hasAudio: boolean;
+    isHost: boolean;
+    isMe?: boolean;
+    isScreenSharing?: boolean;
+    audioDeviceType: 'none' | 'computer-mic' | 'phone-mic';
+    videoDeviceType: 'none' | 'computer-cam';
+    userType: 'normal' | 'phone' | 'meeting-system';
+    volume?: number;
+    userRole?: number;
+    isSpotlight?: boolean;
+    isBoardActive?: boolean;
+    allowedOperations?: string[];
+    isPin?: boolean;
+}
+export declare enum ParticipantActionType {
+    MUTE_AUDIO = "MUTE_AUDIO",
+    UNMUTE_AUDIO = "UNMUTE_AUDIO",
+    MUTE_VIDEO = "MUTE_VIDEO",
+    UNMUTE_VIDEO = "UNMUTE_VIDEO",
+    PRIVATE_CHAT = "PRIVATE_CHAT",
+    KICK_OUT = "KICK_OUT",
+    ADD_PIN = "ADD_PIN",
+    REMOVE_PIN = "REMOVE_PIN",
+    SET_AS_HOST = "SET_AS_HOST",
+    SET_AS_CO_HOST = "SET_AS_CO_HOST",
+    SET_AS_ATTENDEE = "SET_AS_ATTENDEE",
+    RENAME = "RENAME",
+    ALL_RECORDING_LOCAL_VIDEO = "ALL_RECORDING_LOCAL_VIDEO",
+    PUT_IN_WAITING_ROOM = "PUT_IN_WAITING_ROOM",
+    STOP_RAISE_HAND = "STOP_RAISE_HAND",
+    SET_MAIN_SPEAKER = "SET_MAIN_SPEAKER",
+    MERGE_VIDEO = "MERGE_VIDEO",
+    RENAME_IN_MEETING = "RENAME_IN_MEETING"
+}
+export declare const enum FcrUserRole {
+    HOST = 1,
+    COHOST = 2,
+    PARTICIPANT = 3,
+    AUDIENCE = 4,
+    OBSERVER = 5,
+    ROBOT = 6
+}
+export type FcrUserRoleValue = 1 | 2 | 3 | 4 | 5 | 6;
+export interface ParticipantsMoreActionsProps {
+    user: Omit<User, 'videoDeviceType'>;
+    onParticipantsButtonClick: (action: ParticipantActionType, userId: string) => void;
+    hasPinnedStream: boolean;
+    hideActions: string[];
+}
+export interface IFcrParticipantItemProps {
+    user: User;
+    hasPinnedStream: boolean;
+    hideActions?: string[];
+    onParticipantsButtonClick?: (action: ParticipantActionType, userId: string) => void;
+}
+export 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 interface ParticipantsHostFooterProps {
+    onRoomControlClick?: (action: string, userId?: string) => void;
+    moreDropMenu?: React.ReactNode;
+    model?: 'mute' | 'unmute';
+    hasRevokeHostPermission?: boolean;
+}
+export interface ParticipantsFooterParticipantProps {
+    type?: 'revoke' | 'become';
+    onRoomControlClick?: (action: string, userId?: string) => void;
+}
+export interface UserActionsPropsType {
+    user: User;
+}

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

@@ -0,0 +1,37 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParticipantActionType = exports.FcrUserRole = void 0;
+var ParticipantActionType = exports.ParticipantActionType = /*#__PURE__*/function (ParticipantActionType) {
+  ParticipantActionType["MUTE_AUDIO"] = "MUTE_AUDIO";
+  ParticipantActionType["UNMUTE_AUDIO"] = "UNMUTE_AUDIO";
+  ParticipantActionType["MUTE_VIDEO"] = "MUTE_VIDEO";
+  ParticipantActionType["UNMUTE_VIDEO"] = "UNMUTE_VIDEO";
+  ParticipantActionType["PRIVATE_CHAT"] = "PRIVATE_CHAT";
+  ParticipantActionType["KICK_OUT"] = "KICK_OUT";
+  ParticipantActionType["ADD_PIN"] = "ADD_PIN";
+  ParticipantActionType["REMOVE_PIN"] = "REMOVE_PIN";
+  ParticipantActionType["SET_AS_HOST"] = "SET_AS_HOST";
+  ParticipantActionType["SET_AS_CO_HOST"] = "SET_AS_CO_HOST";
+  ParticipantActionType["SET_AS_ATTENDEE"] = "SET_AS_ATTENDEE";
+  ParticipantActionType["RENAME"] = "RENAME";
+  ParticipantActionType["ALL_RECORDING_LOCAL_VIDEO"] = "ALL_RECORDING_LOCAL_VIDEO";
+  ParticipantActionType["PUT_IN_WAITING_ROOM"] = "PUT_IN_WAITING_ROOM";
+  ParticipantActionType["STOP_RAISE_HAND"] = "STOP_RAISE_HAND";
+  ParticipantActionType["SET_MAIN_SPEAKER"] = "SET_MAIN_SPEAKER";
+  ParticipantActionType["MERGE_VIDEO"] = "MERGE_VIDEO";
+  ParticipantActionType["RENAME_IN_MEETING"] = "RENAME_IN_MEETING";
+  return ParticipantActionType;
+}({});
+var FcrUserRole = exports.FcrUserRole = /*#__PURE__*/function (FcrUserRole) {
+  FcrUserRole[FcrUserRole["HOST"] = 1] = "HOST";
+  FcrUserRole[FcrUserRole["COHOST"] = 2] = "COHOST";
+  FcrUserRole[FcrUserRole["PARTICIPANT"] = 3] = "PARTICIPANT";
+  FcrUserRole[FcrUserRole["AUDIENCE"] = 4] = "AUDIENCE";
+  FcrUserRole[FcrUserRole["OBSERVER"] = 5] = "OBSERVER";
+  FcrUserRole[FcrUserRole["ROBOT"] = 6] = "ROBOT";
+  return FcrUserRole;
+}({}); // 定义一个类型来表示该枚举的值类型

package/lib/modules/participant/components/user-action/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;