Refactor progress logic

src/ReactPlayer.js

@@ -68,40 +68,33 @@ export default class ReactPlayer extends Component {
   }
   getCurrentTime = () => {
     if (!this.player) return null
-    const duration = this.player.getDuration()
-    const fractionPlayed = this.player.getFractionPlayed()
-    if (duration === null || fractionPlayed === null) {
-      return null
-    }
-    return fractionPlayed * duration
+    return this.player.getCurrentTime()
   }
   getInternalPlayer = () => {
     if (!this.player) return null
     return this.player.player
   }
   progress = () => {
     if (this.props.url && this.player && this.player.isReady) {
-      const loaded = this.player.getFractionLoaded() || 0
-      const played = this.player.getFractionPlayed() || 0
+      const playedSeconds = this.player.getCurrentTime() || 0
+      const loadedSeconds = this.player.getSecondsLoaded()
       const duration = this.player.getDuration()
-      const progress = {}
-      if (loaded !== this.prevLoaded) {
-        progress.loaded = loaded
-        if (duration) {
-          progress.loadedSeconds = progress.loaded * duration
+      if (duration) {
+        const progress = {
+          playedSeconds,
+          played: playedSeconds / duration
         }
-      }
-      if (played !== this.prevPlayed) {
-        progress.played = played
-        if (duration) {
-          progress.playedSeconds = progress.played * 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
       }
-      if (progress.loaded || progress.played) {
-        this.props.onProgress(progress)
-      }
-      this.prevLoaded = loaded
-      this.prevPlayed = played
     }
     this.progressTimeout = setTimeout(this.progress, this.props.progressFrequency)
   }

src/players/DailyMotion.js

@@ -102,13 +102,11 @@ export default class DailyMotion extends Base {
     if (!this.isReady) return null
     return this.player.duration || null
   }
-  getFractionPlayed () {
-    if (!this.getDuration()) return null
-    return this.player.currentTime / this.getDuration()
+  getCurrentTime () {
+    return this.player.currentTime
   }
-  getFractionLoaded () {
-    if (!this.getDuration() || !this.player.bufferedTime) return null
-    return this.player.bufferedTime / this.getDuration()
+  getSecondsLoaded () {
+    return this.player.bufferedTime
   }
   ref = container => {
     this.container = container

src/players/Facebook.js

@@ -68,11 +68,10 @@ export default class Facebook extends Base {
   getDuration () {
     return this.callPlayer('getDuration')
   }
-  getFractionPlayed () {
-    if (!this.getDuration()) return null
-    return this.callPlayer('getCurrentPosition') / this.getDuration()
+  getCurrentTime () {
+    return this.callPlayer('getCurrentPosition')
   }
-  getFractionLoaded () {
+  getSecondsLoaded () {
     return null
   }
   render () {

src/players/FilePlayer.js

@@ -127,12 +127,12 @@ export default class FilePlayer extends Base {
   getDuration () {
     return this.player.duration
   }
-  getFractionPlayed () {
-    return this.player.currentTime / this.getDuration()
+  getCurrentTime () {
+    return this.player.currentTime
   }
-  getFractionLoaded () {
-    if (this.player.buffered.length === 0) return null
-    return this.player.buffered.end(0) / this.getDuration()
+  getSecondsLoaded () {
+    if (this.player.buffered.length === 0) return 0
+    return this.player.buffered.end(0)
   }
   renderSource = source => {
     if (typeof source === 'string') {

src/players/SoundCloud.js

@@ -21,9 +21,8 @@ export default class SoundCloud extends Base {
   static canPlay (url) {
     return MATCH_URL.test(url)
   }
-  player = null
   duration = null
-  fractionPlayed = null
+  currentTime = null
   fractionLoaded = null
   load (url) {
     getSDK(SDK_URL, SDK_GLOBAL).then(SC => {
@@ -41,7 +40,7 @@ export default class SoundCloud extends Base {
           this.props.onPause()
         })
         this.player.bind(PLAY_PROGRESS, e => {
-          this.fractionPlayed = e.relativePosition
+          this.currentTime = e.currentPosition / 1000
           this.fractionLoaded = e.loadedProgress
         })
         this.player.bind(FINISH, () => this.props.onEnded())
@@ -84,11 +83,11 @@ export default class SoundCloud extends Base {
   getDuration () {
     return this.duration
   }
-  getFractionLoaded () {
-    return this.fractionLoaded
+  getCurrentTime () {
+    return this.currentTime
   }
-  getFractionPlayed () {
-    return this.fractionPlayed
+  getSecondsLoaded () {
+    return this.fractionLoaded * this.duration
   }
   ref = iframe => {
     this.iframe = iframe

src/players/Twitch.js

@@ -73,15 +73,10 @@ export default class Twitch extends Base {
   getDuration () {
     return this.callPlayer('getDuration')
   }
-  getFractionPlayed () {
-    const time = this.callPlayer('getCurrentTime')
-    const duration = this.getDuration()
-    if (time && duration) {
-      return time / duration
-    }
-    return null
+  getCurrentTime () {
+    return this.callPlayer('getCurrentTime')
   }
-  getFractionLoaded () {
+  getSecondsLoaded () {
     return null
   }
   render () {

src/players/Vimeo.js

@@ -53,11 +53,11 @@ export default class Vimeo extends Base {
       this.player.on('seeked', e => this.props.onSeek(e.seconds))
       this.player.on('ended', this.props.onEnded)
       this.player.on('error', this.props.onError)
-      this.player.on('timeupdate', ({ percent }) => {
-        this.fractionPlayed = percent
+      this.player.on('timeupdate', ({ seconds }) => {
+        this.currentTime = seconds
       })
-      this.player.on('progress', ({ percent }) => {
-        this.fractionLoaded = percent
+      this.player.on('progress', ({ seconds }) => {
+        this.secondsLoaded = seconds
       })
     }, this.props.onError)
   }
@@ -80,11 +80,11 @@ export default class Vimeo extends Base {
   getDuration () {
     return this.duration
   }
-  getFractionPlayed () {
-    return this.fractionPlayed || null
+  getCurrentTime () {
+    return this.currentTime
   }
-  getFractionLoaded () {
-    return this.fractionLoaded || null
+  getSecondsLoaded () {
+    return this.secondsLoaded
   }
   ref = container => {
     this.container = container

src/players/Wistia.js

@@ -60,11 +60,10 @@ export default class Wistia extends Base {
   getDuration () {
     return this.callPlayer('duration')
   }
-  getFractionPlayed () {
-    if (!this.player.percentWatched) return null
-    return this.callPlayer('time') / this.callPlayer('duration')
+  getCurrentTime () {
+    return this.callPlayer('time')
   }
-  getFractionLoaded () {
+  getSecondsLoaded () {
     return null
   }
   render () {

src/players/YouTube.js

@@ -96,12 +96,11 @@ export default class YouTube extends Base {
   getDuration () {
     return this.callPlayer('getDuration')
   }
-  getFractionPlayed () {
-    if (!this.getDuration()) return null
-    return this.callPlayer('getCurrentTime') / this.getDuration()
+  getCurrentTime () {
+    return this.callPlayer('getCurrentTime')
   }
-  getFractionLoaded () {
-    return this.callPlayer('getVideoLoadedFraction')
+  getSecondsLoaded () {
+    return this.callPlayer('getVideoLoadedFraction') * this.getDuration()
   }
   ref = container => {
     this.container = container