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>