diff --git a/changes/changelog.d/832.enhancement b/changes/changelog.d/832.enhancement
new file mode 100644
index 0000000000000000000000000000000000000000..1a270b88eaf9fa8a584b894a9bc611aab980feb3
--- /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 bdc0dd6cb57b18eed7dfcc00ff45c929a027f4fb..db6e8de6bba8e8ece4f4d761ae1466e9be113435 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 abc4137bf397306b457cb19e8e9d39e6b21c0838..90d0579603472b18f760c6902fa68309148f756c 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>