From 60e1192e123f767f3cc55212ab8f54d67a797e9a Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Sun, 2 Aug 2020 15:18:44 +0200
Subject: [PATCH] increase play button hit area

---
 src/library/TrackList.vue      | 42 +++++++++++++++++++---------------
 src/shared/components/Icon.vue |  2 +-
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/library/TrackList.vue b/src/library/TrackList.vue
index 4e19d3a..a9b9ffa 100644
--- a/src/library/TrackList.vue
+++ b/src/library/TrackList.vue
@@ -15,23 +15,23 @@
       <tr v-for="(item, index) in tracks" :key="item.id"
            draggable="true" @dragstart="dragstart(item.id, $event)"
           :class="{'text-primary': item.id === playingTrackId}">
-        <td class="pl-0 pr-0 text-center text-muted" style="min-width: 20px; max-width: 20px;">
-          <span class="track-status">
-            <template v-if="item.id === playingTrackId">
-              <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'" class="text-primary"/>
-            </template>
-            <template v-else>{{ item.track || 1 }}</template>
-          </span>
-          <span class="track-status-hover">
-            <span v-if="item.id === playingTrackId" @click="playPause()">
-              <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'" class="text-primary"/>
-            </span>
-            <span v-else @click="play(index)">
-              <Icon icon="play-fill"/>
-            </span>
-          </span>
+        <td class="pl-0 pr-0 text-center text-muted"
+            style="min-width: 20px; max-width: 20px;"
+            @click="play(index)">
+          <template v-if="item.id === playingTrackId">
+            <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'" class="text-primary"/>
+          </template>
+          <template v-else>
+            <span class="track-number">{{ item.track || 1 }}</span>
+            <Icon class="track-number-hover" icon="play-fill"/>
+          </template>
+        </td>
+        <td @click="play(index)">
+          {{ item.title }}
+          <div class="hidden-md text-muted">
+            <small>{{ item.artist }}</small>
+          </div>
         </td>
-        <td>{{ item.title }}</td>
         <td>
           <template v-if="item.artistId">
             <router-link :to="{name: 'artist', params: {id: item.artistId}}">
@@ -63,14 +63,14 @@
   </div>
 </template>
 <style lang="scss" scoped>
-  .track-status-hover {
+  .track-number-hover {
     display: none;
   }
   tr:hover {
-    .track-status-hover {
+    .track-number-hover {
       display: inline;
     }
-    .track-status {
+    .track-number {
       display: none;
     }
   }
@@ -101,6 +101,10 @@ export default Vue.extend({
       playPause: "player/playPause",
     }),
     play(index: number) {
+      if ((this.tracks as any)[index].id === this.playingTrackId) {
+        this.$store.commit("player/playPause")
+        return;
+      }
       this.$store.dispatch('player/play', {
         index,
         queue: this.tracks,
diff --git a/src/shared/components/Icon.vue b/src/shared/components/Icon.vue
index 5eae79c..15ab703 100644
--- a/src/shared/components/Icon.vue
+++ b/src/shared/components/Icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <BIcon :icon="icon"/>
+  <BIcon :icon="icon" v-bind="$attrs"/>
 </template>
 <script lang="ts">
   import Vue from 'vue'