@100mslive/react-native-room-kit/lib/module/components/Participants/ParticipantsItem.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import * as React from 'react';
import { useSelector } from 'react-redux';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { HMSPeerType } from '@100mslive/react-native-hms';
import { isParticipantHostOrBroadcaster } from '../../utils/functions';
import { useHMSRoomStyleSheet } from '../../hooks-util';
import { AnswerPhoneIcon, HandIcon, NetworkQualityIcon, ThreeDotsIcon } from '../../Icons';
import { Menu } from '../MenuModal';
import { ParticipantsItemOptions } from './ParticipantsItemOptions';
import { TestIds } from '../../utils/constants';
const _ParticipantsItem = ({
  data: peer,
  groupId
}) => {
  var _peer$networkQuality;
  const selfHostOrBroadcaster = useSelector(state => {
    var _state$hmsStates$loca;
    const selfRole = (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.role;
    return selfRole && isParticipantHostOrBroadcaster(selfRole);
  });
  const [optionsVisible, setOptionsVisible] = React.useState(false);
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    container: {
      borderColor: theme.palette.border_bright
    },
    label: {
      color: theme.palette.on_surface_high,
      fontFamily: `${typography.font_family}-SemiBold`
    },
    iconWrapper: {
      backgroundColor: theme.palette.surface_bright
    },
    menu: {
      backgroundColor: theme.palette.surface_default,
      borderColor: theme.palette.border_bright
    }
  }));
  const show3Dots = selfHostOrBroadcaster && !peer.isLocal;
  const isSIPPeerType = peer.type === HMSPeerType.SIP;
  const showOptions = () => setOptionsVisible(true);
  const hideOptions = () => setOptionsVisible(false);
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(Text, {
    testID: TestIds.participant_name,
    style: [styles.label, hmsRoomStyles.label],
    ellipsizeMode: "middle",
    numberOfLines: 1
  }, peer.name, peer.isLocal ? ' (You)' : null), /*#__PURE__*/React.createElement(View, {
    style: styles.controls
  }, peer.isHandRaised ? /*#__PURE__*/React.createElement(View, {
    style: [styles.control, styles.iconWrapper, hmsRoomStyles.iconWrapper]
  }, /*#__PURE__*/React.createElement(HandIcon, {
    style: styles.handIcon
  })) : null, isSIPPeerType ? /*#__PURE__*/React.createElement(View, {
    style: [styles.control, styles.iconWrapper, hmsRoomStyles.iconWrapper]
  }, /*#__PURE__*/React.createElement(AnswerPhoneIcon, {
    style: styles.networkIcon
  })) : null, !isSIPPeerType && peer.networkQuality && peer.networkQuality.downlinkQuality >= 0 && peer.networkQuality.downlinkQuality < 4 ? /*#__PURE__*/React.createElement(View, {
    style: [styles.control, styles.iconWrapper, hmsRoomStyles.iconWrapper]
  }, /*#__PURE__*/React.createElement(NetworkQualityIcon, {
    quality: (_peer$networkQuality = peer.networkQuality) === null || _peer$networkQuality === void 0 ? void 0 : _peer$networkQuality.downlinkQuality,
    style: styles.networkIcon
  })) : null, show3Dots ? /*#__PURE__*/React.createElement(Menu, {
    visible: optionsVisible,
    onRequestClose: hideOptions,
    anchor: /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: styles.control,
      onPress: showOptions
    }, /*#__PURE__*/React.createElement(ThreeDotsIcon, {
      stack: "vertical"
    })),
    style: {
      ...styles.menu,
      ...hmsRoomStyles.menu
    }
  }, /*#__PURE__*/React.createElement(ParticipantsItemOptions, {
    peer: peer,
    onItemPress: hideOptions,
    insideHandRaiseGroup: groupId === 'hand-raised'
  })) : null));
};
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    // borderLeftWidth: 1,
    // borderRightWidth: 1,
    padding: 16,
    justifyContent: 'space-between'
  },
  label: {
    flexShrink: 1,
    fontSize: 14,
    lineHeight: 20,
    letterSpacing: 0.1
  },
  controls: {
    flexDirection: 'row'
  },
  control: {
    marginLeft: 16
  },
  iconWrapper: {
    width: 24,
    height: 24,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center'
  },
  handIcon: {
    width: 18.75,
    height: 18.75
  },
  networkIcon: {
    width: 16,
    height: 16
  },
  menu: {
    borderWidth: 1,
    borderRadius: 8,
    backgroundColor: 'transparent'
  }
});
export const ParticipantsItem = /*#__PURE__*/React.memo(_ParticipantsItem);
//# sourceMappingURL=ParticipantsItem.js.map