@100mslive/react-native-room-kit/lib/module/components/HLSViewerScreenContent.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { useSelector } from 'react-redux';
import { SafeAreaView } from 'react-native-safe-area-context';
import { HMSStatusBar } from './StatusBar';
import { HLSPlayerContainer } from './HLSPlayerContainer';
import { LeaveRoomBottomSheet } from './LeaveRoomBottomSheet';
import { PreviewForRoleChangeModal } from './PreviewForRoleChangeModal';
import { ChatAndParticipantsBottomSheet } from './ChatAndParticipants';
import { DefaultModal } from './DefaultModal';
import { ModalTypes, PipModes } from '../utils/types';
import { useHMSRoleChangeRequest, useHMSRoomStyleSheet, useHMSSessionStoreListeners, useModalType } from '../hooks-util';
import { ChangeAspectRatio } from './Modals';
import { HLSChatView } from './HLSChatView';
import { useIsLandscapeOrientation } from '../utils/dimension';
export const HLSViewerScreenContent = ({}) => {
  const isPipModeActive = useSelector(state => state.app.pipModeStatus === PipModes.ACTIVE);
  const isLandscapeOrientation = useIsLandscapeOrientation();
  const hmsRoomStyles = useHMSRoomStyleSheet(theme => ({
    container: {
      backgroundColor: theme.palette.surface_dim
    }
  }));
  const {
    modalVisibleType: modalVisible,
    handleModalVisibleType: setModalVisible
  } = useModalType();
  useHMSSessionStoreListeners();
  useHMSRoleChangeRequest();
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.container, hmsRoomStyles.container]
  }, /*#__PURE__*/React.createElement(HMSStatusBar, {
    barStyle: 'light-content'
  }), /*#__PURE__*/React.createElement(SafeAreaView, {
    style: [styles.container, hmsRoomStyles.container, isLandscapeOrientation ? styles.landscapeContainer : null]
  }, /*#__PURE__*/React.createElement(HLSPlayerContainer, null), /*#__PURE__*/React.createElement(HLSChatView, null)), isPipModeActive ? null : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LeaveRoomBottomSheet, null), /*#__PURE__*/React.createElement(PreviewForRoleChangeModal, null), /*#__PURE__*/React.createElement(ChatAndParticipantsBottomSheet, null), /*#__PURE__*/React.createElement(DefaultModal, {
    modalPosiion: "center",
    modalVisible: modalVisible === ModalTypes.HLS_PLAYER_ASPECT_RATIO,
    setModalVisible: () => setModalVisible(ModalTypes.DEFAULT)
  }, /*#__PURE__*/React.createElement(ChangeAspectRatio, {
    cancelModal: () => setModalVisible(ModalTypes.DEFAULT)
  }))));
};
const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    position: 'relative'
  },
  landscapeContainer: {
    flexDirection: 'row'
  }
});
//# sourceMappingURL=HLSViewerScreenContent.js.map