Testing and adding in store to player mapping

Author: mattjburrows

app/Player.jsx

@@ -2,21 +2,27 @@
 
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
+
 import configureStore from './store/configurePlayerStore';
 import PlaybackControls from './containers/PlaybackControls.jsx';
+import mapStoreToPlayer from './store/mapStoreToPlayer';
 
 const store = configureStore();
 
 class Player extends Component {
+  componentDidMount() {
+    mapStoreToPlayer(store, this.refs.video);
+  }
+
   render() {
-    return <Provider store={store}>
+    return (<Provider store={store}>
       <div>
-        <video>
+        <video ref="video">
           <source src={this.props.src} />
         </video>
         <PlaybackControls />
       </div>
-    </Provider>;
+    </Provider>);
   }
 }
 

app/index.js

@@ -6,7 +6,7 @@ import Player from './Player.jsx';
 
 ReactDOM.render(
   React.createElement(Player, {
-    src: './SampleVideo_640x360_10mb.mp4'
+    src: './SampleVideo_720x480_1mb.mp4'
   }),
   document.getElementById('app')
 );

app/store/mapStoreToPlayer.js

@@ -0,0 +1,37 @@
+'use strict';
+
+function setupPlayer(player) {
+  return {
+    play: (isPlaying) => {
+      if (isPlaying) player.play();
+      else player.pause();
+    },
+    stop: (hasStopped) => {
+      if (hasStopped) {
+        player.pause();
+        player.currentTime = 0;
+      }
+    }
+  };
+}
+
+function isPlayingChanged(previousState, currentState) {
+  return (previousState.playback.isPlaying !== currentState.playback.isPlaying);
+}
+
+function hasStoppedChanged(previousState, currentState) {
+  return (previousState.playback.hasStopped !== currentState.playback.hasStopped);
+}
+
+export default (store, video) => {
+  const player = setupPlayer(video);
+  let currentState = store.getState();
+
+  return store.subscribe(() => {
+    const previousState = currentState;
+    currentState = store.getState();
+
+    if (isPlayingChanged(previousState, currentState)) player.play(currentState.playback.isPlaying);
+    if (hasStoppedChanged(previousState, currentState)) player.stop(currentState.playback.hasStopped);
+  });
+};

test/store/mapStoreToPlayer.js

@@ -0,0 +1,93 @@
+'use strict';
+
+import assert from 'assert';
+import sinon from 'sinon';
+
+import configureStore from '../../app/store/configurePlayerStore';
+import mapStoreToPlayer from '../../app/store/mapStoreToPlayer';
+
+const store = configureStore();
+const sandbox = sinon.sandbox.create();
+
+function setupPlayer() {
+  const playSpy = sinon.spy();
+  const pauseSpy = sinon.spy();
+
+  return {
+    play: playSpy,
+    pause: pauseSpy,
+    playSpy: playSpy,
+    pauseSpy: pauseSpy
+  };
+}
+
+describe('mapStoreToPlayer', () => {
+  beforeEach(() => {
+    sandbox.stub(store, 'getState');
+  });
+
+  afterEach(() => {
+    sandbox.restore();
+  });
+
+  it('triggers the pause method when the dispatching isPlaying: false', () => {
+    const player = setupPlayer();
+    store.getState.onCall(0).returns({
+      playback: {
+        isPlaying: true
+      }
+    });
+    store.getState.onCall(1).returns({
+      playback: {
+        isPlaying: false
+      }
+    });
+    const unsubscribe = mapStoreToPlayer(store, player);
+
+    store.dispatch({type: 'FAKE_DISPATCH'});
+    assert(player.pauseSpy.calledOnce);
+
+    unsubscribe();
+  });
+
+  it('triggers the play method when the dispatching isPlaying: true', () => {
+    const player = setupPlayer();
+    store.getState.onCall(0).returns({
+      playback: {
+        isPlaying: false
+      }
+    });
+    store.getState.onCall(1).returns({
+      playback: {
+        isPlaying: true
+      }
+    });
+    const unsubscribe = mapStoreToPlayer(store, player);
+
+    store.dispatch({type: 'FAKE_DISPATCH'});
+    assert(player.playSpy.calledOnce);
+
+    unsubscribe();
+  });
+
+  it('triggers the pause method and resets the player when dispatching hasStopped: true', () => {
+    const player = setupPlayer();
+    store.getState.onCall(0).returns({
+      playback: {
+        hasStopped: false
+      }
+    });
+    store.getState.onCall(1).returns({
+      playback: {
+        hasStopped: true
+      }
+    });
+    const unsubscribe = mapStoreToPlayer(store, player);
+
+    store.dispatch({type: 'FAKE_DISPATCH'});
+    assert(player.pauseSpy.calledOnce);
+    assert.equal(player.currentTime, 0);
+
+    unsubscribe();
+  });
+});