Added a Track Row component used in Popular Tracks

app/components/ArtistView/PopularTracks/index.js

@@ -3,6 +3,7 @@ import FontAwesome from 'react-fontawesome';
 import numeral from 'numeral';
 import artPlaceholder from '../../../../resources/media/art_placeholder.png';
 import ContextPopup from '../../ContextPopup';
+import TrackRow from '../../TrackRow';
 
 import styles from './styles.scss';
 
@@ -110,11 +111,26 @@ class PopularTracks extends React.Component {
         {tracks.track
           .slice(0, this.state.expanded ? 15 : 5)
           .map((track, index) => {
+            return (
+              <TrackRow
+                key={'popular-track-row-' + index}
+                track={track}
+                index={'popular-track-' + index}
+                artist={artist}
+                clearQueue={this.props.clearQueue}
+                addToQueue={this.props.addToQueue}
+                startPlayback={this.props.startPlayback}
+                selectSong={this.props.selectSong}
+                musicSources={this.props.musicSources}
+              />
+            );
+            /* 
             let popupContents = [
               this.renderAddTrackToQueueButton(track, index, artist),
               this.renderPlayTrackButton(track, index)
             ];
             return this.renderPopup(index, artist, track, popupContents);
+            */
           })}
         <div className='expand_button' onClick={this.toggleExpand.bind(this)}>
           <FontAwesome

app/components/TrackRow/index.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import numeral from 'numeral';
+import FontAwesome from 'react-fontawesome';
+import artPlaceholder from '../../../resources/media/art_placeholder.png';
+import ContextPopup from '../ContextPopup';
+
+import styles from './styles.scss';
+
+class TrackRow extends React.Component {
+  renderAddTrackToQueueButton(track, index, artist, addToQueue, musicSources) {
+    return (
+      <a
+        key={'add-track-' + index}
+        href='#'
+        onClick={() =>
+          addToQueue(musicSources, {
+            artist: artist.name,
+            name: track.name,
+            thumbnail: track.image[0]['#text'] || artPlaceholder
+          })
+        }
+        className={styles.add_button}
+        aria-label='Add track to queue'
+      >
+        <FontAwesome name='plus' /> Add to queue
+      </a>
+    );
+  }
+
+  renderPlayTrackButton(
+    index,
+    track,
+    artist,
+    clearQueue,
+    addToQueue,
+    selectSong,
+    startPlayback,
+    musicSources
+  ) {
+    return (
+      <a
+        key={'play-track-' + index}
+        href='#'
+        onClick={() => {
+          clearQueue();
+          addToQueue(musicSources, {
+            artist: artist.name,
+            name: track.name,
+            thumbnail: track.image[0]['#text'] || artPlaceholder
+          });
+          selectSong(0);
+          startPlayback();
+        }}
+        className={styles.add_button}
+        aria-label='Play this track now'
+      >
+        <FontAwesome name='play' /> Play now
+      </a>
+    );
+  }
+
+  render() {
+    let {
+      index,
+      track,
+      artist,
+      clearQueue,
+      addToQueue,
+      selectSong,
+      startPlayback,
+      musicSources
+    } = this.props;
+
+    let popupContents = [
+      this.renderAddTrackToQueueButton(
+        track,
+        index,
+        artist,
+        addToQueue,
+        musicSources
+      ),
+      this.renderPlayTrackButton(
+        index,
+        track,
+        artist,
+        clearQueue,
+        addToQueue,
+        selectSong,
+        startPlayback,
+        musicSources
+      )
+    ];
+    return (
+      <ContextPopup
+        key={'track-' + index}
+        trigger={
+          <div className={styles.track_row}>
+            <img src={track.image[0]['#text'] || artPlaceholder} />
+            <div className={styles.row_track_name}>{track.name}</div>
+            <div className={styles.playcount}>
+              {numeral(track.playcount).format('0,0')} plays
+            </div>
+          </div>
+        }
+        artist={artist.name}
+        title={track.name}
+        thumb={track.image[0]['#text'] || artPlaceholder}
+      >
+        {popupContents}
+      </ContextPopup>
+    );
+  }
+}
+
+export default TrackRow;

app/components/TrackRow/styles.scss

@@ -0,0 +1,67 @@
+@import '../../vars';
+
+.tracks_container {
+  display: flex;
+  flex: 1 1 auto;
+  flex-flow: column;
+
+  margin: 0 0.5rem;
+
+  .header {
+    margin-bottom: 1rem;
+
+    font-size: 16px;
+    font-variant: small-caps;
+  }
+
+  .track_row {
+    display: flex;
+    align-items: center;
+    flex-flow: row;
+
+    transition: $short-duration ease-in-out;
+
+    border-bottom: 1px solid rgba($background2, 0.2);
+
+    &:hover {
+      background: lighten($background, 10%);
+    }
+
+    img {
+      flex: 0 0 auto;
+
+      width: 3rem;
+      height: 3rem;
+    }
+
+    .row_track_name {
+      flex: 1 1 auto;
+      margin: 0.25rem 0.5rem;
+      text-align: left;
+    }
+
+    .playcount {
+      flex: 1 1 auto;
+      margin: 0.25rem 0.5rem;
+      text-align: right;
+      text-transform: uppercase;
+    }
+  }
+
+  .expand_button {
+    display: flex;
+    justify-content: center;
+    padding: 0.5rem;
+    margin-top: 0.5rem;
+    transition: $short-duration;
+    cursor: pointer;
+
+    &:hover {
+      background: lighten($background, 5%);
+    }
+  }
+}
+
+.add_button {
+  text-align: left;
+}