summaryrefslogtreecommitdiff
path: root/animism-align/frontend/app/views/viewer/nav/nav.player.js
blob: 43fa34948b36e29ee9bc067d02e04fc359c40ad3 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React, { Component } from 'react'
import { connect } from 'react-redux'

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

class NavPlayer extends Component {
  constructor(props) {
    super(props)
    this.stopPropagation = this.stopPropagation.bind(this)
  }
  stopPropagation(e) {
    e && e.stopPropagation()
  }
  render() {
    const { playing, play_ts, duration, volume } = this.props
    const className = playing ? 'nav-player playing' : 'nav-player'
    return (
      <div className={className}>
        <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.viewer.currentSection ? state.audio.play_ts - state.viewer.currentSection.start_ts : 0,
  duration: state.viewer.currentSection ? state.viewer.currentSection.end_ts - state.viewer.currentSection.start_ts : 0,
})

export default connect(mapStateToProps)(NavPlayer)