Move progress logic from players to top level component

* Now we're rendering all players at once, we don't want multiple progress loops going at once
* Renamed `update` to `progress` – makes a bit more sense

Author: cookpete

src/ReactPlayer.js

@@ -4,12 +4,20 @@ import 'array.prototype.find'
 import { propTypes, defaultProps } from './props'
 import players from './players'
 
+const PROGRESS_FREQUENCY = 500
+
 export default class ReactPlayer extends Component {
   static propTypes = propTypes
   static defaultProps = defaultProps
   static canPlay (url) {
     return players.some(player => player.canPlay(url))
   }
+  componentDidMount () {
+    this.progress()
+  }
+  componentWillUnmount () {
+    clearTimeout(this.progressTimeout)
+  }
   shouldComponentUpdate (nextProps) {
     return (
       this.props.url !== nextProps.url ||
@@ -23,6 +31,23 @@ export default class ReactPlayer extends Component {
       player.seekTo(fraction)
     }
   }
+  progress = () => {
+    if (this.props.url && this.refs.player) {
+      let progress = {}
+      const loaded = this.refs.player.getFractionLoaded()
+      const played = this.refs.player.getFractionPlayed()
+      if (!this.prevLoaded || loaded !== this.prevLoaded) {
+        progress.loaded = this.prevLoaded = loaded
+      }
+      if (!this.prevPlayed || played !== this.prevPlayed) {
+        progress.played = this.prevPlayed = played
+      }
+      if (progress.loaded || progress.played) {
+        this.props.onProgress(progress)
+      }
+    }
+    this.progressTimeout = setTimeout(this.progress, PROGRESS_FREQUENCY)
+  }
   renderPlayer = Player => {
     const active = Player.canPlay(this.props.url)
     const { youtubeConfig, soundcloudConfig, vimeoConfig, ...activeProps } = this.props

src/players/Base.js

@@ -2,20 +2,16 @@ import { Component } from 'react'
 
 import { propTypes, defaultProps } from '../props'
 
-const UPDATE_FREQUENCY = 500
-
 export default class Base extends Component {
   static propTypes = propTypes
   static defaultProps = defaultProps
   componentDidMount () {
-    this.update()
     if (this.props.url) {
       this.load(this.props.url)
     }
   }
   componentWillUnmount () {
     this.stop()
-    clearTimeout(this.updateTimeout)
   }
   componentWillReceiveProps (nextProps) {
     // Invoke player methods based on incoming props
@@ -36,21 +32,6 @@ export default class Base extends Component {
   shouldComponentUpdate (nextProps) {
     return this.props.url !== nextProps.url
   }
-  update = () => {
-    let progress = {}
-    const loaded = this.getFractionLoaded()
-    const played = this.getFractionPlayed()
-    if (!this.prevLoaded || loaded !== this.prevLoaded) {
-      progress.loaded = this.prevLoaded = loaded
-    }
-    if (!this.prevPlayed || played !== this.prevPlayed) {
-      progress.played = this.prevPlayed = played
-    }
-    if (progress.loaded || progress.played) {
-      this.props.onProgress(progress)
-    }
-    this.updateTimeout = setTimeout(this.update, UPDATE_FREQUENCY)
-  }
   onReady = () => {
     this.setVolume(this.props.volume)
     if (this.props.playing || this.preloading) {