@100mslive/react-native-room-kit/lib/module/components/ParticipantsCount.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';
const _ParticipantsCount = () => {
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    container: {
      backgroundColor: theme.palette.surface_bright
    },
    count: {
      color: theme.palette.on_surface_high,
      fontFamily: `${typography.font_family}-SemiBold`
    }
  }));
  const peerCount = 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;
  });
  if (typeof peerCount !== 'number') {
    return null;
  }
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.container, hmsRoomStyles.container]
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.count, hmsRoomStyles.count]
  }, peerCount));
};
const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    right: 0,
    borderRadius: 40,
    paddingHorizontal: 4,
    paddingVertical: 2,
    alignItems: 'center',
    justifyContent: 'center'
  },
  count: {
    fontSize: 10,
    lineHeight: 16,
    letterSpacing: 1.5,
    textAlign: 'center'
  }
});
export const ParticipantsCount = /*#__PURE__*/React.memo(_ParticipantsCount);
//# sourceMappingURL=ParticipantsCount.js.map