├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── dist
    └── index.js
├── example
    ├── app.css
    ├── app.js
    └── index.html
├── index.js
├── package.json
├── src
    └── index.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets": ["es2015", "react"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # node-waf configuration
20 | .lock-wscript
21 | 
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 | 
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 | 
29 | example/bundle*
30 | .publish
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2015, eSportsGuy
 2 | 
 3 | Permission to use, copy, modify, and/or distribute this software for any
 4 | purpose with or without fee is hereby granted, provided that the above
 5 | copyright notice and this permission notice appear in all copies.
 6 | 
 7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 8 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 9 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
10 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
11 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
12 | ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
13 | OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
14 | 
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-videojs
 2 | react videojs wrapper
 3 | 
 4 | ### Installtion
 5 | ``` sh
 6 | npm install react-videojs --save
 7 | ```
 8 | 
 9 | ### Demo
10 | http://esportsguy.github.io/react-videojs/
11 | 
12 | ### Usage
13 | 
14 | Video.js should be loaded globally.
15 | 
16 | ``` html
17 | <script src="http://vjs.zencdn.net/5-unsafe/video.js"></script>
18 | ```
19 | 
20 | ``` javascript
21 | <Video
22 |   src="http://www.w3schools.com/html/mov_bbb.mp4"
23 |   type="video/mp4"
24 |   onPlay={this.handlePlay}
25 | />
26 | ```
27 | 
28 | ### License
29 | ISC
30 | 


--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var assign = require('object-assign');
 4 | var cx = require('classnames');
 5 | var blacklist = require('blacklist');
 6 | var React = require('react');
 7 | 
 8 | module.exports = React.createClass({
 9 |   displayName: 'VideoJS',
10 | 
11 |   componentDidMount: function componentDidMount() {
12 |     var self = this;
13 |     var player = videojs(this.refs.video, this.props.options).ready(function () {
14 |       self.player = this;
15 |       self.player.on('play', self.handlePlay);
16 |     });
17 |     if (this.props.onPlayerInit) this.props.onPlayerInit(player);
18 |   },
19 | 
20 | 
21 |   handlePlay: function handlePlay() {
22 |     if (this.props.onPlay) this.props.onPlay(this.player);
23 |   },
24 | 
25 |   render: function render() {
26 |     var props = blacklist(this.props, 'children', 'className', 'src', 'type', 'onPlay', 'onPlayerInit');
27 |     props.className = cx(this.props.className, 'videojs', 'video-js vjs-default-skin');
28 | 
29 |     assign(props, {
30 |       ref: 'video',
31 |       controls: true
32 |     });
33 | 
34 |     return React.createElement(
35 |       'div',
36 |       null,
37 |       React.createElement(
38 |         'video',
39 |         props,
40 |         React.createElement('source', { src: this.props.src, type: this.props.type })
41 |       )
42 |     );
43 |   }
44 | });


--------------------------------------------------------------------------------
/example/app.css:
--------------------------------------------------------------------------------
1 | *, *:before, *:after {
2 |   box-sizing: border-box;
3 | }
4 | 
5 | .app {
6 |   max-width: 400px;
7 |   margin: 0 auto;
8 | }


--------------------------------------------------------------------------------
/example/app.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var ReactDOM = require('react-dom');
 3 | var Video = require('../src/');
 4 | var _package = require('../package.json');
 5 | 
 6 | var App = React.createClass({
 7 |   displayName: 'App',
 8 | 
 9 |   handlePlay(player) {
10 |     console.log('onPlay', player);
11 |   },
12 | 
13 |   render() {
14 |     return (
15 |       <div className="app">
16 |         <h1>{_package.name}</h1>
17 |         <h2>{_package.description}</h2>
18 |         <Video
19 |           src="http://www.w3schools.com/html/mov_bbb.mp4"
20 |           type="video/mp4"
21 |           onPlay={this.handlePlay}
22 |         />
23 |       </div>
24 |     );
25 |   }
26 | });
27 | 
28 | ReactDOM.render(<App/>, document.getElementById('app'));
29 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8"/>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
 6 |     <link href="app.css" rel="stylesheet"/>
 7 |     <link href="http://vjs.zencdn.net/5-unsafe/video-js.css" rel="stylesheet"/>
 8 |     <title>react-videojs</title>
 9 |   </head>
10 |   <body>
11 |     <a href="https://github.com/esportsguy/react-videojs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
12 | 
13 |     <div id="app"></div>
14 |     <script src="http://fb.me/react-0.14.0.js"></script>
15 |     <script src="http://fb.me/react-dom-0.14.0.js"></script>
16 |     <script src="http://vjs.zencdn.net/5-unsafe/video.js"></script>
17 |     <script src="bundle.js"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./dist/index');
2 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-videojs",
 3 |   "version": "0.0.3",
 4 |   "description": "react videojs wrapper",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "webpack-dev-server -c --port=7788",
 8 |     "build": "babel src --out-dir dist && webpack -p",
 9 |     "deploy": "npm run build && github-pages-deploy",
10 |     "test": "echo \"Error: no test specified\" && exit 1"
11 |   },
12 |   "github-pages-deploy": {
13 |     "src": "example"
14 |   },
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "git+https://github.com/esportsguy/react-videojs.git"
18 |   },
19 |   "peerDependencies": {
20 |     "react": "^0.14.0",
21 |     "react-dom": "^0.14.0"
22 |   },
23 |   "keywords": [
24 |     "react-component",
25 |     "videojs",
26 |     "video",
27 |     "react"
28 |   ],
29 |   "author": "Wang Zuo",
30 |   "license": "ISC",
31 |   "bugs": {
32 |     "url": "https://github.com/esportsguy/react-videojs/issues"
33 |   },
34 |   "homepage": "https://github.com/esportsguy/react-videojs#readme",
35 |   "dependencies": {
36 |     "blacklist": "^1.1.2",
37 |     "classnames": "^2.2.0",
38 |     "object-assign": "^4.0.1"
39 |   },
40 |   "devDependencies": {
41 |     "babel-core": "^6.2.1",
42 |     "babel-loader": "^6.2.0",
43 |     "babel-preset-es2015": "^6.1.18",
44 |     "babel-preset-react": "^6.1.18",
45 |     "github-pages-deploy": "0.0.3",
46 |     "json-loader": "^0.5.3",
47 |     "webpack": "^1.12.8"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | var assign = require('object-assign');
 2 | var cx = require('classnames');
 3 | var blacklist = require('blacklist');
 4 | var React = require('react');
 5 | 
 6 | module.exports = React.createClass({
 7 |   displayName: 'VideoJS',
 8 | 
 9 |   componentDidMount() {
10 |     var self = this;
11 |     var player = videojs(this.refs.video, this.props.options).ready(function() {
12 |       self.player = this
13 |       self.player.on('play', self.handlePlay);
14 |     });
15 |     if(this.props.onPlayerInit) this.props.onPlayerInit(player);
16 |   },
17 | 
18 |   handlePlay: function() {
19 |     if(this.props.onPlay) this.props.onPlay(this.player);
20 |   },
21 | 
22 |   render() {
23 |     var props = blacklist(this.props, 'children', 'className', 'src', 'type', 'onPlay', 'onPlayerInit');
24 |     props.className = cx(this.props.className, 'videojs', 'video-js vjs-default-skin');
25 | 
26 |     assign(props, {
27 |       ref: 'video',
28 |       controls: true
29 |     });
30 | 
31 |     return (
32 |       <div>
33 |         <video {... props}>
34 |           <source src={this.props.src} type={this.props.type}/>
35 |         </video>
36 |       </div>
37 |     )
38 |   }
39 | });
40 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   entry: './example/app.js',
 3 |   output: {
 4 |     path: __dirname + '/example',
 5 |     filename: 'bundle.js',
 6 |     publicPath: "/example/",
 7 |   },
 8 |   module: {
 9 |     loaders: [
10 |       {test: /\.js$/, loader: 'babel-loader'},
11 |       {test: /\.json$/, loader: 'json-loader'}
12 |     ]
13 |   },
14 |   externals: {
15 |     'react': 'React',
16 |     'react-dom': 'ReactDOM'
17 |   },
18 |   devtool: "source-map"
19 | };
20 | 


--------------------------------------------------------------------------------