fcr-ui-scene 3.4.5 → 3.5.1

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

@@ -6,69 +6,36 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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"));
 var _mobxReact = require("mobx-react");
-var _participants = require("agora-ui-foundation/lib/components/participants");
-var _tabs = require("agora-ui-foundation/lib/components/tabs");
+var _merge = _interopRequireDefault(require("./components/merge"));
+var _renderTab = _interopRequireDefault(require("./components/render-tab"));
+var _renderUser = _interopRequireDefault(require("./components/render-user"));
 var _store = require("../../../dialog/store");
-var _store2 = require("../../store");
-var _i18n = require("agora-ui-foundation/lib/i18n");
-var _footer = _interopRequireDefault(require("../footer"));
 var _react = require("react");
+var _store2 = require("../../store");
 var _constant = require("../../../../utilities/constant");
-var _env = require("agora-foundation/lib/utilities/env");
-var _attendee = require("../attendee");
-var _merge = _interopRequireDefault(require("../merge"));
-var _type = require("fcr-core/lib/room-control/type");
-var _userAction = require("../user-action");
+var _participants = require("./components/participants");
+var _footer = _interopRequireDefault(require("./components/footer"));
 var _jsxRuntime = require("react/jsx-runtime");
 var ParticipantsContainer = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store2.StoreContext),
     userList = _useContext.userList,
     handlerSearchUser = _useContext.handlerSearchUser,
     searchText = _useContext.searchText,
-    currentPerspectiveType = _useContext.currentPerspectiveType,
-    setCurrentModal = _useContext.setCurrentModal,
-    handlerRoomControlAction = _useContext.handlerRoomControlAction,
     handlerUserAction = _useContext.handlerUserAction,
-    allowUnmuteSelfAudio = _useContext.allowUnmuteSelfAudio,
-    allowJoinWithMuteAudio = _useContext.allowJoinWithMuteAudio,
     currentModal = _useContext.currentModal,
-    openParticipantsWindow = _useContext.openParticipantsWindow,
     onInvite = _useContext.onInvite,
-    hasRevokeHostPermission = _useContext.hasRevokeHostPermission,
-    checkIsPin = _useContext.checkIsPin,
     hasPinnedStream = _useContext.hasPinnedStream,
-    enableSpotlight = _useContext.enableSpotlight,
     mergeConfirmDialog = _useContext.mergeConfirmDialog,
     setMergeConfirmDialog = _useContext.setMergeConfirmDialog,
     mergeConfirmDialogOk = _useContext.mergeConfirmDialogOk,
     mergeUserId = _useContext.mergeUserId,
     mergeUserInfo = _useContext.mergeUserInfo,
-    getAllowedOperations = _useContext.getAllowedOperations,
-    hasMutePermission = _useContext.hasMutePermission,
-    hasUnmutePermission = _useContext.hasUnmutePermission,
-    hasRequestStartAudioPermission = _useContext.hasRequestStartAudioPermission,
-    hasWaitingRoomPermission = _useContext.hasWaitingRoomPermission,
-    handleActiveTab = _useContext.handleActiveTab,
-    activeTab = _useContext.activeTab,
-    moveToMainRoomByUserIds = _useContext.moveToMainRoomByUserIds,
-    kickOutWaitingRoomAllMember = _useContext.kickOutWaitingRoomAllMember,
-    moveToMainRoomAllMember = _useContext.moveToMainRoomAllMember,
-    isNewWaitingRoomUserEnter = _useContext.isNewWaitingRoomUserEnter,
-    waitingRoomUserCount = _useContext.waitingRoomUserCount,
-    interpreterUsers = _useContext.interpreterUsers,
-    interpreterState = _useContext.interpreterState,
-    interpreterInputLanguageList = _useContext.interpreterInputLanguageList,
-    refreshList = _useContext.refreshList,
-    openMuteAllDialog = _useContext.openMuteAllDialog;
+    isLocalUserHost = _useContext.isLocalUserHost,
+    openMuteAllDialog = _useContext.openMuteAllDialog,
+    handlerRoomControlAction = _useContext.handlerRoomControlAction,
+    hasInvite = _useContext.hasInvite;
   var dialogStore = (0, _react.useContext)(_store.StoreContext);
-  var transI18n = (0, _i18n.useI18n)();
   var handlerRoomControlClick = function handlerRoomControlClick(action, userId) {
     if (action === _constant.FcrUIRoomControlType.MUTE_ALL_AUDIO) {
       openMuteAllDialog({
@@ -76,93 +43,32 @@ var ParticipantsContainer = (0, _mobxReact.observer)(function () {
       });
       return;
     }
-    setShowMuteAllDialog(false);
     handlerRoomControlAction(action);
   };
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    showMuteAllDialog = _useState2[0],
-    setShowMuteAllDialog = _useState2[1];
-  var handlerTypeChange = function handlerTypeChange(type) {
-    setCurrentModal(type);
-    if ((0, _env.isElectron)() && type === 'window') {
-      openParticipantsWindow();
-    }
-  };
   var dialogContaner = dialogStore !== null && dialogStore !== void 0 && dialogStore.participantElectronDialogContainer ? function () {
     return dialogStore.participantElectronDialogContainer;
   } : void 0;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "participants-container",
-    children: [waitingRoomUserCount > 0 ? /*#__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);
-      }
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_participants.FcrParticipants, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_renderTab["default"], {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_participants.FcrParticipants, {
       type: currentModal,
       userList: userList,
       onSearch: handlerSearchUser,
       searchText: searchText,
       onInvite: onInvite,
-      isShowInvite: true,
+      hasInvite: hasInvite,
       hasPinnedStream: hasPinnedStream,
       toggleParticipantAction: handlerUserAction,
       userRenderer: function userRenderer(user) {
-        var _interpreterInputLang;
-        var interpreterInputLanguage = (_interpreterInputLang = interpreterInputLanguageList.find(function (inputLanguageByUserId) {
-          return inputLanguageByUserId.userId === user.userId;
-        })) === null || _interpreterInputLang === void 0 ? void 0 : _interpreterInputLang.language;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobxReact.Observer, {
-          children: function children() {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_attendee.ParticipantAttendee, {
-              user: user,
-              interpreterInputLanguage: interpreterInputLanguage,
-              activeTab: activeTab,
-              interpreterUsers: interpreterUsers,
-              interpreterState: interpreterState,
-              type: currentModal,
-              enableSpotlight: enableSpotlight,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_userAction.UserActions, {
-                user: user,
-                onParticipantsButtonClick: handlerUserAction,
-                hasMutePermission: hasMutePermission,
-                hasUnmutePermission: hasUnmutePermission,
-                hasRequestStartAudioPermission: hasRequestStartAudioPermission,
-                moveToMainRoomByUserIds: moveToMainRoomByUserIds,
-                activeTab: activeTab,
-                isPin: checkIsPin(user.userId),
-                hasPinnedStream: hasPinnedStream,
-                allowedOperations: getAllowedOperations(user.userRole, !!user.isMe),
-                audioDeviceType: user.audioDeviceType,
-                type: currentModal
-              })
-            });
-          }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderUser["default"], {
+          user: user
         });
-      }
-      // header={
-      //   <FcrWindowHeader type={currentModal} onTypeChange={handlerTypeChange} title="参会人" />
-      // }
-      ,
+      },
       footer: /*#__PURE__*/(0, _jsxRuntime.jsx)(_footer["default"], {
-        handlerRoomControlClick: handlerRoomControlClick
+        handlerRoomControlClick: handlerRoomControlClick,
+        isLocalUserHost: isLocalUserHost
       })
-    }, refreshList), /*#__PURE__*/(0, _jsxRuntime.jsx)(_merge["default"], {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_merge["default"], {
       getContainer: dialogContaner,
       showMergeConfirmDialog: mergeConfirmDialog,
       onClose: function onClose() {