@100mslive/react-native-room-kit/lib/module/components/HLSChatHeaderView.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 { Pressable, StyleSheet, Text, View } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { CompanyLogo } from './CompanyLogo';
import { useHMSConferencingScreenConfig, useHMSRoomStyleSheet } from '../hooks-util';
import { HLSRecordingStatusText } from './HLSRecordingStatusText';
import { useIsHLSStreamingOn } from '../hooks-sdk';
import { HLSStreamStartedTime } from './HLSStreamStartedTime';
import { setHlsDescriptionPaneVisible } from '../redux/actions';
export const _HLSChatHeaderView = ({
  expanded = false
}) => {
  const dispatch = useDispatch();
  const isHLSStreaming = useIsHLSStreamingOn();
  const peerCount = useSelector(state => {
    var _state$hmsStates$room;
    return (_state$hmsStates$room = state.hmsStates.room) === null || _state$hmsStates$room === void 0 ? void 0 : _state$hmsStates$room.peerCount;
  });
  const headerTitle = useHMSConferencingScreenConfig(confScreenConfig => {
    var _confScreenConfig$ele;
    return confScreenConfig === null || confScreenConfig === void 0 || (_confScreenConfig$ele = confScreenConfig.elements) === null || _confScreenConfig$ele === void 0 || (_confScreenConfig$ele = _confScreenConfig$ele.header) === null || _confScreenConfig$ele === void 0 ? void 0 : _confScreenConfig$ele.title;
  });
  const isValidHeaderDescription = useHMSConferencingScreenConfig(confScreenConfig => {
    var _confScreenConfig$ele2;
    return !!(confScreenConfig !== null && confScreenConfig !== void 0 && (_confScreenConfig$ele2 = confScreenConfig.elements) !== null && _confScreenConfig$ele2 !== void 0 && (_confScreenConfig$ele2 = _confScreenConfig$ele2.header) !== null && _confScreenConfig$ele2 !== void 0 && _confScreenConfig$ele2.description);
  });
  const showDescriptionPane = () => {
    dispatch(setHlsDescriptionPaneVisible(true));
  };
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    container: {
      backgroundColor: theme.palette.surface_dim,
      borderBottomColor: theme.palette.border_bright
    },
    semiBoldSecondaryHigh: {
      fontFamily: `${typography.font_family}-SemiBold`,
      color: theme.palette.on_secondary_high
    },
    semiBoldSurfaceHigh: {
      fontFamily: `${typography.font_family}-SemiBold`,
      color: theme.palette.on_surface_high
    },
    regularSurfaceMedium: {
      fontFamily: `${typography.font_family}-Regular`,
      color: theme.palette.on_surface_medium
    },
    regularSurfaceLow: {
      fontFamily: `${typography.font_family}-Regular`,
      color: theme.palette.on_surface_low
    }
  }));
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.container, hmsRoomStyles.container, expanded ? {
      borderBottomWidth: 0
    } : null]
  }, /*#__PURE__*/React.createElement(CompanyLogo, {
    style: styles.logo
  }), /*#__PURE__*/React.createElement(View, {
    style: {
      flexShrink: 1
    }
  }, headerTitle ? /*#__PURE__*/React.createElement(Text, {
    numberOfLines: expanded ? undefined : 2,
    style: [styles.title, hmsRoomStyles.semiBoldSecondaryHigh]
  }, headerTitle) : null, /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.subtitle, hmsRoomStyles.regularSurfaceMedium]
  }, peerCount, " ", isHLSStreaming ? 'watching' : 'joined'), isHLSStreaming ? /*#__PURE__*/React.createElement(HLSStreamStartedTime, {
    prefix: /*#__PURE__*/React.createElement(Text, {
      style: [styles.subtitleDivider, hmsRoomStyles.regularSurfaceLow]
    }, "\u25CF")
  }) : null, isValidHeaderDescription && !expanded ? /*#__PURE__*/React.createElement(Pressable, {
    onPress: showDescriptionPane,
    hitSlop: {
      top: 8,
      bottom: 8,
      left: 8,
      right: 8
    }
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.subtitle, {
      marginLeft: 8
    }, hmsRoomStyles.semiBoldSurfaceHigh]
  }, "...more")) : /*#__PURE__*/React.createElement(HLSRecordingStatusText, {
    style: [styles.subtitle, hmsRoomStyles.regularSurfaceMedium],
    prefix: /*#__PURE__*/React.createElement(Text, {
      style: [styles.subtitleDivider, hmsRoomStyles.regularSurfaceLow]
    }, "\u25CF")
  }))));
};
export const HLSChatHeaderView = /*#__PURE__*/React.memo(_HLSChatHeaderView);
const styles = StyleSheet.create({
  container: {
    padding: 16,
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 1
  },
  logo: {
    marginRight: 12
  },
  title: {
    fontSize: 14,
    lineHeight: 20,
    marginBottom: 4
  },
  subtitle: {
    fontSize: 12,
    lineHeight: 16
  },
  subtitleDivider: {
    fontSize: 6,
    lineHeight: 16,
    marginHorizontal: 8
  }
});
//# sourceMappingURL=HLSChatHeaderView.js.map