@100mslive/react-native-room-kit/lib/module/components/HLSPlayerControls.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 { View, StyleSheet } from 'react-native';
import { useSelector } from 'react-redux';
import Animated, { useAnimatedProps, useAnimatedStyle } from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { HLSGoLiveControl } from './HLSGoLiveControl';
import { HLSSeekbar } from './HLSSeekbar';
import { useIsLandscapeOrientation } from '../utils/dimension';
import { HLSCloseMeetingControl } from './HLSCloseMeetingControl';
import { HLSClosedCaptionControl } from './HLSClosedCaptionControl';
import { HLSFullScreenControl } from './HLSFullScreenControl';
import { HLSDistanceFromLive } from './HLSDistanceFromLive';
import { HLSPlayPauseControl } from './HLSPlayPauseControl';
import { HLSSeekbackwardControl } from './HLSSeekbackwardControl';
import { HLSSeekforwardControl } from './HLSSeekforwardControl';
export const _HLSPlayerControls = ({
  playerRef,
  cancelCurrentControlAnimation,
  hideControlsAfterDelay,
  animatedValue,
  resetHideControlAnimation
}) => {
  const {
    bottom: bottomSafeInset
  } = useSafeAreaInsets();
  const isLandscapeOrientation = useIsLandscapeOrientation();
  const hlsFullScreen = useSelector(state => state.app.hlsFullScreen);
  const hideControlsStyles = useAnimatedStyle(() => ({
    opacity: animatedValue.value
  }), []);
  const hideControlsProps = useAnimatedProps(() => ({
    pointerEvents: animatedValue.value < 0.8 ? 'none' : 'auto'
  }), []);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Animated.View, {
    animatedProps: hideControlsProps,
    style: [{
      height: '100%'
    }, styles.floatingContainer, hideControlsStyles]
  }, /*#__PURE__*/React.createElement(View, {
    style: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center'
    }
  }, /*#__PURE__*/React.createElement(HLSSeekbackwardControl, {
    playerRef: playerRef,
    onPress: resetHideControlAnimation
  }), /*#__PURE__*/React.createElement(HLSPlayPauseControl, {
    playerRef: playerRef,
    onPress: resetHideControlAnimation
  }), /*#__PURE__*/React.createElement(HLSSeekforwardControl, {
    playerRef: playerRef,
    onPress: resetHideControlAnimation
  }))), /*#__PURE__*/React.createElement(Animated.View, {
    animatedProps: hideControlsProps,
    style: [{
      top: 0
    }, styles.floatingContainer, hideControlsStyles]
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.controlsRow
  }, /*#__PURE__*/React.createElement(HLSCloseMeetingControl, {
    onPress: resetHideControlAnimation
  }), /*#__PURE__*/React.createElement(View, {
    style: [styles.normalRow, styles.gap]
  }, /*#__PURE__*/React.createElement(HLSClosedCaptionControl, {
    playerRef: playerRef,
    onPress: resetHideControlAnimation
  })))), /*#__PURE__*/React.createElement(Animated.View, {
    animatedProps: hideControlsProps,
    style: [{
      bottom: isLandscapeOrientation ? bottomSafeInset : 0
    }, styles.floatingContainer, hideControlsStyles]
  }, /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: isLandscapeOrientation || hlsFullScreen ? 'column-reverse' : 'column'
    }
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.controlsRow
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.normalRow
  }, /*#__PURE__*/React.createElement(HLSGoLiveControl, {
    playerRef: playerRef,
    onPress: resetHideControlAnimation
  }), /*#__PURE__*/React.createElement(HLSDistanceFromLive, null)), /*#__PURE__*/React.createElement(View, {
    style: [styles.normalRow, styles.gap]
  }, /*#__PURE__*/React.createElement(HLSFullScreenControl, {
    onPress: resetHideControlAnimation
  }))), /*#__PURE__*/React.createElement(HLSSeekbar, {
    playerRef: playerRef,
    onStart: cancelCurrentControlAnimation,
    onEnd: hideControlsAfterDelay
  }))));
};
export const HLSPlayerControls = /*#__PURE__*/React.memo(_HLSPlayerControls);
const styles = StyleSheet.create({
  floatingContainer: {
    position: 'absolute',
    width: '100%',
    zIndex: 5
  },
  controlsRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginHorizontal: 8
  },
  normalRow: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  icon: {
    padding: 4,
    alignSelf: 'flex-start'
  },
  gap: {
    marginLeft: 16
  }
});
//# sourceMappingURL=HLSPlayerControls.js.map