@100mslive/react-native-room-kit/lib/module/components/ChatAndParticipants/ChatAndParticipantsView.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 { Platform, StyleSheet, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useHMSRoomStyleSheet, useIsHLSViewer, useShowChatAndParticipants } from '../../hooks-util';
import { ChatAndParticipantsHeader } from './ChatAndParticipantsHeader';
import { ChatFilterBottomSheetView } from '../Chat/ChatFilterBottomSheetView';
import { ParticipantsView } from './ParticipantsView';
import { ChatView } from './ChatView';
import { ChatMoreActionsSheetView } from '../Chat/ChatMoreActionsSheetView';
import { MessageOptionsBottomSheetView } from '../Chat/MessageOptionsBottomSheetView';
const _ChatAndParticipantsView = () => {
  const activeChatBottomSheetTab = useSelector(state => state.app.activeChatBottomSheetTab);
  const isHLSViewer = useIsHLSViewer();
  const {
    hide,
    canShowParticipants,
    canShowChat,
    overlayChatLayout
  } = useShowChatAndParticipants();
  const closeBottomSheet = () => hide('modal');
  const hmsRoomStyles = useHMSRoomStyleSheet(theme => ({
    contentContainer: {
      backgroundColor: theme.palette.surface_dim
    }
  }));
  const showParticipants = activeChatBottomSheetTab === 'Participants' && canShowParticipants;
  const showChat = !isHLSViewer && activeChatBottomSheetTab === 'Chat' && canShowChat && !overlayChatLayout;
  return /*#__PURE__*/React.createElement(SafeAreaView, {
    style: styles.container,
    edges: ['left', 'right']
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.contentContainer, hmsRoomStyles.contentContainer, showParticipants ? styles.participantsContainer : null]
  }, /*#__PURE__*/React.createElement(ChatAndParticipantsHeader, {
    onClosePress: closeBottomSheet
  }), showParticipants ? /*#__PURE__*/React.createElement(View, {
    style: styles.participantsWrapper
  }, /*#__PURE__*/React.createElement(ParticipantsView, null)) : showChat ? /*#__PURE__*/React.createElement(ChatView, null) : null), canShowChat && !overlayChatLayout ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MessageOptionsBottomSheetView, null), /*#__PURE__*/React.createElement(ChatFilterBottomSheetView, null), /*#__PURE__*/React.createElement(ChatMoreActionsSheetView, null)) : null);
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative'
  },
  contentContainer: {
    flex: 1,
    paddingHorizontal: 16,
    paddingTop: 12,
    paddingBottom: Platform.OS === 'ios' ? 32 : 0,
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16
  },
  participantsContainer: {
    paddingBottom: 0
  },
  participantsWrapper: {
    flex: 1,
    marginTop: 16
  }
});
export const ChatAndParticipantsView = /*#__PURE__*/React.memo(_ChatAndParticipantsView);
//# sourceMappingURL=ChatAndParticipantsView.js.map