Always render every player

src/ReactPlayer.js

@@ -18,34 +18,32 @@ 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
     if (player) {
       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>
     )
   }

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) {

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}
       />

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',

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%'
     }

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} />
   }
 }

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')
+}