From 0f18e712935dfe50dafb4f40b3794e7150c4b476 Mon Sep 17 00:00:00 2001
From: Pete Cook <pete@cookpete.com>
Date: Tue, 4 Oct 2016 18:08:38 +0100
Subject: [PATCH] Tidy up code

Mainly just DRYing things up
---
 src/ReactPlayer.js        | 11 +++----
 src/players/Base.js       | 36 +++++++++++++----------
 src/players/FilePlayer.js | 20 +++++++------
 src/players/SoundCloud.js | 21 ++++++++-----
 src/players/Streamable.js |  6 ++--
 src/players/Vimeo.js      |  8 +++--
 src/players/YouTube.js    | 22 ++++++++------
 src/props.js              | 62 ++++++++++++++++++++-------------------
 8 files changed, 104 insertions(+), 82 deletions(-)

diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
index bc2be841..7dcc996b 100644
--- 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
index e04f7db4..1d03c1fd 100644
--- a/src/players/Base.js
+++ b/src/players/Base.js
@@ -12,9 +12,10 @@ 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 () {
@@ -22,19 +23,20 @@ export default class Base extends Component {
     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
index fe55b3cd..6224cb7a 100644
--- 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
index 908d741e..b8d1716c 100644
--- 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
index 124b8e06..3c5dca37 100644
--- 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
index d756ace4..ad20fe04 100644
--- 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
index e99b0f45..d5bfc19a 100644
--- 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
diff --git a/src/props.js b/src/props.js
index 009e5314..b52a0b3c 100644
--- a/src/props.js
+++ b/src/props.js
@@ -1,40 +1,42 @@
 import { PropTypes } from 'react'
 
+const { string, bool, number, oneOfType, shape, object, func } = PropTypes
+
 export const propTypes = {
-  url: PropTypes.string,
-  playing: PropTypes.bool,
-  loop: PropTypes.bool,
-  controls: PropTypes.bool,
-  volume: PropTypes.number,
-  width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
-  height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
-  hidden: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  progressFrequency: PropTypes.number,
-  soundcloudConfig: PropTypes.shape({
-    clientId: PropTypes.string
+  url: string,
+  playing: bool,
+  loop: bool,
+  controls: bool,
+  volume: number,
+  width: oneOfType([ string, number ]),
+  height: oneOfType([ string, number ]),
+  hidden: bool,
+  className: string,
+  style: object,
+  progressFrequency: number,
+  soundcloudConfig: shape({
+    clientId: string
   }),
-  youtubeConfig: PropTypes.shape({
-    playerVars: PropTypes.object,
-    preload: PropTypes.bool
+  youtubeConfig: shape({
+    playerVars: object,
+    preload: bool
   }),
-  vimeoConfig: PropTypes.shape({
-    iframeParams: PropTypes.object,
-    preload: PropTypes.bool
+  vimeoConfig: shape({
+    iframeParams: object,
+    preload: bool
   }),
-  fileConfig: PropTypes.shape({
-    attributes: PropTypes.object
+  fileConfig: shape({
+    attributes: object
   }),
-  onReady: PropTypes.func,
-  onStart: PropTypes.func,
-  onPlay: PropTypes.func,
-  onPause: PropTypes.func,
-  onBuffer: PropTypes.func,
-  onEnded: PropTypes.func,
-  onError: PropTypes.func,
-  onDuration: PropTypes.func,
-  onProgress: PropTypes.func
+  onReady: func,
+  onStart: func,
+  onPlay: func,
+  onPause: func,
+  onBuffer: func,
+  onEnded: func,
+  onError: func,
+  onDuration: func,
+  onProgress: func
 }
 
 export const defaultProps = {