<commit_before>import React from 'react';
import AudioPlayer from './AudioPlayer';
import SpinPlayer from './SpinPlayer';
import SearchBar from './SearchBar';
import Slider from 'rc-slider';

export default class Playlist extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      volume: 0.7,
      playlist: [],
    };
  }

  componentDidMount() {
    let self = this;

    window.App.playlistChannel = window.App.cable.subscriptions.create('PlaylistChannel', {
      connected: function() {
        window.App.playlistChannel.send({action: 'reload'});
      },
      received: function(data) {
        let playlist = [];

        switch(data.action) {
        case 'reload':
          self.setState({ playlist: data.objects.reverse() });
          break;
        case 'create':
          playlist = self.state.playlist;

          if (data.object.played_at) {
            playlist.shift();
            playlist.unshift(data.object);
          } else {
            playlist.push(data.object);
          }

          self.setState({ playlist: playlist });
          break;
        case 'update':
        case 'destroy':
          playlist = self.state.playlist.filter((el) => el.id !== data.object.id);

          self.setState({ playlist: playlist });
          break;
        }
      }
    });
  }

  volumeSlideBar() {
    const sliderContainerStyle = {
      width: '5em',
    };

    return (
      <div style={sliderContainerStyle}>
        <Slider
          min={0}
          max={1}
          step={0.1}
          defaultValue={0.7}
          onChange={this.handleVolumeChange.bind(this)}
        />
      </div>
    );
  }

  headColumn(playing) {
    if (playing) {
      return (
        <tr>
          <th style={minimumTdStyle}>
            <AudioPlayer
              volume={this.state.volume}
              ref="AudioPlayer"
            />
          </th>
          <th style={minimumTdStyle}>
            <img
              src={playing.track.response.artwork_url60}
              style={{maxWidth: '45px', maxHeight: '45px'}}
            />
          </th>
          <th>
            <div>{playing.track.name}</div>
            <div>{playing.track.response.artist_name}</div>
          </th>
          <th style={minimumTdStyle}>
            {this.volumeSlideBar()}
          </th>
        </tr>
      );
    } else {
      return (
        <tr>
          <th style={minimumTdStyle}>
            <AudioPlayer
              volume={this.state.volume}
              ref="AudioPlayer"
            />
          </th>
          <th style={minimumTdStyle}>
            -
          </th>
          <th>
            Loading . . .
          </th>
          <th
            style={minimumTdStyle}>
            {this.volumeSlideBar()}
          </th>
        </tr>
      );
    }
  }

  handleVolumeChange(value) {
    this.setState({ volume: value });
  }

  handleSearch(keyword) {
    this.props.router.push('/search?q=' + encodeURIComponent(keyword));
  }

  render() {
    return (
      <div
        style={playlistContainerStyle}>
        <table
          style={playlistTableStyle}>
          <thead>
            {this.headColumn(this.state.playlist[0])}
          </thead>
          <tbody><commit_msg>Fix `Identical code found in 1 other location` issue<commit_after>import React from 'react';
import AudioPlayer from './AudioPlayer';
import SpinPlayer from './SpinPlayer';
import SearchBar from './SearchBar';
import Slider from 'rc-slider';

export default class Playlist extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      volume: 0.7,
      playlist: [],
    };
  }

  componentDidMount() {
    let self = this;

    window.App.playlistChannel = window.App.cable.subscriptions.create('PlaylistChannel', {
      connected: function() {
        window.App.playlistChannel.send({action: 'reload'});
      },
      received: function(data) {
        let playlist = [];

        switch(data.action) {
        case 'reload':
          self.setState({ playlist: data.objects.reverse() });
          break;
        case 'create':
          playlist = self.state.playlist;

          if (data.object.played_at) {
            playlist.shift();
            playlist.unshift(data.object);
          } else {
            playlist.push(data.object);
          }

          self.setState({ playlist: playlist });
          break;
        case 'update':
        case 'destroy':
          playlist = self.state.playlist.filter((el) => el.id !== data.object.id);

          self.setState({ playlist: playlist });
          break;
        }
      }
    });
  }

  volumeSlideBar() {
    const sliderContainerStyle = {
      width: '5em',
    };

    return (
      <div style={sliderContainerStyle}>
        <Slider
          min={0}
          max={1}
          step={0.1}
          defaultValue={0.7}
          onChange={this.handleVolumeChange.bind(this)}
        />
      </div>
    );
  }

  headColumn(playing) {
    let image = '-';
    let title = 'Loading . . .';

    if (playing) {
      image = (
        <img
          src={playing.track.response.artwork_url60}
          style={{ maxWidth: '45px', maxHeight: '45px' }}
        />
      );
      title = (
        <div>
          <div>{playing.track.name}</div>
          <div>{playing.track.response.artist_name}</div>
        </div>
      );
    }

    return (
      <tr>
        <th
          style={minimumTdStyle}>
          <AudioPlayer
            volume={this.state.volume}
            ref="AudioPlayer"
          />
        </th>
        <th
          style={minimumTdStyle}>
          {image}
        </th>
        <th>
          {title}
        </th>
        <th
          style={minimumTdStyle}>
          {this.volumeSlideBar()}
        </th>
      </tr>
    );
  }

  handleVolumeChange(value) {
    this.setState({ volume: value });
  }

  handleSearch(keyword) {
    this.props.router.push('/search?q=' + encodeURIComponent(keyword));
  }

  render() {
    return (
      <div
        style={playlistContainerStyle}>
        <table
          style={playlistTableStyle}>
          <thead>
            {this.headColumn(this.state.playlist[0])}
          </thead>
          <tbody>
{'fraction_non_alphanumeric': 0.13891562399743343, 'fraction_numerical': 0.0052935514918190565, 'mean_word_length': 1.6164498531263114, 'pattern_counts': {'":': 0, '<': 64, '<?xml version=': 0, '>': 66, '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': '4436495', 'n_tokens_mistral': 1872, 'n_tokens_neox': 1823, 'n_words': 319}