Time control

Author: mderrick

src/DefaultPlayer/DefaultPlayer.js

@@ -13,6 +13,7 @@ import PlayPause from './PlayPause/PlayPause';
 import Seek from './Seek/Seek';
 import Volume from './Volume/Volume';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
+import Time from './Time/Time';
 
 const DefaultPlayer = ({
     video,
@@ -49,6 +50,7 @@ const DefaultPlayer = ({
                     className={styles.seek}
                     setCurrentTime={setCurrentTime}
                     {...video} />
+                <Time {...video} />
                 <Volume
                     setVolume={setVolume}
                     toggleMute={toggleMute}

src/DefaultPlayer/Time/Time.css

@@ -1,6 +1,6 @@
 .component {
     padding: 0 10px 0 10px;
-    line-height: 34px;
+    line-height: 35px;
     color: #fff;
 }
 

src/DefaultPlayer/Time/Time.js

@@ -3,7 +3,7 @@ import styles from './Time.css';
 
 const formatTime = (seconds) => {
     const date = new Date(Date.UTC(1970,1,1,0,0,0,0));
-    seconds = isNaN(seconds)
+    seconds = isNaN(seconds) || seconds > 86400
         ? 0
         : Math.floor(seconds);
     date.setSeconds(seconds);

src/DefaultPlayer/Time/Time.test.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Time from './Time';
+import styles from './Time.css';
+
+describe('Time', () => {
+    let component;
+
+    beforeAll(() => {
+        component = shallow(<Time />);
+    });
+
+    it('should accept a className prop and append it to the components class', () => {
+        const newClassNameString = 'a new className';
+        expect(component.prop('className'))
+            .toContain(styles.component);
+        component.setProps({
+            className: newClassNameString
+        });
+        expect(component.prop('className'))
+            .toContain(styles.component);
+        expect(component.prop('className'))
+            .toContain(newClassNameString);
+    });
+
+    it('shows video duration', () => {
+        component.setProps({
+            duration: 10
+        });
+        expect(component.find(`.${styles.duration}`).text())
+            .toEqual('00:00:10');
+    });
+
+    it('shows current video elapsed time', () => {
+        component.setProps({
+            currentTime: 10
+        });
+        expect(component.find(`.${styles.current}`).text())
+            .toEqual('00:00:10');
+    });
+
+    it('can handle minutes, hours and seconds', () => {
+        component.setProps({
+            currentTime: 60 * 2
+        });
+        expect(component.find(`.${styles.current}`).text())
+            .toEqual('00:02:00');
+
+        component.setProps({
+            currentTime: 60 * 60 * 3
+        });
+        expect(component.find(`.${styles.current}`).text())
+            .toEqual('03:00:00');
+
+        component.setProps({
+            currentTime: 60 * 60 * 3 + 72
+        });
+        expect(component.find(`.${styles.current}`).text())
+            .toEqual('03:01:12');
+    });
+
+    it('fails gracefully and shows 00:00:00 when video is greater than 24 hours', () => {
+        // Who has a video longer than 24 hours? If this ever occurs then we
+        // should consider adding it.
+        component.setProps({
+            currentTime: 86401
+        });
+        expect(component.find(`.${styles.current}`).text())
+            .toEqual('00:00:00');
+
+        component.setProps({
+            currentTime: 86400
+        });
+        expect(component.find(`.${styles.current}`).text())
+            .toEqual('00:00:00');
+    });
+
+    it('fails gracefully and shows 00:00:00 when not given a number', () => {
+        component.setProps({
+            currentTime: null
+        });
+        expect(component.find(`.${styles.current}`).text())
+            .toEqual('00:00:00');
+
+        component.setProps({
+            currentTime: undefined
+        });
+        expect(component.find(`.${styles.current}`).text())
+            .toEqual('00:00:00');
+    });
+});