Move onProgress logic into Player component

cookpete · Feb 22, 2018 · 42a030e · 42a030e
1 parent b604ded
commit 42a030e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 28 deletions.
diff --git a/src/Player.js b/src/Player.js
@@ -18,8 +18,10 @@ export default class Player extends Component {
   componentDidMount () {
     this.mounted = true
     this.player.load(this.props.url)
+    this.progress()
   }
   componentWillUnmount () {
+    clearTimeout(this.progressTimeout)
     if (this.isReady) {
       this.player.stop()
     }
@@ -65,6 +67,30 @@ export default class Player extends Component {
     if (!this.player) return null
     return this.player[key]
   }
+  progress = () => {
+    if (this.props.url && this.player && this.isReady) {
+      const playedSeconds = this.getCurrentTime() || 0
+      const loadedSeconds = this.getSecondsLoaded()
+      const duration = this.getDuration()
+      if (duration) {
+        const progress = {
+          playedSeconds,
+          played: playedSeconds / duration
+        }
+        if (loadedSeconds !== null) {
+          progress.loadedSeconds = loadedSeconds
+          progress.loaded = loadedSeconds / duration
+        }
+        // Only call onProgress if values have changed
+        if (progress.played !== this.prevPlayed || progress.loaded !== this.prevLoaded) {
+          this.props.onProgress(progress)
+        }
+        this.prevPlayed = progress.played
+        this.prevLoaded = progress.loaded
+      }
+    }
+    this.progressTimeout = setTimeout(this.progress, this.props.progressFrequency)
+  }
   seekTo (amount) {
     // When seeking before player is ready, store value and seek later
     if (!this.isReady && amount !== 0) {

diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
@@ -23,15 +23,11 @@ export default class ReactPlayer extends Component {
   }
   config = getConfig(this.props, defaultProps, true)
   componentDidMount () {
-    this.progress()
     if (this.props.progressFrequency) {
       const message = 'ReactPlayer: %cprogressFrequency%c is deprecated, please use %cprogressInterval%c instead'
       console.warn(message, 'font-weight: bold', '', 'font-weight: bold', '')
     }
   }
-  componentWillUnmount () {
-    clearTimeout(this.progressTimeout)
-  }
   shouldComponentUpdate (nextProps) {
     return !isEqual(this.props, nextProps)
   }
@@ -54,30 +50,6 @@ export default class ReactPlayer extends Component {
     if (!this.player) return null
     this.player.seekTo(fraction)
   }
-  progress = () => {
-    if (this.props.url && this.player && this.player.isReady) {
-      const playedSeconds = this.player.getCurrentTime() || 0
-      const loadedSeconds = this.player.getSecondsLoaded()
-      const duration = this.player.getDuration()
-      if (duration) {
-        const progress = {
-          playedSeconds,
-          played: playedSeconds / duration
-        }
-        if (loadedSeconds !== null) {
-          progress.loadedSeconds = loadedSeconds
-          progress.loaded = loadedSeconds / duration
-        }
-        // Only call onProgress if values have changed
-        if (progress.played !== this.prevPlayed || progress.loaded !== this.prevLoaded) {
-          this.props.onProgress(progress)
-        }
-        this.prevPlayed = progress.played
-        this.prevLoaded = progress.loaded
-      }
-    }
-    this.progressTimeout = setTimeout(this.progress, this.props.progressFrequency || this.props.progressInterval)
-  }
   getActivePlayer (url) {
     for (let Player of players) {
       if (Player.canPlay(url)) {