<commit_before>import React from 'react';
import ReactDOM from 'react-dom';
// import Player from './player';
import Youtube from 'react-youtube';
import io from 'socket.io-client';

class PlayerApp extends React.Component {
  constructor() {
    super();
    this.state = { 
      urls : []
    };
    this.handlePlayerEnd = this.handlePlayerEnd.bind(this);
    this.socket = io.connect('http://localhost:3000');
    this.initSocket();
  }
  initSocket () {
    this.socket.on('newdata', (data) => {
      $.ajax("http://localhost:3000/queue").done((data) => {
        this.setState({urls: data});
      });
    });
  }
  componentDidMount(){
    $.get("http://localhost:3000/queue").done((data) => {
      this.setState({urls: data});
    });

  }
  handleStateChange(event){
    if(event.data === 5){
      event.target.playVideo();
    }
  }

  handlePlayerEnd(event){
    // swap out video for Youtube Player
    // Make request to server to notify all clients that the video ended
    //  so they can remove the video from the queue 
    //  another get request or just remove top item
    let newUrls = this.state.urls.slice();
    newUrls.shift();
    this.setState({urls: newUrls});
    $.ajax({  // TODO pre flight cross origin errors. switch to put with body parameters
      url: "http://localhost:3000/queue",
      type: 'DELETE',
      success: function(result) {
          this.setState({url: data});
      }
    });
  }

  render() {
    // Can we make it so the current video played is not 
    // displayed in the queue?
    if(this.state.urls.length > 1)
    var videoUrl = this.state.urls[0].split('=')[1];
    return (
    <div className="youtube-wrapper">
      <Youtube videoId={videoUrl} onEnd={this.handlePlayerEnd} onStateChange={this.handleStateChange}/>
    </div>
    );
  }
}

export default PlayerApp;
<commit_msg>feat: renders QueueList to PlayerApp<commit_after>import React from 'react';
import ReactDOM from 'react-dom';
// import Player from './player';
import Youtube from 'react-youtube';
import io from 'socket.io-client';
import QueueList from './queuelist';

class PlayerApp extends React.Component {
  constructor() {
    super();
    this.state = { 
      urls : []
    };
    this.handlePlayerEnd = this.handlePlayerEnd.bind(this);
    this.socket = io.connect('http://localhost:3000');
    this.initSocket();
  }
  initSocket () {
    this.socket.on('newdata', (data) => {
      console.log("got new data");
      $.ajax("http://localhost:3000/queue").done((data) => {
        this.setState({urls: data});
      });
    });
  }
  componentDidMount(){
    $.get("http://localhost:3000/queue").done((data) => {
      this.setState({urls: data});
    });

  }
  handleStateChange(event){
    if(event.data === 5){
      event.target.playVideo();
    }
  }

  handlePlayerEnd(event){
    // swap out video for Youtube Player
    // Make request to server to notify all clients that the video ended
    //  so they can remove the video from the queue 
    //  another get request or just remove top item
    let newUrls = this.state.urls.slice();
    newUrls.shift();
    this.setState({urls: newUrls});
    // $.ajax({  // TODO pre flight cross origin errors. switch to put with body parameters
    //   url: "http://localhost:3000/queue",
    //   type: 'DELETE',
    //   success: function(result) {
    //       this.setState({url: data});
    //   }
    // });
  }

  render() {
    // Can we make it so the current video played is not 
    // displayed in the queue?
    if(this.state.urls.length > 1)
    var videoUrl = this.state.urls[0].split('=')[1];
    return (
    <div className="youtube-wrapper">
      <Youtube videoId={videoUrl} onEnd={this.handlePlayerEnd} onStateChange={this.handleStateChange}/>
      <QueueList queues={this.state.urls}/>
    </div>
    );
  }
}

export default PlayerApp;

{'fraction_non_alphanumeric': 0.1557632398753894, 'fraction_numerical': 0.010384215991692628, 'mean_word_length': 2.7444120505344993, 'pattern_counts': {'":': 0, '<': 10, '<?xml version=': 0, '>': 18, 'https://': 0, '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': '5857849', 'n_tokens_mistral': 1214, 'n_tokens_neox': 1183, 'n_words': 297}