@100mslive/react-native-room-kit/lib/module/components/HMSLiveViewerCount.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, Platform, TouchableOpacity } from 'react-native';
import { useSelector } from 'react-redux';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { useHMSRoomStyleSheet, useShowChatAndParticipants } from '../hooks-util';
import { EyeIcon } from '../Icons';
import { TestIds } from '../utils/constants';
import { useIsAnyStreamingOn } from '../hooks-sdk';
const _HMSLiveViewerCount = () => {
  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 live = useIsAnyStreamingOn();
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
    viewers: {
      backgroundColor: undefined,
      borderWidth: 1,
      borderColor: theme.palette.border_bright
    },
    count: {
      color: theme.palette.on_surface_high,
      fontFamily: `${typograhy.font_family}-SemiBold`
    }
  }));
  const {
    canShowParticipants,
    show
  } = useShowChatAndParticipants();
  const tapGesture = React.useMemo(() => Gesture.Tap(), []);
  const showParticipantsSheet = () => {
    show('participants');
  };
  if (!live || typeof previewPeerCount !== 'number') {
    return null;
  }
  return /*#__PURE__*/React.createElement(GestureDetector, {
    gesture: tapGesture
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: [styles.viewers, hmsRoomStyles.viewers],
    onPress: showParticipantsSheet,
    disabled: !canShowParticipants
  }, /*#__PURE__*/React.createElement(EyeIcon, {
    testID: TestIds.peer_count_icon
  }), /*#__PURE__*/React.createElement(Text, {
    testID: TestIds.peer_count,
    style: [styles.count, hmsRoomStyles.count]
  }, previewPeerCount)));
};
export const HMSLiveViewerCount = /*#__PURE__*/React.memo(_HMSLiveViewerCount);
const styles = StyleSheet.create({
  viewers: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 4,
    paddingRight: 8,
    paddingLeft: 6,
    borderRadius: 4
  },
  count: {
    fontSize: 10,
    lineHeight: Platform.OS === 'android' ? 16 : undefined,
    letterSpacing: 1.5,
    textAlign: 'center',
    textAlignVertical: 'center',
    marginLeft: 4
  }
});
//# sourceMappingURL=HMSLiveViewerCount.js.map