@100mslive/react-native-room-kit
Version:
100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.
83 lines • 2.69 kB
JavaScript
import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { HMSTrackSource } from '@100mslive/react-native-hms';
import { hexToRgbA } from '../../utils/theme';
import { AnswerPhoneIcon, NetworkQualityIcon, ScreenShareIcon } from '../../Icons';
import { useHMSRoomStyleSheet } from '../../hooks-util';
import { TestIds } from '../../utils/constants';
export const PeerNameAndNetwork = ({
name,
isSIPPeerType,
isLocal,
trackSource,
networkQuality
}) => {
const isScreenTrackSource = trackSource && trackSource === HMSTrackSource.SCREEN;
const showTrackSource = trackSource && trackSource !== HMSTrackSource.REGULAR;
const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
contentContainer: {
backgroundColor: theme.palette.background_dim && hexToRgbA(theme.palette.background_dim, 0.64)
},
name: {
color: theme.palette.on_surface_high,
fontFamily: `${typography.font_family}-Regular`
}
}));
return /*#__PURE__*/React.createElement(View, {
style: styles.container
}, /*#__PURE__*/React.createElement(View, {
style: [styles.contentContainer, hmsRoomStyles.contentContainer]
}, isScreenTrackSource ? /*#__PURE__*/React.createElement(ScreenShareIcon, {
style: styles.screenShareIcon
}) : isSIPPeerType ? /*#__PURE__*/React.createElement(AnswerPhoneIcon, {
style: styles.phoneIcon
}) : null, /*#__PURE__*/React.createElement(Text, {
testID: TestIds.tile_user_name,
style: [styles.name, hmsRoomStyles.name],
numberOfLines: 1,
ellipsizeMode: showTrackSource || isSIPPeerType ? 'middle' : 'tail'
}, name, isLocal && ' (You)', showTrackSource && `'s ${trackSource}`), isSIPPeerType ? null : /*#__PURE__*/React.createElement(NetworkQualityIcon, {
testID: TestIds.tile_network_icon,
quality: networkQuality,
style: styles.networkIcon
})));
};
const styles = StyleSheet.create({
container: {
position: 'absolute',
bottom: 8,
width: '100%',
flexDirection: 'row'
},
contentContainer: {
flexDirection: 'row',
paddingVertical: 4,
paddingHorizontal: 8,
borderRadius: 8,
alignItems: 'center',
marginLeft: 8,
// left offset
marginRight: 20 + 4 + 44 // network icon width + network icon left margin + 3 dots button width and horizontal margins
},
name: {
flexGrow: 1,
flexShrink: 1,
fontSize: 14,
lineHeight: 20,
letterSpacing: 0.25
},
screenShareIcon: {
width: 20,
height: 20,
marginRight: 6
},
phoneIcon: {
width: 16,
height: 16,
marginRight: 4
},
networkIcon: {
marginLeft: 4
}
});
//# sourceMappingURL=PeerNameAndNetwork.js.map