import React, { PropTypes } from 'react'
import { AutoSizer } from 'react-virtualized'
import ProviderPlayers from './provider'
import screenfull from 'screenfull'

class PlayerView extends React.Component {
  static propTypes = {
    // queue
    queueId: PropTypes.number,
    song: PropTypes.object,
    isPlaying: PropTypes.bool.isRequired,
    isAtQueueEnd: PropTypes.bool.isRequired,
    isErrored:  PropTypes.bool.isRequired,
    // actions
    requestPlayNext: PropTypes.func.isRequired,
    emitStatus: PropTypes.func.isRequired,
    getMedia: PropTypes.func.isRequired,
    getMediaSuccess: PropTypes.func.isRequired,
    mediaError: PropTypes.func.isRequired,
    cancelStatus: PropTypes.func.isRequired,
    // player misc
    isFetching: PropTypes.bool.isRequired,
  }

  toggleFullscreen = this.toggleFullscreen.bind(this)

  componentDidMount() {
    // emit initial state
    this.props.emitStatus({
      queueId: this.props.queueId,
      pos: 0,
      isPlaying: this.props.isPlaying,
    })
  }

  componentDidUpdate(prevProps) {
    if (this.props.isPlaying && !prevProps.isPlaying) {
      // playing for first time, after queue end, or after error
      if (this.props.queueId === -1 || this.props.isAtQueueEnd || this.props.isErrored) {
        this.props.requestPlayNext()
      }
    }
  }

  componentWillUpdate(nextProps, nextState) {
    // cancel any queued (throttled) updates for prev item
    if (this.props.queueId !== nextProps.queueId) {
      this.props.cancelStatus()
    }

    // cancel queued updates that would have outdated isPlaying: true
    if ((this.props.isAtQueueEnd !== nextProps.isAtQueueEnd) && nextProps.isAtQueueEnd) {
      this.props.cancelStatus()
    }
  }

  render () {
    const song = this.props.song
    let Component = 'div'
    let componentProps

    if (this.props.isAtQueueEnd) {
      // show 'add more songs' placeholder
    } else if (!song) {
      // show 'press play to begin' placeholder
    } else if (!ProviderPlayers[song.provider]) {
      // show 'provider error' placeholder
      this.props.mediaError(this.props.queueId, 'No provider for type: "'+song.provider+'"')
    } else {
      Component = ProviderPlayers[song.provider]
      componentProps = {
        queueId: this.props.queueId,
        item: song,
        isPlaying: this.props.isPlaying,
        getMedia: this.props.getMedia,
        getMediaSuccess: this.props.getMediaSuccess,
        onStatus: this.props.emitStatus,
        onMediaError: this.props.mediaError,
        onMediaEnd: this.props.requestPlayNext,
      }
    }

    return (
      <div style={{flex: '1 1 auto', width: '100%' }}
        ref={ref => {this.ref = ref}}
        onDoubleClick={this.toggleFullscreen}
      >
        <AutoSizer>
          {({width, height}) => (
            <Component width={width} height={height} {...componentProps}/>
          )}
        </AutoSizer>
      </div>
    )
  }

  toggleFullscreen() {
    screenfull.toggle(this.ref)
  }
}

export default PlayerView

@@ -34,16 +34,58 @@
 'react'%0A
+import AppLayout from 'layouts/AppLayout'%0A
 import %7B
@@ -2634,62 +2634,128 @@
    %3C
-div style=%7B%7Bflex: '1 1 auto', width: '100%25' %7D%7D%0A       
+AppLayout title=%22Player%22%3E%0A        %3CAutoSizer%3E%0A          %7B(%7Bwidth, height%7D) =%3E (%0A            %3Cdiv style=%7B%7Bwidth, height%7D%7D
  ref
@@ -2780,24 +2780,16 @@
  = ref%7D%7D
-%0A       
  onDoubl
@@ -2822,71 +2822,12 @@
 een%7D
-%0A      
 %3E%0A  
-      %3CAutoSizer%3E%0A          %7B(%7Bwidth, height%7D) =%3E (%0A
     
@@ -2874,16 +2874,17 @@
 %7Bheight%7D
+ 
  %7B...com
@@ -2898,16 +2898,35 @@
 rops%7D/%3E%0A
+            %3C/div%3E%0A
         
@@ -2955,27 +2955,33 @@
 er%3E%0A      %3C/
-div
+AppLayout
 %3E%0A    )%0A  %7D%0A

Fix PlayerView layout and fullscreen mode