Merge pull request #17 from mderrick/videomethodsapi

Expose React media events

Author: mderrick

README.md

@@ -47,13 +47,17 @@ import { default as Video, Controls, Play, Mute, Seek, Fullscreen, Time, Overlay
 
 ### Simple Usage
 
-Use normal HTML5 `<video>` markup with all the standard [html attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video):
+Use normal HTML5 `<video>` markup with all the standard [html attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) and supported [React media events](https://facebook.github.io/react/docs/events.html#media-events):
 
 ```js
 import Video from 'react-html5video';
 render() {
     return (
-        <Video controls autoPlay loop muted poster="http://sourceposter.jpg">
+        <Video controls autoPlay loop muted
+            poster="http://sourceposter.jpg"
+            onCanPlayThrough={() => {
+                // Do stuff
+            }}>
             <source src="http://sourcefile.webm" type="video/webm" />
         </Video>
     );

demo/src/components/index/main/Main.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import Button from './../../button/button';
 import browserStackLogo from './../../../../browserstack.png';
 import {default as Video, Controls, Overlay} from './../../../../../src/components/video/video';
@@ -72,14 +73,21 @@ var Main = React.createClass({
         this.refs.video.setVolume(this._volumeInput.valueAsNumber);
     },
 
+    onProgress() {
+        var el = ReactDOM.findDOMNode(this.refs.video).getElementsByTagName('video')[0];
+        this.setState({
+            percentageLoaded: el.buffered.length && el.buffered.end(el.buffered.length - 1) / el.duration * 100
+        });
+    },
+
     render() {
         return (
             <div className="main">
                 <h1 className="main__title">
                     <span className="main__react-logo"></span> React HTML5 Video
                 </h1>
                 <div className="main__video">
-                    <Video controls autoPlay loop muted ref="video">
+                    <Video controls autoPlay loop muted ref="video" onProgress={this.onProgress}>
                         <source src={videos[this.state.videoId]} type="video/mp4" />
                         <Overlay />
                         <Controls />
@@ -94,6 +102,8 @@ var Main = React.createClass({
                             <li><Button active={this.state.videoId === 2} onClick={this.showVideo.bind(this, 2)}>3</Button></li>
                             <li><Button active={this.state.videoId === 3} onClick={this.showVideo.bind(this, 3)}>Unsupported Source</Button></li>
                         </ul>
+                        <h2 className="main__h2">Video Loaded</h2>
+                        {this.state.percentageLoaded}%
                     </div>
                     <div className="main__col2">
                         <h2 className="main__h2">Video API</h2>

src/components/video/Video.js

@@ -11,6 +11,32 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 import throttle from 'lodash.throttle';
 import copy from './../../assets/copy';
 
+var EVENTS = [
+    'onAbort',
+    'onCanPlay',
+    'onCanPlayThrough',
+    'onDurationChange',
+    'onEmptied',
+    'onEncrypted',
+    'onEnded',
+    'onError',
+    'onLoadedData',
+    'onLoadedMetadata',
+    'onLoadStart',
+    'onPause',
+    'onPlay',
+    'onPlaying',
+    'onProgress',
+    'onRateChange',
+    'onSeeked',
+    'onSeeking',
+    'onStalled',
+    'onSuspend',
+    'onTimeUpdate',
+    'onVolumeChange',
+    'onWaiting'
+];
+
 var Video = React.createClass({
 
     propTypes: {
@@ -55,6 +81,18 @@ var Video = React.createClass({
         // Also bind 'this' as we call _updateStateFromVideo outside
         // of Reacts synthetic events as well.
         this._updateStateFromVideo = throttle(this.updateStateFromVideo, 100).bind(this);
+        // Set up all React media events and call method
+        // on props if provided.
+        this.mediaEventProps = EVENTS.reduce((p, c) => {
+            p[c] = () => {
+                if (c in this.props && typeof this.props[c] === 'function') {
+                    // A prop exists for this mediaEvent, call it.
+                    this.props[c]();
+                }
+                this._updateStateFromVideo();
+            };
+            return p;
+        }, {});
     },
 
     /**
@@ -314,29 +352,7 @@ var Video = React.createClass({
                     //  We have throttled `_updateStateFromVideo` so listen to
                     //  every available Media event that React allows and
                     //  infer the Video state in that method from the Video properties.
-                    onAbort={this._updateStateFromVideo}
-                    onCanPlay={this._updateStateFromVideo}
-                    onCanPlayThrough={this._updateStateFromVideo}
-                    onDurationChange={this._updateStateFromVideo}
-                    onEmptied={this._updateStateFromVideo}
-                    onEncrypted={this._updateStateFromVideo}
-                    onEnded={this._updateStateFromVideo}
-                    onError={this._updateStateFromVideo}
-                    onLoadedData={this._updateStateFromVideo}
-                    onLoadedMetadata={this._updateStateFromVideo}
-                    onLoadStart={this._updateStateFromVideo}
-                    onPause={this._updateStateFromVideo}
-                    onPlay={this._updateStateFromVideo}
-                    onPlaying={this._updateStateFromVideo}
-                    onProgress={this._updateStateFromVideo}
-                    onRateChange={this._updateStateFromVideo}
-                    onSeeked={this._updateStateFromVideo}
-                    onSeeking={this._updateStateFromVideo}
-                    onStalled={this._updateStateFromVideo}
-                    onSuspend={this._updateStateFromVideo}
-                    onTimeUpdate={this._updateStateFromVideo}
-                    onVolumeChange={this._updateStateFromVideo}
-                    onWaiting={this._updateStateFromVideo}>
+                    {...this.mediaEventProps}>
                         {this.renderSources()}
                 </video>
                 {controls ? this.renderControls() : ''}