Add onDuration prop

Adds a getDuration method to each player, and sends the result of that through onDuration when a player becomes ready
Fixes cookpete/react-player#28

README.md

@@ -48,28 +48,29 @@ open http://localhost:3000
 
 Prop | Description
 ---- | -----------
-url | The url of a video or song to play
-playing | Set to `true` or `false` to pause or play the media
-volume | Sets the volume of the appropriate player
-width | Sets the width of the player
-height | Sets the height of the player
-className | Pass in a `className` to set on the top level element
-onProgress | Callback containing `played` and `loaded` progress as a fraction eg `{ played: 0.12, loaded: 0.34 }`
-onPlay | Called when media starts or resumes playing after pausing or buffering
-onPause | Called when media is paused
-onBuffer | Called when media starts buffering
-onEnded | Called when media finishes playing
-onError | Called when an error occurs whilst attempting to play media
+`url` | The url of a video or song to play
+`playing` | Set to `true` or `false` to pause or play the media
+`volume` | Sets the volume of the appropriate player
+`width` | Sets the width of the player
+`height` | Sets the height of the player
+`className` | Pass in a `className` to set on the top level element
+`onProgress` | Callback containing `played` and `loaded` progress as a fraction eg `{ played: 0.12, loaded: 0.34 }`
+`onDuration` | Callback containing duration of the media, in seconds
+`onPlay` | Called when media starts or resumes playing after pausing or buffering
+`onPause` | Called when media is paused
+`onBuffer` | Called when media starts buffering
+`onEnded` | Called when media finishes playing
+`onError` | Called when an error occurs whilst attempting to play media
 
 #### Config props
 
 These props allow you to override the parameters for the various players
 
 Prop | Description
 ---- | -----------
-soundcloudConfig | Configuration object for the SoundCloud player. Set `clientId`, to your own SoundCloud app [client ID](https://soundcloud.com/you/apps)
-vimeoConfig | Configuration object for the Vimeo player. Set `iframeParams`, to override the [default params](https://developer.vimeo.com/player/embedding#universal-parameters). Set `preload` for [preloading](#preloading)
-youtubeConfig | Configuration object for the YouTube player. Set `playerVars`, to override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5). Set `preload` for [preloading](#preloading)
+`soundcloudConfig` | Configuration object for the SoundCloud player. Set `clientId`, to your own SoundCloud app [client ID](https://soundcloud.com/you/apps)
+`vimeoConfig` | Configuration object for the Vimeo player. Set `iframeParams`, to override the [default params](https://developer.vimeo.com/player/embedding#universal-parameters). Set `preload` for [preloading](#preloading)
+`youtubeConfig` | Configuration object for the YouTube player. Set `playerVars`, to override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5). Set `preload` for [preloading](#preloading)
 
 ##### Preloading
 

src/demo/App.js

@@ -85,6 +85,7 @@ export default class App extends Component {
             onBuffer={() => console.log('onBuffer')}
             onEnded={() => this.setState({ playing: false })}
             onProgress={this.onProgress}
+            onDuration={duration => this.setState({ duration })}
           />
 
           <table><tbody>
@@ -193,6 +194,10 @@ export default class App extends Component {
               <th>loaded</th>
               <td>{ this.state.loaded.toFixed(3) }</td>
             </tr>
+            <tr>
+              <th>duration</th>
+              <td>{ this.state.duration }</td>
+            </tr>
           </tbody></table>
         </section>
       </div>

src/players/Base.js

@@ -61,5 +61,6 @@ export default class Base extends Component {
         this.play()
       }
     }
+    this.props.onDuration(this.getDuration())
   };
 }

src/players/FilePlayer.js

@@ -33,18 +33,22 @@ export default class FilePlayer extends Base {
   }
   seekTo (fraction) {
     super.seekTo(fraction)
-    this.player.currentTime = this.player.duration * fraction
+    this.player.currentTime = this.getDuration() * fraction
   }
   setVolume (fraction) {
     this.player.volume = fraction
   }
+  getDuration () {
+    if (!this.isReady) return null
+    return this.player.duration
+  }
   getFractionPlayed () {
     if (!this.isReady) return null
-    return this.player.currentTime / this.player.duration
+    return this.player.currentTime / this.getDuration()
   }
   getFractionLoaded () {
     if (!this.isReady || this.player.buffered.length === 0) return null
-    return this.player.buffered.end(0) / this.player.duration
+    return this.player.buffered.end(0) / this.getDuration()
   }
   render () {
     const Media = AUDIO_EXTENSIONS.test(this.props.url) ? 'audio' : 'video'

src/players/SoundCloud.js

@@ -80,19 +80,24 @@ export default class SoundCloud extends Base {
   seekTo (fraction) {
     super.seekTo(fraction)
     if (!this.isReady) return
-    this.player.seek(this.player.getDuration() * fraction)
+    this.player.seek(this.getDuration(true) * fraction)
   }
   setVolume (fraction) {
     if (!this.isReady) return
     this.player.setVolume(fraction)
   }
+  getDuration (ms) {
+    if (!this.isReady) return null
+    if (ms) return this.player.getDuration()
+    return this.player.getDuration() / 1000
+  }
   getFractionPlayed () {
     if (!this.isReady) return null
-    return this.player.getCurrentPosition() / this.player.getDuration()
+    return this.player.getCurrentPosition() / this.getDuration(true)
   }
   getFractionLoaded () {
     if (!this.isReady) return null
-    return this.player.getLoadedPosition() / this.player.getDuration()
+    return this.player.getLoadedPosition() / this.getDuration(true)
   }
   render () {
     const style = {

src/players/Vimeo.js

@@ -56,6 +56,9 @@ export default class Vimeo extends Base {
   setVolume (fraction) {
     this.postMessage('setVolume', fraction)
   }
+  getDuration () {
+    return this.duration
+  }
   getFractionPlayed () {
     return this.fractionPlayed || null
   }

src/players/YouTube.js

@@ -103,15 +103,19 @@ export default class YouTube extends Base {
   seekTo (fraction) {
     super.seekTo(fraction)
     if (!this.isReady || !this.player.seekTo) return
-    this.player.seekTo(this.player.getDuration() * fraction)
+    this.player.seekTo(this.getDuration() * fraction)
   }
   setVolume (fraction) {
     if (!this.isReady || !this.player.setVolume) return
     this.player.setVolume(fraction * 100)
   }
+  getDuration () {
+    if (!this.isReady || !this.player.getDuration) return null
+    return this.player.getDuration()
+  }
   getFractionPlayed () {
     if (!this.isReady || !this.player.getCurrentTime) return null
-    return this.player.getCurrentTime() / this.player.getDuration()
+    return this.player.getCurrentTime() / this.getDuration()
   }
   getFractionLoaded () {
     if (!this.isReady || !this.player.getVideoLoadedFraction) return null

src/props.js

@@ -21,6 +21,7 @@ export const propTypes = {
   onBuffer: PropTypes.func,
   onEnded: PropTypes.func,
   onError: PropTypes.func,
+  onDuration: PropTypes.func,
   onProgress: PropTypes.func
 }
 
@@ -45,5 +46,6 @@ export const defaultProps = {
   onBuffer: function () {},
   onEnded: function () {},
   onError: function () {},
+  onDuration: function () {},
   onProgress: function () {}
 }

test/karma/ReactPlayer.js

@@ -35,6 +35,13 @@ describe('ReactPlayer', () => {
     testPlay(url, onPlay)
   }
 
+  const testDuration = (url, done) => {
+    const onDuration = duration => {
+      if (duration && duration > 0) done()
+    }
+    render(<ReactPlayer url={url} playing onDuration={onDuration} />, div)
+  }
+
   it('plays a YouTube video', done => testPlay(TEST_YOUTUBE_URL, done))
   it('plays a SoundCloud track', done => testPlay(TEST_SOUNDCLOUD_URL, done))
   it('plays a Vimeo video', done => testPlay(TEST_VIMEO_URL, done))
@@ -45,6 +52,11 @@ describe('ReactPlayer', () => {
   it('pauses a Vimeo video', done => testPause(TEST_VIMEO_URL, done))
   it('pauses a file', done => testPause(TEST_FILE_URL, done))
 
+  it('gets duration for YouTube video', done => testDuration(TEST_YOUTUBE_URL, done))
+  it('gets duration for SoundCloud track', done => testDuration(TEST_SOUNDCLOUD_URL, done))
+  it('gets duration for Vimeo video', done => testDuration(TEST_VIMEO_URL, done))
+  it('gets duration for file', done => testDuration(TEST_FILE_URL, done))
+
   it('switches between media', function (done) {
     const renderPlayer = (url, onPlay) => render(<ReactPlayer url={url} playing onPlay={onPlay} />, div)
     const renderFilePlayer = () => renderPlayer(TEST_FILE_URL, done)