fcr-ui-scene 3.7.8 → 3.8.0-alpha

package/lib/modules/participant/components/participants/components/footer/components/footer/index.css

@@ -1,17 +0,0 @@
-.fcr-participant__footer-placeholder {
-  flex: 30%;
-}
-.footer-more-actions {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding: 0 1rem;
-  height: 100%;
-}
-.fcr-participant__footer-creator button {
-  flex: 1;
-}
-
-.fcr-participant__footer-creator button {
-  padding: 0 !important;
-}

package/lib/modules/participant/components/participants/components/footer/components/footer/index.d.ts

@@ -1,5 +0,0 @@
-import { ParticipantsFooterParticipantProps, ParticipantsHostFooterProps } from '../../../../types';
-import './index.css';
-export declare const FcrParticipantsFooter: (props: ParticipantsHostFooterProps) => import("react/jsx-runtime").JSX.Element;
-export declare const FcrParticipantsFooterRename: ({ onRoomControlClick, }: ParticipantsFooterParticipantProps) => import("react/jsx-runtime").JSX.Element;
-export declare const FcrParticipantsFooterWithRevokeHost: ({ type, onRoomControlClick, }: ParticipantsFooterParticipantProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,242 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FcrParticipantsFooterWithRevokeHost = exports.FcrParticipantsFooterRename = exports.FcrParticipantsFooter = void 0;
-require("core-js/modules/es.array.unshift.js");
-var _i18n = require("agora-ui-foundation/lib/i18n");
-var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
-var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
-var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
-var _button = require("agora-ui-foundation/lib/components/button");
-var _popover = require("agora-ui-foundation/lib/components/popover");
-var _type = require("agora-ui-foundation/lib/components/icon/type");
-require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
-// 提取常量
-var ACTION_MUTE_ALL_AUDIO = 'MUTE_ALL_AUDIO';
-var ACTION_UNMUTE_ALL_AUDIO = 'UNMUTE_ALL_AUDIO';
-var ACTION_REVOKE_HOST = 'REVOKE_HOST';
-var ACTION_PLAY_JOIN_LEAVE_SOUND = 'PLAY_JOIN_LEAVE_SOUND';
-var ACTION_LOCK_ROOM = 'LOCK_ROOM';
-var ACTION_ENABLE_WAITING_ROOM = 'ENABLE_WAITING_ROOM';
-var ACTION_ALLOW_ATTENDEE_TO_UNMUTE = 'ALLOW_ATTENDEE_TO_UNMUTE';
-var ACTION_RENAME = 'RENAME';
-var ACTION_ALLOW_ATTENDEE_TO_OPEN_CAMERA = 'ALLOW_ATTENDEE_TO_OPEN_CAMERA';
-var ACTION_REVOKE_HOST_BY_TICKET = 'ACTION_REVOKE_HOST_BY_TICKET';
-var ACTION_CHANGE_NAME = 'ACTION_CHANGE_NAME';
-
-// 提取创建下拉菜单数据的函数
-var createAllActions = function createAllActions(t, onRoomControlClick, hasRevokeHostPermission) {
-  var allActions = [{
-    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      checked: false,
-      label: t('fmt_security_buttons_allhandsdown'),
-      styleType: "white"
-    }),
-    key: 'mute_all',
-    type: 'disabled',
-    onButtonClick: function onButtonClick() {},
-    classNames: 'room-control-drop-with-under-line'
-  }, {
-    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      checked: true,
-      label: t('fmt_security_options_silence'),
-      styleType: "white"
-    }),
-    key: 'join_room_with_mute',
-    type: 'primary',
-    onButtonClick: function onButtonClick() {
-      onRoomControlClick(ACTION_MUTE_ALL_AUDIO);
-    }
-  }, {
-    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      checked: false,
-      label: t('fmt_security_options_playnotification'),
-      styleType: "white"
-    }),
-    key: 'play_join_leave_sound',
-    type: 'disabled',
-    onButtonClick: function onButtonClick() {
-      onRoomControlClick(ACTION_PLAY_JOIN_LEAVE_SOUND);
-    }
-  }, {
-    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      checked: false,
-      label: t('fmt_screenshare_controlbar_security_list_lock'),
-      styleType: "white"
-    }),
-    key: 'lock_room',
-    type: 'disabled',
-    onButtonClick: function onButtonClick() {
-      onRoomControlClick(ACTION_LOCK_ROOM);
-    }
-  }, {
-    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      checked: false,
-      label: t('fmt_security_options_activatewaitingroom'),
-      styleType: "white"
-    }),
-    key: 'enable_waiting_room',
-    type: 'disabled',
-    onButtonClick: function onButtonClick() {
-      onRoomControlClick(ACTION_ENABLE_WAITING_ROOM);
-    },
-    classNames: 'room-control-drop-with-under-line'
-  }, {
-    title: t('fmt_screenshare_options_allow'),
-    key: 'allow_attendee_title',
-    type: 'title'
-  }, {
-    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      checked: false,
-      label: t('fmt_screenshare_controlbar_security_list_participant_unmute'),
-      styleType: "white"
-    }),
-    key: 'unmute_yourself',
-    type: 'primary',
-    onButtonClick: function onButtonClick() {
-      onRoomControlClick(ACTION_ALLOW_ATTENDEE_TO_UNMUTE);
-    }
-  }, {
-    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      checked: false,
-      label: t('fmt_screenshare_controlbar_security_list_participant_changeName'),
-      styleType: "white"
-    }),
-    key: 'rename',
-    type: 'disabled',
-    onButtonClick: function onButtonClick() {
-      onRoomControlClick(ACTION_RENAME);
-    }
-  }, {
-    title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-      checked: false,
-      label: t('fmt_security_start_video'),
-      styleType: "white"
-    }),
-    key: 'start_video',
-    type: 'primary',
-    onButtonClick: function onButtonClick() {
-      onRoomControlClick(ACTION_ALLOW_ATTENDEE_TO_OPEN_CAMERA);
-    },
-    classNames: 'room-control-drop-with-under-line'
-  }];
-  if (hasRevokeHostPermission) {
-    allActions.unshift({
-      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
-        checked: false,
-        label: t('fmt_security_options_restract'),
-        styleType: "white"
-      }),
-      key: 'revoke_host',
-      type: 'primary',
-      onButtonClick: function onButtonClick() {
-        onRoomControlClick(ACTION_REVOKE_HOST);
-      },
-      classNames: 'room-control-drop-with-under-line'
-    });
-  }
-  return allActions;
-};
-var FcrParticipantsFooter = exports.FcrParticipantsFooter = function FcrParticipantsFooter(props) {
-  var _props$onRoomControlC = props.onRoomControlClick,
-    onRoomControlClick = _props$onRoomControlC === void 0 ? function () {} : _props$onRoomControlC,
-    moreDropMenu = props.moreDropMenu,
-    hasRevokeHostPermission = props.hasRevokeHostPermission,
-    openMuteAllDialog = props.openMuteAllDialog;
-  var t = (0, _i18n.useI18n)();
-  var ParticipantsFooterMore = function ParticipantsFooterMore() {
-    var allActions = createAllActions(t, onRoomControlClick, !!hasRevokeHostPermission);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
-      options: allActions
-    });
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "fcr-participant__footer",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-      content: t('fmt_participants_options_allmute'),
-      mouseEnterDelay: 0,
-      trigger: "hover",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-        type: "secondary-bordered",
-        size: "XS",
-        onClick: function onClick() {
-          return openMuteAllDialog();
-        },
-        children: t('fmt_participants_options_allmute')
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-      content: t('fmt_participants_options_allunmute'),
-      mouseEnterDelay: 0,
-      trigger: "hover",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-        type: "secondary-bordered",
-        size: "XS",
-        onClick: function onClick() {
-          return onRoomControlClick(ACTION_UNMUTE_ALL_AUDIO);
-        },
-        children: t('fmt_participants_button_unmuteAll')
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
-      showArrow: false,
-      trigger: "click",
-      overlayClassName: "attendee__footer-more-actions",
-      mouseEnterDelay: 0,
-      overlayInnerStyle: {
-        boxShadow: 'none',
-        border: 'none',
-        minWidth: '256px',
-        width: 'auto',
-        maxWidth: '300px'
-      },
-      content: moreDropMenu ? moreDropMenu : /*#__PURE__*/(0, _jsxRuntime.jsx)(ParticipantsFooterMore, {}),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-        type: "secondary-bordered",
-        size: "XS",
-        postIcon: _type.FcrIconType.FCR_DROPDOWN,
-        children: t('fmt_participants_button_meetingManagement')
-      })
-    })]
-  });
-};
-var FcrParticipantsFooterRename = exports.FcrParticipantsFooterRename = function FcrParticipantsFooterRename(_ref) {
-  var onRoomControlClick = _ref.onRoomControlClick;
-  var t = (0, _i18n.useI18n)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-    content: t('fmt_additional_option_rename_in_meeting'),
-    mouseEnterDelay: 0,
-    trigger: "hover",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-      type: "secondary-bordered",
-      shape: "rounded",
-      size: "XS",
-      onClick: function onClick() {
-        return onRoomControlClick === null || onRoomControlClick === void 0 ? void 0 : onRoomControlClick(ACTION_CHANGE_NAME);
-      },
-      children: t('fmt_additional_option_rename_in_meeting')
-    })
-  });
-};
-
-// 如果当前不是host只是participant,并且有revoke的权限
-var FcrParticipantsFooterWithRevokeHost = exports.FcrParticipantsFooterWithRevokeHost = function FcrParticipantsFooterWithRevokeHost(_ref2) {
-  var type = _ref2.type,
-    onRoomControlClick = _ref2.onRoomControlClick;
-  var t = (0, _i18n.useI18n)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-    content: t(type === 'revoke' ? 'fmt_hostkey_participant_button_reclaim_host' : 'fmt_hostkey_participant_button_claim_host'),
-    mouseEnterDelay: 0,
-    trigger: "hover",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-      type: "secondary-bordered",
-      size: "XS",
-      onClick: function onClick() {
-        return onRoomControlClick === null || onRoomControlClick === void 0 ? void 0 : onRoomControlClick(type === 'revoke' ? ACTION_REVOKE_HOST : ACTION_REVOKE_HOST_BY_TICKET);
-      },
-      children: type === 'revoke' ? t('fmt_hostkey_participant_button_reclaim_host') : t('fmt_hostkey_participant_button_claim_host')
-    })
-  });
-};

package/lib/modules/participant/components/participants/components/participants/components/attendee/index.css

@@ -1,192 +0,0 @@
-.attendee {
-  border-radius: var(--fcr_cornerradius_s);
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  max-width: 100%;
-  justify-content: space-between;
-  min-height: 52px;
-  padding: 10px 10px 10px 6px;
-  margin: 0 10px;
-  position: relative;
-}
-
-.attendee::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0%;
-  margin: 0 10px;
-}
-
-.attendee:hover,
-.attendee-active {
-  background-color: var(--fcr_web_ui_scene_hover);
-}
-
-.attendee:hover::after {
-  border-top: none;
-}
-
-.attendee__user-info {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  gap: 10px;
-  flex: 1;
-}
-.attendee__user-info .fcr-avatar {
-  background-color: var(--for_head2);
-}
-
-.attendee__user-info-identity {
-  max-width: 80%;
-  width: 80%;
-}
-
-.attendee__name {
-  color: var(--for_head2);
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-wrap: break-word;
-  word-break: break-all;
-  font-size: 12px;
-}
-
-.attendee__host-badge {
-  color: var(--fcr_ui_scene_inverse);
-  background-color: var(--fcr_ui_scene_icontext5);
-  width: fit-content;
-  padding: 2px 4px;
-  border-radius: var(--fcr_cornerradius_xxxxs);
-  font-size: 12px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  line-height: 16px;
-  margin-right: 8px;
-}
-
-.attendee__tag-group {
-  display: flex;
-  justify-content: center;
-  justify-content: left;
-}
-
-.attendee__cohost-tag-bg {
-  /* zxq-TODO: 颜色未定义 */
-  /* background-color: var(--fcr_card_green); */
-  background: #83bc53;
-}
-
-.attendee__interpreter-tag-bg {
-  font-weight: 400;
-  background: rgba(0, 0, 0, 1);
-  padding-left: 0;
-  margin-left: 0px;
-  border-radius: 8px;
-  background: var(--fcr_mobile_ui_scene_color_popup_fill3);
-}
-.attendee__interpreter-tag-user {
-  padding-left: 4px;
-  padding-right: 4px;
-  font-size: 12px;
-  background: var(--fcr_ui_scene_ramp_purple6);
-  border-radius: var(--fcr_cornerradius_xxxs) 0px var(--fcr_cornerradius_m)
-    var(--fcr_cornerradius_xxxs);
-}
-.attendee__interpreter-tag-language {
-  padding: 0px 5px 0 5px;
-  color: var(--fcr_ui_scene_icontext7);
-}
-
-.attendee .fcr-button-posticon {
-  width: 24px;
-}
-
-.fcr-participant__footer button:not(:last-child) {
-  flex: 1;
-  min-width: 30%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.fcr-participant__footer button {
-  padding: 0;
-}
-
-.fcr-participant__footer button:last-child {
-  width: fit-content;
-  padding: 0;
-}
-
-.attendee__user-media,
-.attendee__user-action {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  gap: 8px;
-}
-
-.attendee__user-action {
-  position: absolute;
-  right: 14px;
-  opacity: 0;
-}
-
-.attendee:hover .attendee__user-action {
-  /* background-color: var(--fcr_web_ui_scene_hover); */
-  opacity: 1;
-}
-.attendee__footer-more-actions .fcr-tooltip-inner {
-  max-width: 364px !important;
-  min-width: auto !important;
-  width: auto !important;
-}
-
-.attendee__footer-more-actions .fcr-drop-menu-option {
-  width: auto !important;
-}
-.attendee__footer-more-actions .fcr-checkbox-label {
-  font-size: 13px;
-}
-
-.attendee__more-actions .fcr-drop-menu-title,
-.attendee__footer-more-actions .fcr-drop-menu-title {
-  color: var(--fcr_ui_scene_icontext1);
-  font-size: 12px;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 700;
-}
-
-.attendee__more-actions {
-  width: fit-content;
-}
-
-.attendee__more-actions .fcr-drop-menu-option-primary {
-  color: var(--fcr_ui_scene_icontext1);
-}
-
-.attendee__more-actions .fcr-drop-menu-option-primary:hover {
-  color: var(--fcr_web_ui_scene_mainicon2);
-}
-
-.attendee__more-actions .fcr-drop-menu-option-primary:hover ~ .attendee__user-action,
-.attendee__user-action-hovered {
-  opacity: 1;
-}
-
-.attendee__danger-operate {
-  color: var(--fcr_web_ui_scene_mainicon3_red);
-}
-
-.attendee__more-actions button {
-}

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

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-import './index.css';
-import { IFcrParticipantItemProps } from 'agora-ui-foundation/lib/components/participants/attendee';
-export declare const FcrParticipant: FC<IFcrParticipantItemProps>;

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

@@ -1,206 +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/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.FcrParticipant = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _participantsMore = require("../participants-more");
-require("./index.css");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _action = require("agora-ui-foundation/lib/components/button/action");
-var _i18n = require("agora-ui-foundation/lib/i18n");
-var _popover = require("agora-ui-foundation/lib/components/popover");
-var _type = require("agora-ui-foundation/lib/components/icon/type");
-var _icon = require("agora-ui-foundation/lib/components/icon");
-var _avatar = require("agora-ui-foundation/lib/components/avatar");
-var _microphoneState = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/microphone-state");
-var _cameraState = require("agora-ui-foundation/lib/components/room-screen-share-state-bar/camera-state");
-var _types = require("../../../../types");
-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 FcrParticipant = exports.FcrParticipant = function FcrParticipant(props) {
-  var user = props.user,
-    hasPinnedStream = props.hasPinnedStream,
-    _props$onParticipants = props.onParticipantsButtonClick,
-    onParticipantsButtonClick = _props$onParticipants === void 0 ? function () {} : _props$onParticipants,
-    _props$hideActions = props.hideActions,
-    hideActions = _props$hideActions === void 0 ? [] : _props$hideActions,
-    isLocalCameraInSecondaryWindow = props.isLocalCameraInSecondaryWindow;
-  var userId = user.userId,
-    _user$userName = user.userName,
-    userName = _user$userName === void 0 ? '' : _user$userName,
-    hasAudio = user.hasAudio,
-    hasVideo = user.hasVideo,
-    isHost = user.isHost,
-    _user$isMe = user.isMe,
-    isMe = _user$isMe === void 0 ? false : _user$isMe,
-    _user$isScreenSharing = user.isScreenSharing,
-    isScreenSharing = _user$isScreenSharing === void 0 ? false : _user$isScreenSharing,
-    userType = user.userType,
-    videoDeviceType = user.videoDeviceType,
-    audioDeviceType = user.audioDeviceType,
-    hideAudioConnectIcon = user.hideAudioConnectIcon;
-  var t = (0, _i18n.useI18n)();
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    isShowDropMenu = _useState2[0],
-    setIsShowDropMenu = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    disableHover = _useState4[0],
-    setDisableHover = _useState4[1];
-  (0, _react.useEffect)(function () {
-    setDisableHover(userType !== 'normal');
-  }, [userType]);
-  var userActions = function userActions() {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "attendee__user-action attendee__user-action-host ".concat(isShowDropMenu ? 'attendee__user-action-hovered' : ''),
-      children: [isMe && isHost ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
-        size: "small",
-        onClick: function onClick() {
-          onParticipantsButtonClick(hasAudio ? _types.ParticipantActionType.MUTE_AUDIO : _types.ParticipantActionType.UNMUTE_AUDIO, userId);
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: hasAudio ? 'attendee__danger-operate' : 'attendee__normal-operate',
-          children: hasAudio ? t('fmt_device_label_audio_mute') : isMe ? t('fmt_device_label_audio_unmute') : t('fmt_sip_button_unmute')
-        })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: isMe ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
-          size: "small",
-          onClick: function onClick() {
-            return onParticipantsButtonClick(hasAudio ? _types.ParticipantActionType.MUTE_AUDIO : _types.ParticipantActionType.UNMUTE_AUDIO, userId);
-          },
-          children: hasAudio ? t('fmt_device_label_audio_mute') : t('fmt_device_label_audio_unmute')
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
-          size: "small",
-          onClick: function onClick() {
-            return onParticipantsButtonClick(_types.ParticipantActionType.PRIVATE_CHAT, userId);
-          },
-          children: t('fmt_chats_label_privatechat')
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
-        showArrow: false,
-        visible: isShowDropMenu,
-        overlayInnerStyle: {
-          border: 0,
-          boxShadow: 'var(--fcr_web_light_dropup_m)',
-          borderRadius: 'var(--fcr_cornerradius_l)'
-        },
-        overlayClassName: "attendee__more-actions",
-        mouseEnterDelay: 0,
-        content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          onMouseEnter: function onMouseEnter() {
-            return setIsShowDropMenu(true);
-          },
-          onMouseLeave: function onMouseLeave() {
-            return setIsShowDropMenu(false);
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_participantsMore.FcrParticipantsMoreActions, {
-            hideActions: hideActions,
-            hasPinnedStream: hasPinnedStream,
-            onParticipantsButtonClick: onParticipantsButtonClick,
-            user: user,
-            isLocalCameraInSecondaryWindow: isLocalCameraInSecondaryWindow
-          })
-        }),
-        placement: "bottomRight",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.FcrActionButton, {
-          onClick: function onClick() {
-            return setIsShowDropMenu(true);
-          },
-          iconType: _type.FcrIconType.FCR_DROPDOWN,
-          children: t('fmt_participants_member_button_more')
-        })
-      })]
-    });
-  };
-  var userAvatar = function userAvatar() {
-    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
-        }),
-        backgroundColor: 'var(--fcr_ui_scene_ramp_green6)'
-      };
-    }
-    return {
-      icon: null,
-      backgroundColor: ''
-    };
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])('attendee', {
-      'attendee-active': isShowDropMenu && !disableHover
-    }),
-    onMouseLeave: function onMouseLeave() {
-      return setIsShowDropMenu(false);
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "attendee__user-info",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, _objectSpread({
-        size: 24,
-        nickName: userName,
-        textSize: 12
-      }, userAvatar())), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "attendee__user-info-identity",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "attendee__name",
-          children: [userName, isMe && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-            className: "attendee__me-badge",
-            children: ["(", t('fmt_participant_label_Me'), ")"]
-          })]
-        }), isHost && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "attendee__host-badge",
-          children: t('fmt_role_host')
-        })]
-      })]
-    }), /*#__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)'
-        }
-      }), audioDeviceType !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneState.MicrophoneState, {
-        isMicrophoneMuted: !hasAudio,
-        size: 28,
-        isPhoneMic: audioDeviceType === 'phone-mic'
-      }), videoDeviceType !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraState.CameraState, {
-        isCameraMuted: !hasVideo,
-        size: 28
-      })]
-    }), userActions()]
-  }, userId);
-};