mahaplatform/reframe

import ModalPanel from '../../components/modal_panel'
import Message from '../../components/message'
import Loader from '../../components/loader'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import React from 'react'

class Picker extends React.Component{

  static contextTypes = {
    form: PropTypes.object
  }

  static propTypes = {
    src: PropTypes.string,
    status: PropTypes.string,
    onCreateLink: PropTypes.func
  }

  _handleBack = this._handleBack.bind(this)
  _handleDone = this._handleDone.bind(this)

  render() {
    const { status } = this.props
    return (
      <ModalPanel { ...this._getPanel() }>
        <div className="reframe-videofield-picker">
          <div className="reframe-videofield-picker-header">
            <input { ...this._getInput() } />
          </div>
          <div className="reframe-videofield-picker-body">
            { status === 'pending' &&
              <Message { ...this._getPendingMessage() } />
            }
            { status === 'loading' &&
              <Loader />
            }
            { status === 'success' &&
              <div className="reframe-videofield-player">
                <iframe { ...this._getIframe()} />
              </div>
            }
            { status === 'failure' &&
              <Message { ...this._getFailureMessage() } />
            }
          </div>
        </div>
      </ModalPanel>
    )
  }

  _getPendingMessage() {
    return {
      icon: 'play',
      title: 'Paste URL',
      text: 'Paste the url of a video to preiew its contents'
    }
  }

  _getPanel() {
    return {
      title: 'Choose Video',
      leftItems: [
        { icon: 'chevron-left', handler: this._handleBack }
      ],
      rightItems: [
        { label: 'Done', handler: this._handleDone }
      ]
    }
  }

  _getIframe() {
    const { src } = this.props
    return {
      src,
      frameBorder: 0,
      allowFullScreen: true
    }
  }

  _getInput() {
    return {
      type: 'text',
      placeholder: 'Paste a YouTube or Vimeo URL',
      onChange: this._handleChange.bind(this)
    }
  }

  _getFailureMessage() {
    return {
      icon: 'remove',
      title: 'Unable to load',
      text: 'We were unable to load your url and play the video'
    }
  }

  _handleBack() {
    this.context.form.pop()
  }

  _handleChange(e) {
    this.props.onCreateLink(e.target.value)
  }

  _handleDone() {
    this.context.form.pop()
  }

}

const mapStateToProps = (state, props) => ({
  src: state.reframe.videofield[props.cid].src,
  status: state.reframe.videofield[props.cid].status
})

export default connect(mapStateToProps)(Picker)