Tidy up code

Mainly just DRYing things up
cookpete · Oct 4, 2016 · 0f18e71 · 0f18e71
1 parent e7cedcb
commit 0f18e71
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 82 deletions.
diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
@@ -93,14 +93,11 @@ export default class ReactPlayer extends Component {
     )
   }
   render () {
-    const style = {
-      ...this.props.style,
-      width: this.props.width,
-      height: this.props.height
-    }
+    const { style, width, height, className, hidden } = this.props
+    const players = this.renderPlayers()
     return (
-      <div style={style} className={this.props.className} hidden={this.props.hidden}>
-        {this.renderPlayers()}
+      <div style={{ ...style, width, height }} className={className} hidden={hidden}>
+        {players}
       </div>
     )
   }

diff --git a/src/players/Base.js b/src/players/Base.js
@@ -12,29 +12,31 @@ export default class Base extends Component {
   durationOnPlay = false
   seekOnPlay = null
   componentDidMount () {
+    const { url } = this.props
     this.mounted = true
-    if (this.props.url) {
-      this.load(this.props.url)
+    if (url) {
+      this.load(url)
     }
   }
   componentWillUnmount () {
     this.stop()
     this.mounted = false
   }
   componentWillReceiveProps (nextProps) {
+    const { url, playing, volume } = this.props
     // Invoke player methods based on incoming props
-    if (this.props.url !== nextProps.url && nextProps.url) {
+    if (url !== nextProps.url && nextProps.url) {
       this.seekOnPlay = null
       this.startOnPlay = true
       this.load(nextProps.url)
-    } else if (this.props.url && !nextProps.url) {
+    } else if (url && !nextProps.url) {
       this.stop()
       clearTimeout(this.updateTimeout)
-    } else if (!this.props.playing && nextProps.playing) {
+    } else if (!playing && nextProps.playing) {
       this.play()
-    } else if (this.props.playing && !nextProps.playing) {
+    } else if (playing && !nextProps.playing) {
       this.pause()
-    } else if (this.props.volume !== nextProps.volume) {
+    } else if (volume !== nextProps.volume) {
       this.setVolume(nextProps.volume)
     }
   }
@@ -45,29 +47,33 @@ export default class Base extends Component {
     // When seeking before player is ready, store value and seek later
     if (!this.isReady && fraction !== 0) {
       this.seekOnPlay = fraction
-      setTimeout(() => { this.seekOnPlay = null }, SEEK_ON_PLAY_EXPIRY)
+      setTimeout(() => {
+        this.seekOnPlay = null
+      }, SEEK_ON_PLAY_EXPIRY)
     }
   }
   onPlay = () => {
+    const { volume, onStart, onPlay, onDuration } = this.props
     if (this.startOnPlay) {
-      this.setVolume(this.props.volume)
-      this.props.onStart()
+      this.setVolume(volume)
+      onStart()
       this.startOnPlay = false
     }
-    this.props.onPlay()
+    onPlay()
     if (this.seekOnPlay) {
       this.seekTo(this.seekOnPlay)
       this.seekOnPlay = null
     }
     if (this.durationOnPlay) {
-      this.props.onDuration(this.getDuration())
+      onDuration(this.getDuration())
       this.durationOnPlay = false
     }
   }
   onReady = () => {
+    const { onReady, playing, onDuration } = this.props
     this.isReady = true
-    this.props.onReady()
-    if (this.props.playing || this.preloading) {
+    onReady()
+    if (playing || this.preloading) {
       this.preloading = false
       if (this.loadOnReady) {
         this.load(this.loadOnReady)
@@ -78,7 +84,7 @@ export default class Base extends Component {
     }
     const duration = this.getDuration()
     if (duration) {
-      this.props.onDuration(duration)
+      onDuration(duration)
     } else {
       this.durationOnPlay = true
     }

diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js
@@ -10,24 +10,26 @@ export default class FilePlayer extends Base {
     return true
   }
   componentDidMount () {
+    const { onPause, onEnded, onError } = this.props
     this.player.addEventListener('canplay', this.onReady)
     this.player.addEventListener('play', this.onPlay)
     this.player.addEventListener('pause', () => {
       if (this.mounted) {
-        this.props.onPause()
+        onPause()
       }
     })
-    this.player.addEventListener('ended', this.props.onEnded)
-    this.player.addEventListener('error', this.props.onError)
+    this.player.addEventListener('ended', onEnded)
+    this.player.addEventListener('error', onError)
     this.player.setAttribute('webkit-playsinline', '')
     super.componentDidMount()
   }
   componentWillUnmount () {
+    const { onPause, onEnded, onError } = this.props
     this.player.removeEventListener('canplay', this.onReady)
     this.player.removeEventListener('play', this.onPlay)
-    this.player.removeEventListener('pause', this.props.onPause)
-    this.player.removeEventListener('ended', this.props.onEnded)
-    this.player.removeEventListener('error', this.props.onError)
+    this.player.removeEventListener('pause', onPause)
+    this.player.removeEventListener('ended', onEnded)
+    this.player.removeEventListener('error', onError)
     super.componentWillUnmount()
   }
   load (url) {
@@ -62,12 +64,12 @@ export default class FilePlayer extends Base {
     return this.player.buffered.end(0) / this.getDuration()
   }
   render () {
-    const { loop, controls, fileConfig } = this.props
-    const Media = AUDIO_EXTENSIONS.test(this.props.url) ? 'audio' : 'video'
+    const { url, loop, controls, fileConfig } = this.props
+    const Media = AUDIO_EXTENSIONS.test(url) ? 'audio' : 'video'
     const style = {
       width: '100%',
       height: '100%',
-      display: this.props.url ? 'block' : 'none'
+      display: url ? 'block' : 'none'
     }
     return (
       <Media

diff --git a/src/players/SoundCloud.js b/src/players/SoundCloud.js
@@ -23,33 +23,35 @@ export default class SoundCloud extends FilePlayer {
     )
   }
   getSongData (url) {
+    const { soundcloudConfig, onError } = this.props
     if (songData[url]) {
       return Promise.resolve(songData[url])
     }
-    return fetchJSONP(RESOLVE_URL + '?url=' + url + '&client_id=' + this.props.soundcloudConfig.clientId)
+    return fetchJSONP(RESOLVE_URL + '?url=' + url + '&client_id=' + soundcloudConfig.clientId)
       .then(response => {
         if (response.ok) {
           songData[url] = response.json()
           return songData[url]
         } else {
-          this.props.onError(new Error('SoundCloud track could not be resolved'))
+          onError(new Error('SoundCloud track could not be resolved'))
         }
       })
   }
   load (url) {
+    const { soundcloudConfig, onError } = this.props
     this.stop()
     this.getSongData(url).then(data => {
       if (!this.mounted) return
       if (!data.streamable) {
-        this.props.onError(new Error('SoundCloud track is not streamable'))
+        onError(new Error('SoundCloud track is not streamable'))
         return
       }
       const image = data.artwork_url || data.user.avatar_url
       if (image) {
         this.setState({ image: image.replace('-large', '-t500x500') })
       }
-      this.player.src = data.stream_url + '?client_id=' + this.props.soundcloudConfig.clientId
-    }, this.props.onError)
+      this.player.src = data.stream_url + '?client_id=' + soundcloudConfig.clientId
+    }, onError)
   }
   render () {
     const { url, loop, controls } = this.props
@@ -63,10 +65,15 @@ export default class SoundCloud extends FilePlayer {
     return (
       <div style={style}>
         <audio
-          ref={player => { this.player = player }}
+          ref={player => {
+            this.player = player
+          }}
           type='audio/mpeg'
           preload='auto'
-          style={{ width: '100%', height: '100%' }}
+          style={{
+            width: '100%',
+            height: '100%'
+          }}
           controls={controls}
           loop={loop}
         />

diff --git a/src/players/Streamable.js b/src/players/Streamable.js
@@ -11,6 +11,7 @@ export default class Streamable extends FilePlayer {
     return MATCH_URL.test(url)
   }
   getData (url) {
+    const { onError } = this.props
     const id = url.match(MATCH_URL)[1]
     if (cache[id]) {
       return Promise.resolve(cache[id])
@@ -21,15 +22,16 @@ export default class Streamable extends FilePlayer {
           cache[id] = response.json()
           return cache[id]
         } else {
-          this.props.onError(new Error('Streamable track could not be resolved'))
+          onError(new Error('Streamable track could not be resolved'))
         }
       })
   }
   load (url) {
+    const { onError } = this.props
     this.stop()
     this.getData(url).then(data => {
       if (!this.mounted) return
       this.player.src = data.files.mp4.url
-    }, this.props.onError)
+    }, onError)
   }
 }
diff --git a/src/players/Vimeo.js b/src/players/Vimeo.js
@@ -23,9 +23,10 @@ export default class Vimeo extends Base {
     return MATCH_URL.test(url)
   }
   componentDidMount () {
+    const { url, vimeoConfig } = this.props
     window.addEventListener('message', this.onMessage, false)
 
-    if (!this.props.url && this.props.vimeoConfig.preload) {
+    if (!url && vimeoConfig.preload) {
       this.preloading = true
       this.load(BLANK_VIDEO_URL)
     }
@@ -91,10 +92,11 @@ export default class Vimeo extends Base {
     }
   }
   onEnded = () => {
-    if (this.props.loop) {
+    const { loop, onEnded } = this.props
+    if (loop) {
       this.seekTo(0)
     }
-    this.props.onEnded()
+    onEnded()
   }
   postMessage = (method, value) => {
     if (!this.origin) return

diff --git a/src/players/YouTube.js b/src/players/YouTube.js
@@ -27,7 +27,8 @@ export default class YouTube extends Base {
   }
   playerId = PLAYER_ID + '-' + playerIdCount++
   componentDidMount () {
-    if (!this.props.url && this.props.youtubeConfig.preload) {
+    const { url, youtubeConfig } = this.props
+    if (!url && youtubeConfig.preload) {
       this.preloading = true
       this.load(BLANK_VIDEO_URL)
     }
@@ -49,6 +50,7 @@ export default class YouTube extends Base {
     })
   }
   load (url) {
+    const { controls, youtubeConfig, onError } = this.props
     const id = url && url.match(MATCH_URL)[1]
     if (this.isReady) {
       this.player.cueVideoById({
@@ -69,8 +71,8 @@ export default class YouTube extends Base {
         videoId: id,
         playerVars: {
           ...DEFAULT_PLAYER_VARS,
-          controls: this.props.controls ? 1 : 0,
-          ...this.props.youtubeConfig.playerVars,
+          controls: controls ? 1 : 0,
+          ...youtubeConfig.playerVars,
           start: parseStartTime(url),
           origin: window.location.origin
         },
@@ -80,24 +82,26 @@ export default class YouTube extends Base {
             this.onReady()
           },
           onStateChange: this.onStateChange,
-          onError: event => this.props.onError(event.data)
+          onError: event => onError(event.data)
         }
       })
-    }, this.props.onError)
+    }, onError)
   }
   onStateChange = ({ data }) => {
+    const { onPause, onBuffer } = this.props
     const { PLAYING, PAUSED, BUFFERING, ENDED, CUED } = window[SDK_GLOBAL].PlayerState
     if (data === PLAYING) this.onPlay()
-    if (data === PAUSED) this.props.onPause()
-    if (data === BUFFERING) this.props.onBuffer()
+    if (data === PAUSED) onPause()
+    if (data === BUFFERING) onBuffer()
     if (data === ENDED) this.onEnded()
     if (data === CUED) this.onReady()
   }
   onEnded = () => {
-    if (this.props.loop) {
+    const { loop, onEnded } = this.props
+    if (loop) {
       this.seekTo(0)
     }
-    this.props.onEnded()
+    onEnded()
   }
   play () {
     if (!this.isReady || !this.player.playVideo) return