Merge branch '832-colorized-play-button-in-front-of-the-currently-playing-music' into 'develop'

Resolve "Colorized 'play' button in front of the currently playing music"

Closes #832

See merge request funkwhale/funkwhale!798

changes/changelog.d/832.enhancement

@@ -0,0 +1 @@
+The currently playing track is now highlighted with an orange play icon (#832)

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)

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>