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

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

import React, { memo } from 'react';
import { View, StyleSheet } from 'react-native';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { HMSManageCameraRotation } from './HMSManageCameraRotation';
import { useHMSRoomStyle } from '../hooks-util';
import { HMSManageAudioOutput } from './HMSManageAudioOutput';
import { HMSRecordingIndicator } from './HMSRecordingIndicator';
import { CompanyLogo } from './CompanyLogo';
import { HMSLiveIndicator } from './HMSLiveIndicator';
import { HMSLiveViewerCount } from './HMSLiveViewerCount';
const TOP_PADDING = 8;
const BOTTOM_PADDING = 16;
const CONTENT_HEIGHT = 42;
export const HEADER_HEIGHT = TOP_PADDING + CONTENT_HEIGHT + BOTTOM_PADDING;
export const useHeaderHeight = (excludeSafeArea = false) => {
  const {
    top
  } = useSafeAreaInsets();
  return (excludeSafeArea ? 0 : top) + HEADER_HEIGHT;
};
export const _Header = ({
  transparent = false,
  showControls = true
}) => {
  const containerStyles = useHMSRoomStyle(theme => ({
    backgroundColor: theme.palette.background_dim
  }));
  return /*#__PURE__*/React.createElement(SafeAreaView, {
    style: transparent ? null : containerStyles,
    edges: ['top', 'left', 'right']
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.container, transparent ? null : containerStyles]
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.logoContainer
  }, /*#__PURE__*/React.createElement(CompanyLogo, {
    style: styles.logo
  }), /*#__PURE__*/React.createElement(HMSLiveIndicator, null), /*#__PURE__*/React.createElement(HMSRecordingIndicator, null), /*#__PURE__*/React.createElement(HMSLiveViewerCount, null)), showControls ? /*#__PURE__*/React.createElement(View, {
    style: styles.controls
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.cameraRotationWrapper
  }, /*#__PURE__*/React.createElement(HMSManageCameraRotation, null)), /*#__PURE__*/React.createElement(HMSManageAudioOutput, null)) : null));
};
const styles = StyleSheet.create({
  container: {
    paddingTop: TOP_PADDING,
    paddingBottom: BOTTOM_PADDING,
    paddingHorizontal: 16,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  logoContainer: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  logo: {
    marginRight: 12
  },
  controls: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 16
  },
  cameraRotationWrapper: {
    marginRight: 16
  }
});
export const Header = /*#__PURE__*/memo(_Header);
//# sourceMappingURL=Header.js.map