win95-media-player/lib/components/ProgressControl.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 _require = require('@cassette/components'),
    MediaProgressBar = _require.MediaProgressBar;

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

var _require3 = require('react95'),
    themes = _require3.themes;

var ResizeObserver = require('resize-observer-polyfill')["default"];

import MediaBtn from './MediaBtn';
var progressMargin = 10; // based on Cutout styles from react95

var progressContainerStyle = {
  background: 'white',
  height: 13,
  margin: progressMargin,
  marginBottom: 0,
  borderStyle: 'solid',
  borderWidth: 2,
  borderTopColor: themes["default"].borderDark,
  borderLeftColor: themes["default"].borderDark,
  borderBottomColor: themes["default"].borderLightest,
  borderRightColor: themes["default"].borderLightest,
  boxSizing: 'border-box'
};
var handle = React.createElement("div", {
  style: {
    position: 'relative',
    top: 1
  }
}, React.createElement("div", {
  style: {
    width: 12,
    height: 18,
    borderStyle: 'solid',
    borderWidth: 2,
    backgroundColor: themes["default"].material,
    borderTopColor: themes["default"].borderLightest,
    borderLeftColor: themes["default"].borderLightest,
    borderRightColor: themes["default"].borderDark,
    borderBottomWidth: 0,
    boxSizing: 'border-box'
  }
}), React.createElement("div", {
  style: {
    width: 8,
    height: 8,
    borderStyle: 'solid',
    borderWidth: 2,
    backgroundColor: themes["default"].material,
    borderTopWidth: 0,
    borderLeftColor: themes["default"].borderLightest,
    borderBottomColor: themes["default"].borderDark,
    borderRightWidth: 0,
    transform: 'rotate(-45deg) translateX(-50%)',
    position: 'relative',
    left: 5,
    top: -6,
    boxSizing: 'border-box'
  }
}));
var scrollButtonContainerStyle = {
  marginTop: 10,
  marginRight: '1.3rem',
  marginLeft: '0.3rem',
  display: 'flex'
};
var scrollButtonStyle = {
  width: 11,
  height: 13
};
var scrollInterval = 1 / 30; // the minimum horizontal pixel space needed to print a time label

var minWidthForTickInterval = 30;
var intervalsInSeconds = [0.1, 0.25, 0.5, 1, 2, 5, 10, 15, 30, // 1 minute
1 * 60, 2 * 60, 5 * 60, 10 * 60, 15 * 60, // 1 hour
1 * 60 * 60, 2 * 60 * 60, 5 * 60 * 60, 10 * 60 * 60, 15 * 60 * 60, // 30 hours... hopefully we don't need more than that haha
30 * 60 * 60];

function findIdealInterval(progressWidth, trackDuration) {
  var ratio = progressWidth / trackDuration;
  var i = 0;
  var interval;

  do {
    interval = intervalsInSeconds[i++];
  } while (i < intervalsInSeconds.length && interval * ratio < minWidthForTickInterval);

  return interval;
}

function getTicks(progressWidth, trackDuration) {
  var ticks = [{
    time: 0,
    label: true
  }];
  var interval = findIdealInterval(progressWidth, trackDuration);

  for (var time = interval; time < trackDuration; time += interval) {
    ticks.push({
      time: time,
      label: true
    });
  }

  var last = ticks[ticks.length - 1];

  if (last.time < trackDuration) {
    if (last.time > 0) {
      last.label = false;
    }

    ticks.push({
      time: trackDuration,
      label: true
    });
  }

  return ticks;
}

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

  function ProgressControl(props) {
    var _this;

    _this = _React$PureComponent.call(this, props) || this;
    _this.state = {
      progressWidth: 0,
      ticks: [{
        time: 0,
        label: true
      }, {
        time: props.duration,
        label: true
      }]
    };

    _this.handleScrollForward = function () {
      _this.props.onSeekComplete(_this.props.currentTime + scrollInterval);
    };

    _this.handleScrollBackward = function () {
      _this.props.onSeekComplete(_this.props.currentTime - scrollInterval);
    };

    return _this;
  }

  var _proto = ProgressControl.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var _this2 = this;

    this.resizeObserver = new ResizeObserver(function (entries, observer) {
      _this2.setState({
        progressWidth: entries[0].contentRect.width - progressMargin * 2
      });
    });
    this.resizeObserver.observe(this.progressBox);
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
    var duration = this.props.duration;
    var progressWidth = this.state.progressWidth;

    if (duration !== prevProps.duration || progressWidth !== prevState.progressWidth) {
      this.setState({
        ticks: getTicks(progressWidth, duration)
      });
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.resizeObserver.disconnect();
  };

  _proto.render = function render() {
    var _this3 = this;

    var duration = this.props.duration;
    var _this$state = this.state,
        ticks = _this$state.ticks,
        progressWidth = _this$state.progressWidth;
    var ratio = progressWidth / duration;
    return React.createElement("div", {
      style: {
        display: 'flex'
      }
    }, React.createElement("div", {
      ref: function ref(elem) {
        return _this3.progressBox = elem;
      },
      style: {
        flexGrow: 1
      }
    }, React.createElement(MediaProgressBar, {
      handle: handle,
      progressDirection: "right",
      style: progressContainerStyle
    }), React.createElement("div", {
      style: {
        position: 'relative',
        height: 30,
        marginLeft: progressMargin,
        marginRight: progressMargin
      }
    }, ticks.map(function (_ref, index) {
      var time = _ref.time,
          label = _ref.label;
      return React.createElement("div", {
        key: time + '-' + index,
        style: {
          position: 'absolute',
          left: time * ratio
        }
      }, React.createElement("div", {
        style: {
          height: 10,
          overflow: 'hidden'
        }
      }, "|"), React.createElement("div", {
        style: {
          position: 'relative',
          left: -2
        }
      }, label && time.toFixed(Math.max(0, 3 - Math.floor(time).toString().length))));
    }))), React.createElement("div", {
      style: scrollButtonContainerStyle
    }, React.createElement(MediaBtn, {
      title: "Scroll Backward",
      icon: "backscroll",
      style: scrollButtonStyle,
      onClick: this.handleScrollBackward
    }), React.createElement(MediaBtn, {
      title: "Scroll Forward",
      icon: "forwardscroll",
      style: scrollButtonStyle,
      onClick: this.handleScrollForward
    })));
  };

  return ProgressControl;
}(React.PureComponent);

module.exports = playerContextFilter(ProgressControl, ['currentTime', 'duration', 'onSeekComplete']);