{"size": 3448, "ext": "js", "max_stars_repo_path": "client/src/media/PlayMedia.js", "max_stars_repo_name": "cocoli89/Video_stream_webapp", "max_stars_repo_stars_event_min_datetime": "2021-06-02T19:40:50.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-30T20:14:17.000Z", "max_issues_repo_path": "client/src/media/PlayMedia.js", "max_issues_repo_name": "cocoli89/Video_stream_webapp", "max_issues_repo_issues_event_min_datetime": "2021-05-10T23:26:34.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-19T03:32:52.000Z", "max_forks_repo_path": "client/src/media/PlayMedia.js", "max_forks_repo_name": "cocoli89/Video_stream_webapp", "max_forks_repo_forks_event_min_datetime": "2021-02-01T16:39:36.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-25T11:39:24.000Z"}
{"max_stars_count": 11, "max_issues_count": 4, "max_forks_count": 7, "avg_line_length": 28.7333333333, "max_line_length": 100, "alphanum_fraction": 0.5417633411}
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {withStyles} from '@material-ui/core/styles'
import Grid from '@material-ui/core/Grid'
import {read, listRelated} from './api-media.js'
import Media from './Media'
import RelatedMedia from './RelatedMedia'
import { FormControlLabel } from '@material-ui/core/'
import Switch from '@material-ui/core/Switch'

const styles = theme => ({
  root: {
    flexGrow: 1,
    margin: 30,
  },
  toggle: {
    float: 'right',
    marginRight: '30px',
    marginTop:' 10px'
  }
})

class PlayMedia extends Component {
  constructor({match}) {
    super()
    this.state = {
      media: {postedBy: {}},
      relatedMedia: [],
      autoPlay: false
    }
    this.match = match
  }
  loadMedia = (mediaId) => {
    read({mediaId: mediaId}).then((data) => {
      if (data.error) {
        this.setState({error: data.error})
      } else {
        this.setState({media: data})
          listRelated({
            mediaId: data._id}).then((data) => {
            if (data.error) {
              console.log(data.error)
            } else {
              this.setState({relatedMedia: data})
            }
          })
      }
    })
  }
  componentDidMount = () => {
    this.loadMedia(this.match.params.mediaId)
  }
  componentWillReceiveProps = (props) => {
    this.loadMedia(props.match.params.mediaId)
  }
  handleChange = (event) => {
   this.setState({ autoPlay: event.target.checked })
  }
  handleAutoplay = (updateMediaControls) => {
    let playList = this.state.relatedMedia
    let playMedia = playList[0]
    if(!this.state.autoPlay || playList.length === 0 )
      return updateMediaControls()

    if(playList.length > 1){
      playList.shift()
      this.setState({media: playMedia, relatedMedia:playList})
    }else{
      listRelated({
          mediaId: playMedia._id}).then((data) => {
            if (data.error) {
             console.log(data.error)
            } else {
             this.setState({media: playMedia, relatedMedia: data})
            }
         })
    }
  }
  render() {
    //render SSR data
    if (this.props.data && this.props.data[0] != null) {
        this.setState({media: this.props.data[0]})    
        this.setState({relatedMedia: []})  
    }

    const nextUrl = this.state.relatedMedia.length > 0
          ? `/media/${this.state.relatedMedia[0]._id}` : ''
    const {classes} = this.props
    return (
      <div className={classes.root}>
        <Grid container spacing={24}>
          <Grid item xs={8} sm={8}>
            <Media media={this.state.media} nextUrl={nextUrl} handleAutoplay={this.handleAutoplay}/>
          </Grid>
          {this.state.relatedMedia.length > 0
            && (<Grid item xs={4} sm={4}>
                    <FormControlLabel className = {classes.toggle}
                        control={
                          <Switch
                            checked={this.state.autoPlay}
                            onChange={this.handleChange}
                            color="primary"
                          />
                        }
                        label={this.state.autoPlay ? 'Autoplay ON':'Autoplay OFF'}
                    />
                  <RelatedMedia media={this.state.relatedMedia}/>
                </Grid>)
           }
        </Grid>
      </div>)
  }
}

PlayMedia.propTypes = {
  classes: PropTypes.object.isRequired
}

export default withStyles(styles)(PlayMedia)
