@100mslive/react-native-room-kit/lib/module/components/HLSSeekbackwardControl.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 { useSelector } from 'react-redux';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import { useIsHLSStreamingOn } from '../hooks-sdk';
import { SeekArrowIcon } from '../Icons';
import Animated, { Easing, cancelAnimation, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
const _HLSSeekbackwardControl = ({
  playerRef,
  onPress
}) => {
  const animatedValue = useSharedValue(0);
  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 handdleSeekBackward = () => {
    var _playerRef$current;
    onPress === null || onPress === void 0 || onPress();
    (_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 || _playerRef$current.seekBackward(10);
  };
  const tapGestureHandler = React.useMemo(() => {
    return Gesture.Tap().onStart(() => {
      cancelAnimation(animatedValue);
      animatedValue.value = withTiming(1, {
        duration: 200,
        easing: Easing.ease
      }, finished => {
        if (finished) {
          animatedValue.value = withTiming(0, {
            duration: 100,
            easing: Easing.ease
          });
        }
      });
      runOnJS(handdleSeekBackward)();
    });
  }, []);
  const animatedStyle = useAnimatedStyle(() => ({
    opacity: interpolate(animatedValue.value, [0, 1], [1, 0.8]),
    transform: [{
      rotateZ: `${interpolate(animatedValue.value, [0, 1], [0, -17])} deg`
    }]
  }), []);
  if (!isHLSStreamingOn || !isDVRStream) return null;
  return /*#__PURE__*/React.createElement(GestureDetector, {
    gesture: tapGestureHandler
  }, /*#__PURE__*/React.createElement(Animated.View, {
    collapsable: false,
    style: [{
      marginRight: 24
    }, animatedStyle]
  }, /*#__PURE__*/React.createElement(SeekArrowIcon, {
    type: "backward"
  })));
};
export const HLSSeekbackwardControl = /*#__PURE__*/React.memo(_HLSSeekbackwardControl);
//# sourceMappingURL=HLSSeekbackwardControl.js.map