mapStateToProps, mapVideoElToProps and mergeProps

Author: mderrick

package.json

@@ -11,7 +11,7 @@
     "preinstall:demo": "npm run build",
     "install:demo": "cd demo && npm i",
     "i:demo": "npm run install:demo",
-    "test": "jest",
+    "test": "jest --env=jsdom",
     "test:watch": "npm run test -- --watch",
     "build": "webpack",
     "build:demo": "cd demo && webpack",
@@ -59,7 +59,7 @@
   "devDependencies": {
     "babel": "^6.5.2",
     "babel-core": "^6.18.2",
-    "babel-jest": "^17.0.2",
+    "babel-jest": "^18.0.0",
     "babel-loader": "^6.2.7",
     "babel-plugin-transform-object-rest-spread": "^6.19.0",
     "babel-preset-es2015": "^6.18.0",
@@ -77,7 +77,7 @@
     "gh-pages": "^0.12.0",
     "html-webpack-plugin": "^2.24.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^17.0.3",
+    "jest": "^18.0.0",
     "json-loader": "^0.5.4",
     "lodash.throttle": "^4.1.1",
     "open": "0.0.5",

src/DefaultPlayer/DefaultPlayer.js

@@ -1,5 +1,11 @@
 import React from 'react';
-import video from './../Video/Video';
+import video from './../video/video';
+import {
+    setVolume,
+    toggleMute,
+    togglePause,
+    setCurrentTime
+} from './../video/api';
 import styles from './DefaultPlayer.css';
 import PlayPause from './PlayPause/PlayPause';
 import Seek from './Seek/Seek';
@@ -8,27 +14,45 @@ import Volume from './Volume/Volume';
 const DefaultPlayer = (props) => {
     const {
         video,
+        style,
         children,
         className,
+        setVolume,
+        toggleMute,
+        togglePause,
+        setCurrentTime,
         ...restProps
     } = props;
     return (
         <div className={[
             styles.component,
             className
-        ].join(' ')}>
+        ].join(' ')}
+        style={style}>
             <video
                 className={styles.video}
                 {...restProps}>
                 { children }
             </video>
             <div className={styles.controls}>
-                <PlayPause {...video} />
-                <Seek {...video} />
-                <Volume {...video} />
+                <PlayPause
+                    togglePause={togglePause}
+                    {...video} />
+                <Seek
+                    setCurrentTime={setCurrentTime}
+                    {...video} />
+                <Volume
+                    setVolume={setVolume}
+                    toggleMute={toggleMute}
+                    {...video} />
             </div>
         </div>
     );
 };
 
-export default video(DefaultPlayer);
+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)
+}));

src/DefaultPlayer/PlayPause/PlayPause.js

@@ -1,21 +1,14 @@
 import React from 'react';
 import styles from './PlayPause.css';
 
-export default ({ pause, play, paused, className }) => {
-    const toggle = () => {
-        if (paused) {
-            play();
-        } else {
-            pause();
-        }
-    };
+export default ({ togglePause, paused, className }) => {
     return (
         <div className={[
             styles.component,
             className
         ].join(' ')}>
             <button
-                onClick={toggle}
+                onClick={togglePause}
                 type="button">
                 { paused
                     ? 'Play'

src/DefaultPlayer/Seek/Seek.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import styles from './Seek.css';
 
-export default ({ getVideoEl, duration, currentTime, className }) => {
+export default ({ setCurrentTime, duration, currentTime, className }) => {
     const change = (e) => {
-        getVideoEl().currentTime = e.target.value * duration / 100;
+        setCurrentTime(e.target.value * duration / 100);
     };
     return (
         <div className={[
@@ -17,7 +17,7 @@ export default ({ getVideoEl, duration, currentTime, className }) => {
                 type="range"
                 orient="horizontal"
                 onChange={change}
-                value={currentTime / duration * 100}  />
+                value={currentTime / duration * 100} />
         </div>
     );
 };

src/DefaultPlayer/Volume/Volume.js

@@ -1,24 +1,10 @@
 import React from 'react';
 import styles from './Volume.css';
 
-export default ({ getVideoEl, volume, muted, className }) => {
-    const setVolume = (v) => {
-        getVideoEl().volume = v;
-    };
+export default ({ setVolume, toggleMute, volume, muted, className }) => {
     const change = (e) => {
-        getVideoEl().muted = false;
         setVolume(e.target.value);
     };
-    const toggleMute = () => {
-        if (muted || volume <= 0) {
-            if (volume <= 0) {
-                setVolume(1);
-            }
-            getVideoEl().muted = false;
-        } else {
-            getVideoEl().muted = true;
-        }
-    };
     return (
         <div className={[
             styles.component,

src/Entry.js

@@ -1,2 +1,2 @@
-export { default } from './Video/Video';
+export { default } from './video/video';
 export { default as DefaultPlayer } from './DefaultPlayer/DefaultPlayer';

src/Video/Video.js

@@ -1,130 +1,90 @@
 /**
  * This is a HoC that finds a single
  * <video> in a component and makes
- * all its PROPERTIES and METHODS
- * available as props.
+ * all its PROPERTIES available as props.
  */
 import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
 import toClass from 'recompose/toClass';
+import {
+    EVENTS,
+    PROPERTIES,
+} from './constants';
 
-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 defaultMapStateToProps = (state = {}) => Object.assign({
+    video: {
+        ...state
+    }
+});
 
-const METHODS = [
-    'addTextTrack',
-    'canPlayType',
-    'load',
-    'play',
-    'pause'
-];
+const defaultMapVideoElToProps = (videoEl) => ({
+    videoEl
+});
 
-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'
-];
+const defaultMergeProps = (
+    stateProps = {},
+    videoElProps = {},
+    ownProps = {}
+) => Object.assign({}, stateProps, videoElProps, ownProps);
 
-export default (BaseComponent) => {
+export default (
+    BaseComponent,
+    mapStateToProps = defaultMapStateToProps,
+    mapVideoElToProps = defaultMapVideoElToProps,
+    mergeProps = defaultMergeProps
+) => {
     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;
+            this.state = {};
         }
 
         updateState() {
             this.setState(
                 PROPERTIES.reduce((p, c) => {
-                    p[c] = this.videoEl[c];
+                    p[c] = this.videoEl && this.videoEl[c];
                     return p;
                 }, {})
             );
         }
 
-        componentDidMount() {
-            this.videoEl = this.el.getElementsByTagName('video')[0];
+        bindEventsToUpdateState() {
             EVENTS.forEach(event => {
-                this.videoEl[event.toLowerCase()] = this.updateState.bind(this);
+                this.videoEl[event.toLowerCase()] = this.updateState;
             });
-            this.methods = METHODS.reduce((p, c) => {
-                p[c] = (...args) => {
-                    if (this.videoEl[c]) this.videoEl[c].apply(this.videoEl, args);
-                };
-                return p;
-            }, {});
+        }
+
+        // Stop `this.el` from being null briefly on every render,
+        // see: https://github.com/mderrick/react-html5video/pull/65
+        setRef(el) {
+            this.el = findDOMNode(el);
+        }
+
+        componentDidMount() {
+            this.videoEl = this.el.getElementsByTagName('video')[0];
+            this.bindEventsToUpdateState();
         }
 
         render() {
+            const stateProps = mapStateToProps(
+                this.state,
+                this.props
+            );
+            const videoElProps = mapVideoElToProps(
+                this.videoEl,
+                this.state,
+                this.props
+            );
             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} />
+                    ref={this.setRef.bind(this)}
+                    {...mergeProps(
+                        stateProps,
+                        videoElProps,
+                        this.props)} />
             );
         }
     }