upgrade version 0.2.0

fix #1

Author: hnsylitao

README.md

@@ -3,7 +3,7 @@
 [![NPM](https://img.shields.io/npm/dt/react-dplayer.svg?style=flat)](https://www.npmjs.com/package/react-dplayer)
 [![LICENSE](https://img.shields.io/badge/license-MIT-green.svg?style=flat)](https://github.com/hnsylitao/react-dplayer/blob/master/LICENSE)
 
-# react-dplayer[Live Demo](http://dplayer.89io.com/)
+# react-dplayer[Live Demo](http://dplayer.89io.com/) (V1.22.2)
 
 **React component for Dplayer** based on [DPlayer](https://github.com/DIYgod/DPlayer).
 
@@ -46,22 +46,9 @@ class Example extends Component {
 	ReactDOM.render(React.createElement(
 	  'div',
 	  { style: { width: 800, margin: '0px auto' } },
-	  React.createElement(ReactDPlayer, { autoplay: false,
-	    loop: false,
-	    screenshot: true,
-	    hotkey: true,
-	    logo: 'https://avatars3.githubusercontent.com/u/17537749?v=4&s=460',
-	    danmaku: {
-	      id: '9E2E3368B56CDBB4',
-	      api: 'https://api.prprpr.me/dplayer/',
-	      token: 'tokendemo',
-	      maximum: 1000,
-	      addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4157142'],
-	      user: 'DIYgod'
-	    },
+	  React.createElement(ReactDPlayer, {
 	    video: {
-	      url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
-	      pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
+	      url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4'
 	    } })
 	), document.getElementById('example'));
 </script>
@@ -76,29 +63,13 @@ The package also includes an in-built example under the `/example` folder. Run t
 
 | Name | Type | Default | Description |
 | ---- | ---- | ------- | ----------- |
-| autoplay | Boolean | false | autoplay video, not supported by mobile browsers |
-| theme | String | #FADFA3 | theme color |
-| loop | Boolean | true | loop play video |
-| lang | String | zh | `zh` for Chinese, `en` for English |
-| screenshot | Boolean | false | enable screenshot function |
-| hotkey | Boolean | true | binding hot key, including left right and Space |
-| preload | String | 'auto' | the way to load video, can be 'none' 'metadata' or 'auto' |
-| logo | String | DPlayer default | player logo, showing in top left corner |
-| volume | Number | DPlayer default | player volume |
-| contextmenu | Array | DPlayer default | custom contextmenu |
-| video| Object | DPlayer default  | video.url -> video link video.pic -> video poster video.type -> video type video.quality -> video quality video.defaultQuality -> video defaultQuality|
-| danmaku| Object | DPlayer default  | video danmaku |
+| allProps | Object | default | [read doc](http://dplayer.js.org/#/zh-Hans/?id=%E5%8F%82%E6%95%B0) |
 
 ## Events
 
 | Name | Params | Description |
 | ---- | ------ | ----------- |
-| onPlay | DPlayer default | Triggered when DPlayer start play |
-| onPause | DPlayer default | Triggered when DPlayer paused |
-| onCanplay | DPlayer default | Triggered when enough data is available that DPlayer can play |
-| onPlaying | DPlayer default | Triggered periodically when DPlayer is playing |
-| onEnded | DPlayer default | Triggered when DPlayer ended playing |
-| onError | DPlayer default | Triggered when an error occurs |
+| allEvent | default | [read doc](http://dplayer.js.org/#/zh-Hans/?id=%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A)  |
 
 ## Development
 

example/example.config.js

@@ -6,6 +6,7 @@ const path = require('path')
   , HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
+  mode: 'development',
   entry: {
     bundle: ["babel-polyfill", path.resolve(srcPath, 'example.js')]
   },

example/example.js

@@ -5,90 +5,88 @@ import DPlayer from "../src";
 
 const Example = reactCreateClass({
 
-  getInitialState(){
+  getInitialState() {
     return {
       canplay: false,
       play: false,
       currentTime: 0,
     };
   },
 
-  seek(){
+  seek() {
     this.dp.seek(10)
   },
 
-  play(){
+  play() {
     this.dp.play()
   },
 
-  pause(){
+  pause() {
     this.dp.pause()
   },
 
-  onLoad(dp){
+  onLoad(dp) {
     this.dp = dp;
     console.log(dp, dp.video);
   },
 
-  onCanplay(){
+  onCanplay() {
     this.setState({
       canplay: true,
     })
   },
 
-  onPlay(){
+  onPlay() {
     this.setState({
       play: true,
     })
   },
 
-  onPause(){
+  onPause() {
     this.setState({
       play: false,
     })
   },
 
-  onEnded(){
+  onEnded() {
     console.log('end')
   },
 
-  onError(){
+  onError() {
     console.log('error')
   },
 
-  onPlaying(){
+  onPlaying() {
     this.setState({
       currentTime: this.dp.video.currentTime,
     })
   },
 
   render() {
     return (
-      <div style={{width: 800,margin:'0px auto'}}>
-        <DPlayer autoplay={false}
-                 loop={false}
-                 screenshot={true}
-                 hotkey={true}
+      <div style={{width: 800, margin: '0px auto'}}>
+        <DPlayer loop={false}
                  logo={'https://avatars3.githubusercontent.com/u/17537749?v=4&s=460'}
+                 video={{
+                   url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4',
+                   pic: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.png',
+                   thumbnails: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara_thumbnails.jpg'
+                 }}
+                 subtitl={{
+                   url: 'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.vtt'
+                 }}
                  danmaku={{
                    id: '9E2E3368B56CDBB4',
-                   api: 'https://api.prprpr.me/dplayer/',
-                   token: 'tokendemo',
-                   maximum: 1000,
-                   addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4157142'],
-                   user: 'DIYgod'
+                   api: 'https://api.prprpr.me/dplayer/'
                  }}
+                 screenshot={true}
                  onLoad={this.onLoad}
                  onPlay={this.onPlay}
                  onCanplay={this.onCanplay}
                  onPause={this.onPause}
                  onEnded={this.onEnded}
                  onError={this.onError}
-                 onPlaying={this.onPlaying}
-                 video={{
-                   url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
-                   pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
-                 }}/>
+                 onPlaying={this.onPlaying}/>
         <button onClick={this.play}>play</button>
         <button onClick={this.pause}>pause</button>
         <button onClick={this.seek}>seek 10</button>
@@ -102,6 +100,6 @@ const Example = reactCreateClass({
 });
 
 ReactDOM.render(
-  <Example />,
+  <Example/>,
   document.getElementById('example')
 );