@100mslive/react-native-room-kit/lib/module/components/HMSPreviewPeersList.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 { StyleSheet, Text, View } from 'react-native';
import { useSelector } from 'react-redux';
import { useHMSRoomStyleSheet } from '../hooks-util';
export const HMSPreviewPeersList = () => {
  const previewPeerCount = useSelector(state => {
    var _state$hmsStates$room;
    return (_state$hmsStates$room = state.hmsStates.room) === null || _state$hmsStates$room === void 0 ? void 0 : _state$hmsStates$room.peerCount;
  });
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    container: {
      backgroundColor: theme.palette.surface_default,
      borderColor: theme.palette.border_default
    },
    text: {
      color: theme.palette.on_surface_high,
      fontFamily: `${typography.font_family}-SemiBold`
    }
  }));
  if (typeof previewPeerCount !== 'number') {
    return null;
  }
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.container, hmsRoomStyles.container]
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.text, hmsRoomStyles.text, styles.textSpacer]
  }, previewPeerCount <= 0 ? 'You are the first to join' : `${previewPeerCount} ${previewPeerCount > 1 ? 'others' : 'other'} in session`));
};
const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 20,
    borderWidth: 1
  },
  text: {
    fontSize: 14,
    lineHeight: 24
  },
  textSpacer: {
    marginHorizontal: 8
  }
});
//# sourceMappingURL=HMSPreviewPeersList.js.map