webamp/js/ShadeTime.jsx

import React from 'react';
import {connect} from 'react-redux';

import {getTimeObj} from './utils';
import Character from './Character.jsx';


class Time extends React.Component {
  constructor(props) {
    super(props);
    this.toggleTimeMode = this.toggleTimeMode.bind(this);
  }
  toggleTimeMode() {
    this.props.dispatch({type: 'TOGGLE_TIME_MODE'});
  }
  render() {
    const seconds = this.props.timeMode === 'ELAPSED' ?
      this.props.timeElapsed :
      this.props.length - this.props.timeElapsed;

    const timeObj = getTimeObj(seconds);
    return <div id='shade-time' onClick={this.toggleTimeMode} className='countdown'>
      <Character id='shade-minus-sign'>{this.props.timeMode === 'REMAINING' ? '-' : ''}</Character>
      <Character id='shade-minute-first-digit'>{timeObj.minutesFirstDigit}</Character>
      <Character id='shade-minute-second-digit'>{timeObj.minutesSecondDigit}</Character>
      <Character id='shade-second-first-digit'>{timeObj.secondsFirstDigit}</Character>
      <Character id='shade-second-second-digit'>{timeObj.secondsSecondDigit}</Character>
    </div>;
  }
}

module.exports = connect(state => state.media)(Time);