Use callPlayer util for player methods

Removes the need for guards in every method, and gives better output for debugging
cookpete · Sep 13, 2017 · c760655 · c760655
1 parent 4a83870
commit c760655
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 91 deletions.
diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
@@ -80,7 +80,7 @@ export default class ReactPlayer extends Component {
     return this.player.player
   }
   progress = () => {
-    if (this.props.url && this.player) {
+    if (this.props.url && this.player && this.player.isReady) {
       const loaded = this.player.getFractionLoaded() || 0
       const played = this.player.getFractionPlayed() || 0
       const duration = this.player.getDuration()

diff --git a/src/players/Base.js b/src/players/Base.js
@@ -52,6 +52,23 @@ export default class Base extends Component {
   shouldComponentUpdate (nextProps) {
     return this.props.url !== nextProps.url
   }
+  callPlayer (method, ...args) {
+    // Util method for calling a method on this.player
+    // but guard against errors and console.warn instead
+    if (!this.isReady || !this.player || !this.player[method]) {
+      let message = `ReactPlayer: ${this.constructor.displayName} player could not call %c${method}%c – `
+      if (!this.isReady) {
+        message += 'The player was not ready'
+      } else if (!this.player) {
+        message += 'The player was not available'
+      } else if (!this.player[method]) {
+        message += 'The method was not available'
+      }
+      console.warn(message, 'font-weight: bold', '')
+      return null
+    }
+    return this.player[method](...args)
+  }
   seekTo (amount) {
     // When seeking before player is ready, store value and seek later
     if (!this.isReady && amount !== 0) {

diff --git a/src/players/DailyMotion.js b/src/players/DailyMotion.js
@@ -83,35 +83,31 @@ export default class DailyMotion extends Base {
     onEnded()
   }
   play () {
-    if (!this.isReady || !this.player.play) return
-    this.player.play()
+    this.callPlayer('play')
   }
   pause () {
-    if (!this.isReady || !this.player.pause) return
-    this.player.pause()
+    this.callPlayer('pause')
   }
   stop () {
     // Nothing to do
   }
   seekTo (amount) {
     const seconds = super.seekTo(amount)
-    if (!this.isReady || !this.player.seek) return
-    this.player.seek(seconds)
+    this.callPlayer('seek', seconds)
   }
   setVolume (fraction) {
-    if (!this.isReady || !this.player.setVolume) return
-    this.player.setVolume(fraction)
+    this.callPlayer('setVolume', fraction)
   }
   getDuration () {
-    if (!this.isReady || !this.player.duration) return null
-    return this.player.duration
+    if (!this.isReady) return null
+    return this.player.duration || null
   }
   getFractionPlayed () {
-    if (!this.isReady || !this.getDuration()) return null
+    if (!this.getDuration()) return null
     return this.player.currentTime / this.getDuration()
   }
   getFractionLoaded () {
-    if (!this.isReady || !this.getDuration() || !this.player.bufferedTime) return null
+    if (!this.getDuration() || !this.player.bufferedTime) return null
     return this.player.bufferedTime / this.getDuration()
   }
   ref = container => {

diff --git a/src/players/Facebook.js b/src/players/Facebook.js
@@ -47,35 +47,30 @@ export default class YouTube extends Base {
     onEnded()
   }
   play () {
-    if (!this.isReady) return
-    this.player.play()
+    this.callPlayer('play')
   }
   pause () {
-    if (!this.isReady) return
-    this.player.pause()
+    this.callPlayer('pause')
   }
   stop () {
     // No need to stop
   }
   seekTo (amount) {
     const seconds = super.seekTo(amount)
-    if (!this.isReady) return
     this.player.seek(seconds)
   }
   setVolume (fraction) {
-    if (!this.isReady) return
     if (fraction !== 0) {
-      this.player.unmute()
+      this.callPlayer('unmute')
     }
     this.player.setVolume(fraction)
   }
   getDuration () {
-    if (!this.isReady) return null
-    return this.player.getDuration()
+    return this.callPlayer('getDuration')
   }
   getFractionPlayed () {
-    if (!this.isReady || !this.getDuration()) return null
-    return this.player.getCurrentPosition() / this.getDuration()
+    if (!this.getDuration()) return null
+    return this.callPlayer('getCurrentPosition') / this.getDuration()
   }
   getFractionLoaded () {
     return null

diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js
@@ -125,15 +125,13 @@ export default class FilePlayer extends Base {
     this.player.playbackRate = rate
   }
   getDuration () {
-    if (!this.isReady) return null
     return this.player.duration
   }
   getFractionPlayed () {
-    if (!this.isReady) return null
     return this.player.currentTime / this.getDuration()
   }
   getFractionLoaded () {
-    if (!this.isReady || this.player.buffered.length === 0) return null
+    if (this.player.buffered.length === 0) return null
     return this.player.buffered.end(0) / this.getDuration()
   }
   renderSource = source => {

diff --git a/src/players/SoundCloud.js b/src/players/SoundCloud.js
@@ -60,30 +60,26 @@ export default class SoundCloud extends Base {
       })
     })
   }
-  call (method, ...args) {
-    if (!this.isReady || !this.player || !this.player[method]) return
-    return this.player[method](...args)
-  }
   play () {
     if (!this.widgetIsPlaying) {
-      this.call('play')
+      this.callPlayer('play')
     }
   }
   pause () {
     if (this.widgetIsPlaying) {
-      this.call('pause')
+      this.callPlayer('pause')
     }
   }
   stop () {
     this.pause()
-    this.call('seekTo', 0)
+    this.callPlayer('seekTo', 0)
   }
   seekTo (amount) {
     const seconds = super.seekTo(amount)
-    this.call('seekTo', seconds * 1000)
+    this.callPlayer('seekTo', seconds * 1000)
   }
   setVolume (fraction) {
-    this.call('setVolume', fraction * 100)
+    this.callPlayer('setVolume', fraction * 100)
   }
   getDuration () {
     return this.duration

diff --git a/src/players/Twitch.js b/src/players/Twitch.js
@@ -54,31 +54,27 @@ export default class YouTube extends Base {
     }
     onEnded()
   }
-  call (method, ...args) {
-    if (!this.isReady || !this.player || !this.player[method]) return
-    return this.player[method](...args)
-  }
   play () {
-    this.call('play')
+    this.callPlayer('play')
   }
   pause () {
-    this.call('pause')
+    this.callPlayer('pause')
   }
   stop () {
-    this.call('pause')
+    this.callPlayer('pause')
   }
   seekTo (amount) {
     const seconds = super.seekTo(amount)
-    this.call('seek', seconds)
+    this.callPlayer('seek', seconds)
   }
   setVolume (fraction) {
-    this.call('setVolume', fraction)
+    this.callPlayer('setVolume', fraction)
   }
   getDuration () {
-    return this.call('getDuration')
+    return this.callPlayer('getDuration')
   }
   getFractionPlayed () {
-    const time = this.call('getCurrentTime')
+    const time = this.callPlayer('getCurrentTime')
     const duration = this.getDuration()
     if (time && duration) {
       return time / duration

diff --git a/src/players/Vimeo.js b/src/players/Vimeo.js
@@ -62,24 +62,20 @@ export default class Vimeo extends Base {
     }, this.props.onError)
   }
   play () {
-    if (!this.isReady) return
-    this.player.play()
+    this.callPlayer('play')
   }
   pause () {
-    if (!this.isReady) return
-    this.player.pause()
+    this.callPlayer('pause')
   }
   stop () {
-    if (!this.isReady) return
-    this.player.unload()
+    this.callPlayer('unload')
   }
   seekTo (amount) {
     const seconds = super.seekTo(amount)
-    if (!this.isReady || !this.player.setCurrentTime) return
-    this.player.setCurrentTime(seconds)
+    this.callPlayer('setCurrentTime', seconds)
   }
   setVolume (fraction) {
-    this.player.setVolume(fraction)
+    this.callPlayer('setVolume', fraction)
   }
   getDuration () {
     return this.duration

diff --git a/src/players/Wistia.js b/src/players/Wistia.js
@@ -39,37 +39,30 @@ export default class Wistia extends Base {
     })
   }
   play () {
-    if (!this.isReady || !this.player) return
-    this.player.play()
+    this.callPlayer('play')
   }
   pause () {
-    if (!this.isReady || !this.player) return
-    this.player && this.player.pause()
+    this.callPlayer('pause')
   }
   stop () {
-    if (!this.isReady || !this.player) return
-    this.player.pause()
+    this.callPlayer('remove')
   }
   seekTo (amount) {
     const seconds = super.seekTo(amount)
-    if (!this.isReady || !this.player) return
-    this.player.time(seconds)
+    this.callPlayer('time', seconds)
   }
   setVolume (fraction) {
-    if (!this.isReady || !this.player || !this.player.volume) return
-    this.player.volume(fraction)
+    this.callPlayer('volume', fraction)
   }
   setPlaybackRate (rate) {
-    if (!this.isReady || !this.player || !this.player.playbackRate) return
-    this.player.playbackRate(rate)
+    this.callPlayer('playbackRate', rate)
   }
   getDuration () {
-    if (!this.isReady || !this.player || !this.player.duration) return
-    return this.player.duration()
+    return this.callPlayer('duration')
   }
   getFractionPlayed () {
-    if (!this.isReady || !this.player || !this.player.percentWatched) return null
-    return this.player.time() / this.player.duration()
+    if (!this.player.percentWatched) return null
+    return this.callPlayer('time') / this.callPlayer('duration')
   }
   getFractionLoaded () {
     return null

diff --git a/src/players/YouTube.js b/src/players/YouTube.js
@@ -74,42 +74,34 @@ export default class YouTube extends Base {
     onEnded()
   }
   play () {
-    if (!this.isReady || !this.player.playVideo) return
-    this.player.playVideo()
+    this.callPlayer('playVideo')
   }
   pause () {
-    if (!this.isReady || !this.player.pauseVideo) return
-    this.player.pauseVideo()
+    this.callPlayer('pauseVideo')
   }
   stop () {
-    if (!this.isReady || !this.player.stopVideo) return
-    if (!document.body.contains(this.player.getIframe())) return
-    this.player.stopVideo()
+    if (!document.body.contains(this.callPlayer('getIframe'))) return
+    this.callPlayer('stopVideo')
   }
   seekTo (amount) {
     const seconds = super.seekTo(amount)
-    if (!this.isReady || !this.player.seekTo) return
-    this.player.seekTo(seconds)
+    this.callPlayer('seekTo', seconds)
   }
   setVolume (fraction) {
-    if (!this.isReady || !this.player.setVolume) return
-    this.player.setVolume(fraction * 100)
+    this.callPlayer('setVolume', fraction * 100)
   }
   setPlaybackRate (rate) {
-    if (!this.isReady || !this.player.setPlaybackRate) return
-    this.player.setPlaybackRate(rate)
+    this.callPlayer('setPlaybackRate', rate)
   }
   getDuration () {
-    if (!this.isReady || !this.player.getDuration) return null
-    return this.player.getDuration()
+    return this.callPlayer('getDuration')
   }
   getFractionPlayed () {
-    if (!this.isReady || !this.getDuration()) return null
-    return this.player.getCurrentTime() / this.getDuration()
+    if (!this.getDuration()) return null
+    return this.callPlayer('getCurrentTime') / this.getDuration()
   }
   getFractionLoaded () {
-    if (!this.isReady || !this.player.getVideoLoadedFraction) return null
-    return this.player.getVideoLoadedFraction()
+    return this.callPlayer('getVideoLoadedFraction')
   }
   ref = container => {
     this.container = container