react-native-video-basic-controls/lib/commonjs/VerticalSlider.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _reactNative = require("react-native");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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; }

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);

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

      this.setState({
        value
      });
    });

    let panResponder = _reactNative.PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderStart: () => {
        _reactNative.Animated.spring(this.state.sliderWidth, {
          toValue: this.props.width + this.props.sliderScale,
          useNativeDriver: false
        }).start();

        _reactNative.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;
        }

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

        _reactNative.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 _reactNative.Animated.Value(props.width),
      sliderFullHeight: new _reactNative.Animated.Value(props.height),
      value: props.value || props.min,
      sliderHeight: new _reactNative.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 _reactNative.Animated.Value(sliderScale);

    const ballSize = _reactNative.Animated.add(this.state.sliderWidth, x);

    const y = _reactNative.Animated.divide(ballSize, new _reactNative.Animated.Value(2));

    const ballBottom = _reactNative.Animated.subtract(this.state.sliderHeight, y);

    return /*#__PURE__*/React.createElement(_reactNative.View, {
      style: [{
        marginHorizontal: sliderScale
      }, SliderMaxStyles]
    }, /*#__PURE__*/React.createElement(_reactNative.Animated.View, _extends({
      style: [styles.container, {
        width: this.state.sliderWidth,
        height,
        borderRadius
      } // SliderMaxStyles,
      ]
    }, this.state.panResponder.panHandlers), /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
      style: [styles.slider, {
        height: this.state.sliderHeight,
        width: this.state.sliderWidth,
        backgroundColor: ballColor
      }, SliderMinStyles]
    })), /*#__PURE__*/React.createElement(_reactNative.Animated.View, _extends({
      renderToHardwareTextureAndroid: true,
      style: [styles.sliderBall, {
        backgroundColor: ballColor,
        width: ballSize,
        height: ballSize,
        bottom: ballBottom,
        left: -(sliderScale / 2)
      } // SliderMaxStyles
      ]
    }, this.state.panResponder.panHandlers)));
  }

}

exports.default = VerticalSlider;

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