@100mslive/react-native-room-kit/lib/module/components/HLSChatView.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 { View } from 'react-native';
import { useSelector } from 'react-redux';
import { useHLSViewsConstraints, useHMSRoomStyleSheet } from '../hooks-util';
import { HLSChatHeaderView } from './HLSChatHeaderView';
import { HLSChatFooterView } from './HLSChatFooterView';
import { HLSChatMessages } from './HLSChatMessages';
import { HLSDescriptionPane } from './HLSDescriptionPane';
import { useIsLandscapeOrientation } from '../utils/dimension';
import { HLSNotifications } from './HLSNotifications';
import { PipModes } from '../utils/types';
export const HLSChatView = () => {
  const isLandscapeOrientation = useIsLandscapeOrientation();
  const {
    chatWrapperConstraints
  } = useHLSViewsConstraints();
  const fullScreenMode = useSelector(state => {
    const hlsFullScreen = state.app.hlsFullScreen;
    const isPipModeActive = state.app.pipModeStatus === PipModes.ACTIVE;
    return hlsFullScreen || isPipModeActive;
  });
  const hmsRoomStyles = useHMSRoomStyleSheet(theme => ({
    wrapper: {
      backgroundColor: theme.palette.surface_dim
    }
  }));
  if (fullScreenMode) {
    return null;
  }
  return /*#__PURE__*/React.createElement(View, {
    style: {
      position: 'absolute',
      bottom: isLandscapeOrientation ? undefined : 0,
      right: 0,
      width: chatWrapperConstraints.width,
      height: chatWrapperConstraints.height
    }
  }, /*#__PURE__*/React.createElement(View, {
    style: [{
      flex: 1,
      position: 'relative'
    }, hmsRoomStyles.wrapper]
  }, isLandscapeOrientation ? null : /*#__PURE__*/React.createElement(HLSChatHeaderView, null), /*#__PURE__*/React.createElement(HLSChatMessages, null), /*#__PURE__*/React.createElement(HLSChatFooterView, null), /*#__PURE__*/React.createElement(HLSNotifications, null), isLandscapeOrientation ? null : /*#__PURE__*/React.createElement(HLSDescriptionPane, null)));
};
//# sourceMappingURL=HLSChatView.js.map