From cfedd0a9d90a4597d326bebad5b724941435a620 Mon Sep 17 00:00:00 2001
From: Matt Derrick <me@mattderrick.co.uk>
Date: Wed, 1 Nov 2017 14:08:42 +0000
Subject: [PATCH] Fix #121 - React throwing a NaN warning (#122)

---
 src/DefaultPlayer/Seek/Seek.js          | 2 +-
 src/DefaultPlayer/Seek/Seek.test.js     | 9 +++++++++
 src/DefaultPlayer/Volume/Volume.js      | 2 +-
 src/DefaultPlayer/Volume/Volume.test.js | 9 +++++++++
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/DefaultPlayer/Seek/Seek.js b/src/DefaultPlayer/Seek/Seek.js
index 61fd81b..f5bfe4e 100644
--- a/src/DefaultPlayer/Seek/Seek.js
+++ b/src/DefaultPlayer/Seek/Seek.js
@@ -27,7 +27,7 @@ export default ({ onChange, percentagePlayed, percentageBuffered, className, ari
                     onChange={onChange}
                     aria-label={ariaLabel}
                     className={styles.input}
-                    value={percentagePlayed} />
+                    value={percentagePlayed || 0} />
             </div>
         </div>
     );
diff --git a/src/DefaultPlayer/Seek/Seek.test.js b/src/DefaultPlayer/Seek/Seek.test.js
index ea68f12..e2c5584 100644
--- a/src/DefaultPlayer/Seek/Seek.test.js
+++ b/src/DefaultPlayer/Seek/Seek.test.js
@@ -42,6 +42,15 @@ describe('Seek', () => {
             .toEqual(10);
     });
 
+    it('handles an undefined percentagePlayed value', () => {
+        component.setProps({
+            percentagePlayed: undefined
+        });
+        const rangeInput = component.find(`.${styles.input}`);
+        expect(rangeInput.prop('value'))
+            .toEqual(0);
+    });
+
     it('triggers \'onChange\' prop when the input is changed', () => {
         const spy = jest.fn();
         component.setProps({
diff --git a/src/DefaultPlayer/Volume/Volume.js b/src/DefaultPlayer/Volume/Volume.js
index d64bbcf..942a1ce 100644
--- a/src/DefaultPlayer/Volume/Volume.js
+++ b/src/DefaultPlayer/Volume/Volume.js
@@ -4,7 +4,7 @@ import VolumeOff from './../Icon/volume_off.svg';
 import VolumeUp from './../Icon/volume_up.svg';
 
 export default ({ onChange, onClick, volume, muted, className, ariaLabelMute, ariaLabelUnmute, ariaLabelVolume }) => {
-    const volumeValue = muted
+    const volumeValue = muted || !volume
         ? 0
         : +volume;
     const isSilent = muted || volume <= 0;
diff --git a/src/DefaultPlayer/Volume/Volume.test.js b/src/DefaultPlayer/Volume/Volume.test.js
index bbb2a6d..5e36e21 100644
--- a/src/DefaultPlayer/Volume/Volume.test.js
+++ b/src/DefaultPlayer/Volume/Volume.test.js
@@ -46,6 +46,15 @@ describe('Volume', () => {
             .toEqual('Change volume');
     });
 
+    it('handles an undefined volume value', () => {
+        component.setProps({
+            volume: undefined
+        });
+        const rangeInput = component.find(`.${styles.input}`);
+        expect(rangeInput.prop('value'))
+            .toEqual(0);
+    });
+
     it('triggers \'onClick\' prop when the button is clicked', () => {
         const spy = jest.fn();
         component.setProps({