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

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

import { HMSHLSPlaylistType } from '@100mslive/react-native-hms';
import * as React from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import { useSelector } from 'react-redux';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import { useIsHLSStreamingOn } from '../hooks-sdk';
import { PauseIcon, PlayIcon } from '../Icons';
import { useHLSStreamResumePause } from '../hooks-util';
const _HLSPlayPauseControl = ({
  playerRef,
  onPress
}) => {
  const isHLSStreamingOn = useIsHLSStreamingOn();
  const isDVRStream = useSelector(state => {
    var _state$hmsStates$room;
    return ((_state$hmsStates$room = state.hmsStates.room) === null || _state$hmsStates$room === void 0 || (_state$hmsStates$room = _state$hmsStates$room.hlsStreamingState.variants) === null || _state$hmsStates$room === void 0 || (_state$hmsStates$room = _state$hmsStates$room[0]) === null || _state$hmsStates$room === void 0 ? void 0 : _state$hmsStates$room.playlistType) === HMSHLSPlaylistType.DVR;
  });
  const {
    isPaused,
    pauseStream,
    resumeStream
  } = useHLSStreamResumePause(playerRef);
  const togglePlayPause = () => {
    onPress === null || onPress === void 0 || onPress();
    if (isPaused) {
      resumeStream();
    } else {
      pauseStream();
    }
  };
  if (!isHLSStreamingOn || !isDVRStream) return null;
  return /*#__PURE__*/React.createElement(GestureDetector, {
    gesture: Gesture.Tap()
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: togglePlayPause,
    style: {
      alignSelf: 'center'
    }
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, isPaused ? /*#__PURE__*/React.createElement(PlayIcon, null) : /*#__PURE__*/React.createElement(PauseIcon, null))));
};
export const HLSPlayPauseControl = /*#__PURE__*/React.memo(_HLSPlayPauseControl);
const styles = StyleSheet.create({
  container: {
    width: 64,
    height: 64,
    borderRadius: 32,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.6)'
  }
});
//# sourceMappingURL=HLSPlayPauseControl.js.map