progress.js

import { h, Component } from 'preact';
import {connect} from 'preact-redux';
import { bindActionCreators } from 'redux';
import * as actions from './actions';

let ProgressBuffer = ({progress = 0}) => {
  let progressBufferStyle = {
    position: 'relative',
    width: `${progress}%`,
    backgroundColor: 'gray',
    height: '7px',
    top: '1px',
    borderRadius: '5px',
    verticalAlign: 'middle',
  };
  return <div style={progressBufferStyle}></div>
}


let Scrobber = ({progress = 0}) => {
  let scrobberStyle = {
    borderRadius: '50%',
    position: 'relative',
    bottom: '10px',
    width: '15px',
    height: '15px',
    marginLeft: '-4px',
    backgroundColor: 'white',
    left: `${progress}%`,
  };
  return (<div style={scrobberStyle}></div>)
}


let timelineStyle = {
  width: '56%',
  height: '10px',
  borderRadius: '5px',
  padding: '2px',
  cursor: 'pointer',
  backgroundColor: 'black',
  display: 'inline-block',
};

class VHSProgressBar extends Component {
  constructor(options) {
    super(options);
    this.state.progress = 0;
  }

  seek = (event) => {
    const leftOffset = this.seekbarContainer.getBoundingClientRect().left + document.body.scrollLeft;
    const offsetX = event.pageX - leftOffset;
    const position = offsetX / this.seekbarContainer.offsetWidth * 100;
    const {playbackId} = this.props;
    const {setCurrentTime} = this.props.actions;

    setCurrentTime(playbackId, (position * this.props.duration) / 100, true);
  }

  componentWillReceiveProps(nextProps) {
    const percentage = (nextProps.currentTime / nextProps.duration) * 100;
    this.setState({progress: Math.max(Math.min(percentage, 100.0), 0)});
  }

  render(props, {progress}) {
    let style = Object.assign({}, timelineStyle, {display: props.hidden ? 'none': 'inline-block'});
    return (
    <div style={style} onClick={this.seek} ref={(el) => this.seekbarContainer = el}>
      <ProgressBuffer progress={progress} />
      <Scrobber progress={progress} />
    </div>
    );
  }
}

function mapStateToProps(state) {
  // FIXME
  if (!this) { return {} };
  let {playbackId} = this.props;
  let {currentTime, duration} = state[playbackId];
  return {currentTime, duration};
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(actions, dispatch),
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(VHSProgressBar);