<commit_before>import React from 'react';

// ROUTER
import {
  History
}
from 'react-router';
import reactMixin from 'react-mixin';

// COMPONENTS
import NavBar from './NavBar.js';
import Loading from './Loading.js'
import StreamLiveView from './StreamLiveView.js';

// UTILITIES
import Sound from '../../node_modules/react-sound';
import $ from '../../public/js/jquery-1.11.1.min';

var BASE_URL = window.protocol + document.location.host;

class StreamLive extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      status: "STOPPED",
      disabled: false,
      desc: "",
      name: "",
      broadcaster: "",
      broadcasterImage: "",
      streamImage: "",
      listenerLiveCount: "",
      listenerTotalCount: "",
      listenerMaxCount: "",
      heartCount: 0,
      creator: "",
      isLoading: true,
      image: "",
      soundcloud: "",
      website: "",
      websiteTitle: "",
      streamId: this.props.params.streamId || window.location.pathname.substr(8)
    }
  }

  componentDidMount() {
    this.fetchStreamData();

    //add bclient on handler here
    window.bClient.on('stream', function(data, meta) {
      if (meta.type === 'event') {
        if (meta.action === 'enterStream' || meta.action === 'leaveStream' || meta.action === 'upHeart') {
          console.log('onEnterStream-' + meta.streamId);
          if (meta.streamId === this.state.streamId) {

            $.ajax({
              url: BASE_URL + '/api/stream/' + this.state.streamId
            })
            .done((streamData) => {
              $.ajax({
                url: BASE_URL + '/api/user/' + streamData.creator
              })
              .done((userData) => {
                this.setState({
                  listenerLiveCount: streamData.listenerLiveCount,
                  listenerMaxCount: streamData.listenerMaxCount,
                  listenerTotalCount: streamData.listenerTotalCount,
                  heartCount: streamData.heartCountNum
                });
              });
            });
          }
        }
      }
    }.bind(this));
  
  }

  componentWillUnmount(){
    var PUT_NOLISTENER = BASE_URL + '/api/nolistener/' + this.state.streamId;
     $.ajax({
      url: PUT_NOLISTENER,
      method: 'PUT',
      contentType: "application/x-www-form-urlencoded",
      data: ''
    }).done((responseData) => {
      leaveStream(this.state.streamId);
    });
  }

  playSong() {
    this.setState({
      status: "PLAYING",
      disabled: true
    });
  }

  stopSong() {
    this.setState({
      status: "STOPPED",
      disabled: false
    });
  }

  addHeart() {
    var PUT_HEART = BASE_URL + '/api/stream/' + this.state.streamId;

    // As of iOS 9.3 and OSX 10.11, Safari does not support fetch
    $.ajax({
      url: PUT_HEART,
      method: 'PUT',
      contentType: "application/x-www-form-urlencoded",
      data: ''
    })
    .done((responseData) => {
      upHeart(this.props.params.streamId);
      this.setState({
        heartCount: responseData.heartCountNum.length > 5 ? '> 9,999' : responseData.heartCountNum
      });
    });
  }

  fetchStreamData() {
    $.ajax({
      url: BASE_URL + '/api/stream/' + this.state.streamId
    })
    .done((streamData) => {
      $.ajax({
        url: BASE_URL + '/api/user/' + streamData.creator
      })
      .done((userData) => {
        this.setState({
          name: streamData.name,
          broadcaster: streamData.broadcaster,
          desc: streamData.description,
          listenerLiveCount: streamData.listenerLiveCount,
          creator: streamData.creator,
          heartCount: streamData.heartCountNum,
          listenerMaxCount: streamData.listenerMaxCount,
          listenerTotalCount: streamData.listenerTotalCount,
          isLoading: false,
          broadcasterImage: userData.user.scAvatarUri,
          streamImage: streamData.streamImage,
          soundcloud: userData.user.scPermalink,
          website: userData.user.website,
          websiteTitle: userData.user.websiteTitle
        });
      });
    });
  }

  render() {
    var partial = <Loading />;

    if (!this.state.isLoading) {
      partial = <StreamLiveView
        state={this.state}
        playSong={this.playSong.bind(this)}
        stopSong={this.stopSong.bind(this)}
        addHeart={this.addHeart.bind(this)}
      />
    }
    return (
      <div>
        <div style={styles.container}>  
          <NavBar title={'Now Playing'} history={this.history} />
          {partial}
        </div>
        <commit_msg>Material Design and code styling.<commit_after>import React from 'react';

// ROUTER
import {
  History
}
from 'react-router';
import reactMixin from 'react-mixin';

// COMPONENTS
import NavBar from './NavBar.js';
import Loading from './Loading.js'
import StreamLiveView from './StreamLiveView.js';

// UTILITIES
import Sound from '../../node_modules/react-sound';
import $ from '../../public/js/jquery-1.11.1.min';

// MATERIAL UI
import Card from 'material-ui/lib/card/card';

var BASE_URL = window.protocol + document.location.host;

class StreamLive extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      status: "STOPPED",
      disabled: false,
      desc: "",
      name: "",
      broadcaster: "",
      broadcasterImage: "",
      streamImage: "",
      listenerLiveCount: "",
      listenerTotalCount: "",
      listenerMaxCount: "",
      heartCount: 0,
      creator: "",
      isLoading: true,
      image: "",
      soundcloud: "",
      website: "",
      websiteTitle: "",
      streamId: this.props.params.streamId || window.location.pathname.substr(8)
    }
  }

  componentDidMount() {
    this.fetchStreamData();

    window.bClient.on('stream', function(data, meta) {
      if (meta.type === 'event'
      && (meta.action === 'enterStream' || meta.action === 'leaveStream' || meta.action === 'upHeart')
      && meta.streamId === this.state.streamId) {
        $.ajax({
          url: BASE_URL + '/api/stream/' + this.state.streamId
        })
        .done((streamData) => {
          $.ajax({
            url: BASE_URL + '/api/user/' + streamData.creator
          })
          .done((userData) => {
            this.setState({
              listenerLiveCount: streamData.listenerLiveCount,
              listenerMaxCount: streamData.listenerMaxCount,
              listenerTotalCount: streamData.listenerTotalCount,
              heartCount: streamData.heartCountNum
            });
          });
        });
      }
    }.bind(this));
  
  }

  componentWillUnmount(){
    var PUT_NOLISTENER = BASE_URL + '/api/nolistener/' + this.state.streamId;
     $.ajax({
      url: PUT_NOLISTENER,
      method: 'PUT',
      contentType: "application/x-www-form-urlencoded",
      data: ''
    }).done((responseData) => {
      leaveStream(this.state.streamId);
    });
  }

  playSong() {
    this.setState({
      status: "PLAYING",
      disabled: true
    });
  }

  stopSong() {
    this.setState({
      status: "STOPPED",
      disabled: false
    });
  }

  addHeart() {
    var PUT_HEART = BASE_URL + '/api/stream/' + this.state.streamId;

    // As of iOS 9.3 and OSX 10.11, Safari does not support fetch
    $.ajax({
      url: PUT_HEART,
      method: 'PUT',
      contentType: "application/x-www-form-urlencoded",
      data: ''
    })
    .done((responseData) => {
      upHeart(this.props.params.streamId);
      this.setState({
        heartCount: responseData.heartCountNum.length > 5 ? '> 9,999' : responseData.heartCountNum
      });
    });
  }

  fetchStreamData() {
    $.ajax({
      url: BASE_URL + '/api/stream/' + this.state.streamId
    })
    .done((streamData) => {
      $.ajax({
        url: BASE_URL + '/api/user/' + streamData.creator
      })
      .done((userData) => {
        this.setState({
          name: streamData.name,
          broadcaster: streamData.broadcaster,
          desc: streamData.description,
          listenerLiveCount: streamData.listenerLiveCount,
          creator: streamData.creator,
          heartCount: streamData.heartCountNum,
          listenerMaxCount: streamData.listenerMaxCount,
          listenerTotalCount: streamData.listenerTotalCount,
          isLoading: false,
          broadcasterImage: userData.user.scAvatarUri,
          streamImage: streamData.streamImage,
          soundcloud: userData.user.scPermalink,
          website: userData.user.website,
          websiteTitle: userData.user.websiteTitle
        });
      });
    });
  }

  render() {
    var partial = <Loading />;

    if (!this.state.isLoading) {
      partial = <StreamLiveView
        state={this.state}
        playSong={this.playSong.bind(this)}
        stopSong={this.stopSong.bind(this)}
        addHeart={this.addHeart.bind(this)}
      />
    }
    return (
      <div>
        <Card style={styles.container}>
          <NavBar title={'Now Playing'} history={this.history} />
          {partial}
        </Card>
        
{'fraction_non_alphanumeric': 0.14258639910813825, 'fraction_numerical': 0.00379041248606466, 'mean_word_length': 2.1279637377963736, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, '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': '912379', 'n_tokens_mistral': 2773, 'n_tokens_neox': 2678, 'n_words': 485}