Adding in volume mapping and reset video when the playback has ended

Author: mattjburrows

app/store/mapStoreToPlayer.js

@@ -1,5 +1,7 @@
 'use strict';
 
+import { hasStopped } from '../actions/hasStopped';
+
 function setupPlayer(player) {
   return {
     play: (isPlaying) => {
@@ -11,10 +13,17 @@ function setupPlayer(player) {
         player.pause();
         player.currentTime = 0;
       }
+    },
+    volume: (volume) => {
+      player.volume = volume / 100;
     }
   };
 }
 
+function setupDispatch(store, player) {
+  player.addEventListener('ended', () => store.dispatch(hasStopped(true)));
+}
+
 function isPlayingChanged(previousState, currentState) {
   return (previousState.playback.isPlaying !== currentState.playback.isPlaying);
 }
@@ -23,15 +32,22 @@ function hasStoppedChanged(previousState, currentState) {
   return (previousState.playback.hasStopped !== currentState.playback.hasStopped);
 }
 
+function volumeChanged(previousState, currentState) {
+  return (previousState.playback.volume !== currentState.playback.volume);
+}
+
 export default (store, video) => {
   const player = setupPlayer(video);
   let currentState = store.getState();
 
+  setupDispatch(store, video);
+
   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);
+    if (volumeChanged(previousState, currentState)) player.volume(currentState.playback.volume);
   });
 };

test/store/mapStoreToPlayer.js

@@ -17,7 +17,10 @@ function setupPlayer() {
     play: playSpy,
     pause: pauseSpy,
     playSpy: playSpy,
-    pauseSpy: pauseSpy
+    pauseSpy: pauseSpy,
+    addEventListener: function addEventListener(name, cb) {
+      this[name] = cb;
+    }
   };
 }
 
@@ -30,64 +33,100 @@ describe('mapStoreToPlayer', () => {
     sandbox.restore();
   });
 
-  it('triggers the pause method when the dispatching isPlaying: false', () => {
-    const player = setupPlayer();
-    store.getState.onCall(0).returns({
-      playback: {
-        isPlaying: true
-      }
+  describe('store dispatches', () => {
+    it('triggers the pause method when the dispatching IS_PLAYING: 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();
     });
-    store.getState.onCall(1).returns({
-      playback: {
-        isPlaying: false
-      }
+
+    it('triggers the play method when the dispatching IS_PLAYING: 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();
     });
-    const unsubscribe = mapStoreToPlayer(store, player);
 
-    store.dispatch({type: 'FAKE_DISPATCH'});
-    assert(player.pauseSpy.calledOnce);
+    it('triggers the pause method and resets the player when dispatching HAS_STOPPED: 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();
+    });
 
-    unsubscribe();
+    it('updates the volume of the player when dispatching SET_VOLUME', () => {
+      const player = setupPlayer();
+      store.getState.onCall(0).returns({
+        playback: {
+          volume: 50
+        }
+      });
+      store.getState.onCall(1).returns({
+        playback: {
+          volume: 75
+        }
+      });
+      const unsubscribe = mapStoreToPlayer(store, player);
+
+      store.dispatch({type: 'FAKE_DISPATCH'});
+      assert.equal(player.volume, 0.75);
+
+      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);
+  describe('player events', () => {
+    beforeEach(() => sinon.stub(store, 'dispatch'));
 
-    store.dispatch({type: 'FAKE_DISPATCH'});
-    assert(player.playSpy.calledOnce);
+    it('dispatches HAS_STOPPED: true when the player ends', () => {
+      const player = setupPlayer();
+      const unsubscribe = mapStoreToPlayer(store, player);
 
-    unsubscribe();
-  });
+      player.ended();
+      assert(store.dispatch.calledOnce);
 
-  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
-      }
+      unsubscribe();
     });
-    const unsubscribe = mapStoreToPlayer(store, player);
-
-    store.dispatch({type: 'FAKE_DISPATCH'});
-    assert(player.pauseSpy.calledOnce);
-    assert.equal(player.currentTime, 0);
-
-    unsubscribe();
   });
 });