play track when TrackRow is double clicked

acrisci · Feb 12, 2019 · d817899 · d817899
1 parent 50564ec
commit d817899
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 26 deletions.
diff --git a/app/components/TrackRow/index.js b/app/components/TrackRow/index.js
@@ -31,27 +31,12 @@ class TrackRow extends React.Component {
 
   renderPlayTrackButton (
     index,
-    track,
-    clearQueue,
-    addToQueue,
-    selectSong,
-    startPlayback,
-    musicSources
   ) {
     return (
       <a
         key={'play-track-' + index}
         href='#'
-        onClick={() => {
-          clearQueue();
-          addToQueue(musicSources, {
-            artist: track.artist.name,
-            name: track.name,
-            thumbnail: _.get(track, 'image[0][\'#text\']', artPlaceholder)
-          });
-          selectSong(0);
-          startPlayback();
-        }}
+        onClick={this.playTrack}
         className={styles.add_button}
         aria-label='Play this track now'
       >
@@ -61,6 +46,26 @@ class TrackRow extends React.Component {
     );
   }
 
+  playTrack = () => {
+    const {
+      track,
+      clearQueue,
+      addToQueue,
+      selectSong,
+      startPlayback,
+      musicSources
+    } = this.props;
+
+    clearQueue();
+    addToQueue(musicSources, {
+      artist: track.artist.name,
+      name: track.name,
+      thumbnail: _.get(track, 'image[0][\'#text\']', artPlaceholder)
+    });
+    selectSong(0);
+    startPlayback();
+  }
+
   renderDuration (track) {
     if (track.duration === 0) {
       return <td className={styles.track_duration} />;
@@ -74,7 +79,7 @@ class TrackRow extends React.Component {
 
   renderTrigger (track) {
     return (
-      <tr className={styles.track}>
+      <tr className={styles.track} onDoubleClick={this.playTrack}>
         {this.props.displayCover ? <td
           style={{
             backgroundImage: `url(${_.get(track, 'image[0][#text]', artPlaceholder)})`,
@@ -95,10 +100,7 @@ class TrackRow extends React.Component {
     let {
       index,
       track,
-      clearQueue,
       addToQueue,
-      selectSong,
-      startPlayback,
       musicSources
     } = this.props;
 
@@ -111,12 +113,6 @@ class TrackRow extends React.Component {
       ),
       this.renderPlayTrackButton(
         index,
-        track,
-        clearQueue,
-        addToQueue,
-        selectSong,
-        startPlayback,
-        musicSources
       )
     ];
     return (

diff --git a/app/components/TrackRow/styles.scss b/app/components/TrackRow/styles.scss
@@ -68,6 +68,7 @@
 
 .track {
   transition: $short-duration;
+  cursor: pointer;
 }
 
 .track_thumbnail {