<commit_before>import PropTypes from 'prop-types'
import React from 'react'
import YouTube from 'react-youtube'

class YouTubePlayer extends React.Component {
  static propTypes = {
    queueItem: PropTypes.object.isRequired,
    isPlaying: PropTypes.bool.isRequired,
    width: PropTypes.number.isRequired,
    height: PropTypes.number.isRequired,
    volume: PropTypes.number.isRequired,
    onMediaError: PropTypes.func.isRequired, // action
    onMediaEnd: PropTypes.func.isRequired, // action
    onStatus: PropTypes.func.isRequired, // action
  }

  componentWillUnmount () {
    clearInterval(this.statusTimer)
  }

  componentDidUpdate (prevProps, prevState) {
    this.updateIsPlaying()
    this.setVolume(this.props.volume)
  }

  render () {
    const { width, height, queueItem } = this.props
    if (!queueItem) return null

    const opts = {
      width,
      height,
      // https://developers.google.com/youtube/player_parameters
      playerVars: {
        autoplay: 0,
        controls: 0,
        disablekb: 1,
        fs: 0,
        rel: 0,
      }
    }

    return (
      <div style={{ width, height }}>
        <YouTube
          videoId={queueItem.providerData.videoId}
          opts={opts}
          onReady={this.handleReady}
          onStateChange={this.handleStateChange}
          onError={this.handleError}
          onEnd={this.props.onMediaEnd}
        />
      </div>
    )
  }

  handleReady = (event) => {
    this.player = event.target
    this.player.setVolume(this.props.volume * 100)

    this.updateIsPlaying()
  }

  handleStateChange = (event) => {
    switch (event.data) {
      case 1:
        // playing; need to poll position (vroom vroom!)
        clearInterval(this.statusTimer)
        this.statusTimer = setInterval(this.onStatus, 1000)
        break
      case 2:
        // paused; cancel polling
        clearInterval(this.statusTimer)
        break
      case 3:
        // buffering; not much we can do here
        return
      case 5:
        // cued; if we're playing, play!
        this.updateIsPlaying()
        break
    }

    // most codes trigger a status emit
    this.onStatus()
  }

  onStatus = () => {
    this.props.onStatus({
      position: this.player.getCurrentTime(),
      volume: this.player.getVolume() / 100,
    })
  }

  handleError = (event) => {
    this.props.onMediaError('Error ' + event.data)
  }

  setVolume = (vol) => {
    this.player.setVolume(vol * 100)
  }

  updateIsPlaying = () => {
    if (this.props.isPlaying) {
      this.player.playVideo()
    } else {
      this.player.pauseVideo()
    }
  }
}

export default YouTubePlayer<commit_msg>Fix referencing player before it's ready<commit_after>import PropTypes from 'prop-types'
import React from 'react'
import YouTube from 'react-youtube'

class YouTubePlayer extends React.Component {
  static propTypes = {
    queueItem: PropTypes.object.isRequired,
    isPlaying: PropTypes.bool.isRequired,
    width: PropTypes.number.isRequired,
    height: PropTypes.number.isRequired,
    volume: PropTypes.number.isRequired,
    onMediaError: PropTypes.func.isRequired, // action
    onMediaEnd: PropTypes.func.isRequired, // action
    onStatus: PropTypes.func.isRequired, // action
  }

  componentWillUnmount () {
    clearInterval(this.statusTimer)
  }

  componentDidUpdate (prevProps, prevState) {
    this.updateIsPlaying()
    this.setVolume(this.props.volume)
  }

  render () {
    const { width, height, queueItem } = this.props
    if (!queueItem) return null

    const opts = {
      width,
      height,
      // https://developers.google.com/youtube/player_parameters
      playerVars: {
        autoplay: 0,
        controls: 0,
        disablekb: 1,
        fs: 0,
        rel: 0,
      }
    }

    return (
      <div style={{ width, height }}>
        <YouTube
          videoId={queueItem.providerData.videoId}
          opts={opts}
          onReady={this.handleReady}
          onStateChange={this.handleStateChange}
          onError={this.handleError}
          onEnd={this.props.onMediaEnd}
        />
      </div>
    )
  }

  handleReady = (event) => {
    this.player = event.target
    this.player.setVolume(this.props.volume * 100)

    this.updateIsPlaying()
  }

  handleStateChange = (event) => {
    switch (event.data) {
      case 1:
        // playing; need to poll position (vroom vroom!)
        clearInterval(this.statusTimer)
        this.statusTimer = setInterval(this.onStatus, 1000)
        break
      case 2:
        // paused; cancel polling
        clearInterval(this.statusTimer)
        break
      case 3:
        // buffering; not much we can do here
        return
      case 5:
        // cued; if we're playing, play!
        this.updateIsPlaying()
        break
    }

    // most codes trigger a status emit
    this.onStatus()
  }

  onStatus = () => {
    this.props.onStatus({
      position: this.player.getCurrentTime(),
      volume: this.player.getVolume() / 100,
    })
  }

  handleError = (event) => {
    this.props.onMediaError('Error ' + event.data)
  }

  setVolume = (vol) => {
    this.player.setVolume(vol * 100)
  }

  updateIsPlaying = () => {
    if (this.player) {
      this.props.isPlaying ? this.player.playVideo() : this.player.pauseVideo()
    }
  }
}

export default YouTubePlayer
{'fraction_non_alphanumeric': 0.11550037622272386, 'fraction_numerical': 0.008276899924755455, 'mean_word_length': 2.292260061919505, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 21, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2647172', 'n_tokens_mistral': 1673, 'n_tokens_neox': 1608, 'n_words': 334}