Add play/add buttons to popular tracks on artist pages

BrandTurner · May 20, 2017 · d9c54ee · d9c54ee
1 parent fe623fc
commit d9c54ee
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 1 deletion.
diff --git a/app/components/ArtistView.css b/app/components/ArtistView.css
@@ -91,6 +91,14 @@
   width: 32px;
 }
 
+.artist_view_add_button {
+  padding: 0px 0px 0px 12px;
+}
+
+.artist_view_play_button {
+  padding: 0px 0px 0px 12px;
+}
+
 .artist_view_top_track_name {
   width: 100%;
   margin: 0px 24px 0px 24px;

diff --git a/app/components/ArtistView.js b/app/components/ArtistView.js
@@ -58,7 +58,9 @@ export default class ArtistView extends Component {
                   <table style={{width: '100%'}}>
                     <thead>
                       <tr>
-                        <th><i className="fa fa-picture-o" /></th>
+                        <th> </th>
+                        <th> </th>
+                        <th> </th>
                         <th style={{paddingLeft: '12px'}}>Track</th>
                         <th>Playcount</th>
                       </tr>
@@ -69,6 +71,16 @@ export default class ArtistView extends Component {
                         return (
                           <tr className={styles.artist_view_top_track}>
                             <td><img className={styles.artist_view_top_track_cover} src={el.albumCover} /></td>
+                            <td className={styles.artist_view_play_button}>
+                              <a href="#" onClick={this.props.playTrack.bind(null, el)}>
+                                <i className="fa fa-play" />
+                              </a>
+                            </td>
+                            <td className={styles.artist_view_add_button}>
+                              <a href="#" onClick={this.props.addTrackToQueue.bind(null, el)}>
+                                <i className="fa fa-plus" />
+                              </a>
+                            </td>
                             <td className={styles.artist_view_top_track_name}>{el.name}</td>
                             <td>{el.listeners}</td>
                           </tr>

diff --git a/app/containers/ArtistViewContainer.js b/app/containers/ArtistViewContainer.js
@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import ArtistView from '../components/ArtistView';
 
 const lastfm = require('../api/Lastfm');
+const songFinder = require('../utils/SongFinder');
 
 export default class ArtistViewContainer extends Component {
   constructor(props) {
@@ -61,6 +62,24 @@ export default class ArtistViewContainer extends Component {
 
   }
 
+  findTrack(track, callback) {
+    songFinder.getTrack(track.artist.name, track.name, 0, (err, track) => {
+      if (err) {
+        this.props.home.showAlertError(err);
+      } else {
+        callback(track);
+      }
+    });
+  }
+
+  playTrack(track, event, value) {
+    this.findTrack(track, this.props.home.playNow.bind(this.props.home));
+  }
+
+  addTrackToQueue(track) {
+    this.findTrack(track, this.props.home.addToQueue.bind(this.props.home));
+  }
+
   render() {
     return (
       Object.keys(this.state).some((key) => {return (this.state[key] === null);})
@@ -72,6 +91,8 @@ export default class ArtistViewContainer extends Component {
           goToAlbum={this.goToAlbum.bind(this)}
           addAlbumToQueue={this.props.addAlbumToQueue.bind(this)}
           switchToArtistView={this.props.switchToArtistView}
+          playTrack={this.playTrack.bind(this)}
+          addTrackToQueue={this.addTrackToQueue.bind(this)}
         />
     );
   }