import React, { Component } from 'react'
import { connect } from 'react-redux'

import { PlayButton, PlayerTime, VolumeControl } from './viewer.icons'

class NavPlayer extends Component {
  render() {
    const { playing, play_ts, duration, volume } = this.props
    return (
      <div className='nav-player'>
        <PlayButton playing={playing} />
        <PlayerTime play_ts={play_ts} duration={duration} />
        <VolumeControl volume={volume} />
      </div>
    )
  }
}

const mapStateToProps = state => ({
  playing: state.audio.playing,
  volume: state.audio.volume,
  play_ts: state.audio.play_ts,
  duration: state.align.timeline.duration,
})

export default connect(mapStateToProps)(NavPlayer)