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 0000000000..1a270b88ea
--- /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 bdc0dd6cb5..db6e8de6bb 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 abc4137bf3..90d0579603 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>
--
GitLab