Overlay for loading and error states

Author: mderrick

src/DefaultPlayer/DefaultPlayer.js

@@ -18,7 +18,7 @@ import Volume from './Volume/Volume';
 import Captions from './Captions/Captions';
 import PlayPause from './PlayPause/PlayPause';
 import Fullscreen from './Fullscreen/Fullscreen';
-import ErrorMessage from './ErrorMessage/ErrorMessage';
+import Overlay from './Overlay/Overlay';
 
 export const DefaultPlayer = ({
     video,
@@ -41,17 +41,15 @@ export const DefaultPlayer = ({
             className
         ].join(' ')}
         style={style}>
-            { video && video.error
-                ? <ErrorMessage
-                    className={styles.error}
-                    {...video} />
-                : null }
             <video
                 className={styles.video}
                 {...restProps}>
                 { children }
             </video>
-            { controls && controls.length
+            <Overlay
+                onClick={onPlayPauseClick}
+                {...video} />
+            { controls && controls.length && !video.error
                 ? <div className={styles.controls}>
                         { controls.map((control, i) => {
                             switch (control) {
@@ -82,7 +80,7 @@ export const DefaultPlayer = ({
                                         onClick={onVolumeClick}
                                         {...video} />;
                                 case 'Captions':
-                                    return video && video.textTracks && video.textTracks.length
+                                    return video.textTracks && video.textTracks.length
                                         ? <Captions
                                             key={i}
                                             onClick={onCaptionsClick}
@@ -102,18 +100,23 @@ export const DefaultPlayer = ({
 const controls = ['PlayPause', 'Seek', 'Time', 'Volume', 'Fullscreen', 'Captions'];
 
 DefaultPlayer.defaultProps = {
+    video: {},
     controls
 };
 
 DefaultPlayer.propTypes = {
+    video: PropTypes.object.isRequired,
     controls: PropTypes.arrayOf(PropTypes.oneOf(controls))
 };
 
 export default videoConnect(
     DefaultPlayer,
-    ({ networkState, error, ...restState }) => ({
+    ({ networkState, readyState, error, ...restState }) => ({
         video: {
+            readyState,
+            networkState,
             error: error || networkState === 3,
+            loading: readyState < 4,
             percentagePlayed: getPercentagePlayed(restState),
             percentageBuffered: getPercentageBuffered(restState),
             ...restState

src/DefaultPlayer/DefaultPlayer.test.js

@@ -7,7 +7,7 @@ import Seek from './Seek/Seek';
 import Volume from './Volume/Volume';
 import PlayPause from './PlayPause/PlayPause';
 import Fullscreen from './Fullscreen/Fullscreen';
-import ErrorMessage from './ErrorMessage/ErrorMessage';
+import Overlay from './Overlay/Overlay';
 
 describe('DefaultPlayer', () => {
     let component;
@@ -45,15 +45,8 @@ describe('DefaultPlayer', () => {
             .toEqual(true);
     });
 
-    it('shows the error component when required', () => {
-        expect(component.find(ErrorMessage).exists())
-            .toBeFalsy();
-        component.setProps({
-            video: {
-                error: true
-            }
-        });
-        expect(component.find(ErrorMessage).exists())
+    it('has an overlay component', () => {
+        expect(component.find(Overlay).exists())
             .toBeTruthy();
     });
 
@@ -93,4 +86,23 @@ describe('DefaultPlayer', () => {
         expect(component.find(`.${styles.controls}`).exists())
             .toBeFalsy();
     });
+
+    it('renders no controls when there is an error', () => {
+        component.setProps({
+            controls: ['PlayPause'],
+            video: {
+                error: false
+            }
+        });
+        expect(component.find(`.${styles.controls}`).exists())
+            .toBeTruthy();
+        component.setProps({
+            controls: ['PlayPause'],
+            video: {
+                error: true
+            }
+        });
+        expect(component.find(`.${styles.controls}`).exists())
+            .toBeFalsy();
+    });
 });

src/DefaultPlayer/ErrorMessage/ErrorMessage.css

@@ -0,0 +1,33 @@
+.component {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    color: #fff;
+    text-align: center;
+    cursor: pointer;
+}
+
+.inner {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 50%;
+    width: 60px;
+    height: 60px;
+    transform: translateY(-50%);
+    margin-left: -30px;
+    background-color: rgba(0,0,0,0.7);
+    border-radius: 10px;
+}
+
+.icon {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 50%;
+    margin-left: -20px;
+    transform: translateY(-50%);
+}

src/DefaultPlayer/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import styles from './Overlay.css';
+import PlayArrow from './../Icon/play_arrow.svg';
+import Spin from './../Icon/spin.svg';
+import Report from './../Icon/report.svg';
+
+export default class Overlay extends Component {
+    renderContent () {
+        const {
+            error,
+            paused,
+            loading
+        } = this.props;
+        const iconProps = {
+            className: styles.icon,
+            height: 40,
+            width: 40,
+            fill: '#fff'
+        };
+        if (error) {
+            return (
+                <span className={styles.inner}>
+                    <Report {...iconProps} />
+                </span>
+            );
+        } else if (loading) {
+            return (
+                <span className={styles.inner}>
+                    <Spin {...iconProps} />
+                </span>
+            );
+        } else if (paused) {
+            return (
+                <span className={styles.inner}>
+                    <PlayArrow {...iconProps} />
+                </span>
+            );
+        }
+    }
+
+    render () {
+        const { className, onClick } = this.props;
+        return (
+            <div className={[
+                styles.component,
+                className
+            ].join(' ')}
+            onClick={onClick}>
+                { this.renderContent() }
+            </div>
+        );
+    }
+}

src/DefaultPlayer/Icon/spin.svg

@@ -0,0 +1,56 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Overlay from './Overlay';
+import styles from './Overlay.css';
+import PlayArrow from './../Icon/play_arrow.svg';
+import Spin from './../Icon/spin.svg';
+import Report from './../Icon/report.svg';
+
+describe('Overlay', () => {
+    let component;
+
+    beforeAll(() => {
+        component = shallow(<Overlay />);
+    });
+
+    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 a PlayArrow icon if paused', () => {
+        component.setProps({
+            paused: true
+        });
+        expect(component.html())
+            .toContain(PlayArrow);
+    });
+
+    it('shows Report icon if error regardless of loading or paused state', () => {
+        component.setProps({
+            error: true,
+            loading: true,
+            paused: true
+        });
+        expect(component.html())
+            .toContain(Report);
+    });
+
+    it('shows Spin icon if loading regardless of paused state', () => {
+        component.setProps({
+            loading: true,
+            paused: true,
+            error: false
+        });
+        expect(component.html())
+            .toContain(Spin);
+    });
+});