react-native-video-basic-controls/lib/module/VerticalSlider.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); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from 'react';
import { Animated, PanResponder, StyleSheet, Easing, View } from 'react-native';
export default class VerticalSlider extends React.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "_moveStartValue", 0);

    _defineProperty(this, "_fetchNewValueFromGesture", gestureState => {
      const {
        min,
        max,
        step,
        height
      } = this.props;
      const ratio = -gestureState.dy / height;
      const diff = max - min;

      if (step) {
        return Math.max(min, Math.min(max, this._moveStartValue + Math.round(ratio * diff / step) * step));
      }

      let value = Math.max(min, this._moveStartValue + ratio * diff);
      return Math.floor(value * 100) / 100;
    });

    _defineProperty(this, "_getSliderHeight", value => {
      const {
        min,
        max,
        height
      } = this.props;
      return (value - min) * height / (max - min);
    });

    _defineProperty(this, "_changeState", value => {
      const {
        animationDuration
      } = this.props;

      const sliderHeight = this._getSliderHeight(value);

      Animated.parallel([Animated.timing(this.state.sliderHeight, {
        toValue: sliderHeight,
        easing: Easing.linear,
        duration: animationDuration || 0,
        useNativeDriver: false
      })]).start();
      this.setState({
        value
      });
    });

    let panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderStart: () => {
        Animated.spring(this.state.sliderWidth, {
          toValue: this.props.width + this.props.sliderScale,
          useNativeDriver: false
        }).start();
        Animated.spring(this.state.sliderFullHeight, {
          toValue: this.props.height + this.props.sliderScale / 2,
          useNativeDriver: false
        }).start();
      },
      onPanResponderGrant: () => {
        this._moveStartValue = this.state.value;
      },
      onPanResponderMove: (_event, gestureState) => {
        if (this.props.disabled) {
          return;
        }

        const value = this._fetchNewValueFromGesture(gestureState);

        this._changeState(value);

        if (this.props.onChange) {
          this.props.onChange(value);
        }
      },
      onPanResponderRelease: (_event, gestureState) => {
        if (this.props.disabled) {
          return;
        }

        Animated.spring(this.state.sliderWidth, {
          toValue: this.props.width,
          useNativeDriver: false
        }).start();
        Animated.spring(this.state.sliderFullHeight, {
          toValue: this.props.height,
          useNativeDriver: false
        }).start();

        const value = this._fetchNewValueFromGesture(gestureState);

        this._changeState(value);

        if (this.props.onComplete) {
          this.props.onComplete(value);
        }
      },
      onPanResponderTerminationRequest: () => false,
      onPanResponderTerminate: (_event, gestureState) => {
        if (this.props.disabled) {
          return;
        }

        const value = this._fetchNewValueFromGesture(gestureState);

        this._changeState(value);

        if (this.props.onComplete) {
          this.props.onComplete(value);
        }
      } // onMoveShouldSetPanResponderCapture

    });
    this.state = {
      sliderWidth: new Animated.Value(props.width),
      sliderFullHeight: new Animated.Value(props.height),
      value: props.value || props.min,
      sliderHeight: new Animated.Value(0),
      panResponder
    };
  }

  componentDidMount() {
    const {
      value
    } = this.props;

    if (value) {
      this._changeState(value);
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.value && nextProps.value !== nextState.value) {
      this._changeState(nextProps.value);
    }

    return false;
  }

  render() {
    const {
      SliderMaxStyles,
      SliderMinStyles,
      height = 300,
      borderRadius = 5,
      sliderScale = 10,
      ballColor
    } = this.props;
    const x = new Animated.Value(sliderScale);
    const ballSize = Animated.add(this.state.sliderWidth, x);
    const y = Animated.divide(ballSize, new Animated.Value(2));
    const ballBottom = Animated.subtract(this.state.sliderHeight, y);
    return /*#__PURE__*/React.createElement(View, {
      style: [{
        marginHorizontal: sliderScale
      }, SliderMaxStyles]
    }, /*#__PURE__*/React.createElement(Animated.View, _extends({
      style: [styles.container, {
        width: this.state.sliderWidth,
        height,
        borderRadius
      } // SliderMaxStyles,
      ]
    }, this.state.panResponder.panHandlers), /*#__PURE__*/React.createElement(Animated.View, {
      style: [styles.slider, {
        height: this.state.sliderHeight,
        width: this.state.sliderWidth,
        backgroundColor: ballColor
      }, SliderMinStyles]
    })), /*#__PURE__*/React.createElement(Animated.View, _extends({
      renderToHardwareTextureAndroid: true,
      style: [styles.sliderBall, {
        backgroundColor: ballColor,
        width: ballSize,
        height: ballSize,
        bottom: ballBottom,
        left: -(sliderScale / 2)
      } // SliderMaxStyles
      ]
    }, this.state.panResponder.panHandlers)));
  }

}
const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
    backgroundColor: 'grey'
  },
  slider: {
    position: 'absolute',
    bottom: 0
  },
  sliderBall: {
    position: 'absolute',
    borderRadius: 50
  }
});
//# sourceMappingURL=VerticalSlider.js.map