<commit_before>const React = require('react')
const { connect } = require('react-redux')
const classNames = require('classnames')
const { PLAYBACK_SONG, PLAYBACK_USER_QUEUE, REMOVE_SONG, REMOVE_DOWNLOAD,
  TOGGLE_SONG_FAVORITE, PLAYER_SET_PLAYING, REQUEST_SONG } = require('../../actions')
const DateFormat = require('../DateFormat.jsx')
const Duration = require('../Duration.jsx')
const { Link } = require('react-router')
var Tappable = require('react-tappable')

class SongRow extends React.Component {

  renderIndex () {
    return <th className='number'>{this.props.index + 1}</th>
  }

  renderTrack () {
    return <th className='number'>{this.props.song.track}</th>
  }

  renderPlayAndDownload (playback, download) {
    if (!this.props.song.local) {
      const downloadButton = this.props.song.downloading
        ? <a onClick={() => this.props.REMOVE_DOWNLOAD(this.props.song.id)} className='hover-remove-download'><i className='fa fa-refresh'/></a>
        : <a onClick={() => download()}><i className='fa fa-arrow-down'/></a>
      return <td className='download-button'>{downloadButton}</td>
    }

    const playButton = this.props.options.activeRow && this.props.selected && this.props.playing
        ? <a onClick={() => this.props.PLAYER_SET_PLAYING(false)} className='hover-pause'><i className='fa fa-volume-up'/></a>
        : <a onClick={() => playback()}><i className='fa fa-play'/></a>
    return <td className='play-button'>{playButton}</td>
  }

  renderTitle (playback, download) {
    let localAction = this.props.options.activeRow && this.props.selected && this.props.playing ? () => this.props.PLAYER_SET_PLAYING(false) : () => playback()
    let action = !this.props.song.local ? () => download() : localAction
    return (
        <td className='title'>
          <div className='desktop-only' onClick={() => action()}>
            {this.props.song.title}
          </div>
          <div className='mobile-only'>
            <Tappable onTap={() => this.props.song.local ? playback() : download()}>
              {this.props.song.title}
              <small>
                {this.props.song.artist}
                {this.props.options.album &&
                <span> - {this.props.song.album}</span>
                }
              </small>
            </Tappable>
          </div>
        </td>
    )
  }

  renderArtist () {
    const linkTargetArtist = '/artists?artist=' + this.props.song.artist
    const artistClass = classNames('artist', {inactive: !this.props.song.artist})
    const artistLink = !this.props.song.artist ? '—' : <Link to={linkTargetArtist}>{this.props.song.artist}</Link>
    return <td className={artistClass}>{artistLink}</td>
  }

  renderAlbum () {
    const linkTargetAlbum = '/albums?album=' + this.props.song.album + '&artist=' + this.props.song.artist
    const albumClass = classNames('album', {inactive: !this.props.song.album})
    const albumLink = !this.props.song.album ? '—' : <Link to={linkTargetAlbum}>{this.props.song.album}</Link>
    return <td className={albumClass}>{albumLink}</td>
  }

  renderAdded () {
    return <td className='creation-date'><DateFormat then={this.props.song.addedAt}/></td>
  }

  renderLength () {
    return <td className='song-time'><Duration seconds={this.props.song.duration}/></td>
  }

  renderAvailability () {
    if (this.props.song.local) {
      return <td className='availability'>
        <div className='desktop-only'>
          <a onClick={() => this.props.REMOVE_SONG(this.props.song.id)} className='hover-remove-song'><i className='flaticon-disk'/></a>
        </div>
        <div className='mobile-only'>
          <i className='flaticon-harddrive'/>
        </div>
      </td>
    }

    return (
      <td className='availability'>
        <span className='desktop-only'><i className='flaticon-download'/></span>
        <span className='mobile-only'>{this.props.song.downloading ? <i className='fa fa-refresh'/> : <i className='flaticon-download'/>}</span>
      </td>
    )
  }

  renderQueue () {
    if (!this.props.song.local) {
      return <td className='add-button'><a><i className='fa fa-plus'/></a></td>
    }

    return (
        <td className='add-button'>
          <a onClick={() => this.props.PLAYBACK_USER_QUEUE(this.props.song.id)}> <i className='fa fa-plus'/></a>
        </td><commit_msg>Change icon for mobile as well<commit_after>const React = require('react')
const { connect } = require('react-redux')
const classNames = require('classnames')
const { PLAYBACK_SONG, PLAYBACK_USER_QUEUE, REMOVE_SONG, REMOVE_DOWNLOAD,
  TOGGLE_SONG_FAVORITE, PLAYER_SET_PLAYING, REQUEST_SONG } = require('../../actions')
const DateFormat = require('../DateFormat.jsx')
const Duration = require('../Duration.jsx')
const { Link } = require('react-router')
var Tappable = require('react-tappable')

class SongRow extends React.Component {

  renderIndex () {
    return <th className='number'>{this.props.index + 1}</th>
  }

  renderTrack () {
    return <th className='number'>{this.props.song.track}</th>
  }

  renderPlayAndDownload (playback, download) {
    if (!this.props.song.local) {
      const downloadButton = this.props.song.downloading
        ? <a onClick={() => this.props.REMOVE_DOWNLOAD(this.props.song.id)} className='hover-remove-download'><i className='fa fa-refresh'/></a>
        : <a onClick={() => download()}><i className='fa fa-arrow-down'/></a>
      return <td className='download-button'>{downloadButton}</td>
    }

    const playButton = this.props.options.activeRow && this.props.selected && this.props.playing
        ? <a onClick={() => this.props.PLAYER_SET_PLAYING(false)} className='hover-pause'><i className='fa fa-volume-up'/></a>
        : <a onClick={() => playback()}><i className='fa fa-play'/></a>
    return <td className='play-button'>{playButton}</td>
  }

  renderTitle (playback, download) {
    let localAction = this.props.options.activeRow && this.props.selected && this.props.playing ? () => this.props.PLAYER_SET_PLAYING(false) : () => playback()
    let action = !this.props.song.local ? () => download() : localAction
    return (
        <td className='title'>
          <div className='desktop-only' onClick={() => action()}>
            {this.props.song.title}
          </div>
          <div className='mobile-only'>
            <Tappable onTap={() => this.props.song.local ? playback() : download()}>
              {this.props.song.title}
              <small>
                {this.props.song.artist}
                {this.props.options.album &&
                <span> - {this.props.song.album}</span>
                }
              </small>
            </Tappable>
          </div>
        </td>
    )
  }

  renderArtist () {
    const linkTargetArtist = '/artists?artist=' + this.props.song.artist
    const artistClass = classNames('artist', {inactive: !this.props.song.artist})
    const artistLink = !this.props.song.artist ? '—' : <Link to={linkTargetArtist}>{this.props.song.artist}</Link>
    return <td className={artistClass}>{artistLink}</td>
  }

  renderAlbum () {
    const linkTargetAlbum = '/albums?album=' + this.props.song.album + '&artist=' + this.props.song.artist
    const albumClass = classNames('album', {inactive: !this.props.song.album})
    const albumLink = !this.props.song.album ? '—' : <Link to={linkTargetAlbum}>{this.props.song.album}</Link>
    return <td className={albumClass}>{albumLink}</td>
  }

  renderAdded () {
    return <td className='creation-date'><DateFormat then={this.props.song.addedAt}/></td>
  }

  renderLength () {
    return <td className='song-time'><Duration seconds={this.props.song.duration}/></td>
  }

  renderAvailability () {
    if (this.props.song.local) {
      return <td className='availability'>
        <div className='desktop-only'>
          <a onClick={() => this.props.REMOVE_SONG(this.props.song.id)} className='hover-remove-song'><i className='flaticon-disk'/></a>
        </div>
        <div className='mobile-only'>
          <i className='flaticon-disk'/>
        </div>
      </td>
    }

    return (
      <td className='availability'>
        <span className='desktop-only'><i className='flaticon-download'/></span>
        <span className='mobile-only'>{this.props.song.downloading ? <i className='fa fa-refresh'/> : <i className='flaticon-download'/>}</span>
      </td>
    )
  }

  renderQueue () {
    if (!this.props.song.local) {
      return <td className='add-button'><a><i className='fa fa-plus'/></a></td>
    }

    return (
        <td className='add-button'>
          <a onClick={() => this.props.PLAYBACK_USER_QUEUE(this.props.song.id)}> <i className='fa fa-plus'/></a>
        </td>
{'fraction_non_alphanumeric': 0.17957584140156754, 'fraction_numerical': 0.0002305209774089442, 'mean_word_length': 3.0775375939849625, 'pattern_counts': {'":': 0, '<': 153, '<?xml version=': 0, '>': 175, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 28, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4916165', 'n_tokens_mistral': 2848, 'n_tokens_neox': 2711, 'n_words': 458}