#24 Remove pure-render-mixin and use React 15 in demo

Author: mderrick

README.md

@@ -18,9 +18,7 @@ Include `dist/ReactHtml5Video.css` if you do not want to build your own CSS. Alt
 ### Peer Dependencies
 
 This component uses ES2015 and needs to be transpiled using something like [babel-loader](https://github.com/babel/babel-loader). You will also need to either [polyfill](https://babeljs.io/docs/usage/polyfill/) or use [babel-runtime](https://www.npmjs.com/package/babel-runtime). It depends on:
-- `[email protected]`
-- `[email protected]`
-- `[email protected]`
+- `react@>=0.14.x`
 - `lodash.throttle@latest`.
 
 ### UMD

demo/package.json

@@ -12,9 +12,8 @@
   "dependencies": {
     "css-reset": "git+https://github.com/60frames/css-reset.git",
     "lodash.throttle": "^3.0.4",
-    "react": "^0.14.0",
-    "react-addons-pure-render-mixin": "^0.14.0",
-    "react-dom": "^0.14.0"
+    "react": "^15.0.0",
+    "react-dom": "^15.0.0"
   },
   "devDependencies": {
     "babel-core": "^5.8.25",

package.json

@@ -21,8 +21,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "lodash.throttle": "^3.0.4",
-    "react-addons-pure-render-mixin": "^0.14.0"
+    "lodash.throttle": "^3.0.4"
   },
   "devDependencies": {
     "babel-core": "^5.8.25",
@@ -45,8 +44,7 @@
     "react-dom": "^0.14.0"
   },
   "peerDependencies": {
-    "react": ">=0.14.0",
-    "react-dom": ">=0.14.0"
+    "react": ">=0.14.0"
   },
   "keywords": [
     "react-component",

src/components/controls/seek/Seek.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import ProgressBar from './../../progressbar/progressbar';
 
 var Seek = React.createClass({
@@ -22,6 +21,19 @@ var Seek = React.createClass({
         };
     },
 
+    /**
+     * As controls receive all props for extensibility, we do a quick
+     * check and make sure only the props we care about have changed.
+     * @param  {object} nextProps The next props from parent
+     * @return {boolean}          Whether we re-render or not
+     */
+    shouldComponentUpdate(nextProps) {
+        return this.props.seek !== nextProps.seek ||
+               this.props.percentageBuffered !== nextProps.percentageBuffered ||
+               this.props.percentagePlayed !== nextProps.percentagePlayed ||
+               this.props.duration !== nextProps.duration;
+    },
+
     /**
      * Calculates the seek time based on change of input.
      * @param  {object} e Event object

src/components/controls/time/Time.js

@@ -8,6 +8,17 @@ var Time = React.createClass({
         duration: React.PropTypes.number
     },
 
+    /**
+     * As controls receive all props for extensibility, we do a quick
+     * check and make sure only the props we care about have changed.
+     * @param  {object} nextProps The next props from parent
+     * @return {boolean}          Whether we re-render or not
+     */
+    shouldComponentUpdate(nextProps) {
+        return this.props.currentTime !== nextProps.currentTime ||
+               this.props.duration !== nextProps.duration;
+    },
+
     /**
      * Formats time into a friendlier format
      * @param  {number} seconds Time in seconds

src/components/video/Video.js

@@ -1,13 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import Overlay from './overlay/overlay';
 import Controls from './../controls/controls';
 import Seek from './../controls/seek/seek';
 import Play from './../controls/play/play';
 import Mute from './../controls/mute/mute';
 import Fullscreen from './../controls/fullscreen/fullscreen';
 import Time from './../controls/time/time';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
 import throttle from 'lodash.throttle';
 import copy from './../../assets/copy';
 
@@ -50,8 +48,6 @@ var Video = React.createClass({
         controls: React.PropTypes.bool
     },
 
-    mixins: [PureRenderMixin],
-
     getDefaultProps() {
         return {
             copyKeys: copy

webpack.config.js

@@ -15,14 +15,7 @@ module.exports = {
             commonjs2: 'react',
             commonjs: 'react',
             amd: 'react'
-        },
-        'react-dom': {
-            root: 'ReactDOM',
-            commonjs2: 'react-dom',
-            commonjs: 'react-dom',
-            amd: 'react-dom'
-        },
-        'react-addons-pure-render-mixin': 'react-addons-pure-render-mixin'
+        }
     }],
     output: {
         path: './dist',