Source not supported error handling

Author: mderrick

demo/src/components/App.js

@@ -6,7 +6,9 @@ import pkg from './../../../package.json';
 import vttEn from './../../assets/sintel-en.vtt';
 import vttEs from './../../assets/sintel-es.vtt';
 
-const sintelTrailer = 'http://media.w3.org/2010/05/sintel/trailer.mp4';
+const sintelTrailer = 'https://download.blender.org/durian/trailer/sintel_trailer-720p.mp4';
+const bigBuckBunny = 'http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_h264.mov';
+const failingSource = 'https://github.com/mderrick/react-html5video';
 
 const App = () => (
     <div className={styles.component}>
@@ -25,6 +27,21 @@ const App = () => (
                 srcLang="es"
                 src={vttEs} />
         </Video>
+        <Video
+            src={bigBuckBunny}
+            className={styles.video}>
+        </Video>
+        <Video
+            src={failingSource}
+            className={styles.video}>
+        </Video>
+        <Video className={styles.video}>
+            <source src={failingSource} type="video/mp4" />
+            <source src={sintelTrailer} type="video/mp4" />
+        </Video>
+        <Video className={styles.video}>
+            <source src={failingSource} type="video/mp4" />
+        </Video>
     </div>
 );
 

src/DefaultPlayer/DefaultPlayer.css

@@ -2,13 +2,22 @@
     position: relative;
     font-family: Helvetica;
     font-size: 11px;
+    background-color: #000;
 }
 
 .video {
     width: 100%;
     height: 100%;
 }
 
+.error {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
 .controls {
     position: absolute;
     bottom: 0;

src/DefaultPlayer/DefaultPlayer.js

@@ -10,25 +10,30 @@ import styles from './DefaultPlayer.css';
 import PlayPause from './PlayPause/PlayPause';
 import Seek from './Seek/Seek';
 import Volume from './Volume/Volume';
+import ErrorMessage from './ErrorMessage/ErrorMessage';
 
-const DefaultPlayer = (props) => {
-    const {
-        video,
-        style,
-        children,
-        className,
-        setVolume,
-        toggleMute,
-        togglePause,
-        setCurrentTime,
-        ...restProps
-    } = props;
+const DefaultPlayer = ({
+    video,
+    style,
+    children,
+    className,
+    setVolume,
+    toggleMute,
+    togglePause,
+    setCurrentTime,
+    ...restProps
+}) => {
     return (
         <div className={[
             styles.component,
             className
         ].join(' ')}
         style={style}>
+            { video.error
+                ? <ErrorMessage
+                    className={styles.error}
+                    {...video} />
+                : null }
             <video
                 className={styles.video}
                 {...restProps}>
@@ -50,9 +55,18 @@ const DefaultPlayer = (props) => {
     );
 };
 
-export default video(DefaultPlayer, undefined, (videoEl, state) => ({
-    toggleMute: () => toggleMute(videoEl, state),
-    togglePause: () => togglePause(videoEl, state),
-    setVolume: (value) => setVolume(videoEl, state, value),
-    setCurrentTime: (value) => setCurrentTime(videoEl, state, value)
-}));
+export default video(
+    DefaultPlayer,
+    ({  networkState, error, ...restState }) => ({
+        video: {
+            error: error || networkState === 3,
+            ...restState
+        }
+    }),
+    (videoEl, state) => ({
+        toggleMute: () => toggleMute(videoEl, state),
+        togglePause: () => togglePause(videoEl, state),
+        setVolume: (value) => setVolume(videoEl, state, value),
+        setCurrentTime: (value) => setCurrentTime(videoEl, state, value)
+    })
+);

src/DefaultPlayer/ErrorMessage/ErrorMessage.css

@@ -0,0 +1,12 @@
+.component {
+    color: #fff;
+    text-align: center;
+}
+
+.inner {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    transform: translateY(-50%);
+}

src/DefaultPlayer/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './ErrorMessage.css';
+
+export default ({ className }) => (
+    <div className={[
+        styles.component,
+        className
+    ].join(' ')}>
+        <span className={styles.inner}>
+            There has been an error.
+        </span>
+    </div>
+);

src/video/video.js

@@ -55,6 +55,17 @@ export default (
             EVENTS.forEach(event => {
                 this.videoEl[event.toLowerCase()] = this.updateState;
             });
+
+            // If <source> elements are used instead of a src attribute then
+            // errors for unsuppored format do not bubble up to the <video>.
+            // Do this manually by listening to the last <source> error event
+            // to force an update.
+            // https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
+            const sources = this.videoEl.getElementsByTagName('source');
+            if (sources.length) {
+                const lastSource = sources[sources.length - 1];
+                lastSource.addEventListener('error', this.updateState);
+            }
         }
 
         // Stop `this.el` from being null briefly on every render,

src/video/video.test.js

@@ -16,7 +16,9 @@ const TestVideo = ({ video, ...restProps }) => {
     delete restProps.videoEl;
     return (
         <div>
-            <video {...restProps}></video>
+            <video {...restProps}>
+                <source src="1" />
+            </video>
             <TestControl {...video} />
         </div>
     );
@@ -31,41 +33,56 @@ describe('video', () => {
     });
 
     describe('the wrapped component', () => {
-        beforeAll(() => {
+        beforeEach(() => {
             component = mount(
                 <Component autoPlay />
             );
         });
 
-        it('should receive all of the HTMLMediaElement API as props when an event is triggered', () => {
-            const testControl = component.find(TestControl);
-            expect(testControl.props()).toEqual({});
-            component.find('video').node.dispatchEvent(new Event('play'));
-
-            // Only matching a subset is sufficient.
-            expect(testControl.props()).toMatchObject({
-                controller: undefined,
-                autoPlay: undefined,
-                controls: false,
-                currentSrc: '',
-                currentTime: 0,
-                defaultMuted: false,
-                defaultPlaybackRate: 1,
-                duration: 0,
-                ended: false,
-                error: undefined,
-                loop: false,
-                mediaGroup: undefined,
-                muted: false,
-                networkState: 0,
-                paused: true,
-                playbackRate: 1,
-                preload: '',
-                readyState: 0,
-                seeking: false,
-                src: '',
-                startDate: undefined,
-                volume: 1
+        describe('HTMLMediaElement API as props', () => {
+            let testControl;
+            beforeEach(() => {
+                component = mount(
+                    <Component autoPlay />
+                );
+                testControl = component.find(TestControl);
+                expect(testControl.props()).toEqual({});
+            });
+
+            it('should be provided when a video event is triggered', () => {
+                component.find('video').node.dispatchEvent(new Event('play'));
+            });
+
+            it('should be provided when an error occurs on last source element', () => {
+                component.find('source').node.dispatchEvent(new Event('error'));
+            });
+
+            afterEach(() => {
+                // Only matching a subset is sufficient.
+                expect(testControl.props()).toMatchObject({
+                    controller: undefined,
+                    autoPlay: undefined,
+                    controls: false,
+                    currentSrc: '',
+                    currentTime: 0,
+                    defaultMuted: false,
+                    defaultPlaybackRate: 1,
+                    duration: 0,
+                    ended: false,
+                    error: undefined,
+                    loop: false,
+                    mediaGroup: undefined,
+                    muted: false,
+                    networkState: 0,
+                    paused: true,
+                    playbackRate: 1,
+                    preload: '',
+                    readyState: 0,
+                    seeking: false,
+                    src: '',
+                    startDate: undefined,
+                    volume: 1
+                });
             });
         });
     });