react-native-video-basic-controls/lib/module/Controls.js

Controls for the React Native <Video> component at react-native-video.

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useState } from 'react';
import { View, ActivityIndicator, Image, TouchableHighlight, PanResponder, Dimensions, Text } from 'react-native';
import styles from './MediaControls.style';
import { getPlayerStateIcon } from './utils';
import { PLAYER_STATES } from './constants/playerStates';
const {
  height
} = Dimensions.get('window');

const Controls = props => {
  const {
    customIconStyle: CstmIconStyles = {},
    isLoading,
    playerState,
    onReplay,
    onPause,
    onSkipFor,
    onSkipBack,
    onBrightness,
    onVolume,
    brightness,
    volume,
    showBrightness,
    showVolume,
    showSlider,
    isChild = false
  } = props;
  const icon = getPlayerStateIcon(playerState);

  const forwardIcon = require('./assets/ic_forward.png');

  const backwardIcon = require('./assets/ic_backward.png');

  const [brightnessSwiper, showBrightnessSwiper] = useState(false);
  const [volumeSwiper, showVolumeSwiper] = useState(false);
  const pressAction = playerState === PLAYER_STATES.ENDED ? onReplay : onPause;

  const _panResponderBright = PanResponder.create({
    onPanResponderStart: () => {
      showBrightnessSwiper(true);
    },
    onPanResponderEnd: () => {
      showBrightnessSwiper(false);
    },
    onStartShouldSetPanResponder: () => showBrightness,
    onPanResponderMove: (_event, gestureState) => {
      onBrightness(getDirectionAndColor(gestureState, brightness));
    },
    onPanResponderTerminationRequest: () => showBrightness
  });

  const _panResponderVol = PanResponder.create({
    onPanResponderStart: () => {
      showVolumeSwiper(true);
    },
    onPanResponderEnd: () => {
      showVolumeSwiper(false);
    },
    onStartShouldSetPanResponder: () => showVolume,
    onPanResponderMove: (_event, gestureState) => {
      onVolume(getDirectionAndColor(gestureState, volume));
    },
    onPanResponderTerminationRequest: () => showVolume
  });

  const getDirectionAndColor = (gestureState, controlVolume) => {
    let min = 0;
    let max = 1;
    let step = 0.05;
    let _moveStartValue = controlVolume; //value

    const ratio = -gestureState.dy / height;
    const diff = max - min;
    let value = Math.max(min, Math.min(max, _moveStartValue + Math.round(ratio * diff / step) * step));
    let newVal = Math.floor(value * 100) / 100;
    return newVal;
  };

  const content = isLoading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
    size: "large",
    color: "#FFF"
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, _extends({
    style: { ...styles.swipeSlider,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: brightnessSwiper ? 'rgba(0,0,0,' + brightness + ')' : 'transparent'
    }
  }, showSlider ? _panResponderBright.panHandlers : null), brightnessSwiper && /*#__PURE__*/React.createElement(Text, {
    style: {
      color: '#fff',
      fontWeight: 'bold',
      fontSize: 18
    }
  }, (brightness * 100).toFixed(1), "%")), /*#__PURE__*/React.createElement(View, {
    style: styles.playerButt
  }, (Boolean(onSkipBack.name) || Boolean(onSkipFor.name)) && /*#__PURE__*/React.createElement(TouchableHighlight, {
    activeOpacity: 0.6,
    underlayColor: '#ffffff4d',
    style: [styles.playButton, CstmIconStyles],
    onPress: onSkipBack,
    accessibilityLabel: 'skip back/ change track',
    accessibilityHint: 'skip back/ change track'
  }, /*#__PURE__*/React.createElement(Image, {
    source: backwardIcon,
    style: styles.playIcon
  }))), /*#__PURE__*/React.createElement(View, {
    style: styles.playerButt
  }, /*#__PURE__*/React.createElement(TouchableHighlight, {
    activeOpacity: 0.6,
    underlayColor: '#ffffff4d',
    style: [styles.playButton, CstmIconStyles],
    onPress: pressAction,
    accessibilityLabel: PLAYER_STATES.PAUSED ? 'Tap to Play' : 'Tap to Pause',
    accessibilityHint: 'Plays and Pauses the Video'
  }, /*#__PURE__*/React.createElement(Image, {
    source: icon,
    style: styles.playIcon
  }))), /*#__PURE__*/React.createElement(View, {
    style: styles.playerButt
  }, (Boolean(onSkipBack.name) || Boolean(onSkipFor.name)) && /*#__PURE__*/React.createElement(TouchableHighlight, {
    activeOpacity: 0.6,
    underlayColor: '#ffffff4d',
    style: [styles.playButton, CstmIconStyles],
    onPress: onSkipFor,
    accessibilityLabel: 'skip forward/ change track',
    accessibilityHint: 'skip forward/ change track'
  }, /*#__PURE__*/React.createElement(Image, {
    source: forwardIcon,
    style: styles.playIcon
  }))), /*#__PURE__*/React.createElement(View, _extends({
    style: { ...styles.swipeSlider,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: volumeSwiper ? 'rgba(0,0,0,' + volume + ')' : 'transparent'
    }
  }, showSlider ? _panResponderVol.panHandlers : null), volumeSwiper && /*#__PURE__*/React.createElement(Text, {
    style: {
      color: '#fff',
      fontWeight: 'bold',
      fontSize: 18
    }
  }, (volume * 100).toFixed(1), "%")));
  return /*#__PURE__*/React.createElement(View, {
    style: { ...styles.controlsRow,
      flex: isChild ? 1 : 2
    }
  }, content);
};

export { Controls };
//# sourceMappingURL=Controls.js.map