react-native-video-basic-controls/lib/commonjs/SliderOP.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");

var _deprecatedReactNativePropTypes = require("deprecated-react-native-prop-types");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Image$propTypes;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

const TRACK_SIZE = 4;
const THUMB_SIZE = 20;

function Rect(x, y, width, height) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
}

Rect.prototype.containsPoint = function (x, y) {
  return x >= this.x && y >= this.y && x <= this.x + this.width && y <= this.y + this.height;
};

const DEFAULT_ANIMATION_CONFIGS = {
  spring: {
    friction: 7,
    tension: 100
  },
  timing: {
    duration: 150,
    easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
    delay: 0
  } // decay : { // This has a serious bug
  //   velocity     : 1,
  //   deceleration : 0.997
  // }

};

class SliderOP extends _react.PureComponent {
  constructor(_props) {
    super(_props);

    _defineProperty(this, "_handleStartShouldSetPanResponder", (e
    /* gestureState */
    ) => // Should we become active when the user presses down on the thumb?
    this._thumbHitTest(e));

    _defineProperty(this, "_handlePanResponderGrant", () => {
      this._previousLeft = this._getThumbLeft(this._getCurrentValue());

      this._fireChangeEvent('onSlidingStart');
    });

    _defineProperty(this, "_handlePanResponderMove", (e, gestureState) => {
      if (this.props.disabled) {
        return;
      }

      this._setCurrentValue(this._getValue(gestureState));

      this._fireChangeEvent('onValueChange');
    });

    _defineProperty(this, "_handlePanResponderEnd", (e, gestureState) => {
      if (this.props.disabled) {
        return;
      }

      this._setCurrentValue(this._getValue(gestureState));

      this._fireChangeEvent('onSlidingComplete');
    });

    _defineProperty(this, "_measureContainer", x => {
      this._handleMeasure('containerSize', x);
    });

    _defineProperty(this, "_measureTrack", x => {
      this._handleMeasure('trackSize', x);
    });

    _defineProperty(this, "_measureThumb", x => {
      this._handleMeasure('thumbSize', x);
    });

    _defineProperty(this, "_handleMeasure", (name, x) => {
      const {
        width,
        height
      } = x.nativeEvent.layout;
      const size = {
        width,
        height
      };
      const storeName = `_${name}`;
      const currentSize = this[storeName];

      if (currentSize && width === currentSize.width && height === currentSize.height) {
        return;
      }

      this[storeName] = size;

      if (this._containerSize && this._trackSize && this._thumbSize) {
        this.setState({
          containerSize: this._containerSize,
          trackSize: this._trackSize,
          thumbSize: this._thumbSize,
          allMeasured: true
        });
      }
    });

    _defineProperty(this, "_getRatio", value => (value - this.props.minimumValue) / (this.props.maximumValue - this.props.minimumValue));

    _defineProperty(this, "_getThumbLeft", value => {
      const nonRtlRatio = this._getRatio(value);

      const ratio = _reactNative.I18nManager.isRTL ? 1 - nonRtlRatio : nonRtlRatio;
      return ratio * (this.state.containerSize.width - this.state.thumbSize.width);
    });

    _defineProperty(this, "_getValue", gestureState => {
      const length = this.state.containerSize.width - this.state.thumbSize.width;
      const thumbLeft = this._previousLeft + gestureState.dx;
      const nonRtlRatio = thumbLeft / length;
      const ratio = _reactNative.I18nManager.isRTL ? 1 - nonRtlRatio : nonRtlRatio;

      if (this.props.step) {
        return Math.max(this.props.minimumValue, Math.min(this.props.maximumValue, this.props.minimumValue + Math.round(ratio * (this.props.maximumValue - this.props.minimumValue) / this.props.step) * this.props.step));
      }

      return Math.max(this.props.minimumValue, Math.min(this.props.maximumValue, ratio * (this.props.maximumValue - this.props.minimumValue) + this.props.minimumValue));
    });

    _defineProperty(this, "_getCurrentValue", () => this.state.value.__getValue());

    _defineProperty(this, "_setCurrentValue", value => {
      this.state.value.setValue(value);
    });

    _defineProperty(this, "_setCurrentValueAnimated", value => {
      const animationType = this.props.animationType;
      const animationConfig = Object.assign({}, DEFAULT_ANIMATION_CONFIGS[animationType], this.props.animationConfig, {
        toValue: value
      });

      _reactNative.Animated[animationType](this.state.value, animationConfig).start();
    });

    _defineProperty(this, "_fireChangeEvent", event => {
      if (this.props[event]) {
        this.props[event](this._getCurrentValue());
      }
    });

    _defineProperty(this, "_getTouchOverflowSize", () => {
      const state = this.state;
      const props = this.props;
      const size = {};

      if (state.allMeasured === true) {
        size.width = Math.max(0, props.thumbTouchSize.width - state.thumbSize.width);
        size.height = Math.max(0, props.thumbTouchSize.height - state.containerSize.height);
      }

      return size;
    });

    _defineProperty(this, "_getTouchOverflowStyle", () => {
      const {
        width,
        height
      } = this._getTouchOverflowSize();

      const touchOverflowStyle = {};

      if (width !== undefined && height !== undefined) {
        const verticalMargin = -height / 2;
        touchOverflowStyle.marginTop = verticalMargin;
        touchOverflowStyle.marginBottom = verticalMargin;
        const horizontalMargin = -width / 2;
        touchOverflowStyle.marginLeft = horizontalMargin;
        touchOverflowStyle.marginRight = horizontalMargin;
      }

      if (this.props.debugTouchArea === true) {
        touchOverflowStyle.backgroundColor = 'orange';
        touchOverflowStyle.opacity = 0.5;
      }

      return touchOverflowStyle;
    });

    _defineProperty(this, "_thumbHitTest", e => {
      const nativeEvent = e.nativeEvent;

      const thumbTouchRect = this._getThumbTouchRect();

      return thumbTouchRect.containsPoint(nativeEvent.locationX, nativeEvent.locationY);
    });

    _defineProperty(this, "_getThumbTouchRect", () => {
      const state = this.state;
      const props = this.props;

      const touchOverflowSize = this._getTouchOverflowSize();

      return new Rect(touchOverflowSize.width / 2 + this._getThumbLeft(this._getCurrentValue()) + (state.thumbSize.width - props.thumbTouchSize.width) / 2, touchOverflowSize.height / 2 + (state.containerSize.height - props.thumbTouchSize.height) / 2, props.thumbTouchSize.width, props.thumbTouchSize.height);
    });

    _defineProperty(this, "_renderDebugThumbTouchRect", thumbLeft => {
      const thumbTouchRect = this._getThumbTouchRect();

      const positionStyle = {
        left: thumbLeft,
        top: thumbTouchRect.y,
        width: thumbTouchRect.width,
        height: thumbTouchRect.height
      };
      return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
        style: [defaultStyles.debugThumbTouchArea, positionStyle],
        pointerEvents: "none"
      });
    });

    _defineProperty(this, "_renderThumbImage", () => {
      const {
        thumbImage,
        iconComponent: IconComponent
      } = this.props;

      if (IconComponent) {
        return /*#__PURE__*/_react.default.createElement(IconComponent, null);
      } else if (!thumbImage) {
        return;
      }

      return /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
        source: thumbImage
      });
    });

    this.state = {
      containerSize: {
        width: 0,
        height: 0
      },
      trackSize: {
        width: 0,
        height: 0
      },
      thumbSize: {
        width: 0,
        height: 0
      },
      allMeasured: false,
      value: new _reactNative.Animated.Value(this.props.value)
    };
    this._panResponder = _reactNative.PanResponder.create({
      onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
      onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
      onPanResponderGrant: this._handlePanResponderGrant,
      onPanResponderMove: this._handlePanResponderMove,
      onPanResponderRelease: this._handlePanResponderEnd,
      onPanResponderTerminationRequest: this._handlePanResponderRequestEnd,
      onPanResponderTerminate: this._handlePanResponderEnd
    });
  }

  componentDidUpdate(prevProps) {
    const newValue = this.props.value;

    if (prevProps.value !== newValue) {
      if (this.props.animateTransitions) {
        this._setCurrentValueAnimated(newValue);
      } else {
        this._setCurrentValue(newValue);
      }
    }
  }

  render() {
    const {
      minimumValue,
      maximumValue,
      bufferValue,
      minimumTrackTintColor,
      bufferTrackTintColor,
      maximumTrackTintColor,
      thumbTintColor,
      thumbImage,
      styles,
      style,
      trackStyle,
      thumbStyle,
      debugTouchArea,
      onValueChange,
      thumbTouchSize,
      animationType,
      animateTransitions,
      iconComponent,
      ...other
    } = this.props;
    const {
      value,
      containerSize,
      thumbSize,
      allMeasured
    } = this.state;
    const mainStyles = styles || defaultStyles;
    const thumbLeft = value.interpolate({
      inputRange: [minimumValue, maximumValue],
      outputRange: _reactNative.I18nManager.isRTL ? [0, -(containerSize.width - thumbSize.width)] : [0, containerSize.width - thumbSize.width] // extrapolate: 'clamp',

    });
    const minimumTrackWidth = value.interpolate({
      inputRange: [minimumValue, maximumValue],
      outputRange: [0, containerSize.width - thumbSize.width] // extrapolate: 'clamp',

    });
    const valueVisibleStyle = {};

    if (!allMeasured) {
      valueVisibleStyle.opacity = 0;
    }

    const minimumTrackStyle = {
      position: 'absolute',
      width: _reactNative.Animated.add(minimumTrackWidth, thumbSize.width / 2),
      backgroundColor: minimumTrackTintColor,
      ...valueVisibleStyle
    };
    const bufferTrackWidth = maximumValue === 0 ? 0 : bufferValue / maximumValue * containerSize.width;
    const bufferTrackStyle = {
      position: 'absolute',
      width: _reactNative.Animated.add(bufferTrackWidth, 0),
      backgroundColor: bufferTrackTintColor,
      ...valueVisibleStyle
    };

    const touchOverflowStyle = this._getTouchOverflowStyle();

    return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({}, other, {
      style: [mainStyles.container, style],
      onLayout: this._measureContainer
    }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: [{
        backgroundColor: maximumTrackTintColor
      }, mainStyles.track, trackStyle],
      renderToHardwareTextureAndroid: true,
      onLayout: this._measureTrack
    }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
      renderToHardwareTextureAndroid: true,
      style: [mainStyles.track, trackStyle, bufferTrackStyle]
    }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
      renderToHardwareTextureAndroid: true,
      style: [mainStyles.track, trackStyle, minimumTrackStyle]
    }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
      onLayout: this._measureThumb,
      renderToHardwareTextureAndroid: true,
      style: [{
        backgroundColor: thumbTintColor
      }, mainStyles.thumb, thumbStyle, {
        transform: [{
          translateX: thumbLeft
        }, {
          translateY: 0
        }],
        ...valueVisibleStyle
      }]
    }, this._renderThumbImage()), /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
      renderToHardwareTextureAndroid: true,
      style: [defaultStyles.touchArea, touchOverflowStyle]
    }, this._panResponder.panHandlers), debugTouchArea === true && this._renderDebugThumbTouchRect(minimumTrackWidth)));
  }

  _getPropsForComponentUpdate(props) {
    const {
      value,
      onValueChange,
      onSlidingStart,
      onSlidingComplete,
      style,
      trackStyle,
      thumbStyle,
      ...otherProps
    } = props;
    return otherProps;
  }

  _handleMoveShouldSetPanResponder() {
    // Should we become active when the user moves a touch over the thumb?
    return false;
  }

  _handlePanResponderRequestEnd(e, gestureState) {
    // Should we allow another component to take over this pan?
    return false;
  }

}

exports.default = SliderOP;

_defineProperty(SliderOP, "propTypes", {
  /**
   * Initial value of the slider. The value should be between minimumValue
   * and maximumValue, which default to 0 and 1 respectively.
   * Default value is 0.
   *
   * *This is not a controlled component*, e.g. if you don't update
   * the value, the component won't be reset to its inital value.
   */
  value: _propTypes.default.number,

  /**
   * If true the user won't be able to move the slider.
   * Default value is false.
   */
  disabled: _propTypes.default.bool,

  /**
   * Initial minimum value of the slider. Default value is 0.
   */
  minimumValue: _propTypes.default.number,

  /**
   * Initial maximum value of the slider. Default value is 1.
   */
  maximumValue: _propTypes.default.number,
  bufferValue: _propTypes.default.number,

  /**
   * Step value of the slider. The value should be between 0 and
   * (maximumValue - minimumValue). Default value is 0.
   */
  step: _propTypes.default.number,

  /**
   * The color used for the track to the left of the button. Overrides the
   * default blue gradient image.
   */
  minimumTrackTintColor: _propTypes.default.string,
  bufferTrackTintColor: _propTypes.default.string,

  /**
   * The color used for the track to the right of the button. Overrides the
   * default blue gradient image.
   */
  maximumTrackTintColor: _propTypes.default.string,

  /**
   * The color used for the thumb.
   */
  thumbTintColor: _propTypes.default.string,

  /**
   * The size of the touch area that allows moving the thumb.
   * The touch area has the same center has the visible thumb.
   * This allows to have a visually small thumb while still allowing the user
   * to move it easily.
   * The default is {width: 40, height: 40}.
   */
  thumbTouchSize: _propTypes.default.shape({
    width: _propTypes.default.number,
    height: _propTypes.default.number
  }),

  /**
   * Callback continuously called while the user is dragging the slider.
   */
  onValueChange: _propTypes.default.func,

  /**
   * Callback called when the user starts changing the value (e.g. when
   * the slider is pressed).
   */
  onSlidingStart: _propTypes.default.func,

  /**
   * Callback called when the user finishes changing the value (e.g. when
   * the slider is released).
   */
  onSlidingComplete: _propTypes.default.func,

  /**
   * The style applied to the slider container.
   */
  style: _deprecatedReactNativePropTypes.ViewPropTypes.style,

  /**
   * The style applied to the track.
   */
  trackStyle: _deprecatedReactNativePropTypes.ViewPropTypes.style,

  /**
   * The style applied to the thumb.
   */
  thumbStyle: _deprecatedReactNativePropTypes.ViewPropTypes.style,

  /**
   * Sets an image for the thumb.
   */
  thumbImage: _reactNative.Image === null || _reactNative.Image === void 0 ? void 0 : (_Image$propTypes = _reactNative.Image.propTypes) === null || _Image$propTypes === void 0 ? void 0 : _Image$propTypes.source,

  /**
   * Set this to true to visually see the thumb touch rect in green.
   */
  debugTouchArea: _propTypes.default.bool,

  /**
   * Set to true to animate values with default 'timing' animation type
   */
  animateTransitions: _propTypes.default.bool,

  /**
   * Custom Animation type. 'spring' or 'timing'.
   */
  animationType: _propTypes.default.oneOf(['spring', 'timing']),

  /**
   * Used to configure the animation parameters.  These are the same parameters in the Animated library.
   */
  animationConfig: _propTypes.default.object,

  /**
   * Used to replace Image component.
   */
  iconComponent: _propTypes.default.object
});

_defineProperty(SliderOP, "defaultProps", {
  value: 0,
  minimumValue: 0,
  maximumValue: 1,
  bufferValue: 1,
  step: 0,
  minimumTrackTintColor: '#3f3f3f',
  bufferTrackTintColor: '#ffffff',
  maximumTrackTintColor: '#b3b3b3',
  thumbTintColor: '#343434',
  thumbTouchSize: {
    width: 40,
    height: 40
  },
  debugTouchArea: false,
  animationType: 'timing'
});

var defaultStyles = _reactNative.StyleSheet.create({
  container: {
    height: 40,
    justifyContent: 'center'
  },
  track: {
    height: TRACK_SIZE,
    borderRadius: TRACK_SIZE / 2
  },
  thumb: {
    position: 'absolute',
    width: THUMB_SIZE,
    height: THUMB_SIZE,
    borderRadius: THUMB_SIZE / 2
  },
  touchArea: {
    position: 'absolute',
    backgroundColor: 'transparent',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  },
  debugThumbTouchArea: {
    position: 'absolute',
    backgroundColor: 'green',
    opacity: 0.5
  }
});
//# sourceMappingURL=SliderOP.js.map