From 69d10461d6ee605d9d126686ae87f6ca5c4f181a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Ainsworth?= <ciaranainsworth@posteo.net>
Date: Mon, 24 Jun 2019 17:39:09 +0200
Subject: [PATCH] Resolve "Colorized 'play' button in front of the currently
 playing music"

---
 changes/changelog.d/832.enhancement       |  1 +
 front/src/components/audio/album/Card.vue | 11 +++++++++--
 front/src/components/audio/track/Row.vue  | 12 +++++++++---
 3 files changed, 19 insertions(+), 5 deletions(-)
 create mode 100644 changes/changelog.d/832.enhancement

diff --git a/changes/changelog.d/832.enhancement b/changes/changelog.d/832.enhancement
new file mode 100644
index 000000000..1a270b88e
--- /dev/null
+++ b/changes/changelog.d/832.enhancement
@@ -0,0 +1 @@
+The currently playing track is now highlighted with an orange play icon (#832)
\ No newline at end of file
diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue
index bdc0dd6cb..db6e8de6b 100644
--- a/front/src/components/audio/album/Card.vue
+++ b/front/src/components/audio/album/Card.vue
@@ -20,7 +20,7 @@
             <tbody>
               <tr v-for="track in tracks">
                 <td class="play-cell">
-                  <play-button class="basic icon" :track="track" :discrete="true"></play-button>
+                  <play-button :class="['basic', {orange: isPlaying && track.id === currentTrack.id}, 'icon']" :discrete="true" :track="track"></play-button>
                 </td>
                 <td class="content-cell" colspan="5">
                   <track-favorite-icon :track="track"></track-favorite-icon>
@@ -57,6 +57,7 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex"
 import backend from '@/audio/backend'
 import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
 import PlayButton from '@/components/audio/PlayButton'
@@ -64,7 +65,7 @@ import PlayButton from '@/components/audio/PlayButton'
 export default {
   props: {
     album: {type: Object},
-    mode: {type: String, default: 'rich'}
+    mode: {type: String, default: 'rich'},
   },
   components: {
     TrackFavoriteIcon,
@@ -84,6 +85,12 @@ export default {
       }
       return this.album.tracks.slice(0, this.initialTracks)
     },
+    ...mapGetters({
+      currentTrack: "queue/currentTrack",
+    }),
+    isPlaying () {
+      return this.$store.state.player.playing
+    },
     tracksWithAlbum () {
       // needed to include album data (especially cover)
       // with tracks appended in queue (#795)
diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index abc4137bf..90d057960 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/front/src/components/audio/track/Row.vue
@@ -1,7 +1,7 @@
 <template>
   <tr>
     <td>
-      <play-button class="basic icon" :discrete="true" :is-playable="playable" :track="track"></play-button>
+      <play-button :class="['basic', {orange: isPlaying && track.id === currentTrack.id}, 'icon']" :discrete="true" :is-playable="playable" :track="track"></play-button>
     </td>
     <td>
       <img class="ui mini image" v-if="track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.small_square_crop)">
@@ -50,7 +50,7 @@
 </template>
 
 <script>
-
+import { mapGetters } from "vuex"
 import time from '@/utils/time'
 import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
 import TrackPlaylistIcon from '@/components/playlists/TrackPlaylistIcon'
@@ -74,13 +74,19 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      currentTrack: "queue/currentTrack",
+    }),
+    isPlaying () {
+      return this.$store.state.player.playing
+    },
     albumArtist () {
       if (this.artist) {
         return this.artist
       } else {
         return this.track.album.artist
       }
-    }
+    },
   }
 }
 </script>