Fix #109 and support React 16 (#111)

Author: mderrick

demo/package.json

@@ -1,8 +1,8 @@
 {
   "name": "react-html5video-demo",
   "dependencies": {
-    "react": "^15.4.0",
-    "react-dom": "^15.4.0",
+    "react": "^16.0.0-rc.3",
+    "react-dom": "^16.0.0-rc.3",
     "react-html5video": "file:../",
     "reset-css": "^2.2.0"
   }

package.json

@@ -94,7 +94,6 @@
     "react-hot-loader": "^3.0.0-beta.6",
     "react-svg-loader": "^1.1.1",
     "react-test-renderer": "^15.5.4",
-    "recompose": "^0.20.2",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.3",

src/video/video.js

@@ -5,7 +5,6 @@
  */
 import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
-import toClass from 'recompose/toClass';
 import {
     EVENTS,
     PROPERTIES,
@@ -33,10 +32,7 @@ export default (
     mapStateToProps = defaultMapStateToProps,
     mapVideoElToProps = defaultMapVideoElToProps,
     mergeProps = defaultMergeProps
-) => {
-    const BaseComponentClass = toClass(BaseComponent);
-
-    class Video extends Component {
+) => class Video extends Component {
         constructor(props) {
             super(props);
             this.updateState = this.updateState.bind(this);
@@ -121,14 +117,13 @@ export default (
                 this.props
             );
             return (
-                <BaseComponentClass
-                    ref={this.setRef.bind(this)}
-                    {...mergeProps(
-                        stateProps,
-                        videoElProps,
-                        this.props)} />
+                <div ref={this.setRef.bind(this)}>
+                    <BaseComponent
+                        {...mergeProps(
+                            stateProps,
+                            videoElProps,
+                            this.props)} />
+                </div>
             );
         }
     }
-    return Video;
-}

src/video/video.test.js

@@ -133,12 +133,12 @@ describe('video', () => {
         });
 
         it('returns a component with it\'s ownProps', () => {
-            expect(component.prop('autoPlay'))
+            expect(component.find(TestVideo).prop('autoPlay'))
                 .toBe(true);
         });
 
         it('returns a component with a videoEl prop', () => {
-            expect(component.prop('videoEl'))
+            expect(component.find(TestVideo).prop('videoEl'))
                 .toBe(videoEl);
         });
 
@@ -151,7 +151,7 @@ describe('video', () => {
                 }
             };
             component.setState(state);
-            expect(component.prop('video'))
+            expect(component.find(TestVideo).prop('video'))
                 .toEqual(state);
         });
 
@@ -168,9 +168,9 @@ describe('video', () => {
             component.setState({
                 paused: true
             });
-            expect(component.prop('state').paused)
+            expect(component.find(TestVideo).prop('state').paused)
                 .toBe(true);
-            expect(component.prop('ownProps').autoPlay)
+            expect(component.find(TestVideo).prop('ownProps').autoPlay)
                 .toBe(true);
         });
 
@@ -187,7 +187,7 @@ describe('video', () => {
             );
             component.instance().videoEl = videoEl;
             component.instance().forceUpdate();
-            component.prop('togglePlay')();
+            component.find(TestVideo).prop('togglePlay')();
             expect(videoEl.play).toHaveBeenCalledWith('testValue');
         });
 
@@ -200,7 +200,7 @@ describe('video', () => {
             const component = shallow(
                 <Component />
             );
-            expect(component.prop('duplicateKey')).toBe('mapVideoElToProps');
+            expect(component.find(TestVideo).prop('duplicateKey')).toBe('mapVideoElToProps');
         });
 
         it('allows ownProps to take precedence over mapVideoElToProps and mapStateToProps', () => {
@@ -212,7 +212,7 @@ describe('video', () => {
             const component = shallow(
                 <Component duplicateKey="ownProps" />
             );
-            expect(component.prop('duplicateKey')).toBe('ownProps');
+            expect(component.find(TestVideo).prop('duplicateKey')).toBe('ownProps');
         });
 
         it('allows cusomtisation of merging ownProps, mapVideoElToProps and mapStateToProps to change the merging precedence', () => {
@@ -225,7 +225,7 @@ describe('video', () => {
             const component = shallow(
                 <Component duplicateKey="ownProps" />
             );
-            expect(component.prop('duplicateKey')).toBe('mapVideoElToProps');
+            expect(component.find(TestVideo).prop('duplicateKey')).toBe('mapVideoElToProps');
         });
     });
 });