win95-media-player/lib/components/SeekButton.js

Back from 1995, and running on your website

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var React = require('react');

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

var _require = require('@cassette/core'),
    playerContextFilter = _require.playerContextFilter;

var MediaBtn = require('./MediaBtn');

var icons = {
  fastforward: 'forwardseek',
  rewind: 'backseek'
};
var titles = {
  fastforward: 'Fast Forward',
  rewind: 'Rewind'
};
var now = typeof performance !== 'undefined' ? performance.now.bind(performance) : Date.now.bind(Date); // 6x speed

var rate = 1 / 1000 * 6; // only update every 350 milliseconds

var throttleDuration = 350;

var SeekButton =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(SeekButton, _React$PureComponent);

  function SeekButton(props) {
    var _this;

    _this = _React$PureComponent.call(this, props) || this;

    _this.handleMouseDown = function () {
      // set back by throttle to make sure
      // we update immediately
      var t = now() - throttleDuration;

      var nextFrame = function nextFrame() {
        var _t = now();

        var dt = _t - t;

        if (dt >= throttleDuration) {
          t = _t;

          _this.props.onSeekComplete(_this.props.currentTime + rate * dt);
        }

        _this.frame = requestAnimationFrame(nextFrame);
      };

      _this.frame = requestAnimationFrame(nextFrame);
    };

    _this.handleMouseUp = function () {
      cancelAnimationFrame(_this.frame);
    };

    return _this;
  }

  var _proto = SeekButton.prototype;

  _proto.componentWillUnmount = function componentWillUnmount() {
    cancelAnimationFrame(this.frame);
  };

  _proto.render = function render() {
    var type = this.props.type;
    return React.createElement(MediaBtn, {
      title: titles[type],
      icon: icons[type],
      onMouseDown: this.handleMouseDown,
      onMouseUp: this.handleMouseUp,
      onMouseLeave: this.handleMouseUp
    });
  };

  return SeekButton;
}(React.PureComponent);

SeekButton.propTypes = {
  currentTime: PropTypes.number.isRequired,
  onSeekComplete: PropTypes.func.isRequired,
  type: PropTypes.oneOf(['fastforward', 'rewind']).isRequired
};
module.exports = playerContextFilter(SeekButton, ['currentTime', 'onSeekComplete']);