@100mslive/react-native-room-kit/lib/module/components/HMSPreviewTile.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 { StyleSheet, Text, View } from 'react-native';
import { PersonIcon } from '../Icons';
import { getInitials } from '../utils/functions';
import { COLORS } from '../utils/theme';
import { HMSLocalVideoView } from './HMSLocalVideoView';
import { useHMSRoomStyleSheet } from '../hooks-util';
export const HMSPreviewTile = () => {
  const isLocalVideoMuted = useSelector(state => state.hmsStates.isLocalVideoMuted);
  const localVideoTrackId = useSelector(state => {
    var _state$hmsStates$loca;
    return (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 || (_state$hmsStates$loca = _state$hmsStates$loca.videoTrack) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.trackId;
  });
  const userName = useSelector(state => state.user.userName);
  const roomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    container: {
      backgroundColor: theme.palette.background_dim
    },
    avatar: {
      backgroundColor: COLORS.EXTENDED.PURPLE
    },
    avatarText: {
      color: COLORS.WHITE,
      fontFamily: `${typography.font_family}-SemiBold`
    }
  }));
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.modalContainer, roomStyles.container]
  }, isLocalVideoMuted || !localVideoTrackId ? /*#__PURE__*/React.createElement(View, {
    style: styles.avatarContainer
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.avatar, roomStyles.avatar]
  }, userName.length === 0 ? /*#__PURE__*/React.createElement(PersonIcon, {
    style: styles.avatarIcon
  }) : /*#__PURE__*/React.createElement(Text, {
    style: [styles.avatarText, roomStyles.avatarText]
  }, getInitials(userName)))) : /*#__PURE__*/React.createElement(HMSLocalVideoView, null));
};
const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    position: 'relative',
    overflow: 'hidden'
  },
  hmsView: {
    flex: 1
  },
  avatarContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  avatar: {
    width: 88,
    aspectRatio: 1,
    borderRadius: 44,
    justifyContent: 'center',
    alignItems: 'center'
  },
  avatarIcon: {
    width: 40,
    height: 40
  },
  avatarText: {
    fontSize: 34,
    lineHeight: 40,
    letterSpacing: 0.25
  }
});
//# sourceMappingURL=HMSPreviewTile.js.map