<commit_before>/**
 * Created by chandransh on 7/12/16.
 */
import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {browserHistory, Link} from 'react-router';

import './Player.css';
import Loader from '../../components/Loader/Loader';
import '../../utils/soundcloud-api';

class Player extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tracks: this.props.getTracksByGenre,
      urlParamsForPlayer: '&liking=false&download=false&buying=false&sharing=false&show_comments=false&show_user=false'
    };
  }

  componentWillMount() {
    const {location, params} = this.props;
    location.state == null && params.genreName !== location.state && browserHistory.push('/music-player/genres');
  }

  handleTrackClick = (trackUrl) => {
    document.getElementById('sc-widget').src = "https://w.soundcloud.com/player/?url=" + trackUrl + this.state.urlParamsForPlayer;
  };

  render() {
    const {getTracksByGenre, params} = this.props;
    const {urlParamsForPlayer} = this.state;
    const _self = this;

    let tracksItem = getTracksByGenre.data.length > 0 && getTracksByGenre.data.map(function(trackObj,i) {
      let track = trackObj.track;
      return <li className="clearfix"
                 key={i} uri={track.uri}
                 onClick={_self.handleTrackClick.bind(null, track.uri)}>
        <div>
          <img src={track.artwork_url}
               alt={track.artwork_url}/>
          <p title={track.title || "Not Available"}
             className="track-title">
            <strong>{track.title || "Not Available"}</strong>
          </p>
          <p className="artist-name">by {track.publisher_metadata && track.publisher_metadata.artist || "Not Available"}</p>
          <p>
            <small>Album: {track.publisher_metadata && track.publisher_metadata.release_title || "Not Available"}</small>
          </p>
          <p className="user-info">
            <small>
              <em>Uploaded by {track.user && track.user.full_name || "Not Available"}</em>
            </small>
          </p>
        </div>
      </li>;
    });

    return (
      (tracksItem.length > 0) ? <div className="col-sm-12 center-block"
           style={{background: '#ffffff'}}>
        <Link to="/music-player/genres"
              className="btn btn-link">
          &lt; Back to Genres Page
        </Link>
        <h1 className="text-center">Popular songs in {params.genreName}</h1><commit_msg>Heading changed<commit_after>/**
 * Created by chandransh on 7/12/16.
 */
import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {browserHistory, Link} from 'react-router';

import './Player.css';
import Loader from '../../components/Loader/Loader';
import '../../utils/soundcloud-api';

class Player extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tracks: this.props.getTracksByGenre,
      urlParamsForPlayer: '&liking=false&download=false&buying=false&sharing=false&show_comments=false&show_user=false'
    };
  }

  componentWillMount() {
    const {location, params} = this.props;
    location.state == null && params.genreName !== location.state && browserHistory.push('/music-player/genres');
  }

  handleTrackClick = (trackUrl) => {
    document.getElementById('sc-widget').src = "https://w.soundcloud.com/player/?url=" + trackUrl + this.state.urlParamsForPlayer;
  };

  render() {
    const {getTracksByGenre, params} = this.props;
    const {urlParamsForPlayer} = this.state;
    const _self = this;

    let tracksItem = getTracksByGenre.data.length > 0 && getTracksByGenre.data.map(function(trackObj,i) {
      let track = trackObj.track;
      return <li className="clearfix"
                 key={i} uri={track.uri}
                 onClick={_self.handleTrackClick.bind(null, track.uri)}>
        <div>
          <img src={track.artwork_url}
               alt={track.artwork_url}/>
          <p title={track.title || "Not Available"}
             className="track-title">
            <strong>{track.title || "Not Available"}</strong>
          </p>
          <p className="artist-name">by {track.publisher_metadata && track.publisher_metadata.artist || "Not Available"}</p>
          <p>
            <small>Album: {track.publisher_metadata && track.publisher_metadata.release_title || "Not Available"}</small>
          </p>
          <p className="user-info">
            <small>
              <em>Uploaded by {track.user && track.user.full_name || "Not Available"}</em>
            </small>
          </p>
        </div>
      </li>;
    });

    return (
      (tracksItem.length > 0) ? <div className="col-sm-12 center-block"
           style={{background: '#ffffff'}}>
        <Link to="/music-player/genres"
              className="btn btn-link">
          &lt; Back to Genres Page
        </Link>
        <h1 className="text-center">Popular songs</h1>
{'fraction_non_alphanumeric': 0.15462889066241023, 'fraction_numerical': 0.004389465283320032, 'mean_word_length': 2.7216035634743876, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 61, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1869564', 'n_tokens_mistral': 1547, 'n_tokens_neox': 1518, 'n_words': 294}