@100mslive/react-native-room-kit/lib/module/components/HMSOverlayChatView.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, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import MaskedView from '@react-native-masked-view/masked-view';
import { useDerivedValue, interpolate } from 'react-native-reanimated';
import { HMSKeyboardAvoidingView } from './HMSKeyboardAvoidingView';
import { HMSSendMessageInput } from './HMSSendMessageInput';
import { HMSHLSMessageList } from './HMSHLSMessageList';
import { useFooterHeight } from './Footer';
import { useHMSNotificationsHeight } from './HMSNotifications';
import { ChatFilterBottomSheetOpener } from './Chat/ChatFilterBottomSheetOpener';
import { ChatMoreActionsModal } from './Chat/ChatMoreActionsModal';
import { ChatFilterBottomSheet } from './Chat/ChatFilterBottomSheet';
import { ChatPaused } from './Chat/ChatPaused';
import { useHMSChatState, useIsAllowedToSendMessage, useIsLocalPeerBlockedFromChat } from '../hooks-util';
import { PinnedMessages } from './Chat';
import { MessageOptionsBottomSheet } from './Chat/MessageOptionsBottomSheet';
import { PeerBlockedFromChat } from './Chat/PeerBlockedFromChat';
const colors = ['rgba(0, 0, 0, 0)', 'rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)'];
const colorLocations = [0, 0.4, 1];
export const HMSOverlayChatView = ({
  offset
}) => {
  const footerHeight = useFooterHeight();
  const hmsNotificationsHeight = useHMSNotificationsHeight();
  const {
    chatState
  } = useHMSChatState();
  const isAllowedToSendMessage = useIsAllowedToSendMessage();
  const isLocalPeerBlockedFromChat = useIsLocalPeerBlockedFromChat();
  const isSelectedChatRecipient = useSelector(state => state.chatWindow.sendTo !== null);
  const chatBottomOffset = useDerivedValue(() => {
    if (offset) {
      return interpolate(offset.value, [0, 1], [0, footerHeight]) + hmsNotificationsHeight;
    }
    return footerHeight + hmsNotificationsHeight;
  }, [offset, footerHeight, hmsNotificationsHeight]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HMSKeyboardAvoidingView, {
    bottomOffset: chatBottomOffset
  }, /*#__PURE__*/React.createElement(MaskedView, {
    maskElement: /*#__PURE__*/React.createElement(LinearGradient, {
      pointerEvents: "box-none",
      style: StyleSheet.absoluteFill,
      colors: colors,
      locations: colorLocations
    })
  }, /*#__PURE__*/React.createElement(HMSHLSMessageList, null)), /*#__PURE__*/React.createElement(PinnedMessages, {
    insetMode: true
  }), chatState.enabled ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
    style: styles.filterSheetWrapper
  }, /*#__PURE__*/React.createElement(ChatFilterBottomSheetOpener, {
    overlay: true,
    useFilterModal: true,
    showActionBtn: true,
    useActionModal: true
  })), isLocalPeerBlockedFromChat ? /*#__PURE__*/React.createElement(PeerBlockedFromChat, {
    style: styles.peerBlocked
  }) : isAllowedToSendMessage && isSelectedChatRecipient ? /*#__PURE__*/React.createElement(HMSSendMessageInput, null) : null) : /*#__PURE__*/React.createElement(ChatPaused, {
    insetMode: true,
    style: styles.chatPaused
  })), /*#__PURE__*/React.createElement(MessageOptionsBottomSheet, null), /*#__PURE__*/React.createElement(ChatFilterBottomSheet, null), /*#__PURE__*/React.createElement(ChatMoreActionsModal, {
    offset: offset
  }));
};
const styles = StyleSheet.create({
  filterSheetWrapper: {
    marginHorizontal: 8,
    marginTop: 8
  },
  chatPaused: {
    marginHorizontal: 8,
    marginBottom: 38
  },
  peerBlocked: {
    marginHorizontal: 8,
    marginBottom: 8
  }
});
//# sourceMappingURL=HMSOverlayChatView.js.map