@100mslive/react-native-room-kit/lib/module/components/HLSDescriptionPaneHeader.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 { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useHMSRoomStyleSheet } from '../hooks-util';
import { ChevronIcon } from '../Icons';
import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated';
export const HLSDescriptionPaneHeaderHeight = 16 * 2 + 24; // vertical padding + content height

export const HLSDescriptionPaneHeader = ({
  close,
  animatedValue
}) => {
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    container: {
      backgroundColor: theme.palette.surface_dim,
      borderBottomColor: theme.palette.border_bright
    },
    semiBoldSurfaceHigh: {
      fontFamily: `${typography.font_family}-SemiBold`,
      color: theme.palette.on_surface_high
    }
  }));
  const animatedChevronStyles = useAnimatedStyle(() => ({
    transform: [{
      rotateZ: `${interpolate(animatedValue.value, [0, 1], [0, -180])}deg`
    }]
  }), []);
  const closeHlsDescriptionPane = () => {
    close();
  };
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.container, hmsRoomStyles.container]
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.title, hmsRoomStyles.semiBoldSurfaceHigh]
  }, "About Session"), /*#__PURE__*/React.createElement(TouchableOpacity, {
    hitSlop: {
      bottom: 12,
      left: 12,
      top: 12,
      right: 12
    },
    onPress: closeHlsDescriptionPane
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: animatedChevronStyles
  }, /*#__PURE__*/React.createElement(ChevronIcon, {
    direction: "down"
  }))));
};
const styles = StyleSheet.create({
  container: {
    padding: 16,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderBottomWidth: 1
  },
  title: {
    fontSize: 16,
    lineHeight: 24
  }
});
//# sourceMappingURL=HLSDescriptionPaneHeader.js.map