Seek control

Author: mderrick

src/DefaultPlayer/DefaultPlayer.js

@@ -4,7 +4,9 @@ import {
     setVolume,
     toggleMute,
     togglePause,
-    setCurrentTime
+    setCurrentTime,
+    getPercentagePlayed,
+    getPercentageBuffered
 } from './../video/api';
 import styles from './DefaultPlayer.css';
 import PlayPause from './PlayPause/PlayPause';
@@ -44,6 +46,7 @@ const DefaultPlayer = ({
                     togglePause={togglePause}
                     {...video} />
                 <Seek
+                    className={styles.seek}
                     setCurrentTime={setCurrentTime}
                     {...video} />
                 <Volume
@@ -57,9 +60,11 @@ const DefaultPlayer = ({
 
 export default video(
     DefaultPlayer,
-    ({  networkState, error, ...restState }) => ({
+    ({ networkState, error, ...restState }) => ({
         video: {
             error: error || networkState === 3,
+            percentagePlayed: getPercentagePlayed(restState),
+            percentageBuffered: getPercentageBuffered(restState),
             ...restState
         }
     }),

src/DefaultPlayer/Seek/Seek.css

@@ -1 +1,36 @@
-.component {}
+.component {
+    position: relative;
+}
+
+.track {
+    position: absolute;
+    top: 50%;
+    left: 5px;
+    right: 5px;
+    height: 4px;
+    transform: translateY(-50%);
+    background-color: #3e3e3e;
+}
+
+.buffer,
+.fill,
+.input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+}
+
+.buffer {
+    background-color: #5a5a5a;
+}
+
+.fill {
+    background: #fff;
+}
+
+.input {
+    width: 100%;
+    opacity: 0;
+    cursor: pointer;
+}

src/DefaultPlayer/Seek/Seek.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './Seek.css';
 
-export default ({ setCurrentTime, duration, currentTime, className }) => {
+export default ({ setCurrentTime, duration, percentagePlayed, percentageBuffered, className }) => {
     const change = (e) => {
         setCurrentTime(e.target.value * duration / 100);
     };
@@ -10,14 +10,27 @@ export default ({ setCurrentTime, duration, currentTime, className }) => {
             styles.component,
             className
         ].join(' ')}>
-            <input
-                min="0"
-                step={1}
-                max="100"
-                type="range"
-                orient="horizontal"
-                onChange={change}
-                value={currentTime / duration * 100} />
+            <div className={styles.track}>
+                <div
+                    className={styles.buffer}
+                    style={{
+                        width: `${percentageBuffered || 0}%`
+                    }} />
+                <div
+                    className={styles.fill}
+                    style={{
+                        width: `${percentagePlayed || 0}%`
+                    }} />
+                <input
+                    min="0"
+                    step={1}
+                    max="100"
+                    type="range"
+                    orient="horizontal"
+                    onChange={change}
+                    className={styles.input}
+                    value={percentagePlayed} />
+            </div>
         </div>
     );
 };

src/DefaultPlayer/Seek/Seek.test.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Seek from './Seek';
+import styles from './Seek.css';
+
+describe('Seek', () => {
+    let component;
+
+    beforeAll(() => {
+        component = shallow(<Seek />);
+    });
+
+    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('has a range input with correct ranges and percentagePlayed value', () => {
+        component.setProps({
+            percentagePlayed: 10
+        });
+        const rangeInput = component.find(`.${styles.input}`);
+        expect(rangeInput.prop('type'))
+            .toEqual('range');
+        expect(rangeInput.prop('orient'))
+            .toEqual('horizontal');
+        expect(rangeInput.prop('step'))
+            .toEqual(1);
+        expect(rangeInput.prop('min'))
+            .toEqual('0');
+        expect(rangeInput.prop('max'))
+            .toEqual('100');
+        expect(rangeInput.prop('value'))
+            .toEqual(10);
+    });
+
+    it('changes the played fill bar width', () => {
+        component.setProps({
+            percentagePlayed: 0
+        });
+        expect(component.find(`.${styles.fill}`).prop('style').width)
+            .toEqual('0%');
+        component.setProps({
+            percentagePlayed: 11
+        });
+        expect(component.find(`.${styles.fill}`).prop('style').width)
+            .toEqual('11%');
+    });
+
+    it('changes the buffer bar width', () => {
+        component.setProps({
+            percentageBuffered: 0
+        });
+        expect(component.find(`.${styles.buffer}`).prop('style').width)
+            .toEqual('0%');
+        component.setProps({
+            percentageBuffered: 11
+        });
+        expect(component.find(`.${styles.buffer}`).prop('style').width)
+            .toEqual('11%');
+    });
+});

src/video/api.js

@@ -39,3 +39,14 @@ export const toggleMute = (videoEl, { volume, muted }) => {
         videoEl.muted = true;
     }
 };
+
+/**
+ * Custom getter methods that are commonly used
+ * across video layouts. To be primarily used in
+ * `mapStateToProps`
+ */
+export const getPercentageBuffered = ({ buffered, duration }) =>
+    buffered && buffered.length && buffered.end(buffered.length - 1) / duration * 100 || 0;
+
+export const getPercentagePlayed = ({ currentTime, duration }) =>
+    currentTime / duration * 100;

src/video/api.test.js

@@ -4,7 +4,9 @@ import {
     setVolume,
     toggleMute,
     togglePause,
-    setCurrentTime
+    setCurrentTime,
+    getPercentagePlayed,
+    getPercentageBuffered
 } from './api';
 
 describe('api', () => {
@@ -102,4 +104,23 @@ describe('api', () => {
             expect(videoElMock.muted).toBe(false);
         });
     });
+
+    describe('getPercentagePlayed', () => {
+        it('returns correct percentage played', () => {
+            expect(getPercentagePlayed({
+                currentTime: 10,
+                duration: 100
+            })).toBe(10);
+
+            expect(getPercentagePlayed({
+                currentTime: 1,
+                duration: 10
+            })).toBe(10);
+
+            expect(getPercentagePlayed({
+                currentTime: 5,
+                duration: 20
+            })).toBe(25);
+        });
+    });
 });