From ae0f230dbe36cb95c3fe39e22687d69599185ad5 Mon Sep 17 00:00:00 2001
From: Pete Cook <pete@cookpete.com>
Date: Sat, 17 Aug 2019 20:10:20 +0100
Subject: [PATCH] Lint fixes

---
 package.json                        |   1 +
 src/Player.js                       |  49 ++-
 src/Preview.js                      |   5 +
 src/ReactPlayer.js                  |  37 ++-
 src/demo/App.js                     | 492 +++++++++++++++-------------
 src/players/DailyMotion.js          |  13 +
 src/players/Facebook.js             |  11 +
 src/players/FilePlayer.js           |  37 ++-
 src/players/Mixcloud.js             |  12 +
 src/players/SoundCloud.js           |  12 +
 src/players/Streamable.js           |  13 +
 src/players/Twitch.js               |  11 +
 src/players/Vimeo.js                |  15 +
 src/players/Wistia.js               |  14 +
 src/players/YouTube.js              |  15 +
 src/preload.js                      |   2 +-
 src/props.js                        |   8 +-
 src/singlePlayer.js                 |   8 +
 src/utils.js                        |   6 +-
 test/Player.js                      |  38 +--
 test/ReactPlayer/instanceMethods.js |   2 +-
 test/ReactPlayer/render.js          |   2 +-
 test/players/FilePlayer.js          |  55 ++--
 test/players/Streamable.js          |   2 +
 test/players/Twitch.js              |   1 +
 test/players/YouTube.js             |   1 +
 26 files changed, 554 insertions(+), 308 deletions(-)

diff --git a/package.json b/package.json
index 0ea88d42..879c8abe 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "clean": "rimraf lib demo coverage",
     "start": "webpack-dev-server --config webpack/config.babel.js",
     "lint": "standard --verbose | snazzy",
+    "lint:fix": "standard --fix",
     "test": "cross-env NODE_ENV=test ava",
     "test:coverage": "cross-env NODE_ENV=test nyc ava",
     "test:codecov": "nyc report --reporter=json && codecov -f coverage/coverage-final.json",
diff --git a/src/Player.js b/src/Player.js
index f1ddc41a..fbcdab48 100644
--- a/src/Player.js
+++ b/src/Player.js
@@ -22,6 +22,7 @@ export default class Player extends Component {
     this.player.load(this.props.url)
     this.progress()
   }
+
   componentWillUnmount () {
     clearTimeout(this.progressTimeout)
     clearTimeout(this.durationCheckTimeout)
@@ -33,6 +34,7 @@ export default class Player extends Component {
     }
     this.mounted = false
   }
+
   componentWillReceiveProps (nextProps) {
     // Invoke player methods based on incoming props
     const { url, playing, volume, muted, playbackRate, pip, loop, activePlayer } = this.props
@@ -79,22 +81,27 @@ export default class Player extends Component {
       this.player.setLoop(nextProps.loop)
     }
   }
+
   getDuration () {
     if (!this.isReady) return null
     return this.player.getDuration()
   }
+
   getCurrentTime () {
     if (!this.isReady) return null
     return this.player.getCurrentTime()
   }
+
   getSecondsLoaded () {
     if (!this.isReady) return null
     return this.player.getSecondsLoaded()
   }
+
   getInternalPlayer = (key) => {
     if (!this.player) return null
     return this.player[key]
   }
+
   progress = () => {
     if (this.props.url && this.player && this.isReady) {
       const playedSeconds = this.getCurrentTime() || 0
@@ -119,6 +126,7 @@ export default class Player extends Component {
     }
     this.progressTimeout = setTimeout(this.progress, this.props.progressFrequency || this.props.progressInterval)
   }
+
   seekTo (amount, type) {
     // When seeking before player is ready, store value and seek later
     if (!this.isReady && amount !== 0) {
@@ -139,7 +147,8 @@ export default class Player extends Component {
     }
     this.player.seekTo(amount)
   }
-  onReady = () => {
+
+  handleReady = () => {
     if (!this.mounted) return
     this.isReady = true
     this.isLoading = false
@@ -154,9 +163,10 @@ export default class Player extends Component {
     } else if (playing) {
       this.player.play()
     }
-    this.onDurationCheck()
+    this.handleDurationCheck()
   }
-  onPlay = () => {
+
+  handlePlay = () => {
     this.isPlaying = true
     this.isLoading = false
     const { onStart, onPlay, playbackRate } = this.props
@@ -172,15 +182,17 @@ export default class Player extends Component {
       this.seekTo(this.seekOnPlay)
       this.seekOnPlay = null
     }
-    this.onDurationCheck()
+    this.handleDurationCheck()
   }
-  onPause = (e) => {
+
+  handlePause = (e) => {
     this.isPlaying = false
     if (!this.isLoading) {
       this.props.onPause(e)
     }
   }
-  onEnded = () => {
+
+  handleEnded = () => {
     const { activePlayer, loop, onEnded } = this.props
     if (activePlayer.loopOnEnded && loop) {
       this.seekTo(0)
@@ -190,11 +202,13 @@ export default class Player extends Component {
       onEnded()
     }
   }
-  onError = (...args) => {
+
+  handleError = (...args) => {
     this.isLoading = false
     this.props.onError(...args)
   }
-  onDurationCheck = () => {
+
+  handleDurationCheck = () => {
     clearTimeout(this.durationCheckTimeout)
     const duration = this.getDuration()
     if (duration) {
@@ -203,19 +217,22 @@ export default class Player extends Component {
         this.onDurationCalled = true
       }
     } else {
-      this.durationCheckTimeout = setTimeout(this.onDurationCheck, 100)
+      this.durationCheckTimeout = setTimeout(this.handleDurationCheck, 100)
     }
   }
-  onLoaded = () => {
+
+  handleLoaded = () => {
     // Sometimes we know loading has stopped but onReady/onPlay are never called
     // so this provides a way for players to avoid getting stuck
     this.isLoading = false
   }
+
   ref = player => {
     if (player) {
       this.player = player
     }
   }
+
   render () {
     const Player = this.props.activePlayer
     if (!Player) {
@@ -225,12 +242,12 @@ export default class Player extends Component {
       <Player
         {...this.props}
         ref={this.ref}
-        onReady={this.onReady}
-        onPlay={this.onPlay}
-        onPause={this.onPause}
-        onEnded={this.onEnded}
-        onLoaded={this.onLoaded}
-        onError={this.onError}
+        onReady={this.handleReady}
+        onPlay={this.handlePlay}
+        onPause={this.handlePause}
+        onEnded={this.handleEnded}
+        onLoaded={this.handleLoaded}
+        onError={this.handleError}
       />
     )
   }
diff --git a/src/Preview.js b/src/Preview.js
index fa398f7c..a2477970 100644
--- a/src/Preview.js
+++ b/src/Preview.js
@@ -7,19 +7,23 @@ export default class Preview extends Component {
   state = {
     image: null
   }
+
   componentDidMount () {
     this.mounted = true
     this.fetchImage(this.props)
   }
+
   componentWillReceiveProps (nextProps) {
     const { url, light } = this.props
     if (url !== nextProps.url || light !== nextProps.light) {
       this.fetchImage(nextProps)
     }
   }
+
   componentWillUnmount () {
     this.mounted = false
   }
+
   fetchImage ({ url, light }) {
     if (typeof light === 'string') {
       this.setState({ image: light })
@@ -35,6 +39,7 @@ export default class Preview extends Component {
         }
       })
   }
+
   render () {
     const { onClick } = this.props
     const { image } = this.state
diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
index cddf8cd2..cd116c0c 100644
--- a/src/ReactPlayer.js
+++ b/src/ReactPlayer.js
@@ -16,41 +16,48 @@ export default class ReactPlayer extends Component {
   static addCustomPlayer = player => {
     customPlayers.push(player)
   }
+
   static removeCustomPlayers = () => {
     customPlayers = []
   }
+
   static displayName = 'ReactPlayer'
   static propTypes = propTypes
   static defaultProps = defaultProps
   static canPlay = url => {
-    for (let Player of [ ...customPlayers, ...players ]) {
+    for (const Player of [...customPlayers, ...players]) {
       if (Player.canPlay(url)) {
         return true
       }
     }
     return false
   }
+
   static canEnablePIP = url => {
-    for (let Player of [ ...customPlayers, ...players ]) {
+    for (const Player of [...customPlayers, ...players]) {
       if (Player.canEnablePIP && Player.canEnablePIP(url)) {
         return true
       }
     }
     return false
   }
+
   config = getConfig(this.props, defaultProps, true)
   state = {
     showPreview: !!this.props.light
   }
+
   componentDidMount () {
     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', '')
     }
   }
+
   shouldComponentUpdate (nextProps, nextState) {
     return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState)
   }
+
   componentWillUpdate (nextProps) {
     const { light } = this.props
     this.config = getConfig(nextProps, defaultProps)
@@ -61,37 +68,46 @@ export default class ReactPlayer extends Component {
       this.setState({ showPreview: false })
     }
   }
-  onClickPreview = () => {
+
+  handleClickPreview = () => {
     this.setState({ showPreview: false })
   }
+
   showPreview = () => {
     this.setState({ showPreview: true })
   }
+
   getDuration = () => {
     if (!this.player) return null
     return this.player.getDuration()
   }
+
   getCurrentTime = () => {
     if (!this.player) return null
     return this.player.getCurrentTime()
   }
+
   getSecondsLoaded = () => {
     if (!this.player) return null
     return this.player.getSecondsLoaded()
   }
+
   getInternalPlayer = (key = 'player') => {
     if (!this.player) return null
     return this.player.getInternalPlayer(key)
   }
+
   seekTo = (fraction, type) => {
     if (!this.player) return null
     this.player.seekTo(fraction, type)
   }
-  onReady = () => {
+
+  handleReady = () => {
     this.props.onReady(this)
   }
+
   getActivePlayer (url) {
-    for (let Player of [ ...customPlayers, ...players ]) {
+    for (const Player of [...customPlayers, ...players]) {
       if (Player.canPlay(url)) {
         return Player
       }
@@ -99,12 +115,15 @@ export default class ReactPlayer extends Component {
     // Fall back to FilePlayer if nothing else can play the URL
     return FilePlayer
   }
+
   wrapperRef = wrapper => {
     this.wrapper = wrapper
   }
+
   activePlayerRef = player => {
     this.player = player
   }
+
   renderActivePlayer (url, activePlayer) {
     if (!url) return null
     return (
@@ -114,10 +133,11 @@ export default class ReactPlayer extends Component {
         ref={this.activePlayerRef}
         config={this.config}
         activePlayer={activePlayer}
-        onReady={this.onReady}
+        onReady={this.handleReady}
       />
     )
   }
+
   sortPlayers (a, b) {
     // Retain player order to prevent weird iframe behaviour when switching players
     if (a && b) {
@@ -125,6 +145,7 @@ export default class ReactPlayer extends Component {
     }
     return 0
   }
+
   render () {
     const { url, controls, style, width, height, light, wrapper: Wrapper } = this.props
     const showPreview = this.state.showPreview && url
@@ -132,8 +153,8 @@ export default class ReactPlayer extends Component {
     const activePlayer = this.getActivePlayer(url)
     const renderedActivePlayer = this.renderActivePlayer(url, activePlayer)
     const preloadPlayers = renderPreloadPlayers(url, controls, this.config)
-    const players = [ renderedActivePlayer, ...preloadPlayers ].sort(this.sortPlayers)
-    const preview = <Preview url={url} light={light} onClick={this.onClickPreview} />
+    const players = [renderedActivePlayer, ...preloadPlayers].sort(this.sortPlayers)
+    const preview = <Preview url={url} light={light} onClick={this.handleClickPreview} />
     return (
       <Wrapper ref={this.wrapperRef} style={{ ...style, width, height }} {...otherProps}>
         {showPreview ? preview : players}
diff --git a/src/demo/App.js b/src/demo/App.js
index a07161af..e841ddc0 100644
--- a/src/demo/App.js
+++ b/src/demo/App.js
@@ -33,6 +33,7 @@ class App extends Component {
     playbackRate: 1.0,
     loop: false
   }
+
   load = url => {
     this.setState({
       url,
@@ -41,81 +42,102 @@ class App extends Component {
       pip: false
     })
   }
-  playPause = () => {
+
+  handlePlayPause = () => {
     this.setState({ playing: !this.state.playing })
   }
-  stop = () => {
+
+  handleStop = () => {
     this.setState({ url: null, playing: false })
   }
-  toggleControls = () => {
+
+  handleToggleControls = () => {
     const url = this.state.url
     this.setState({
       controls: !this.state.controls,
       url: null
     }, () => this.load(url))
   }
-  toggleLight = () => {
+
+  handleToggleLight = () => {
     this.setState({ light: !this.state.light })
   }
-  toggleLoop = () => {
+
+  handleToggleLoop = () => {
     this.setState({ loop: !this.state.loop })
   }
-  setVolume = e => {
+
+  handleVolumeChange = e => {
     this.setState({ volume: parseFloat(e.target.value) })
   }
-  toggleMuted = () => {
+
+  handleToggleMuted = () => {
     this.setState({ muted: !this.state.muted })
   }
-  setPlaybackRate = e => {
+
+  handleSetPlaybackRate = e => {
     this.setState({ playbackRate: parseFloat(e.target.value) })
   }
-  togglePIP = () => {
+
+  handleTogglePIP = () => {
     this.setState({ pip: !this.state.pip })
   }
-  onPlay = () => {
+
+  handlePlay = () => {
     console.log('onPlay')
     this.setState({ playing: true })
   }
-  onEnablePIP = () => {
+
+  handleEnablePIP = () => {
     console.log('onEnablePIP')
     this.setState({ pip: true })
   }
-  onDisablePIP = () => {
+
+  handleDisablePIP = () => {
     console.log('onDisablePIP')
     this.setState({ pip: false })
   }
-  onPause = () => {
+
+  handlePause = () => {
     console.log('onPause')
     this.setState({ playing: false })
   }
-  onSeekMouseDown = e => {
+
+  handleSeekMouseDown = e => {
     this.setState({ seeking: true })
   }
-  onSeekChange = e => {
+
+  handleSeekChange = e => {
     this.setState({ played: parseFloat(e.target.value) })
   }
-  onSeekMouseUp = e => {
+
+  handleSeekMouseUp = e => {
     this.setState({ seeking: false })
     this.player.seekTo(parseFloat(e.target.value))
   }
-  onProgress = state => {
+
+  handleProgress = state => {
     console.log('onProgress', state)
     // We only want to update time slider if we are not currently seeking
     if (!this.state.seeking) {
       this.setState(state)
     }
   }
-  onEnded = () => {
+
+  handleEnded = () => {
     console.log('onEnded')
     this.setState({ playing: this.state.loop })
   }
-  onDuration = (duration) => {
+
+  handleDuration = (duration) => {
     console.log('onDuration', duration)
     this.setState({ duration })
   }
-  onClickFullscreen = () => {
+
+  handleClickFullscreen = () => {
     screenfull.request(findDOMNode(this.player))
   }
+
   renderLoadButton = (url, label) => {
     return (
       <button onClick={() => this.load(url)}>
@@ -123,9 +145,11 @@ class App extends Component {
       </button>
     )
   }
+
   ref = player => {
     this.player = player
   }
+
   render () {
     const { url, playing, controls, light, volume, muted, loop, played, loaded, duration, playbackRate, pip } = this.state
     const SEPARATOR = ' · '
@@ -151,229 +175,233 @@ class App extends Component {
               muted={muted}
               onReady={() => console.log('onReady')}
               onStart={() => console.log('onStart')}
-              onPlay={this.onPlay}
-              onEnablePIP={this.onEnablePIP}
-              onDisablePIP={this.onDisablePIP}
-              onPause={this.onPause}
+              onPlay={this.handlePlay}
+              onEnablePIP={this.handleEnablePIP}
+              onDisablePIP={this.handleDisablePIP}
+              onPause={this.handlePause}
               onBuffer={() => console.log('onBuffer')}
               onSeek={e => console.log('onSeek', e)}
-              onEnded={this.onEnded}
+              onEnded={this.handleEnded}
               onError={e => console.log('onError', e)}
-              onProgress={this.onProgress}
-              onDuration={this.onDuration}
+              onProgress={this.handleProgress}
+              onDuration={this.handleDuration}
             />
           </div>
 
-          <table><tbody>
-            <tr>
-              <th>Controls</th>
-              <td>
-                <button onClick={this.stop}>Stop</button>
-                <button onClick={this.playPause}>{playing ? 'Pause' : 'Play'}</button>
-                <button onClick={this.onClickFullscreen}>Fullscreen</button>
-                {light &&
-                  <button onClick={() => this.player.showPreview()}>Show preview</button>
-                }
-                {ReactPlayer.canEnablePIP(url) &&
-                  <button onClick={this.togglePIP}>{pip ? 'Disable PiP' : 'Enable PiP'}</button>
-                }
-              </td>
-            </tr>
-            <tr>
-              <th>Speed</th>
-              <td>
-                <button onClick={this.setPlaybackRate} value={1}>1x</button>
-                <button onClick={this.setPlaybackRate} value={1.5}>1.5x</button>
-                <button onClick={this.setPlaybackRate} value={2}>2x</button>
-              </td>
-            </tr>
-            <tr>
-              <th>Seek</th>
-              <td>
-                <input
-                  type='range' min={0} max={1} step='any'
-                  value={played}
-                  onMouseDown={this.onSeekMouseDown}
-                  onChange={this.onSeekChange}
-                  onMouseUp={this.onSeekMouseUp}
-                />
-              </td>
-            </tr>
-            <tr>
-              <th>Volume</th>
-              <td>
-                <input type='range' min={0} max={1} step='any' value={volume} onChange={this.setVolume} />
-              </td>
-            </tr>
-            <tr>
-              <th>
-                <label htmlFor='controls'>Controls</label>
-              </th>
-              <td>
-                <input id='controls' type='checkbox' checked={controls} onChange={this.toggleControls} />
-                <em>&nbsp; Requires player reload</em>
-              </td>
-            </tr>
-            <tr>
-              <th>
-                <label htmlFor='muted'>Muted</label>
-              </th>
-              <td>
-                <input id='muted' type='checkbox' checked={muted} onChange={this.toggleMuted} />
-              </td>
-            </tr>
-            <tr>
-              <th>
-                <label htmlFor='loop'>Loop</label>
-              </th>
-              <td>
-                <input id='loop' type='checkbox' checked={loop} onChange={this.toggleLoop} />
-              </td>
-            </tr>
-            <tr>
-              <th>
-                <label htmlFor='light'>Light mode</label>
-              </th>
-              <td>
-                <input id='light' type='checkbox' checked={light} onChange={this.toggleLight} />
-              </td>
-            </tr>
-            <tr>
-              <th>Played</th>
-              <td><progress max={1} value={played} /></td>
-            </tr>
-            <tr>
-              <th>Loaded</th>
-              <td><progress max={1} value={loaded} /></td>
-            </tr>
-          </tbody></table>
+          <table>
+            <tbody>
+              <tr>
+                <th>Controls</th>
+                <td>
+                  <button onClick={this.handleStop}>Stop</button>
+                  <button onClick={this.handlePlayPause}>{playing ? 'Pause' : 'Play'}</button>
+                  <button onClick={this.handleClickFullscreen}>Fullscreen</button>
+                  {light &&
+                    <button onClick={() => this.player.showPreview()}>Show preview</button>}
+                  {ReactPlayer.canEnablePIP(url) &&
+                    <button onClick={this.handleTogglePIP}>{pip ? 'Disable PiP' : 'Enable PiP'}</button>}
+                </td>
+              </tr>
+              <tr>
+                <th>Speed</th>
+                <td>
+                  <button onClick={this.handleSetPlaybackRate} value={1}>1x</button>
+                  <button onClick={this.handleSetPlaybackRate} value={1.5}>1.5x</button>
+                  <button onClick={this.handleSetPlaybackRate} value={2}>2x</button>
+                </td>
+              </tr>
+              <tr>
+                <th>Seek</th>
+                <td>
+                  <input
+                    type='range' min={0} max={1} step='any'
+                    value={played}
+                    onMouseDown={this.handleSeekMouseDown}
+                    onChange={this.handleSeekChange}
+                    onMouseUp={this.handleSeekMouseUp}
+                  />
+                </td>
+              </tr>
+              <tr>
+                <th>Volume</th>
+                <td>
+                  <input type='range' min={0} max={1} step='any' value={volume} onChange={this.handleVolumeChange} />
+                </td>
+              </tr>
+              <tr>
+                <th>
+                  <label htmlFor='controls'>Controls</label>
+                </th>
+                <td>
+                  <input id='controls' type='checkbox' checked={controls} onChange={this.handleToggleControls} />
+                  <em>&nbsp; Requires player reload</em>
+                </td>
+              </tr>
+              <tr>
+                <th>
+                  <label htmlFor='muted'>Muted</label>
+                </th>
+                <td>
+                  <input id='muted' type='checkbox' checked={muted} onChange={this.handleToggleMuted} />
+                </td>
+              </tr>
+              <tr>
+                <th>
+                  <label htmlFor='loop'>Loop</label>
+                </th>
+                <td>
+                  <input id='loop' type='checkbox' checked={loop} onChange={this.handleToggleLoop} />
+                </td>
+              </tr>
+              <tr>
+                <th>
+                  <label htmlFor='light'>Light mode</label>
+                </th>
+                <td>
+                  <input id='light' type='checkbox' checked={light} onChange={this.handleToggleLight} />
+                </td>
+              </tr>
+              <tr>
+                <th>Played</th>
+                <td><progress max={1} value={played} /></td>
+              </tr>
+              <tr>
+                <th>Loaded</th>
+                <td><progress max={1} value={loaded} /></td>
+              </tr>
+            </tbody>
+          </table>
         </section>
         <section className='section'>
-          <table><tbody>
-            <tr>
-              <th>YouTube</th>
-              <td>
-                {this.renderLoadButton('https://www.youtube.com/watch?v=oUFJJNQGwhk', 'Test A')}
-                {this.renderLoadButton('https://www.youtube.com/watch?v=jNgP6d9HraI', 'Test B')}
-                {this.renderLoadButton('https://www.youtube.com/playlist?list=PLDEcUiPhzbjI217qs5KgMvbvx6-fgY_Al', 'Playlist')}
-              </td>
-            </tr>
-            <tr>
-              <th>SoundCloud</th>
-              <td>
-                {this.renderLoadButton('https://soundcloud.com/miami-nights-1984/accelerated', 'Test A')}
-                {this.renderLoadButton('https://soundcloud.com/tycho/tycho-awake', 'Test B')}
-              </td>
-            </tr>
-            <tr>
-              <th>Facebook</th>
-              <td>
-                {this.renderLoadButton('https://www.facebook.com/facebook/videos/10153231379946729/', 'Test A')}
-                {this.renderLoadButton('https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/', 'Test B')}
-              </td>
-            </tr>
-            <tr>
-              <th>Vimeo</th>
-              <td>
-                {this.renderLoadButton('https://vimeo.com/90509568', 'Test A')}
-                {this.renderLoadButton('https://vimeo.com/169599296', 'Test B')}
-              </td>
-            </tr>
-            <tr>
-              <th>Twitch</th>
-              <td>
-                {this.renderLoadButton('https://www.twitch.tv/videos/106400740', 'Test A')}
-                {this.renderLoadButton('https://www.twitch.tv/videos/12783852', 'Test B')}
-                {this.renderLoadButton('https://www.twitch.tv/kronovi', 'Test C')}
-              </td>
-            </tr>
-            <tr>
-              <th>Streamable</th>
-              <td>
-                {this.renderLoadButton('https://streamable.com/moo', 'Test A')}
-                {this.renderLoadButton('https://streamable.com/ifjh', 'Test B')}
-              </td>
-            </tr>
-            <tr>
-              <th>Wistia</th>
-              <td>
-                {this.renderLoadButton('https://home.wistia.com/medias/e4a27b971d', 'Test A')}
-                {this.renderLoadButton('https://home.wistia.com/medias/29b0fbf547', 'Test B')}
-              </td>
-            </tr>
-            <tr>
-              <th>DailyMotion</th>
-              <td>
-                {this.renderLoadButton('https://www.dailymotion.com/video/x5e9eog', 'Test A')}
-                {this.renderLoadButton('https://www.dailymotion.com/video/x61xx3z', 'Test B')}
-              </td>
-            </tr>
-            <tr>
-              <th>Mixcloud</th>
-              <td>
-                {this.renderLoadButton('https://www.mixcloud.com/mixcloud/meet-the-curators/', 'Test A')}
-                {this.renderLoadButton('https://www.mixcloud.com/mixcloud/mixcloud-curates-4-mary-anne-hobbs-in-conversation-with-dan-deacon/', 'Test B')}
-              </td>
-            </tr>
-            <tr>
-              <th>Files</th>
-              <td>
-                {this.renderLoadButton('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', 'mp4')}
-                {this.renderLoadButton('http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv', 'ogv')}
-                {this.renderLoadButton('http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm', 'webm')}
-                {this.renderLoadButton('https://storage.googleapis.com/media-session/elephants-dream/the-wires.mp3', 'mp3')}
-                {this.renderLoadButton(MULTIPLE_SOURCES, 'Multiple')}
-                {this.renderLoadButton('https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8', 'HLS (m3u8)')}
-                {this.renderLoadButton('http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd', 'DASH (mpd)')}
-              </td>
-            </tr>
-            <tr>
-              <th>Custom URL</th>
-              <td>
-                <input ref={input => { this.urlInput = input }} type='text' placeholder='Enter URL' />
-                <button onClick={() => this.setState({ url: this.urlInput.value })}>Load</button>
-              </td>
-            </tr>
-          </tbody></table>
+          <table>
+            <tbody>
+              <tr>
+                <th>YouTube</th>
+                <td>
+                  {this.renderLoadButton('https://www.youtube.com/watch?v=oUFJJNQGwhk', 'Test A')}
+                  {this.renderLoadButton('https://www.youtube.com/watch?v=jNgP6d9HraI', 'Test B')}
+                  {this.renderLoadButton('https://www.youtube.com/playlist?list=PLDEcUiPhzbjI217qs5KgMvbvx6-fgY_Al', 'Playlist')}
+                </td>
+              </tr>
+              <tr>
+                <th>SoundCloud</th>
+                <td>
+                  {this.renderLoadButton('https://soundcloud.com/miami-nights-1984/accelerated', 'Test A')}
+                  {this.renderLoadButton('https://soundcloud.com/tycho/tycho-awake', 'Test B')}
+                </td>
+              </tr>
+              <tr>
+                <th>Facebook</th>
+                <td>
+                  {this.renderLoadButton('https://www.facebook.com/facebook/videos/10153231379946729/', 'Test A')}
+                  {this.renderLoadButton('https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/', 'Test B')}
+                </td>
+              </tr>
+              <tr>
+                <th>Vimeo</th>
+                <td>
+                  {this.renderLoadButton('https://vimeo.com/90509568', 'Test A')}
+                  {this.renderLoadButton('https://vimeo.com/169599296', 'Test B')}
+                </td>
+              </tr>
+              <tr>
+                <th>Twitch</th>
+                <td>
+                  {this.renderLoadButton('https://www.twitch.tv/videos/106400740', 'Test A')}
+                  {this.renderLoadButton('https://www.twitch.tv/videos/12783852', 'Test B')}
+                  {this.renderLoadButton('https://www.twitch.tv/kronovi', 'Test C')}
+                </td>
+              </tr>
+              <tr>
+                <th>Streamable</th>
+                <td>
+                  {this.renderLoadButton('https://streamable.com/moo', 'Test A')}
+                  {this.renderLoadButton('https://streamable.com/ifjh', 'Test B')}
+                </td>
+              </tr>
+              <tr>
+                <th>Wistia</th>
+                <td>
+                  {this.renderLoadButton('https://home.wistia.com/medias/e4a27b971d', 'Test A')}
+                  {this.renderLoadButton('https://home.wistia.com/medias/29b0fbf547', 'Test B')}
+                </td>
+              </tr>
+              <tr>
+                <th>DailyMotion</th>
+                <td>
+                  {this.renderLoadButton('https://www.dailymotion.com/video/x5e9eog', 'Test A')}
+                  {this.renderLoadButton('https://www.dailymotion.com/video/x61xx3z', 'Test B')}
+                </td>
+              </tr>
+              <tr>
+                <th>Mixcloud</th>
+                <td>
+                  {this.renderLoadButton('https://www.mixcloud.com/mixcloud/meet-the-curators/', 'Test A')}
+                  {this.renderLoadButton('https://www.mixcloud.com/mixcloud/mixcloud-curates-4-mary-anne-hobbs-in-conversation-with-dan-deacon/', 'Test B')}
+                </td>
+              </tr>
+              <tr>
+                <th>Files</th>
+                <td>
+                  {this.renderLoadButton('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', 'mp4')}
+                  {this.renderLoadButton('http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv', 'ogv')}
+                  {this.renderLoadButton('http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm', 'webm')}
+                  {this.renderLoadButton('https://storage.googleapis.com/media-session/elephants-dream/the-wires.mp3', 'mp3')}
+                  {this.renderLoadButton(MULTIPLE_SOURCES, 'Multiple')}
+                  {this.renderLoadButton('https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8', 'HLS (m3u8)')}
+                  {this.renderLoadButton('http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd', 'DASH (mpd)')}
+                </td>
+              </tr>
+              <tr>
+                <th>Custom URL</th>
+                <td>
+                  <input ref={input => { this.urlInput = input }} type='text' placeholder='Enter URL' />
+                  <button onClick={() => this.setState({ url: this.urlInput.value })}>Load</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
 
           <h2>State</h2>
 
-          <table><tbody>
-            <tr>
-              <th>url</th>
-              <td className={!url ? 'faded' : ''}>
-                {(url instanceof Array ? 'Multiple' : url) || 'null'}
-              </td>
-            </tr>
-            <tr>
-              <th>playing</th>
-              <td>{playing ? 'true' : 'false'}</td>
-            </tr>
-            <tr>
-              <th>volume</th>
-              <td>{volume.toFixed(3)}</td>
-            </tr>
-            <tr>
-              <th>played</th>
-              <td>{played.toFixed(3)}</td>
-            </tr>
-            <tr>
-              <th>loaded</th>
-              <td>{loaded.toFixed(3)}</td>
-            </tr>
-            <tr>
-              <th>duration</th>
-              <td><Duration seconds={duration} /></td>
-            </tr>
-            <tr>
-              <th>elapsed</th>
-              <td><Duration seconds={duration * played} /></td>
-            </tr>
-            <tr>
-              <th>remaining</th>
-              <td><Duration seconds={duration * (1 - played)} /></td>
-            </tr>
-          </tbody></table>
+          <table>
+            <tbody>
+              <tr>
+                <th>url</th>
+                <td className={!url ? 'faded' : ''}>
+                  {(url instanceof Array ? 'Multiple' : url) || 'null'}
+                </td>
+              </tr>
+              <tr>
+                <th>playing</th>
+                <td>{playing ? 'true' : 'false'}</td>
+              </tr>
+              <tr>
+                <th>volume</th>
+                <td>{volume.toFixed(3)}</td>
+              </tr>
+              <tr>
+                <th>played</th>
+                <td>{played.toFixed(3)}</td>
+              </tr>
+              <tr>
+                <th>loaded</th>
+                <td>{loaded.toFixed(3)}</td>
+              </tr>
+              <tr>
+                <th>duration</th>
+                <td><Duration seconds={duration} /></td>
+              </tr>
+              <tr>
+                <th>elapsed</th>
+                <td><Duration seconds={duration * played} /></td>
+              </tr>
+              <tr>
+                <th>remaining</th>
+                <td><Duration seconds={duration * (1 - played)} /></td>
+              </tr>
+            </tbody>
+          </table>
         </section>
         <footer className='footer'>
           Version <strong>{version}</strong>
diff --git a/src/players/DailyMotion.js b/src/players/DailyMotion.js
index 43a37cc2..646b09a4 100644
--- a/src/players/DailyMotion.js
+++ b/src/players/DailyMotion.js
@@ -52,43 +52,56 @@ export class DailyMotion extends Component {
       })
     }, onError)
   }
+
   onDurationChange = () => {
     const duration = this.getDuration()
     this.props.onDuration(duration)
   }
+
   play () {
     this.callPlayer('play')
   }
+
   pause () {
     this.callPlayer('pause')
   }
+
   stop () {
     // Nothing to do
   }
+
   seekTo (seconds) {
     this.callPlayer('seek', seconds)
   }
+
   setVolume (fraction) {
     this.callPlayer('setVolume', fraction)
   }
+
   mute = () => {
     this.callPlayer('setMuted', true)
   }
+
   unmute = () => {
     this.callPlayer('setMuted', false)
   }
+
   getDuration () {
     return this.player.duration || null
   }
+
   getCurrentTime () {
     return this.player.currentTime
   }
+
   getSecondsLoaded () {
     return this.player.bufferedTime
   }
+
   ref = container => {
     this.container = container
   }
+
   render () {
     const { display } = this.props
     const style = {
diff --git a/src/players/Facebook.js b/src/players/Facebook.js
index ffeecc23..d8f8ba58 100644
--- a/src/players/Facebook.js
+++ b/src/players/Facebook.js
@@ -54,36 +54,47 @@ export class Facebook extends Component {
       })
     })
   }
+
   play () {
     this.callPlayer('play')
   }
+
   pause () {
     this.callPlayer('pause')
   }
+
   stop () {
     // Nothing to do
   }
+
   seekTo (seconds) {
     this.callPlayer('seek', seconds)
   }
+
   setVolume (fraction) {
     this.callPlayer('setVolume', fraction)
   }
+
   mute = () => {
     this.callPlayer('mute')
   }
+
   unmute = () => {
     this.callPlayer('unmute')
   }
+
   getDuration () {
     return this.callPlayer('getDuration')
   }
+
   getCurrentTime () {
     return this.callPlayer('getCurrentPosition')
   }
+
   getSecondsLoaded () {
     return null
   }
+
   render () {
     const style = {
       width: '100%',
diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js
index 1ae1df97..d3c726d8 100644
--- a/src/players/FilePlayer.js
+++ b/src/players/FilePlayer.js
@@ -16,7 +16,7 @@ const MATCH_DROPBOX_URL = /www\.dropbox\.com\/.+/
 
 function canPlay (url) {
   if (url instanceof Array) {
-    for (let item of url) {
+    for (const item of url) {
       if (typeof item === 'string' && canPlay(item)) {
         return true
       }
@@ -52,19 +52,23 @@ export class FilePlayer extends Component {
       this.player.load()
     }
   }
+
   componentWillReceiveProps (nextProps) {
     if (this.shouldUseAudio(this.props) !== this.shouldUseAudio(nextProps)) {
       this.removeListeners()
     }
   }
+
   componentDidUpdate (prevProps) {
     if (this.shouldUseAudio(this.props) !== this.shouldUseAudio(prevProps)) {
       this.addListeners()
     }
   }
+
   componentWillUnmount () {
     this.removeListeners()
   }
+
   addListeners () {
     const { onReady, onPlay, onBuffer, onBufferEnd, onPause, onEnded, onError, playsinline, onEnablePIP } = this.props
     this.player.addEventListener('canplay', onReady)
@@ -83,6 +87,7 @@ export class FilePlayer extends Component {
       this.player.setAttribute('x5-playsinline', '')
     }
   }
+
   removeListeners () {
     const { onReady, onPlay, onBuffer, onBufferEnd, onPause, onEnded, onError, onEnablePIP } = this.props
     this.player.removeEventListener('canplay', onReady)
@@ -96,6 +101,7 @@ export class FilePlayer extends Component {
     this.player.removeEventListener('enterpictureinpicture', onEnablePIP)
     this.player.removeEventListener('leavepictureinpicture', this.onDisablePIP)
   }
+
   onDisablePIP = e => {
     const { onDisablePIP, playing } = this.props
     onDisablePIP(e)
@@ -103,9 +109,11 @@ export class FilePlayer extends Component {
       this.play()
     }
   }
+
   onSeek = e => {
     this.props.onSeek(e.target.currentTime)
   }
+
   shouldUseAudio (props) {
     if (props.config.file.forceVideo) {
       return false
@@ -115,12 +123,15 @@ export class FilePlayer extends Component {
     }
     return AUDIO_EXTENSIONS.test(props.url) || props.config.file.forceAudio
   }
+
   shouldUseHLS (url) {
     return (HLS_EXTENSIONS.test(url) && !IOS) || this.props.config.file.forceHLS
   }
+
   shouldUseDASH (url) {
     return DASH_EXTENSIONS.test(url) || this.props.config.file.forceDASH
   }
+
   load (url) {
     const { hlsVersion, dashVersion } = this.props.config.file
     if (this.shouldUseHLS(url)) {
@@ -155,15 +166,18 @@ export class FilePlayer extends Component {
       }
     }
   }
+
   play () {
     const promise = this.player.play()
     if (promise) {
       promise.catch(this.props.onError)
     }
   }
+
   pause () {
     this.player.pause()
   }
+
   stop () {
     this.player.removeAttribute('src')
     if (this.hls) {
@@ -173,31 +187,39 @@ export class FilePlayer extends Component {
       this.dash.reset()
     }
   }
+
   seekTo (seconds) {
     this.player.currentTime = seconds
   }
+
   setVolume (fraction) {
     this.player.volume = fraction
   }
+
   mute = () => {
     this.player.muted = true
   }
+
   unmute = () => {
     this.player.muted = false
   }
+
   enablePIP () {
     if (this.player.requestPictureInPicture && document.pictureInPictureElement !== this.player) {
       this.player.requestPictureInPicture()
     }
   }
+
   disablePIP () {
     if (document.exitPictureInPicture && document.pictureInPictureElement === this.player) {
       document.exitPictureInPicture()
     }
   }
+
   setPlaybackRate (rate) {
     this.player.playbackRate = rate
   }
+
   getDuration () {
     if (!this.player) return null
     const { duration, seekable } = this.player
@@ -208,10 +230,12 @@ export class FilePlayer extends Component {
     }
     return duration
   }
+
   getCurrentTime () {
     if (!this.player) return null
     return this.player.currentTime
   }
+
   getSecondsLoaded () {
     if (!this.player) return null
     const { buffered } = this.player
@@ -225,6 +249,7 @@ export class FilePlayer extends Component {
     }
     return end
   }
+
   getSource (url) {
     const useHLS = this.shouldUseHLS(url)
     const useDASH = this.shouldUseDASH(url)
@@ -236,18 +261,22 @@ export class FilePlayer extends Component {
     }
     return url
   }
+
   renderSourceElement = (source, index) => {
     if (typeof source === 'string') {
       return <source key={index} src={source} />
     }
     return <source key={index} {...source} />
   }
+
   renderTrack = (track, index) => {
     return <track key={index} {...track} />
   }
+
   ref = player => {
     this.player = player
   }
+
   render () {
     const { url, playing, loop, controls, muted, config, width, height } = this.props
     const useAudio = this.shouldUseAudio(this.props)
@@ -266,10 +295,10 @@ export class FilePlayer extends Component {
         controls={controls}
         muted={muted}
         loop={loop}
-        {...config.file.attributes}>
+        {...config.file.attributes}
+      >
         {url instanceof Array &&
-          url.map(this.renderSourceElement)
-        }
+          url.map(this.renderSourceElement)}
         {config.file.tracks.map(this.renderTrack)}
       </Element>
     )
diff --git a/src/players/Mixcloud.js b/src/players/Mixcloud.js
index 159c1767..271e3539 100644
--- a/src/players/Mixcloud.js
+++ b/src/players/Mixcloud.js
@@ -32,39 +32,51 @@ export class Mixcloud extends Component {
       })
     }, this.props.onError)
   }
+
   play () {
     this.callPlayer('play')
   }
+
   pause () {
     this.callPlayer('pause')
   }
+
   stop () {
     // Nothing to do
   }
+
   seekTo (seconds) {
     this.callPlayer('seek', seconds)
   }
+
   setVolume (fraction) {
     // No volume support
   }
+
   mute = () => {
     // No volume support
   }
+
   unmute = () => {
     // No volume support
   }
+
   getDuration () {
     return this.duration
   }
+
   getCurrentTime () {
     return this.currentTime
   }
+
   getSecondsLoaded () {
     return null
   }
+
   ref = iframe => {
     this.iframe = iframe
   }
+
   render () {
     const { url, config } = this.props
     const id = url.match(MATCH_URL)[1]
diff --git a/src/players/SoundCloud.js b/src/players/SoundCloud.js
index 7b34b2b5..87864749 100644
--- a/src/players/SoundCloud.js
+++ b/src/players/SoundCloud.js
@@ -42,41 +42,53 @@ export class SoundCloud extends Component {
       })
     })
   }
+
   play () {
     this.callPlayer('play')
   }
+
   pause () {
     this.callPlayer('pause')
   }
+
   stop () {
     // Nothing to do
   }
+
   seekTo (seconds) {
     this.callPlayer('seekTo', seconds * 1000)
   }
+
   setVolume (fraction) {
     this.callPlayer('setVolume', fraction * 100)
   }
+
   mute = () => {
     this.setVolume(0)
   }
+
   unmute = () => {
     if (this.props.volume !== null) {
       this.setVolume(this.props.volume)
     }
   }
+
   getDuration () {
     return this.duration
   }
+
   getCurrentTime () {
     return this.currentTime
   }
+
   getSecondsLoaded () {
     return this.fractionLoaded * this.duration
   }
+
   ref = iframe => {
     this.iframe = iframe
   }
+
   render () {
     const { display } = this.props
     const style = {
diff --git a/src/players/Streamable.js b/src/players/Streamable.js
index fb7b7fe7..3db0d72f 100644
--- a/src/players/Streamable.js
+++ b/src/players/Streamable.js
@@ -40,42 +40,55 @@ export class Streamable extends Component {
       }
     }, this.props.onError)
   }
+
   play () {
     this.callPlayer('play')
   }
+
   pause () {
     this.callPlayer('pause')
   }
+
   stop () {
     // Nothing to do
   }
+
   seekTo (seconds) {
     this.callPlayer('setCurrentTime', seconds)
   }
+
   setVolume (fraction) {
     this.callPlayer('setVolume', fraction * 100)
   }
+
   setLoop (loop) {
     this.callPlayer('setLoop', loop)
   }
+
   mute = () => {
     this.callPlayer('mute')
   }
+
   unmute = () => {
     this.callPlayer('unmute')
   }
+
   getDuration () {
     return this.duration
   }
+
   getCurrentTime () {
     return this.currentTime
   }
+
   getSecondsLoaded () {
     return this.secondsLoaded
   }
+
   ref = iframe => {
     this.iframe = iframe
   }
+
   render () {
     const id = this.props.url.match(MATCH_URL)[1]
     const style = {
diff --git a/src/players/Twitch.js b/src/players/Twitch.js
index 7216e544..d9aaa0b4 100644
--- a/src/players/Twitch.js
+++ b/src/players/Twitch.js
@@ -50,36 +50,47 @@ export class Twitch extends Component {
       this.player.addEventListener(OFFLINE, this.props.onLoaded)
     }, onError)
   }
+
   play () {
     this.callPlayer('play')
   }
+
   pause () {
     this.callPlayer('pause')
   }
+
   stop () {
     this.callPlayer('pause')
   }
+
   seekTo (seconds) {
     this.callPlayer('seek', seconds)
   }
+
   setVolume (fraction) {
     this.callPlayer('setVolume', fraction)
   }
+
   mute = () => {
     this.callPlayer('setMuted', true)
   }
+
   unmute = () => {
     this.callPlayer('setMuted', false)
   }
+
   getDuration () {
     return this.callPlayer('getDuration')
   }
+
   getCurrentTime () {
     return this.callPlayer('getCurrentTime')
   }
+
   getSecondsLoaded () {
     return null
   }
+
   render () {
     const style = {
       width: '100%',
diff --git a/src/players/Vimeo.js b/src/players/Vimeo.js
index 2692ca71..8058b9ca 100644
--- a/src/players/Vimeo.js
+++ b/src/players/Vimeo.js
@@ -59,55 +59,70 @@ export class Vimeo extends Component {
       })
     }, this.props.onError)
   }
+
   refreshDuration () {
     this.player.getDuration().then(duration => {
       this.duration = duration
     })
   }
+
   play () {
     const promise = this.callPlayer('play')
     if (promise) {
       promise.catch(this.props.onError)
     }
   }
+
   pause () {
     this.callPlayer('pause')
   }
+
   stop () {
     this.callPlayer('unload')
   }
+
   seekTo (seconds) {
     this.callPlayer('setCurrentTime', seconds)
   }
+
   setVolume (fraction) {
     this.callPlayer('setVolume', fraction)
   }
+
   setLoop (loop) {
     this.callPlayer('setLoop', loop)
   }
+
   setPlaybackRate (rate) {
     this.callPlayer('setPlaybackRate', rate)
   }
+
   mute = () => {
     this.setVolume(0)
   }
+
   unmute = () => {
     if (this.props.volume !== null) {
       this.setVolume(this.props.volume)
     }
   }
+
   getDuration () {
     return this.duration
   }
+
   getCurrentTime () {
     return this.currentTime
   }
+
   getSecondsLoaded () {
     return this.secondsLoaded
   }
+
   ref = container => {
     this.container = container
   }
+
   render () {
     const { display } = this.props
     const style = {
diff --git a/src/players/Wistia.js b/src/players/Wistia.js
index e9c69a63..9ddef60f 100644
--- a/src/players/Wistia.js
+++ b/src/players/Wistia.js
@@ -16,6 +16,7 @@ export class Wistia extends Component {
   getID (url) {
     return url && url.match(MATCH_URL)[1]
   }
+
   load (url) {
     const { playing, muted, controls, onReady, onPlay, onPause, onSeek, onEnded, config, onError } = this.props
     getSDK(SDK_URL, SDK_GLOBAL).then(() => {
@@ -41,12 +42,15 @@ export class Wistia extends Component {
       })
     }, onError)
   }
+
   play () {
     this.callPlayer('play')
   }
+
   pause () {
     this.callPlayer('pause')
   }
+
   unbind () {
     const { onPlay, onPause, onSeek, onEnded } = this.props
     this.player.unbind('play', onPlay)
@@ -54,34 +58,44 @@ export class Wistia extends Component {
     this.player.unbind('seek', onSeek)
     this.player.unbind('end', onEnded)
   }
+
   stop () {
     this.unbind()
     this.callPlayer('remove')
   }
+
   seekTo (seconds) {
     this.callPlayer('time', seconds)
   }
+
   setVolume (fraction) {
     this.callPlayer('volume', fraction)
   }
+
   mute = () => {
     this.callPlayer('mute')
   }
+
   unmute = () => {
     this.callPlayer('unmute')
   }
+
   setPlaybackRate (rate) {
     this.callPlayer('playbackRate', rate)
   }
+
   getDuration () {
     return this.callPlayer('duration')
   }
+
   getCurrentTime () {
     return this.callPlayer('time')
   }
+
   getSecondsLoaded () {
     return null
   }
+
   render () {
     const id = this.getID(this.props.url)
     const className = `wistia_embed wistia_async_${id}`
diff --git a/src/players/YouTube.js b/src/players/YouTube.js
index 4f4e5fda..a20ec5e6 100644
--- a/src/players/YouTube.js
+++ b/src/players/YouTube.js
@@ -72,6 +72,7 @@ export class YouTube extends Component {
       })
     }, onError)
   }
+
   onStateChange = ({ data }) => {
     const { onPlay, onPause, onBuffer, onBufferEnd, onEnded, onReady, loop } = this.props
     const { PLAYING, PAUSED, BUFFERING, ENDED, CUED } = window[SDK_GLOBAL].PlayerState
@@ -90,49 +91,63 @@ export class YouTube extends Component {
     }
     if (data === CUED) onReady()
   }
+
   play () {
     this.callPlayer('playVideo')
   }
+
   pause () {
     this.callPlayer('pauseVideo')
   }
+
   stop () {
     if (!document.body.contains(this.callPlayer('getIframe'))) return
     this.callPlayer('stopVideo')
   }
+
   seekTo (amount) {
     this.callPlayer('seekTo', amount)
     if (!this.props.playing) {
       this.pause()
     }
   }
+
   setVolume (fraction) {
     this.callPlayer('setVolume', fraction * 100)
   }
+
   mute = () => {
     this.callPlayer('mute')
   }
+
   unmute = () => {
     this.callPlayer('unMute')
   }
+
   setPlaybackRate (rate) {
     this.callPlayer('setPlaybackRate', rate)
   }
+
   setLoop (loop) {
     this.callPlayer('setLoop', loop)
   }
+
   getDuration () {
     return this.callPlayer('getDuration')
   }
+
   getCurrentTime () {
     return this.callPlayer('getCurrentTime')
   }
+
   getSecondsLoaded () {
     return this.callPlayer('getVideoLoadedFraction') * this.getDuration()
   }
+
   ref = container => {
     this.container = container
   }
+
   render () {
     const { display } = this.props
     const style = {
diff --git a/src/preload.js b/src/preload.js
index 4e96d810..7312a149 100644
--- a/src/preload.js
+++ b/src/preload.js
@@ -32,7 +32,7 @@ const PRELOAD_PLAYERS = [
 export default function renderPreloadPlayers (url, controls, config) {
   const players = []
 
-  for (let player of PRELOAD_PLAYERS) {
+  for (const player of PRELOAD_PLAYERS) {
     if (!player.Player.canPlay(url) && config[player.configKey].preload) {
       players.push(
         <Player
diff --git a/src/props.js b/src/props.js
index 9b47b6eb..71ed8b17 100644
--- a/src/props.js
+++ b/src/props.js
@@ -3,20 +3,20 @@ import PropTypes from 'prop-types'
 const { string, bool, number, array, oneOfType, shape, object, func } = PropTypes
 
 export const propTypes = {
-  url: oneOfType([ string, array, object ]),
+  url: oneOfType([string, array, object]),
   playing: bool,
   loop: bool,
   controls: bool,
   volume: number,
   muted: bool,
   playbackRate: number,
-  width: oneOfType([ string, number ]),
-  height: oneOfType([ string, number ]),
+  width: oneOfType([string, number]),
+  height: oneOfType([string, number]),
   style: object,
   progressInterval: number,
   playsinline: bool,
   pip: bool,
-  light: oneOfType([ bool, string ]),
+  light: oneOfType([bool, string]),
   wrapper: oneOfType([
     string,
     func,
diff --git a/src/singlePlayer.js b/src/singlePlayer.js
index 7148bdfe..92d519a1 100644
--- a/src/singlePlayer.js
+++ b/src/singlePlayer.js
@@ -17,32 +17,40 @@ export default function createSinglePlayer (activePlayer) {
     shouldComponentUpdate (nextProps) {
       return !isEqual(this.props, nextProps)
     }
+
     componentWillUpdate (nextProps) {
       this.config = getConfig(nextProps, defaultProps)
     }
+
     getDuration = () => {
       if (!this.player) return null
       return this.player.getDuration()
     }
+
     getCurrentTime = () => {
       if (!this.player) return null
       return this.player.getCurrentTime()
     }
+
     getSecondsLoaded = () => {
       if (!this.player) return null
       return this.player.getSecondsLoaded()
     }
+
     getInternalPlayer = (key = 'player') => {
       if (!this.player) return null
       return this.player.getInternalPlayer(key)
     }
+
     seekTo = (fraction, type) => {
       if (!this.player) return null
       this.player.seekTo(fraction, type)
     }
+
     ref = player => {
       this.player = player
     }
+
     render () {
       const { forceVideo, forceAudio, forceHLS, forceDASH } = this.config.file
       const skipCanPlay = forceVideo || forceAudio || forceHLS || forceDASH
diff --git a/src/utils.js b/src/utils.js
index 4e5e4264..c1518330 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -94,7 +94,7 @@ export function getSDK (url, sdkGlobal, sdkReady = null, isLoaded = () => true,
 
 export function getConfig (props, defaultProps, showWarning) {
   let config = merge(defaultProps.config, props.config)
-  for (let p of DEPRECATED_CONFIG_PROPS) {
+  for (const p of DEPRECATED_CONFIG_PROPS) {
     if (props[p]) {
       const key = p.replace(/Config$/, '')
       config = merge(config, { [key]: props[p] })
@@ -112,7 +112,7 @@ export function omit (object, ...arrays) {
   const omitKeys = [].concat(...arrays)
   const output = {}
   const keys = Object.keys(object)
-  for (let key of keys) {
+  for (const key of keys) {
     if (omitKeys.indexOf(key) === -1) {
       output[key] = object[key]
     }
@@ -161,7 +161,7 @@ export function isEqual (a, b) {
     if (Object.keys(a).length !== Object.keys(b).length) {
       return false
     }
-    for (let key of Object.keys(a)) {
+    for (const key of Object.keys(a)) {
       if (!isEqual(a[key], b[key])) {
         return false
       }
diff --git a/test/Player.js b/test/Player.js
index 4492269d..bb434c92 100644
--- a/test/Player.js
+++ b/test/Player.js
@@ -49,7 +49,7 @@ test('player.load()', t => {
 
 test('set loadOnReady', t => {
   const stub = sinon.stub(console, 'warn')
-  const wrapper = shallow(<Player url='file.mp4' activePlayer={{}} />)
+  const wrapper = shallow(<Player url='file.mp4' activePlayer={() => null} />)
   const instance = wrapper.instance()
   const fake = sinon.fake()
   instance.ref({ load: fake })
@@ -202,9 +202,9 @@ test('onReady()', t => {
   const play = sinon.fake()
   const instance = shallow(<Player onReady={onReady} playing volume={1} />).instance()
   instance.ref({ setVolume, play })
-  instance.onDurationCheck = sinon.fake()
+  instance.handleDurationCheck = sinon.fake()
   instance.isReady = true
-  instance.onReady()
+  instance.handleReady()
   t.true(setVolume.calledOnceWith(1))
   t.true(play.calledOnce)
 })
@@ -214,9 +214,9 @@ test('loadOnReady', t => {
   const play = sinon.fake()
   const instance = shallow(<Player />).instance()
   instance.ref({ load, play })
-  instance.onDurationCheck = sinon.fake()
+  instance.handleDurationCheck = sinon.fake()
   instance.loadOnReady = 'file.mp4'
-  instance.onReady()
+  instance.handleReady()
   t.true(load.calledOnceWith('file.mp4'))
   t.true(play.notCalled)
 })
@@ -224,8 +224,8 @@ test('loadOnReady', t => {
 test('onPlay()', t => {
   const onPlay = sinon.fake()
   const instance = shallow(<Player onPlay={onPlay} />).instance()
-  instance.onDurationCheck = sinon.fake()
-  instance.onPlay()
+  instance.handleDurationCheck = sinon.fake()
+  instance.handlePlay()
   t.true(onPlay.calledOnce)
   t.true(instance.isPlaying)
   t.false(instance.isLoading)
@@ -236,9 +236,9 @@ test('onStart()', t => {
   const setPlaybackRate = sinon.fake()
   const instance = shallow(<Player onStart={onStart} />).instance()
   instance.ref({ setPlaybackRate })
-  instance.onDurationCheck = sinon.fake()
+  instance.handleDurationCheck = sinon.fake()
   instance.startOnPlay = true
-  instance.onPlay()
+  instance.handlePlay()
   t.true(onStart.calledOnce)
   t.true(setPlaybackRate.calledOnceWith(1))
   t.false(instance.startOnPlay)
@@ -247,9 +247,9 @@ test('onStart()', t => {
 test('seekOnPlay', t => {
   const seekTo = sinon.stub(Player.prototype, 'seekTo')
   const instance = shallow(<Player />).instance()
-  instance.onDurationCheck = sinon.fake()
+  instance.handleDurationCheck = sinon.fake()
   instance.seekOnPlay = 10
-  instance.onPlay()
+  instance.handlePlay()
   t.true(seekTo.calledOnceWith(10))
   t.true(instance.seekOnPlay === null)
   seekTo.restore()
@@ -259,7 +259,7 @@ test('onPause()', t => {
   const onPause = sinon.fake()
   const instance = shallow(<Player onPause={onPause} />).instance()
   instance.isLoading = false
-  instance.onPause()
+  instance.handlePause()
   t.true(onPause.calledOnce)
   t.false(instance.isPlaying)
 })
@@ -268,7 +268,7 @@ test('onPause() - isLoading', t => {
   const onPause = sinon.fake()
   const instance = shallow(<Player onPause={onPause} />).instance()
   instance.isLoading = true
-  instance.onPause()
+  instance.handlePause()
   t.true(onPause.notCalled)
 })
 
@@ -277,7 +277,7 @@ test('onEnded()', t => {
   const onEnded = sinon.fake()
   const instance = shallow(<Player activePlayer={activePlayer} onEnded={onEnded} />).instance()
   instance.isPlaying = true
-  instance.onEnded()
+  instance.handleEnded()
   t.true(onEnded.calledOnce)
   t.false(instance.isPlaying)
 })
@@ -288,18 +288,18 @@ test('loopOnEnded', t => {
   const seekTo = sinon.stub(Player.prototype, 'seekTo')
   const instance = shallow(<Player loop activePlayer={activePlayer} />).instance()
   instance.isPlaying = true
-  instance.onEnded()
+  instance.handleEnded()
   t.true(seekTo.calledOnceWith(0))
   t.true(instance.isPlaying)
   seekTo.restore()
 })
 
-test('onDurationCheck', t => {
+test('handleDurationCheck', t => {
   const onDuration = sinon.fake()
   const instance = shallow(<Player onDuration={onDuration} />).instance()
   instance.getDuration = sinon.fake.returns(10)
-  instance.onDurationCheck()
-  instance.onDurationCheck() // Call twice to ensure onDuration is not called again
+  instance.handleDurationCheck()
+  instance.handleDurationCheck() // Call twice to ensure onDuration is not called again
   t.true(onDuration.calledOnceWith(10))
   t.true(instance.onDurationCalled)
 })
@@ -309,7 +309,7 @@ test('durationCheckTimeout', t => {
   const instance = shallow(<Player onDuration={onDuration} />).instance()
   instance.getDuration = sinon.fake.returns(null)
   instance.durationCheckTimeout = null
-  instance.onDurationCheck()
+  instance.handleDurationCheck()
   t.true(onDuration.notCalled)
   t.truthy(instance.durationCheckTimeout)
 })
diff --git a/test/ReactPlayer/instanceMethods.js b/test/ReactPlayer/instanceMethods.js
index 84ac3420..7342e5a3 100644
--- a/test/ReactPlayer/instanceMethods.js
+++ b/test/ReactPlayer/instanceMethods.js
@@ -46,7 +46,7 @@ test('seekTo() - null', t => {
 test('onReady()', t => {
   const onReady = sinon.fake()
   const instance = shallow(<ReactPlayer onReady={onReady} />).instance()
-  instance.onReady()
+  instance.handleReady()
   t.true(onReady.calledWith(instance))
 })
 
diff --git a/test/ReactPlayer/render.js b/test/ReactPlayer/render.js
index 3a442510..768cc550 100644
--- a/test/ReactPlayer/render.js
+++ b/test/ReactPlayer/render.js
@@ -26,7 +26,7 @@ test('render', t => {
 test('fallback player', t => {
   const wrapper = shallow(<ReactPlayer url='http://example.com/random/path' />)
   t.true(wrapper.childAt(0).matchesElement(
-    <Player activePlayer={FilePlayer} onReady={wrapper.instance().onReady} />
+    <Player activePlayer={FilePlayer} onReady={wrapper.instance().handleReady} />
   ))
 })
 
diff --git a/test/players/FilePlayer.js b/test/players/FilePlayer.js
index a8595a02..7df213c3 100644
--- a/test/players/FilePlayer.js
+++ b/test/players/FilePlayer.js
@@ -101,6 +101,7 @@ test('onError - hls', t => {
       on = (event, cb) => {
         setTimeout(cb, 100)
       }
+
       loadSource = () => null
       attachMedia = () => null
     }
@@ -157,10 +158,14 @@ test('load - MediaStream (srcObject not supported)', t => {
 
 test('forceVideo', t => {
   const wrapper = shallow(
-    <FilePlayer url='file.mp3' config={{ file: {
-      ...config.file,
-      forceVideo: true
-    }}} />
+    <FilePlayer
+      url='file.mp3' config={{
+        file: {
+          ...config.file,
+          forceVideo: true
+        }
+      }}
+    />
   )
   t.true(wrapper.containsMatchingElement(
     <video src='file.mp3'>{false}{[]}</video>
@@ -169,10 +174,14 @@ test('forceVideo', t => {
 
 test('forceAudio', t => {
   const wrapper = shallow(
-    <FilePlayer url='file.mp4' config={{ file: {
-      ...config.file,
-      forceAudio: true
-    }}} />
+    <FilePlayer
+      url='file.mp4' config={{
+        file: {
+          ...config.file,
+          forceAudio: true
+        }
+      }}
+    />
   )
   t.true(wrapper.containsMatchingElement(
     <audio src='file.mp4'>{false}{[]}</audio>
@@ -181,10 +190,14 @@ test('forceAudio', t => {
 
 test('render video poster', t => {
   const wrapper = shallow(
-    <FilePlayer url='file.mp3' config={{ file: {
-      ...config.file,
-      attributes: { poster: 'poster.png' }
-    }}} />
+    <FilePlayer
+      url='file.mp3' config={{
+        file: {
+          ...config.file,
+          attributes: { poster: 'poster.png' }
+        }
+      }}
+    />
   )
   t.true(wrapper.containsMatchingElement(
     <video src='file.mp3' poster='poster.png'>{false}{[]}</video>
@@ -358,13 +371,17 @@ test('render - object array', t => {
 
 test.skip('render tracks', t => {
   const wrapper = shallow(
-    <FilePlayer url='file.mp4' config={{ file: {
-      ...config.file,
-      tracks: [
-        { kind: 'subtitles', src: 'subtitles.en.vtt', srcLang: 'en', default: true },
-        { kind: 'subtitles', src: 'subtitles.ja.vtt', srcLang: 'ja' }
-      ]
-    }}} />
+    <FilePlayer
+      url='file.mp4' config={{
+        file: {
+          ...config.file,
+          tracks: [
+            { kind: 'subtitles', src: 'subtitles.en.vtt', srcLang: 'en', default: true },
+            { kind: 'subtitles', src: 'subtitles.ja.vtt', srcLang: 'ja' }
+          ]
+        }
+      }}
+    />
   )
   t.true(wrapper.containsMatchingElement(
     <video src='file.mp4'>
diff --git a/test/players/Streamable.js b/test/players/Streamable.js
index 3bcfdae4..18dfb58b 100644
--- a/test/players/Streamable.js
+++ b/test/players/Streamable.js
@@ -31,9 +31,11 @@ test('load()', t => {
     constructor (iframe) {
       t.true(iframe === 'mock-iframe')
     }
+
     on = (event, fn) => {
       if (event === 'ready') setTimeout(fn, 100)
     }
+
     setLoop = () => null
   }
   const getSDK = sinon.stub(utils, 'getSDK').resolves({ Player })
diff --git a/test/players/Twitch.js b/test/players/Twitch.js
index 8e38b52e..0c156bea 100644
--- a/test/players/Twitch.js
+++ b/test/players/Twitch.js
@@ -42,6 +42,7 @@ test('load()', t => {
     constructor (id, options) {
       t.true(id === 'mock-player-id')
     }
+
     addEventListener = (event, fn) => {
       if (event === 'READY') setTimeout(fn, 100)
     }
diff --git a/test/players/YouTube.js b/test/players/YouTube.js
index bc9ead1d..e1038c72 100644
--- a/test/players/YouTube.js
+++ b/test/players/YouTube.js
@@ -107,6 +107,7 @@ test('onStateChange() - buffer', async t => {
 test('onStateChange() - ended', async t => {
   const onEnded = () => t.pass()
   const instance = shallow(<YouTube url={TEST_URL} onEnded={onEnded} />).instance()
+  instance.player = { getPlaylist: () => {} }
   instance.onStateChange({ data: 'ENDED' })
 })