'use strict'
 
import React from 'react'
import ApPeerCamera from '../../lib/ap_peer_camera'
import ApPeerScreen from '../../lib/ap_peer_screen'
import {
  ApButton
} from 'apeman-react-basic'
 
const Demo = React.createClass({
  getInitialState () {
    return {
      streaming: false
    }
  },
  render () {
    const s = this
    let { state } = s
    return (
      <div>
        <fieldset>
          <legend>Video</legend>
          <ApPeerCamera peerId="demo-peer-01"
                        peerOptions={
                                    {
                                        key:'___your_key___'
                                    }
                                 }
                        peerEnabled={state.streaming}
                        onError={(err) => console.error(err)}
          />
          <ApButton onTap={s._startStreaming}>Start</ApButton>
          <ApButton onTap={s._stopStreaming}>Stop</ApButton>
        </fieldset>
        <fieldset>
          <legend>Camera</legend>
          <ApPeerScreen peerId="demo-peer-01"
                        peerOptions={
                                    {
                                        key:'___your_key___'
                                    }
                                 }
                        peerEnabled={state.streaming}
          />
        </fieldset>
      </div>
    )
  },
  _startStreaming() {
    const s = this
    s.setState({ streaming: true })
  },
  _stopStreaming() {
    const s = this
    s.setState({ streaming: false })
  }
})
 
export default Demo