fcr-ui-scene 3.5.1 → 3.6.1

package/lib/modules/components/member-window/components/member-board.js

@@ -1,63 +0,0 @@
-"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.MemberBoard = void 0;
-var _mobxReact = require("mobx-react");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _env = require("agora-foundation/lib/utilities/env");
-var _memberActions = require("./member-actions");
-var _jsxRuntime = require("react/jsx-runtime");
-var MemberBoard = exports.MemberBoard = (0, _mobxReact.observer)(function (_ref) {
-  var slot = _ref.slot,
-    isMask = _ref.isMask,
-    onMaskDoubleClick = _ref.onMaskDoubleClick,
-    windowData = _ref.windowData,
-    allowedOperations = _ref.allowedOperations,
-    showActionBottomLabel = _ref.showActionBottomLabel,
-    isShowActionAudio = _ref.isShowActionAudio,
-    actionAudioTag = _ref.actionAudioTag,
-    hasPinnedStream = _ref.hasPinnedStream,
-    localUserRole = _ref.localUserRole,
-    sendParticipantEvent = _ref.sendParticipantEvent,
-    muteAudio = _ref.muteAudio,
-    openPrivateChat = _ref.openPrivateChat,
-    setVideoOrientation = _ref.setVideoOrientation,
-    interpreterUserList = _ref.interpreterUserList,
-    isInterpreterEnabled = _ref.isInterpreterEnabled,
-    openRenameDialog = _ref.openRenameDialog,
-    id = _ref.id,
-    volume = _ref.volume;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])("fcr-member-board"),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      onDoubleClick: onMaskDoubleClick,
-      className: (0, _classnames["default"])('fcr-member-board-mask', {
-        'fcr-member-board-mask-show': isMask
-      })
-    }), isMask && /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberActions.MemberWindowActions, {
-      isShowActionAudio: isShowActionAudio,
-      actionAudioTag: actionAudioTag,
-      showActionBottomLabel: showActionBottomLabel,
-      allowedOperations: allowedOperations,
-      setVideoOrientation: setVideoOrientation,
-      hasPinnedStream: hasPinnedStream,
-      localUserRole: localUserRole,
-      sendParticipantEvent: sendParticipantEvent,
-      muteAudio: muteAudio,
-      openPrivateChat: openPrivateChat,
-      windowSize: "large",
-      windowData: windowData,
-      iconSize: 24,
-      showRotation: (0, _env.isElectron)(),
-      interpreterUserList: interpreterUserList,
-      isInterpreterEnabled: isInterpreterEnabled,
-      handleRename: openRenameDialog,
-      id: id,
-      volume: volume
-    }), slot]
-  });
-});

package/lib/modules/dialog/types/index.d.ts

@@ -1,70 +0,0 @@
-type FcrUIDialogHooksProps = {
-  /**
-   * @param dialogKey - dialog 窗口的 key，为 FcrUIDialogKey 的枚举之一
-   */
-  dialogKey: FcrUIDialogKey;
-  /**
-   * @param config - electron 的 BrowserWindowConstructorOptions 配置，当自定义配置的 hasCustomShadow 开启时，其中的 width 和 height 会自动加上阴影的宽度
-   * @param height - The height value should be based on the maximum content height of the tab
-   */
-  config: Electron.BrowserWindowConstructorOptions;
-  /**
-   * @param onClose - 当 dialog 关闭时的回调函数，函数签名为 dialog 的 store
-   * */
-  onClose?: (store: DialogStore) => void;
-  /**
-   * @param onOpened - 当 dialog 打开时的回调函数，函数签名为 dialog 的 store、browserwindow 对象和设置 bounds 的方法，此 bounds 不同于 browserwindow 的 setBounds 会为宽高自动加上阴影的设置
-   */
-  onOpened?: (props: {
-    browserWindow: Electron.BrowserWindow;
-    store: DialogStore;
-    setBounds: (bounds: Partial<Electron.Rectangle>, animate?: boolean) => void;
-    nearDisplayBounds: Electron.Rectangle;
-  }) => void;
-  /**
-   * * @param onUnmounted - 当 dialog 卸载时的回调函数，函数签名为 dialog 的 store
-   */
-  onUnmounted?: (store: DialogStore) => void;
-  /**
-   * @param children - dialog 的内容
-   */
-  children: React.ReactNode;
-  /**
-   * @param scroll - 是否显示滚动栏，默认为 false
-   */
-  scroll?: boolean;
-  /**
-   * @param focus -  在 dialog 窗口打开之后，调用 browserWindow 的 focus 方法， 默认为 true
-   */
-  focus?: boolean;
-  /**
-   * @param ignoreMouseEvents - 在 dialog 窗口打开之后，设置是否忽略鼠标事件
-   */
-  ignoreMouseEvents?: boolean | Electron.IgnoreMouseEventsOptions;
-  /**
-   * @param alwaysOnTop - 在 dialog 窗口打开之后，主动调用一次 browserWindow 的 setAlwaysOnTop(true, 'normal') 方法，默认为true
-   * @type boolean | 'normal' | 'floating' | 'torn-off-menu' | 'modal-panel' | 'main-menu' | 'status' | 'pop-up-menu' | 'screen-saver'
-   */
-  alwaysOnTop?:
-    | boolean
-    | 'normal'
-    | 'floating'
-    | 'torn-off-menu'
-    | 'modal-panel'
-    | 'main-menu'
-    | 'status'
-    | 'pop-up-menu'
-    | 'screen-saver';
-  /**
-   * @param fullScreen - 自定义全屏设置，和 electron 的全屏设置不同，它会以主窗口的位置为基准，给新打开的窗口设置和屏幕一样的大小
-   */
-  fullScreen?: boolean;
-  /**
-   * @param polyfills - 这个可以以一句话的形式描述 polyfills，比如：fix-toast-window-flash，并通过这个字段来判断进行特殊处理
-   */
-  polyfills?: string[];
-  /**
-   * @param hasCustomShadow - 通过缩小 electron 容器内的容器宽度加 css 样式阴影实现，所以会让原生 electron 的拖动响应的边产生偏移，所以如果窗口是可拖动的，需要设置为 false。默认值 true。目前窗口有三种，一种是作为 toast 和 confirm 容器的窗口，这种窗口因为是全屏显示不需要阴影，一种是 participant 和 chat 窗口，这俩窗口需要拉伸操作，所以用系统阴影，不用自定义阴影。还有一种是独立的窗口，这种窗口不需要拉伸，所以用自定义阴影，配置为 true 时，窗口会给宽高加上阴影的偏移量，所以 toast 和 confirm 窗口需要设置为 false
-   * */
-  hasCustomShadow?: boolean;
-};

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

@@ -1,6 +0,0 @@
-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/attendee/components/microphone-indicator/index.js

@@ -1,28 +0,0 @@
-"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 _store = require("../../../../store");
-var _microphoneState = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/microphone-state");
-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/attendee/components/user-avatar/index.d.ts

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

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

@@ -1,39 +0,0 @@
-"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/attendee/index.css

@@ -1,69 +0,0 @@
-.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/attendee/index.d.ts

@@ -1,4 +0,0 @@
-import { PropsWithChildren } from 'react';
-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/attendee/index.js

@@ -1,337 +0,0 @@
-"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/esnext.async-iterator.filter.js");
-require("core-js/modules/esnext.async-iterator.for-each.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;
-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");
-require("core-js/modules/web.timers.js");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-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");
-var _type2 = require("../../../../type");
-var _i18n = require("agora-ui-foundation/lib/i18n");
-require("./index.css");
-var _helper = require("agora-ui-foundation/lib/components/avatar/helper");
-var _useLanguageConfig = require("../../../interpreter/interpreter-list/interpreter-item/components/pick-language/useLanguageConfig");
-var _useClickAnywhere = require("agora-ui-foundation/lib/hooks/use-click-anywhere");
-var _useElectron = require("../../../dialog/hooks/useElectron");
-var _type3 = require("fcr-core/lib/room-control/type");
-var _microphoneIndicator = require("./components/microphone-indicator");
-var _userAvatar = require("./components/user-avatar");
-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 _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isShowDropMenu = _useState2[0],
-    setIsShowDropMenu = _useState2[1];
-  var _props$user = props.user,
-    userId = _props$user.userId,
-    userName = _props$user.userName,
-    isMe = _props$user.isMe,
-    hasAudio = _props$user.hasAudio,
-    hasVideo = _props$user.hasVideo,
-    isHost = _props$user.isHost,
-    isScreenSharing = _props$user.isScreenSharing,
-    userType = _props$user.userType,
-    userRole = _props$user.userRole,
-    isSpotlight = _props$user.isSpotlight,
-    isBoardActive = _props$user.isBoardActive,
-    audioDeviceType = _props$user.audioDeviceType,
-    videoDeviceType = _props$user.videoDeviceType;
-  var enableSpotlight = props.enableSpotlight,
-    activeTab = props.activeTab,
-    interpreterUsers = props.interpreterUsers,
-    interpreterState = props.interpreterState,
-    interpreterInputLanguage = props.interpreterInputLanguage,
-    type = props.type,
-    children = props.children;
-  var dialogInstanceContext = (0, _react.useContext)(_useElectron.DialogInstanceContext);
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    disableHover = _useState4[0],
-    setDisableHover = _useState4[1];
-  var nameColor = (0, _helper.getNameColor)(userName);
-  var volumeTimer = undefined;
-  var _useState5 = (0, _react.useState)(0),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    phoneCallFrame = _useState6[0],
-    setPhoneCallFrame = _useState6[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 percentPhone = function percentPhone(phoneCallFrame) {
-    switch (phoneCallFrame) {
-      case '0':
-        return 30;
-      case '1':
-        return 19;
-      case '2':
-        return 9;
-      default:
-        return 4;
-    }
-  };
-  (0, _react.useEffect)(function () {
-    setDisableHover(userType === 'meeting-system');
-  }, [userType]);
-  (0, _react.useEffect)(function () {
-    if (volumeTimer) {
-      clearInterval(volumeTimer);
-    }
-    if (audioDeviceType === 'phone-mic') {
-      volumeTimer = setInterval(function () {
-        setPhoneCallFrame(function (frame) {
-          return (frame + 1) % 4;
-        });
-      }, 250);
-      return function () {
-        return clearInterval(volumeTimer);
-      };
-    }
-  }, [audioDeviceType]);
-
-  // const userActions = () => {
-  //   const handleAudioButtonClick = () => {
-  //     const action = hasAudio
-  //       ? ParticipantActionType.MUTE_AUDIO
-  //       : ParticipantActionType.UNMUTE_AUDIO;
-  //     onParticipantsButtonClick(action, userId);
-  //   };
-
-  //   const handlePrivateChatButtonClick = () => {
-  //     onParticipantsButtonClick(ParticipantActionType.PRIVATE_CHAT, userId);
-  //   };
-
-  //   const handleMoreActionsClick = (action: ParticipantActionType, userId: string) => {
-  //     onParticipantsButtonClick(action, userId);
-  //     setIsShowDropMenu(false);
-  //   };
-  //   const muteAudioPermission = hasMutePermission(
-  //     isMe ? FcrPrivilegeUserRole.SELF : (userRole as FcrUserRole),
-  //   );
-  //   const startAudioPermission = hasUnmutePermission(
-  //     isMe ? FcrPrivilegeUserRole.SELF : (userRole as FcrUserRole),
-  //   );
-  //   const requestStartAudioPermission = hasRequestStartAudioPermission(userRole as FcrUserRole);
-  //   const { isShowActionAudio, actionAudioTag } = actionMute(
-  //     !!isMe,
-  //     hasAudio,
-  //     muteAudioPermission,
-  //     startAudioPermission,
-  //     requestStartAudioPermission,
-  //   );
-  //   const 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',
-  //   ];
-  //   const mainRoomParticipateActionsNeedHiden: string[] = [];
-
-  //   useEffect(() => {
-  //     return () => {
-  //       if (timeoutId.current) {
-  //         clearTimeout(timeoutId.current);
-  //       }
-  //     };
-  //   }, []);
-  //   const timeoutId = useRef<NodeJS.Timeout | null>();
-  //   return (
-  //     <div
-  //       className={`attendee__user-action attendee__user-action-host ${isShowDropMenu ? 'attendee__user-action-hovered' : ''}`}>
-  //       {isShowActionAudio && activeTab === FcrRoomType.Mainroom && (
-  //         <FcrActionButton size="small" onClick={handleAudioButtonClick}>
-  //           <span className={hasAudio ? 'attendee__danger-operate' : 'attendee__normal-operate'}>
-  //             {t(actionAudioTag as GenerateI18nKey<I18nResouceTypes>)}
-  //           </span>
-  //         </FcrActionButton>
-  //       )}
-  //       {activeTab === FcrRoomType.Waitingroom && (
-  //         <FcrActionButton size="small" onClick={() => moveToMainRoomByUserIds([userId])}>
-  //           <span className={'attendee__normal-operate'}>
-  //             {t('fmt_waitingroom_sidebar_button_admit')}
-  //           </span>
-  //         </FcrActionButton>
-  //       )}
-  //       <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={
-  //           <div
-  //             ref={clickRef}
-  //             onMouseEnter={() => {
-  //               if (timeoutId.current) {
-  //                 clearTimeout(timeoutId.current);
-  //               }
-  //             }}
-  //             onMouseLeave={() => {
-  //               timeoutId.current = setTimeout(() => {
-  //                 setIsShowDropMenu(false);
-  //               }, 200);
-  //             }}>
-  //             <FcrParticipantsMoreActions
-  //               {...props}
-  //               onParticipantsButtonClick={handleMoreActionsClick}
-  //               userRole={userRole as FcrUserRoleValue}
-  //               isPin={isPin}
-  //               hasPinnedStream={hasPinnedStream}
-  //               allowedOperations={allowedOperations}
-  //               userType={userType}
-  //               userId={userId}
-  //               hasVideo={hasVideo}
-  //               hasAudio={hasAudio}
-  //               userName={userName}
-  //               audioDeviceType={audioDeviceType}
-  //               hideActions={
-  //                 activeTab === FcrRoomType.Mainroom
-  //                   ? mainRoomParticipateActionsNeedHiden
-  //                   : waitingRoomParticipateActionsNeedHiden
-  //               }
-  //             />
-  //           </div>
-  //         }
-  //         placement="bottomRight">
-  //         <FcrActionButton
-  //           onClick={() => {
-  //             if (!isShowDropMenu) {
-  //               setIsShowDropMenu(true);
-  //             }
-  //           }}
-  //           size="small"
-  //           iconType={FcrIconType.FCR_DROPDOWN}>
-  //           {t('fmt_participants_member_button_more')}
-  //         </FcrActionButton>
-  //       </FcrPopover>
-  //     </div>
-  //   );
-  // };
-
-  var t = (0, _i18n.useI18n)();
-  var interpreter = (0, _react.useMemo)(function () {
-    return interpreterUsers === null || interpreterUsers === void 0 ? void 0 : interpreterUsers.find(function (ele) {
-      return ele.userId === userId;
-    });
-  }, [interpreterUsers, userId]);
-  var getLanguageConfig = (0, _useLanguageConfig.useLanguageConfig)();
-  var interpreterTag = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: interpreter && interpreterState && interpreterInputLanguage && /*#__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(interpreterInputLanguage).abbr
-      })]
-    })
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])('attendee', {
-      'attendee-active': isShowDropMenu && !disableHover
-    }),
-    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.jsx)("span", {
-            className: "attendee__me-badge",
-            children: "(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 && interpreterTag]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "attendee__tag-group",
-          children: [userRole === _type2.FcrUserRole.COHOST && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "attendee__host-badge attendee__cohost-tag-bg",
-            children: t('fmt_role_cohost')
-          }), !isHost && interpreterTag]
-        })]
-      })]
-    }), /*#__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 === _type3.FcrRoomType.Mainroom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneIndicator.MicrophoneIndicator, {
-        audioDeviceType: audioDeviceType,
-        hasAudio: hasAudio,
-        isLocal: !!isMe,
-        userId: userId
-      }), videoDeviceType !== 'none' && activeTab === _type3.FcrRoomType.Mainroom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
-        isCameraMuted: !hasVideo,
-        size: 28,
-        renderIconType: 'surface'
-      })]
-    }), children]
-  }, userId);
-});