'use strict';

import React from 'react';

require('styles//Controls.scss');

class ControlsComponent extends React.Component {

  renderStopButton() {
    if (this.props.isPlaying) {
      return <button id="stop">Stop</button>
    }

    return <button id="stop" style={{display: 'none'}}>Stop</button>

  }

  renderPlayButton() {
    if (this.props.isPlaying) {
      return <button id="play" style={{display: 'none'}}>Play</button>
    }

    return <button id="play">Play</button>
  }

  render() {
    return (
      <div className="controls-component">
          <button id="previous">Previous</button>
          {this.renderStopButton()}
          {this.renderPlayButton()}
          <button id="next">Next</button>
      </div>
    );
  }
}

ControlsComponent.displayName = 'ControlsComponent';

ControlsComponent.propTypes = {
  isPlaying :  React.PropTypes.bool.isRequired,
  onPrevious : React.PropTypes.func,
  onStop :     React.PropTypes.func,
  onPlay :     React.PropTypes.func,
  onNext :     React.PropTypes.func
};

ControlsComponent.defaultProps = {
  isPlaying : true
};

export default ControlsComponent;

'use strict';

import React from 'react';

require('styles//Controls.scss');

class ControlsComponent extends React.Component {

  renderStopButton() {
    if (this.props.isPlaying) {
      return <button id="stop">Stop</button>
    }

    return <button id="stop" style={{display: 'none'}}>Stop</button>

  }

  renderPlayButton() {
    if (this.props.isPlaying) {
      return <button id="play" style={{display: 'none'}}>Play</button>
    }

    return <button id="play">Play</button>
  }

  render() {
    return (
      <div className="controls-component">
          <button id="rewind">Rewind</button>
          {this.renderStopButton()}
          {this.renderPlayButton()}
          <button id="forward">Forward</button>
      </div>
    );
  }
}

ControlsComponent.displayName = 'ControlsComponent';

ControlsComponent.propTypes = {
  isPlaying : React.PropTypes.bool.isRequired
};

ControlsComponent.defaultProps = {
  isPlaying : true
};

export default ControlsComponent;

--- 
+++ 
@@ -26,10 +26,10 @@
   render() {
     return (
       <div className="controls-component">
-          <button id="rewind">Rewind</button>
+          <button id="previous">Previous</button>
           {this.renderStopButton()}
           {this.renderPlayButton()}
-          <button id="forward">Forward</button>
+          <button id="next">Next</button>
       </div>
     );
   }
@@ -38,7 +38,11 @@
 ControlsComponent.displayName = 'ControlsComponent';
 
 ControlsComponent.propTypes = {
-  isPlaying : React.PropTypes.bool.isRequired
+  isPlaying :  React.PropTypes.bool.isRequired,
+  onPrevious : React.PropTypes.func,
+  onStop :     React.PropTypes.func,
+  onPlay :     React.PropTypes.func,
+  onNext :     React.PropTypes.func
 };
 
 ControlsComponent.defaultProps = {
Add props for the action trigger
