@lahzenegar/video-react/lib/components/control-bar/SeekBar.js

Video-React is a web video player built from the ground up for an HTML5 world using React library.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _Slider = require('../Slider');

var _Slider2 = _interopRequireDefault(_Slider);

var _PlayProgressBar = require('./PlayProgressBar');

var _PlayProgressBar2 = _interopRequireDefault(_PlayProgressBar);

var _LoadProgressBar = require('./LoadProgressBar');

var _LoadProgressBar2 = _interopRequireDefault(_LoadProgressBar);

var _MouseTimeDisplay = require('./MouseTimeDisplay');

var _MouseTimeDisplay2 = _interopRequireDefault(_MouseTimeDisplay);

var _PreviewThumbnail = require('./PreviewThumbnail');

var _PreviewThumbnail2 = _interopRequireDefault(_PreviewThumbnail);

var _utils = require('../../utils');

var _Chapters = require('./Chapters');

var _Chapters2 = _interopRequireDefault(_Chapters);

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

var propTypes = {
  player: _propTypes2.default.object,
  mouseTime: _propTypes2.default.object,
  actions: _propTypes2.default.object,
  className: _propTypes2.default.string
};

var SeekBar = function (_Component) {
  (0, _inherits3.default)(SeekBar, _Component);

  function SeekBar(props, context) {
    (0, _classCallCheck3.default)(this, SeekBar);

    var _this = (0, _possibleConstructorReturn3.default)(this, (SeekBar.__proto__ || (0, _getPrototypeOf2.default)(SeekBar)).call(this, props, context));

    _this.getPercent = _this.getPercent.bind(_this);
    _this.getNewTime = _this.getNewTime.bind(_this);
    _this.stepForward = _this.stepForward.bind(_this);
    _this.stepBack = _this.stepBack.bind(_this);

    _this.handleMouseDown = _this.handleMouseDown.bind(_this);
    _this.handleMouseMove = _this.handleMouseMove.bind(_this);
    _this.handleMouseUp = _this.handleMouseUp.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(SeekBar, [{
    key: 'componentDidMount',
    value: function componentDidMount() {}
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {}

    /**
     * Get percentage of video played
     *
     * @return {Number} Percentage played
     * @method getPercent
     */

  }, {
    key: 'getPercent',
    value: function getPercent() {
      var _props$player = this.props.player,
          hasDVR = _props$player.hasDVR,
          currentTime = _props$player.currentTime,
          seekingTime = _props$player.seekingTime,
          duration = _props$player.duration,
          mediaDuration = _props$player.mediaDuration;

      var percent = void 0;
      var time = seekingTime || currentTime;
      if (hasDVR) {
        percent = time / mediaDuration;
      } else {
        percent = time / duration;
      }
      return percent >= 1 ? 1 : percent;
    }
  }, {
    key: 'getNewTime',
    value: function getNewTime(event) {
      var _props$player2 = this.props.player,
          hasDVR = _props$player2.hasDVR,
          duration = _props$player2.duration,
          mediaDuration = _props$player2.mediaDuration,
          playOffset = _props$player2.playOffset;

      var distance = this.slider.calculateDistance(event);
      var _duration = void 0,
          newTime = void 0;
      if (hasDVR) {
        _duration = mediaDuration;
        newTime = distance * _duration + playOffset;
      } else {
        _duration = duration;
        newTime = distance * _duration;
      }

      // Don't let video end while scrubbing.
      return newTime === _duration ? newTime - 0.1 : newTime;
    }
  }, {
    key: 'handleMouseDown',
    value: function handleMouseDown() {}
  }, {
    key: 'handleMouseUp',
    value: function handleMouseUp(event) {
      var actions = this.props.actions;

      var newTime = this.getNewTime(event);
      // Set new time (tell video to seek to new time)
      actions.seek(newTime);
      actions.handleEndSeeking(newTime);
    }
  }, {
    key: 'handleMouseMove',
    value: function handleMouseMove(event) {
      var actions = this.props.actions;

      var newTime = this.getNewTime(event);
      actions.handleSeekingTime(newTime);
    }
  }, {
    key: 'stepForward',
    value: function stepForward() {
      var actions = this.props.actions;

      actions.forward(5);
    }
  }, {
    key: 'stepBack',
    value: function stepBack() {
      var actions = this.props.actions;

      actions.replay(5);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          actions = _props.actions,
          player = _props.player,
          _props$player3 = _props.player,
          latency = _props$player3.latency,
          hasDVR = _props$player3.hasDVR,
          isLive = _props$player3.isLive,
          currentTime = _props$player3.currentTime,
          seekingTime = _props$player3.seekingTime,
          duration = _props$player3.duration,
          mediaDuration = _props$player3.mediaDuration,
          playOffset = _props$player3.playOffset,
          buffered = _props$player3.buffered,
          mouseTime = _props.mouseTime,
          chapters = _props.chapters,
          storyboard = _props.storyboard;

      var _duration = void 0;
      var time = seekingTime || currentTime;
      if (hasDVR) {
        _duration = mediaDuration;
      } else {
        _duration = duration;
      }
      return _react2.default.createElement(
        _Slider2.default,
        {
          ref: function ref(input) {
            _this2.slider = input;
          },
          label: 'video progress bar',
          className: (0, _classnames2.default)('video-react-progress-holder', this.props.className),
          valuenow: (this.getPercent() * 100).toFixed(2),
          valuetext: (0, _utils.formatTime)(time, _duration),
          onMouseDown: this.handleMouseDown,
          onMouseMove: this.handleMouseMove,
          onMouseUp: this.handleMouseUp,
          getPercent: this.getPercent,
          stepForward: this.stepForward,
          stepBack: this.stepBack
        },
        _react2.default.createElement(_LoadProgressBar2.default, {
          buffered: buffered,
          playOffset: playOffset,
          hasDVR: hasDVR,
          currentTime: time,
          duration: _duration
        }),
        _react2.default.createElement(_MouseTimeDisplay2.default, {
          duration: _duration,
          hasDVR: hasDVR,
          mouseTime: mouseTime
        }),
        _react2.default.createElement(_PreviewThumbnail2.default, {
          duration: _duration,
          mouseTime: mouseTime,
          isLive: isLive,
          storyboard: storyboard,
          player: player
        }),
        _react2.default.createElement(_PlayProgressBar2.default, {
          hasDVR: hasDVR,
          latency: latency,
          currentTime: time,
          duration: _duration
        }),
        _react2.default.createElement(_Chapters2.default, (0, _extends3.default)({}, this.props, { chapters: chapters, player: player, actions: actions }))
      );
    }
  }]);
  return SeekBar;
}(_react.Component);

exports.default = SeekBar;


SeekBar.propTypes = propTypes;
SeekBar.displayName = 'SeekBar';