Adding in a volume control

Author: mattjburrows

app/actions/setVolume.js

@@ -0,0 +1,10 @@
+'use strict';
+
+export const SET_VOLUME = 'SET_VOLUME';
+
+export function setVolume(value) {
+  return {
+    type: SET_VOLUME,
+    volume: value
+  };
+}

app/components/Volume.jsx

@@ -0,0 +1,31 @@
+'use strict';
+
+import React, { Component } from 'react';
+
+class Volume extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <input type="range" value={this.props.value} min={this.props.min} max={this.props.max} step={this.props.step} onChange={this.props.onChange} />
+    );
+  }
+}
+
+Volume.defaultProps = {
+  min: 0,
+  max: 11,
+  step: 1
+};
+
+Volume.propTypes = {
+  onChange: React.PropTypes.func.isRequired,
+  value: React.PropTypes.number,
+  min: React.PropTypes.number,
+  max: React.PropTypes.number,
+  step: React.PropTypes.number
+};
+
+export default Volume;

app/containers/PlaybackControls.jsx

@@ -7,8 +7,10 @@ import { connect } from 'react-redux';
 
 import { isPlaying } from '../actions/isPlaying';
 import { hasStopped } from '../actions/hasStopped';
+import { setVolume } from '../actions/setVolume';
 
 import Button from '../components/Button.jsx';
+import Volume from '../components/Volume.jsx';
 
 export class PlaybackControls extends Component {
   _onPlayButtonClick() {
@@ -19,13 +21,19 @@ export class PlaybackControls extends Component {
     this.props.hasStoppedAction(true);
   }
 
+  _onVolumeChange(event) {
+    const volumeValue = event.target.value;
+    this.props.setVolumeAction(volumeValue);
+  }
+
   render() {
     const text = this.props.isPlaying ? 'pause' : 'play';
 
     return (
       <div>
         <Button onClick={this._onPlayButtonClick.bind(this)} text={text} />
         <Button onClick={this._onStopButtonClick.bind(this)} text="stop" />
+        <Volume onChange={this._onVolumeChange.bind(this)} />
       </div>
     );
   }
@@ -34,7 +42,8 @@ export class PlaybackControls extends Component {
 PlaybackControls.propTypes = {
   isPlaying: React.PropTypes.bool,
   isPlayingAction: React.PropTypes.func,
-  hasStoppedAction: React.PropTypes.func
+  hasStoppedAction: React.PropTypes.func,
+  setVolumeAction: React.PropTypes.func
 };
 
 function mapStateToProps(state) {
@@ -46,7 +55,8 @@ function mapStateToProps(state) {
 function mapDispatchToProps(dispatch) {
   return {
     isPlayingAction: bindActionCreators(isPlaying, dispatch),
-    hasStoppedAction: bindActionCreators(hasStopped, dispatch)
+    hasStoppedAction: bindActionCreators(hasStopped, dispatch),
+    setVolumeAction: bindActionCreators(setVolume, dispatch)
   };
 }
 

app/reducers/playback.js

@@ -2,10 +2,12 @@
 
 import { IS_PLAYING } from '../actions/isPlaying';
 import { HAS_STOPPED } from '../actions/hasStopped';
+import { SET_VOLUME } from '../actions/setVolume';
 
 const initialState = {
   isPlaying: false,
-  hasStopped: true
+  hasStopped: true,
+  volume: 7
 };
 
 function setIsPlayingState(isPlaying) {
@@ -32,12 +34,20 @@ function setHasStoppedState(hasStopped) {
   });
 }
 
+function setVolumeState(volume) {
+  return {
+    volume: volume
+  };
+}
+
 export function playbackReducer(state = initialState, action) {
   switch (action.type) {
     case IS_PLAYING :
       return Object.assign({}, state, setIsPlayingState(action.isPlaying));
     case HAS_STOPPED :
       return Object.assign({}, state, setHasStoppedState(action.hasStopped));
+    case SET_VOLUME :
+      return Object.assign({}, state, setVolumeState(action.volume));
     default:
       return state;
   }

app/store/configurePlayerStore.js

@@ -4,9 +4,11 @@ import { createStore, combineReducers } from 'redux';
 import { playbackReducer } from '../reducers/playback';
 
 export default function configureStore() {
-  return createStore(
+  const store = createStore(
     combineReducers({
       playback: playbackReducer
     })
   );
+
+  return store;
 }

test/actions/setVolume.js

@@ -0,0 +1,13 @@
+'use strict';
+
+import assert from 'assert';
+import { SET_VOLUME, setVolume } from '../../app/actions/setVolume';
+
+describe('setVolume', () => {
+  it('returns an object with the volume: {NUMBER}', () => {
+    const action = setVolume(1);
+
+    assert.equal(action.type, SET_VOLUME);
+    assert.equal(action.volume, 1);
+  });
+});

test/components/Volume.js

@@ -0,0 +1,28 @@
+'use strict';
+
+import React from 'react';
+import assert from 'assert';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+
+import Volume from '../../app/components/Volume.jsx';
+
+describe('<Volume />', () => {
+  it('renders the volume control with the correct value', () => {
+    const value = 5;
+    const wrapper = shallow(
+      <Volume value={value} onChange={() => {}} />
+    );
+
+    assert.equal(wrapper.props().value, 5);
+  });
+
+  it('calls the onChange function', () => {
+    const onChangeSpy = sinon.spy();
+    const wrapper = shallow(
+      <Volume onChange={onChangeSpy} />
+    );
+    wrapper.find('input').simulate('change');
+    assert.equal(onChangeSpy.calledOnce, true);
+  });
+});

test/containers/PlaybackControls.js

@@ -50,4 +50,14 @@ describe('<PlaybackControls />', () => {
       assert(hasStoppedActionSpy.calledWith(true));
     });
   });
+
+  describe.only('<Volume />', () => {
+    it('calls the setVolumeAction', () => {
+      const setVolumeActionSpy = sinon.spy();
+      const wrapper = shallow(<PlaybackControls setVolumeAction={setVolumeActionSpy} />);
+
+      wrapper.find('Volume').simulate('change');
+      assert(setVolumeActionSpy.calledOnce);
+    });
+  });
 });

test/reducers/playback.js

@@ -3,6 +3,7 @@
 import assert from 'assert';
 import { IS_PLAYING } from '../../app/actions/isPlaying';
 import { HAS_STOPPED } from '../../app/actions/hasStopped';
+import { SET_VOLUME } from '../../app/actions/setVolume';
 import { playbackReducer } from '../../app/reducers/playback';
 
 describe('playbackState', () => {
@@ -55,4 +56,19 @@ describe('playbackState', () => {
       assert.strictEqual(state.hasStopped, false);
     });
   });
+
+  describe('volume property', () => {
+    it('defaults to 7', () => {
+      assert.strictEqual(playbackReducer(undefined, '').volume, 7);
+    });
+
+    it('{volume: 1} when action.volume is 1', () => {
+      const state = playbackReducer(undefined, {
+        type: SET_VOLUME,
+        volume: 1
+      });
+
+      assert.strictEqual(state.volume, 1);
+    });
+  });
 });