From 355ffc54c88b3a64a337d37e3844613658541193 Mon Sep 17 00:00:00 2001
From: Pete Cook <pete@cookpete.com>
Date: Mon, 14 Dec 2015 17:08:48 +0000
Subject: [PATCH 1/6] Set Vimeo iframe src in play method instead of render

* Allows us to render the Vimeo player without a valid URL, which helps us fix bugs
* More or less reverts commit d308aa62c70d902f95c1184d704f54ee1fcc98d3
---
 src/players/Vimeo.js | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/players/Vimeo.js b/src/players/Vimeo.js
index 219ef08f..6d4480f8 100644
--- a/src/players/Vimeo.js
+++ b/src/players/Vimeo.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import queryString from 'query-string'
+import { stringify } from 'query-string'
 
 import propTypes from '../propTypes'
 import Base from './Base'
@@ -29,11 +29,18 @@ export default class Vimeo extends Base {
     this.iframe = this.refs.iframe
     super.componentDidMount()
   }
-  shouldComponentUpdate (nextProps) {
-    return this.props.url !== nextProps.url
+  shouldComponentUpdate () {
+    return false
   }
   play (url) {
-    if (!url) {
+    if (url) {
+      const id = url.match(MATCH_URL)[3]
+      const iframeParams = {
+        ...DEFAULT_IFRAME_PARAMS,
+        ...this.props.vimeoConfig.iframeParams
+      }
+      this.iframe.src = IFRAME_SRC + id + '?' + stringify(iframeParams)
+    } else {
       this.postMessage('play')
     }
   }
@@ -41,7 +48,7 @@ export default class Vimeo extends Base {
     this.postMessage('pause')
   }
   stop () {
-    // No need
+    this.iframe.src = ''
   }
   seekTo (fraction) {
     this.postMessage('seekTo', this.duration * fraction)
@@ -81,19 +88,10 @@ export default class Vimeo extends Base {
     return this.iframe.contentWindow && this.iframe.contentWindow.postMessage(data, this.origin)
   }
   render () {
-    const id = this.props.url.match(MATCH_URL)[3]
     const style = {
       width: '100%',
       height: '100%'
     }
-    const iframeParams = { ...DEFAULT_IFRAME_PARAMS, ...this.props.vimeoConfig.iframeParams }
-    return (
-      <iframe
-        ref='iframe'
-        src={IFRAME_SRC + id + '?' + queryString.stringify(iframeParams)}
-        style={style}
-        frameBorder='0'
-      />
-    )
+    return <iframe ref='iframe' frameBorder='0' style={style} />
   }
 }

From 158fdde54b6188c9f9ca3034e9cb5bcc3fe3ff69 Mon Sep 17 00:00:00 2001
From: Pete Cook <pete@cookpete.com>
Date: Mon, 14 Dec 2015 17:06:12 +0000
Subject: [PATCH 2/6] Always render every player

---
 src/ReactPlayer.js        | 26 ++++++++++++--------------
 src/players/Base.js       | 10 +++++++---
 src/players/FilePlayer.js |  2 ++
 src/players/SoundCloud.js |  1 +
 src/players/Vimeo.js      |  1 +
 src/players/YouTube.js    |  3 ++-
 test/ReactPlayer.js       | 16 ++++++++++++----
 7 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
index 64879f9c..a98d015a 100644
--- a/src/ReactPlayer.js
+++ b/src/ReactPlayer.js
@@ -18,18 +18,12 @@ export default class ReactPlayer extends Component {
   static canPlay (url) {
     return players.some(player => player.canPlay(url))
   }
-  state = {
-    Player: this.getPlayer(this.props.url)
-  }
-  componentWillReceiveProps (nextProps) {
-    if (this.props.url !== nextProps.url) {
-      this.setState({
-        Player: this.getPlayer(nextProps.url)
-      })
-    }
-  }
-  getPlayer (url) {
-    return players.find(Player => Player.canPlay(url))
+  shouldComponentUpdate (nextProps) {
+    return (
+      this.props.url !== nextProps.url ||
+      this.props.playing !== nextProps.playing ||
+      this.props.volume !== nextProps.volume
+    )
   }
   seekTo = fraction => {
     const player = this.refs.player
@@ -37,15 +31,19 @@ export default class ReactPlayer extends Component {
       player.seekTo(fraction)
     }
   }
+  renderPlayer = Player => {
+    const active = Player.canPlay(this.props.url)
+    const props = active ? { ...this.props, ref: 'player' } : {}
+    return <Player key={Player.name} {...props} />
+  }
   render () {
-    const Player = this.state.Player
     const style = {
       width: this.props.width,
       height: this.props.height
     }
     return (
       <div style={style}>
-        { Player && <Player ref='player' {...this.props} /> }
+        { players.map(this.renderPlayer) }
       </div>
     )
   }
diff --git a/src/players/Base.js b/src/players/Base.js
index 7e584955..aa4fb7d6 100644
--- a/src/players/Base.js
+++ b/src/players/Base.js
@@ -10,7 +10,6 @@ export default class Base extends Component {
     onProgress: function () {}
   }
   componentDidMount () {
-    this.play(this.props.url)
     this.update()
   }
   componentWillUnmount () {
@@ -20,8 +19,13 @@ export default class Base extends Component {
   componentWillReceiveProps (nextProps) {
     // Invoke player methods based on incoming props
     if (this.props.url !== nextProps.url) {
-      this.play(nextProps.url)
-      this.props.onProgress({ played: 0, loaded: 0 })
+      if (nextProps.url) {
+        this.play(nextProps.url)
+        this.props.onProgress({ played: 0, loaded: 0 })
+      } else {
+        this.stop()
+        clearTimeout(this.updateTimeout)
+      }
     } else if (!this.props.playing && nextProps.playing) {
       this.play()
     } else if (this.props.playing && !nextProps.playing) {
diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js
index 8396655c..54162944 100644
--- a/src/players/FilePlayer.js
+++ b/src/players/FilePlayer.js
@@ -48,10 +48,12 @@ export default class FilePlayer extends Base {
   }
   render () {
     const Media = AUDIO_EXTENSIONS.test(this.props.url) ? 'audio' : 'video'
+    const style = { display: this.props.url ? 'block' : 'none' }
     return (
       <Media
         ref='player'
         src={this.props.url}
+        style={style}
         width={this.props.width}
         height={this.props.height}
       />
diff --git a/src/players/SoundCloud.js b/src/players/SoundCloud.js
index 1f5fc617..8216f988 100644
--- a/src/players/SoundCloud.js
+++ b/src/players/SoundCloud.js
@@ -107,6 +107,7 @@ export default class SoundCloud extends Base {
   }
   render () {
     const style = {
+      display: this.props.url ? 'block' : 'none',
       height: '100%',
       backgroundImage: this.state.image ? 'url(' + this.state.image + ')' : null,
       backgroundSize: 'cover',
diff --git a/src/players/Vimeo.js b/src/players/Vimeo.js
index 6d4480f8..2f5d8529 100644
--- a/src/players/Vimeo.js
+++ b/src/players/Vimeo.js
@@ -89,6 +89,7 @@ export default class Vimeo extends Base {
   }
   render () {
     const style = {
+      display: this.props.url ? 'block' : 'none',
       width: '100%',
       height: '100%'
     }
diff --git a/src/players/YouTube.js b/src/players/YouTube.js
index b4e80f0b..06c517b7 100644
--- a/src/players/YouTube.js
+++ b/src/players/YouTube.js
@@ -94,6 +94,7 @@ export default class YouTube extends Base {
     return this.player.getVideoLoadedFraction()
   }
   render () {
-    return <div id={PLAYER_ID} />
+    const style = { display: this.props.url ? 'block' : 'none' }
+    return <div id={PLAYER_ID} style={style} />
   }
 }
diff --git a/test/ReactPlayer.js b/test/ReactPlayer.js
index 056b2683..3b938982 100644
--- a/test/ReactPlayer.js
+++ b/test/ReactPlayer.js
@@ -24,24 +24,32 @@ describe('ReactPlayer', () => {
   it('renders YouTube player', () => {
     shallowRenderer.render(<ReactPlayer url={YOUTUBE_URL} />)
     const result = shallowRenderer.getRenderOutput()
-    expect(result.props.children.type).to.equal(YouTube)
+    const activePlayer = getActivePlayer(result)
+    expect(activePlayer.type).to.equal(YouTube)
   })
 
   it('renders SoundCloud player', () => {
     shallowRenderer.render(<ReactPlayer url={SOUNDCLOUD_URL} />)
     const result = shallowRenderer.getRenderOutput()
-    expect(result.props.children.type).to.equal(SoundCloud)
+    const activePlayer = getActivePlayer(result)
+    expect(activePlayer.type).to.equal(SoundCloud)
   })
 
   it('renders Vimeo player', () => {
     shallowRenderer.render(<ReactPlayer url={VIMEO_URL} />)
     const result = shallowRenderer.getRenderOutput()
-    expect(result.props.children.type).to.equal(Vimeo)
+    const activePlayer = getActivePlayer(result)
+    expect(activePlayer.type).to.equal(Vimeo)
   })
 
   it('renders FilePlayer', () => {
     shallowRenderer.render(<ReactPlayer url={FILE_URL} />)
     const result = shallowRenderer.getRenderOutput()
-    expect(result.props.children.type).to.equal(FilePlayer)
+    const activePlayer = getActivePlayer(result)
+    expect(activePlayer.type).to.equal(FilePlayer)
   })
 })
+
+function getActivePlayer (result) {
+  return result.props.children.find(player => player.ref === 'player')
+}

From 90ef33485369fc7892d11b2e4da04ffb64df1e99 Mon Sep 17 00:00:00 2001
From: Pete Cook <pete@cookpete.com>
Date: Tue, 15 Dec 2015 11:31:06 +0000
Subject: [PATCH 3/6] Move defaultProps to separate props file

---
 src/ReactPlayer.js             | 12 ++----------
 src/players/Base.js            |  6 ++----
 src/players/FilePlayer.js      |  3 ++-
 src/players/SoundCloud.js      |  9 ++-------
 src/players/Vimeo.js           |  6 ++----
 src/players/YouTube.js         |  6 ++----
 src/{propTypes.js => props.js} | 24 +++++++++++++++++++++++-
 7 files changed, 35 insertions(+), 31 deletions(-)
 rename src/{propTypes.js => props.js} (57%)

diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
index a98d015a..20bd9223 100644
--- a/src/ReactPlayer.js
+++ b/src/ReactPlayer.js
@@ -1,20 +1,12 @@
 import React, { Component } from 'react'
 import 'array.prototype.find'
 
-import propTypes from './propTypes'
+import { propTypes, defaultProps } from './props'
 import players from './players'
 
 export default class ReactPlayer extends Component {
   static propTypes = propTypes
-  static defaultProps = {
-    volume: 0.8,
-    width: 640,
-    height: 360,
-    onPlay: function () {}, // TODO: Empty func var in react?
-    onPause: function () {},
-    onBuffer: function () {},
-    onEnded: function () {}
-  }
+  static defaultProps = defaultProps
   static canPlay (url) {
     return players.some(player => player.canPlay(url))
   }
diff --git a/src/players/Base.js b/src/players/Base.js
index aa4fb7d6..1f574380 100644
--- a/src/players/Base.js
+++ b/src/players/Base.js
@@ -1,14 +1,12 @@
 import { Component } from 'react'
 
-import propTypes from '../propTypes'
+import { propTypes, defaultProps } from '../props'
 
 const UPDATE_FREQUENCY = 500
 
 export default class Base extends Component {
   static propTypes = propTypes
-  static defaultProps = {
-    onProgress: function () {}
-  }
+  static defaultProps = defaultProps
   componentDidMount () {
     this.update()
   }
diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js
index 54162944..43a21ac5 100644
--- a/src/players/FilePlayer.js
+++ b/src/players/FilePlayer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import propTypes from '../propTypes'
+import { propTypes, defaultProps } from '../props'
 import Base from './Base'
 
 const VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm)$/
@@ -8,6 +8,7 @@ const AUDIO_EXTENSIONS = /\.(mp3|wav)$/
 
 export default class FilePlayer extends Base {
   static propTypes = propTypes
+  static defaultProps = defaultProps
   static canPlay (url) {
     return VIDEO_EXTENSIONS.test(url) || AUDIO_EXTENSIONS.test(url)
   }
diff --git a/src/players/SoundCloud.js b/src/players/SoundCloud.js
index 8216f988..246a3a13 100644
--- a/src/players/SoundCloud.js
+++ b/src/players/SoundCloud.js
@@ -1,10 +1,9 @@
 import React from 'react'
 import loadScript from 'load-script'
 
-import propTypes from '../propTypes'
+import { propTypes, defaultProps } from '../props'
 import Base from './Base'
 
-const DEFAULT_CLIENT_ID = 'e8b6f84fbcad14c301ca1355cae1dea2'
 const SDK_URL = '//connect.soundcloud.com/sdk-2.0.0.js'
 const SDK_GLOBAL = 'SC'
 const RESOLVE_URL = '//api.soundcloud.com/resolve.json'
@@ -12,11 +11,7 @@ const MATCH_URL = /^https?:\/\/(soundcloud.com|snd.sc)\/([a-z0-9-]+\/[a-z0-9-]+)
 
 export default class SoundCloud extends Base {
   static propTypes = propTypes
-  static defaultProps = {
-    soundcloudConfig: {
-      clientId: DEFAULT_CLIENT_ID
-    }
-  }
+  static defaultProps = defaultProps
   static canPlay (url) {
     return MATCH_URL.test(url)
   }
diff --git a/src/players/Vimeo.js b/src/players/Vimeo.js
index 2f5d8529..4ecb4a29 100644
--- a/src/players/Vimeo.js
+++ b/src/players/Vimeo.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { stringify } from 'query-string'
 
-import propTypes from '../propTypes'
+import { propTypes, defaultProps } from '../props'
 import Base from './Base'
 
 const IFRAME_SRC = 'https://player.vimeo.com/video/'
@@ -18,9 +18,7 @@ const DEFAULT_IFRAME_PARAMS = {
 
 export default class Vimeo extends Base {
   static propTypes = propTypes
-  static defaultProps = {
-    vimeoConfig: {}
-  }
+  static defaultProps = defaultProps
   static canPlay (url) {
     return MATCH_URL.test(url)
   }
diff --git a/src/players/YouTube.js b/src/players/YouTube.js
index 06c517b7..50a95a74 100644
--- a/src/players/YouTube.js
+++ b/src/players/YouTube.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import loadScript from 'load-script'
 
-import propTypes from '../propTypes'
+import { propTypes, defaultProps } from '../props'
 import Base from './Base'
 
 const SDK_URL = '//www.youtube.com/iframe_api'
@@ -16,9 +16,7 @@ const DEFAULT_PLAYER_VARS = {
 
 export default class YouTube extends Base {
   static propTypes = propTypes
-  static defaultProps = {
-    youtubeConfig: {}
-  }
+  static defaultProps = defaultProps
   static canPlay (url) {
     return MATCH_URL.test(url)
   }
diff --git a/src/propTypes.js b/src/props.js
similarity index 57%
rename from src/propTypes.js
rename to src/props.js
index 178c746f..9afa2951 100644
--- a/src/propTypes.js
+++ b/src/props.js
@@ -1,6 +1,6 @@
 import { PropTypes } from 'react'
 
-export default {
+export const propTypes = {
   url: PropTypes.string,
   playing: PropTypes.bool,
   volume: PropTypes.number,
@@ -21,3 +21,25 @@ export default {
   onEnded: PropTypes.func,
   onError: PropTypes.func
 }
+
+export const defaultProps = {
+  playing: false,
+  width: 640,
+  height: 360,
+  volume: 0.8,
+  soundcloudConfig: {
+    clientId: 'e8b6f84fbcad14c301ca1355cae1dea2'
+  },
+  youtubeConfig: {
+    playerVars: {}
+  },
+  vimeoConfig: {
+    iframeParams: {}
+  },
+  onPlay: function () {},
+  onPause: function () {},
+  onBuffer: function () {},
+  onEnded: function () {},
+  onError: function () {},
+  onProgress: function () {}
+}

From 430307eed07e17ac690e4cdf55e28ebb14854e5e Mon Sep 17 00:00:00 2001
From: Pete Cook <pete@cookpete.com>
Date: Tue, 15 Dec 2015 11:37:05 +0000
Subject: [PATCH 4/6] Clean up shouldComponentUpdate logic

* All players now need to update when url changes
---
 src/players/Base.js       | 3 +++
 src/players/FilePlayer.js | 3 ---
 src/players/SoundCloud.js | 5 ++++-
 src/players/Vimeo.js      | 3 ---
 src/players/YouTube.js    | 3 ---
 5 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/players/Base.js b/src/players/Base.js
index 1f574380..b1ff9a2a 100644
--- a/src/players/Base.js
+++ b/src/players/Base.js
@@ -32,6 +32,9 @@ export default class Base extends Component {
       this.setVolume(nextProps.volume)
     }
   }
+  shouldComponentUpdate (nextProps) {
+    return this.props.url !== nextProps.url
+  }
   update = () => {
     let progress = {}
     const loaded = this.getFractionLoaded()
diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js
index 43a21ac5..49b7c582 100644
--- a/src/players/FilePlayer.js
+++ b/src/players/FilePlayer.js
@@ -21,9 +21,6 @@ export default class FilePlayer extends Base {
     this.player.onerror = this.props.onError
     super.componentDidMount()
   }
-  shouldComponentUpdate (nextProps) {
-    return this.props.url !== nextProps
-  }
   play (url) {
     this.player.play()
   }
diff --git a/src/players/SoundCloud.js b/src/players/SoundCloud.js
index 246a3a13..92b1b6b8 100644
--- a/src/players/SoundCloud.js
+++ b/src/players/SoundCloud.js
@@ -19,7 +19,10 @@ export default class SoundCloud extends Base {
     image: null
   }
   shouldComponentUpdate (nextProps, nextState) {
-    return this.state.image !== nextState.image
+    return (
+      super.shouldComponentUpdate(nextProps, nextState) ||
+      this.state.image !== nextState.image
+    )
   }
   getSDK () {
     if (window[SDK_GLOBAL]) {
diff --git a/src/players/Vimeo.js b/src/players/Vimeo.js
index 4ecb4a29..a5b8c83d 100644
--- a/src/players/Vimeo.js
+++ b/src/players/Vimeo.js
@@ -27,9 +27,6 @@ export default class Vimeo extends Base {
     this.iframe = this.refs.iframe
     super.componentDidMount()
   }
-  shouldComponentUpdate () {
-    return false
-  }
   play (url) {
     if (url) {
       const id = url.match(MATCH_URL)[3]
diff --git a/src/players/YouTube.js b/src/players/YouTube.js
index 50a95a74..f0bbf924 100644
--- a/src/players/YouTube.js
+++ b/src/players/YouTube.js
@@ -20,9 +20,6 @@ export default class YouTube extends Base {
   static canPlay (url) {
     return MATCH_URL.test(url)
   }
-  shouldComponentUpdate () {
-    return false
-  }
   getSDK () {
     if (window[SDK_GLOBAL]) {
       return Promise.resolve(window[SDK_GLOBAL])

From 31b7d3da24d64e32a0a7e558f254d01c348613f3 Mon Sep 17 00:00:00 2001
From: Pete Cook <pete@cookpete.com>
Date: Tue, 15 Dec 2015 11:52:20 +0000
Subject: [PATCH 5/6] Prime Youtube and Vimeo players with a blank video

Fixes https://github.com/CookPete/react-player/issues/7
---
 CHANGELOG.md              |  1 +
 README.md                 | 10 +++++++---
 src/ReactPlayer.js        | 13 +++++++++++--
 src/players/Base.js       | 20 +++++++++++---------
 src/players/FilePlayer.js |  9 +++++----
 src/players/SoundCloud.js | 10 +++++-----
 src/players/Vimeo.js      | 26 ++++++++++++++++----------
 src/players/YouTube.js    | 19 ++++++++++++++++---
 src/props.js              |  6 ++++--
 9 files changed, 76 insertions(+), 38 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 13fe1e89..2e75e6da 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file. This projec
 
 ### Unreleased
 
+* Fix [YouTube and Vimeo autoplay bug](https://github.com/CookPete/react-player/issues/7)
 * [Full commit list](https://github.com/CookPete/react-player/compare/v0.2.1...master)
 
 
diff --git a/README.md b/README.md
index 25f63b2f..1a4e2d49 100644
--- a/README.md
+++ b/README.md
@@ -65,9 +65,13 @@ These props allow you to override the parameters for the various players
 
 Prop | Description
 ---- | -----------
-soundcloudConfig | An object containing configuration for the SoundCloud player. Includes `clientId`, which can be used to override the default `client_id`
-vimeoConfig | An object containing configuration for the Vimeo player. Includes `iframeParams`, which maps to the [parameters accepted by the Vimeo iframe player](https://developer.vimeo.com/player/embedding#universal-parameters)
-youtubeConfig | An object containing configuration for the YouTube player. Includes `playerVars`, which maps to the [parameters accepted by the YouTube iframe player](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5)
+soundcloudConfig | Configuration object for the SoundCloud player. Set `clientId`, to your own SoundCloud app [client ID](https://soundcloud.com/you/apps)
+vimeoConfig | Configuration object for the Vimeo player. Set `iframeParams`, to override the [default params](https://developer.vimeo.com/player/embedding#universal-parameters). Set `preload` for [preloading](#preloading)
+youtubeConfig | Configuration object for the YouTube player. Set `playerVars`, to override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5). Set `preload` for [preloading](#preloading)
+
+##### Preloading
+
+Both `youtubeConfig` and `vimeoConfig` props can take a `preload` value. Setting this to `true` will play a short, silent video in the background when `ReactPlayer` first mounts. This fixes a [bug](https://github.com/CookPete/react-player/issues/7) where videos would not play when loaded in a background browser tab.
 
 ### Methods
 
diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
index 20bd9223..489708f3 100644
--- a/src/ReactPlayer.js
+++ b/src/ReactPlayer.js
@@ -25,8 +25,17 @@ export default class ReactPlayer extends Component {
   }
   renderPlayer = Player => {
     const active = Player.canPlay(this.props.url)
-    const props = active ? { ...this.props, ref: 'player' } : {}
-    return <Player key={Player.name} {...props} />
+    const { youtubeConfig, soundcloudConfig, vimeoConfig, ...activeProps } = this.props
+    const props = active ? { ...activeProps, ref: 'player' } : {}
+    return (
+      <Player
+        key={Player.name}
+        youtubeConfig={youtubeConfig}
+        soundcloudConfig={soundcloudConfig}
+        vimeoConfig={vimeoConfig}
+        {...props}
+      />
+    )
   }
   render () {
     const style = {
diff --git a/src/players/Base.js b/src/players/Base.js
index b1ff9a2a..545ce900 100644
--- a/src/players/Base.js
+++ b/src/players/Base.js
@@ -9,6 +9,9 @@ export default class Base extends Component {
   static defaultProps = defaultProps
   componentDidMount () {
     this.update()
+    if (this.props.url) {
+      this.load(this.props.url)
+    }
   }
   componentWillUnmount () {
     this.stop()
@@ -16,14 +19,12 @@ export default class Base extends Component {
   }
   componentWillReceiveProps (nextProps) {
     // Invoke player methods based on incoming props
-    if (this.props.url !== nextProps.url) {
-      if (nextProps.url) {
-        this.play(nextProps.url)
-        this.props.onProgress({ played: 0, loaded: 0 })
-      } else {
-        this.stop()
-        clearTimeout(this.updateTimeout)
-      }
+    if (this.props.url !== nextProps.url && nextProps.url) {
+      this.load(nextProps.url, nextProps.playing)
+      this.props.onProgress({ played: 0, loaded: 0 }) // Needed?
+    } else if (this.props.url && !nextProps.url) {
+      this.stop()
+      clearTimeout(this.updateTimeout)
     } else if (!this.props.playing && nextProps.playing) {
       this.play()
     } else if (this.props.playing && !nextProps.playing) {
@@ -52,7 +53,8 @@ export default class Base extends Component {
   }
   onReady = () => {
     this.setVolume(this.props.volume)
-    if (this.props.playing) {
+    if (this.props.playing || this.preloading) {
+      this.preloading = false
       this.play()
     }
   }
diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js
index 49b7c582..3f0a11d5 100644
--- a/src/players/FilePlayer.js
+++ b/src/players/FilePlayer.js
@@ -19,16 +19,18 @@ export default class FilePlayer extends Base {
     this.player.onpause = this.props.onPause
     this.player.onended = this.props.onEnded
     this.player.onerror = this.props.onError
-    super.componentDidMount()
   }
-  play (url) {
+  load (url) {
+    this.player.src = url
+  }
+  play () {
     this.player.play()
   }
   pause () {
     this.player.pause()
   }
   stop () {
-    // No need to stop
+    this.player.src = ''
   }
   seekTo (fraction) {
     this.player.currentTime = this.player.duration * fraction
@@ -50,7 +52,6 @@ export default class FilePlayer extends Base {
     return (
       <Media
         ref='player'
-        src={this.props.url}
         style={style}
         width={this.props.width}
         height={this.props.height}
diff --git a/src/players/SoundCloud.js b/src/players/SoundCloud.js
index 92b1b6b8..cb7fcb23 100644
--- a/src/players/SoundCloud.js
+++ b/src/players/SoundCloud.js
@@ -43,11 +43,7 @@ export default class SoundCloud extends Base {
     return fetch(RESOLVE_URL + '?url=' + url + '&client_id=' + this.props.soundcloudConfig.clientId)
       .then(response => response.json())
   }
-  play (url) {
-    if (!url && this.player) {
-      this.player.play()
-      return
-    }
+  load (url) {
     this.stop()
     this.getSDK().then(SC => {
       this.getSongData(url).then(data => {
@@ -79,6 +75,10 @@ export default class SoundCloud extends Base {
     onfinish: this.props.onFinish,
     ondataerror: this.props.onError
   }
+  play () {
+    if (!this.player) return
+    this.player.play()
+  }
   pause () {
     if (!this.player) return
     this.player.pause()
diff --git a/src/players/Vimeo.js b/src/players/Vimeo.js
index a5b8c83d..9daa3e0e 100644
--- a/src/players/Vimeo.js
+++ b/src/players/Vimeo.js
@@ -7,6 +7,7 @@ import Base from './Base'
 const IFRAME_SRC = 'https://player.vimeo.com/video/'
 const MATCH_URL = /https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/
 const MATCH_MESSAGE_ORIGIN = /^https?:\/\/player.vimeo.com/
+const BLANK_VIDEO_URL = 'https://vimeo.com/127250231'
 const DEFAULT_IFRAME_PARAMS = {
   api: 1,
   autoplay: 0,
@@ -25,19 +26,24 @@ export default class Vimeo extends Base {
   componentDidMount () {
     window.addEventListener('message', this.onMessage, false)
     this.iframe = this.refs.iframe
+
+    if (!this.props.url && this.props.vimeoConfig.preload) {
+      this.preloading = true
+      this.load(BLANK_VIDEO_URL)
+    }
+
     super.componentDidMount()
   }
-  play (url) {
-    if (url) {
-      const id = url.match(MATCH_URL)[3]
-      const iframeParams = {
-        ...DEFAULT_IFRAME_PARAMS,
-        ...this.props.vimeoConfig.iframeParams
-      }
-      this.iframe.src = IFRAME_SRC + id + '?' + stringify(iframeParams)
-    } else {
-      this.postMessage('play')
+  load (url) {
+    const id = url.match(MATCH_URL)[3]
+    const iframeParams = {
+      ...DEFAULT_IFRAME_PARAMS,
+      ...this.props.vimeoConfig.iframeParams
     }
+    this.iframe.src = IFRAME_SRC + id + '?' + stringify(iframeParams)
+  }
+  play () {
+    this.postMessage('play')
   }
   pause () {
     this.postMessage('pause')
diff --git a/src/players/YouTube.js b/src/players/YouTube.js
index f0bbf924..49c24de0 100644
--- a/src/players/YouTube.js
+++ b/src/players/YouTube.js
@@ -8,6 +8,7 @@ const SDK_URL = '//www.youtube.com/iframe_api'
 const SDK_GLOBAL = 'YT'
 const MATCH_URL = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/
 const PLAYER_ID = 'youtube-player'
+const BLANK_VIDEO_URL = 'https://www.youtube.com/watch?v=GlCmAC4MHek'
 const DEFAULT_PLAYER_VARS = {
   autoplay: 0,
   controls: 0,
@@ -20,6 +21,13 @@ export default class YouTube extends Base {
   static canPlay (url) {
     return MATCH_URL.test(url)
   }
+  componentDidMount () {
+    if (!this.props.url && this.props.youtubeConfig.preload) {
+      this.preloading = true
+      this.load(BLANK_VIDEO_URL)
+    }
+    super.componentDidMount()
+  }
   getSDK () {
     if (window[SDK_GLOBAL]) {
       return Promise.resolve(window[SDK_GLOBAL])
@@ -33,13 +41,14 @@ export default class YouTube extends Base {
       })
     })
   }
-  play (url) {
+  load (url, playing) {
     const id = url && url.match(MATCH_URL)[1]
     if (this.player) {
-      if (id) {
+      this.stop()
+      if (playing) {
         this.player.loadVideoById(id)
       } else {
-        this.player.playVideo()
+        this.player.cueVideoById(id)
       }
       return
     }
@@ -64,6 +73,10 @@ export default class YouTube extends Base {
     if (state.data === YT.PlayerState.BUFFERING) this.props.onBuffer()
     if (state.data === YT.PlayerState.ENDED) this.props.onEnded()
   }
+  play () {
+    if (!this.player) return
+    this.player.playVideo()
+  }
   pause () {
     if (!this.player) return
     this.player.pauseVideo()
diff --git a/src/props.js b/src/props.js
index 9afa2951..4d2f12f0 100644
--- a/src/props.js
+++ b/src/props.js
@@ -31,10 +31,12 @@ export const defaultProps = {
     clientId: 'e8b6f84fbcad14c301ca1355cae1dea2'
   },
   youtubeConfig: {
-    playerVars: {}
+    playerVars: {},
+    preload: false
   },
   vimeoConfig: {
-    iframeParams: {}
+    iframeParams: {},
+    preload: false
   },
   onPlay: function () {},
   onPause: function () {},

From 17fbef87e82889f01d8257900f7edc55b05918a2 Mon Sep 17 00:00:00 2001
From: Pete Cook <pete@cookpete.com>
Date: Tue, 15 Dec 2015 12:03:09 +0000
Subject: [PATCH 6/6] Move progress logic from players to top level component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Now we're rendering all players at once, we don't want multiple progress loops going at once
* Renamed `update` to `progress` – makes a bit more sense
---
 src/ReactPlayer.js  | 25 +++++++++++++++++++++++++
 src/players/Base.js | 19 -------------------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
index 489708f3..0c74a291 100644
--- a/src/ReactPlayer.js
+++ b/src/ReactPlayer.js
@@ -4,12 +4,20 @@ import 'array.prototype.find'
 import { propTypes, defaultProps } from './props'
 import players from './players'
 
+const PROGRESS_FREQUENCY = 500
+
 export default class ReactPlayer extends Component {
   static propTypes = propTypes
   static defaultProps = defaultProps
   static canPlay (url) {
     return players.some(player => player.canPlay(url))
   }
+  componentDidMount () {
+    this.progress()
+  }
+  componentWillUnmount () {
+    clearTimeout(this.progressTimeout)
+  }
   shouldComponentUpdate (nextProps) {
     return (
       this.props.url !== nextProps.url ||
@@ -23,6 +31,23 @@ export default class ReactPlayer extends Component {
       player.seekTo(fraction)
     }
   }
+  progress = () => {
+    if (this.props.url && this.refs.player) {
+      let progress = {}
+      const loaded = this.refs.player.getFractionLoaded()
+      const played = this.refs.player.getFractionPlayed()
+      if (!this.prevLoaded || loaded !== this.prevLoaded) {
+        progress.loaded = this.prevLoaded = loaded
+      }
+      if (!this.prevPlayed || played !== this.prevPlayed) {
+        progress.played = this.prevPlayed = played
+      }
+      if (progress.loaded || progress.played) {
+        this.props.onProgress(progress)
+      }
+    }
+    this.progressTimeout = setTimeout(this.progress, PROGRESS_FREQUENCY)
+  }
   renderPlayer = Player => {
     const active = Player.canPlay(this.props.url)
     const { youtubeConfig, soundcloudConfig, vimeoConfig, ...activeProps } = this.props
diff --git a/src/players/Base.js b/src/players/Base.js
index 545ce900..ec99f79e 100644
--- a/src/players/Base.js
+++ b/src/players/Base.js
@@ -2,20 +2,16 @@ import { Component } from 'react'
 
 import { propTypes, defaultProps } from '../props'
 
-const UPDATE_FREQUENCY = 500
-
 export default class Base extends Component {
   static propTypes = propTypes
   static defaultProps = defaultProps
   componentDidMount () {
-    this.update()
     if (this.props.url) {
       this.load(this.props.url)
     }
   }
   componentWillUnmount () {
     this.stop()
-    clearTimeout(this.updateTimeout)
   }
   componentWillReceiveProps (nextProps) {
     // Invoke player methods based on incoming props
@@ -36,21 +32,6 @@ export default class Base extends Component {
   shouldComponentUpdate (nextProps) {
     return this.props.url !== nextProps.url
   }
-  update = () => {
-    let progress = {}
-    const loaded = this.getFractionLoaded()
-    const played = this.getFractionPlayed()
-    if (!this.prevLoaded || loaded !== this.prevLoaded) {
-      progress.loaded = this.prevLoaded = loaded
-    }
-    if (!this.prevPlayed || played !== this.prevPlayed) {
-      progress.played = this.prevPlayed = played
-    }
-    if (progress.loaded || progress.played) {
-      this.props.onProgress(progress)
-    }
-    this.updateTimeout = setTimeout(this.update, UPDATE_FREQUENCY)
-  }
   onReady = () => {
     this.setVolume(this.props.volume)
     if (this.props.playing || this.preloading) {