Initial HoC

Author: mderrick

README.md

@@ -16,7 +16,8 @@ View the [demo](http://mderrick.github.io/react-html5video/).
 
 ### Peer Dependencies
 
-- `react@>=0.15.x`
+- `react@>=15.0.x`
+- `react-dom@>=15.0.x`
 
 ## Usage
 

package.json

@@ -53,7 +53,8 @@
     "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(js|jsx)$"
   },
   "peerDependencies": {
-    "react": ">=15.0.0"
+    "react": ">=15.0.0",
+    "react-dom": "^15.4.1"
   },
   "devDependencies": {
     "babel": "^6.5.2",
@@ -85,6 +86,7 @@
     "react-addons-test-utils": "^15.4.0",
     "react-dom": "^15.4.0",
     "react-hot-loader": "^3.0.0-beta.6",
+    "recompose": "^0.20.2",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.3",

src/Entry.js

@@ -1,4 +1 @@
-import './assets/video.css';
-import {default as Video, Controls, Seek, Play, Mute, Fullscreen, Time, Overlay} from './components/video/Video';
-export {Controls, Seek, Play, Mute, Fullscreen, Time, Overlay};
-export default Video;
+import { default } from './Video/Video';

src/Video/Video.js

@@ -0,0 +1,132 @@
+/**
+ * This is a HoC that finds a single
+ * <video> in a component and makes
+ * all its PROPERTIES and METHODS
+ * available as props.
+ */
+import React, { Component } from 'react';
+import { findDOMNode } from 'react-dom';
+import toClass from 'recompose/toClass';
+
+const EVENTS = [
+    'onAbort',
+    'onCanPlay',
+    'onCanPlayThrough',
+    'onDurationChange',
+    'onEmptied',
+    'onEncrypted',
+    'onEnded',
+    'onError',
+    'onLoadedData',
+    'onLoadedMetadata',
+    'onLoadStart',
+    'onPause',
+    'onPlay',
+    'onPlaying',
+    'onProgress',
+    'onRateChange',
+    'onSeeked',
+    'onSeeking',
+    'onStalled',
+    'onSuspend',
+    'onTimeUpdate',
+    'onVolumeChange',
+    'onWaiting'
+];
+
+const METHODS = [
+    'addTextTrack',
+    'canPlayType',
+    'load',
+    'play',
+    'pause'
+];
+
+const PROPERTIES = [
+    'audioTracks',
+    'autoPlay',
+    'buffered',
+    'controller',
+    'controls',
+    'currentSrc',
+    'currentTime',
+    'defaultMuted',
+    'defaultPlaybackRate',
+    'duration',
+    'ended',
+    'error',
+    'loop',
+    'mediaGroup',
+    'muted',
+    'networkState',
+    'paused',
+    'playbackRate',
+    'played',
+    'preload',
+    'readyState',
+    'seekable',
+    'seeking',
+    'src',
+    'startDate',
+    'textTracks',
+    'videoTracks',
+    'volume'
+];
+
+export default (BaseComponent) => {
+    const BaseComponentClass = toClass(BaseComponent);
+
+    class Video extends Component {
+        constructor(props) {
+            super(props);
+            this.getVideoEl = this.getVideoEl.bind(this);
+            this.updateState = this.updateState.bind(this);
+        }
+
+        getVideoEl() {
+            return this.videoEl;
+        }
+
+        updateState() {
+            this.setState(
+                PROPERTIES.reduce((p, c) => {
+                    p[c] = this.videoEl[c];
+                    return p;
+                }, {})
+            );
+        }
+
+        componentDidMount() {
+            this.videoEl = this.el.getElementsByTagName('video')[0];
+            EVENTS.forEach(event => {
+                this.videoEl[event.toLowerCase()] = this.updateState.bind(this);
+            });
+            this.methods = METHODS.reduce((p, c) => {
+                p[c] = (...args) => {
+                    if (this.videoEl[c]) this.videoEl[c].apply(this.videoEl, args);
+                };
+                return p;
+            }, {});
+        }
+
+        render() {
+            return (
+                <BaseComponentClass
+                    ref={(el) => this.el = findDOMNode(el)}
+                    video={Object.assign({
+                        // getVideoEl is used to update the video
+                        // using the HTMLMediaElement API.
+                        // e.g getVideoEl().muted = true;
+                        getVideoEl: this.getVideoEl,
+                        // forceUpdateState should never be used
+                        // unless changing a video property that
+                        // does not trigger an EVENT.
+                        // See CaptionMenu component.
+                        forceUpdateState: this.updateState,
+                    }, this.methods, this.state, this.props)}
+                    {...this.props} />
+            );
+        }
+    }
+    return Video;
+}

src/Video/Video.test.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import video from './Video';
+
+const TestComponent = () => (
+    <div>
+        <video></video>
+    </div>
+);
+
+describe('Video', () => {
+    let Component;
+    let component;
+
+    beforeAll(() => {
+        Component = video(TestComponent);
+        component = shallow(
+            <Component />
+        );
+    });
+
+    it('returns a component with `video.forceUpdateState` method', () => {
+        expect(component.prop('video').forceUpdateState)
+            .toBe(component.instance().updateState);
+    });
+
+    it('returns a component with `video.getVideoEl` method', () => {
+        expect(component.prop('video').getVideoEl)
+            .toBe(component.instance().getVideoEl);
+    });
+
+    it('returns a component with all its state on the `video` prop', () => {
+        const state = {
+            html5: '1',
+            dom: 2,
+            properties: function() {
+                return 3;
+            }
+        };
+        component.setState(state);
+        expect(component.prop('video').html5)
+            .toEqual(state.html5);
+        expect(component.prop('video').dom)
+            .toEqual(state.dom);
+        expect(component.prop('video').properties)
+            .toEqual(state.properties);
+    });
+});