<commit_before>'use strict';

var React = require('react/addons');
var Slider = require('./Slider.jsx');
var PlayerActions = require('../actions/PlayerActions');
var PlayerStore = require('../stores/PlayerStore');
var SettingsStore = require('../stores/SettingsStore');

module.exports = React.createClass({
  getInitialState: function () {
    return {
      playing: PlayerStore.isPlaying(),
      volume: PlayerStore.getVolume()
    };
  },
  componentDidMount: function () {
    PlayerStore.addChangeListener(this._onChange);
    if (SettingsStore.get('autoplay')) PlayerActions.play();
  },
  componentWillUnmount: function () {
    PlayerStore.removeChangeListener(this._onChange);
  },
  _onChange: function () {
    this.setState({
      playing: PlayerStore.isPlaying(),
      volume: PlayerStore.getVolume()
    });
  },
  _setVolume: function (perc) {
    PlayerActions.volume(perc);
  },
  _play: function (event) {
    event.preventDefault();
    PlayerActions.play();
  },
  _stop: function (event) {
    event.preventDefault();
    PlayerActions.stop();
  },
  _navigate: function (view) {
    return function (event) {
      event.preventDefault();
      this.props.onNavigate(view);
    }.bind(this);
  },
  render: function () {
    var cx = React.addons.classSet;
    var playBtn;
    if (this.state.playing) {
      playBtn = <a href onClick={this._stop}><i className="fa fa-stop"></i></a>;
    } else {
      playBtn = <a href onClick={this._play}><i className="fa fa-play"></i></a>;
    }

    return (
      <div className="row masthead">
        <div className="col-xs-12">
          <ul className="nav masthead-nav pull-right">
            <li className="volume">
              <i className="fa fa-volume-up"></i>
              <Slider perc={this.state.volume} onChange={this._setVolume} />
            </li>
            <li>{playBtn}</li>
            <li className={cx({ active: this.props.view === 'current' })}><a href onClick={this._navigate('current')}>Playing</a></li>
            <li className={cx({ active: this.props.view === 'history' })}><a href onClick={this._navigate('history')}>History</a></li>
            <li className={cx({ active: this.props.view === 'settings' })}><a href onClick={this._navigate('settings')}><i className="fa fa-cogs"></i></a></li>
          </ul>
          <h3 className="masthead-brand">Jukebox</h3>
          <h3 className="fa fa-music"></h3>
        </div>
      </div><commit_msg>update header components<commit_after>'use strict';

var React = require('react/addons');
var Slider = require('./Slider.jsx');
var PlayerActions = require('../actions/PlayerActions');
var PlayerStore = require('../stores/PlayerStore');
var SettingsStore = require('../stores/SettingsStore');

module.exports = React.createClass({
  getInitialState: function () {
    return {
      playing: PlayerStore.isPlaying(),
      volume: PlayerStore.getVolume()
    };
  },
  componentDidMount: function () {
    PlayerStore.addChangeListener(this._onChange);
    if (SettingsStore.get('autoplay')) PlayerActions.play();
  },
  componentWillUnmount: function () {
    PlayerStore.removeChangeListener(this._onChange);
  },
  _onChange: function () {
    this.setState({
      playing: PlayerStore.isPlaying(),
      volume: PlayerStore.getVolume()
    });
  },
  _setVolume: function (perc) {
    PlayerActions.volume(perc);
  },
  _play: function (event) {
    event.preventDefault();
    PlayerActions.play();
  },
  _stop: function (event) {
    event.preventDefault();
    PlayerActions.stop();
  },
  _navigate: function (view) {
    return function (event) {
      event.preventDefault();
      this.props.onNavigate(view);
    }.bind(this);
  },
  render: function () {
    var cx = React.addons.classSet;
    var playBtn;
    if (this.state.playing) {
      playBtn = <a href onClick={this._stop}><i className="fa fa-stop"></i></a>;
    } else {
      playBtn = <a href onClick={this._play}><i className="fa fa-play"></i></a>;
    }

    return (
      <div className="row masthead">
        <div className="col-xs-12">
          <ul className="nav masthead-nav pull-right">
            <li className="volume">
              <i className="fa fa-volume-up"></i>
              <Slider perc={this.state.volume} onChange={this._setVolume} />
            </li>
            <li>{playBtn}</li>
            <li className={cx({ active: this.props.view === 'current' })}><a href onClick={this._navigate('current')}>Playing</a></li>
            <li className={cx({ active: this.props.view === 'history' })}><a href onClick={this._navigate('history')}>History</a></li>
            <li className={cx({ active: this.props.view === 'settings' })}><a href onClick={this._navigate('settings')}><i className="fa fa-cogs"></i></a></li>
          </ul>
          <h3 className="masthead-brand"><img src="http://www.thispresenthouse.org/tphlekki2/wp-content/uploads/2016/04/logo.png" /></h3>
          <h3 className="fa fa-music"></h3>
        </div>
      </div>
{'fraction_non_alphanumeric': 0.17972350230414746, 'fraction_numerical': 0.003806852334201563, 'mean_word_length': 3.0717781402936377, 'pattern_counts': {'":': 0, '<': 82, '<?xml version=': 0, '>': 82, 'https://': 0, 'lorem ipsum': 0, 'www.': 1, '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': '6936661', 'n_tokens_mistral': 1538, 'n_tokens_neox': 1530, 'n_words': 285}