Verified Commit 69d10461 authored by Ciarán Ainsworth's avatar Ciarán Ainsworth Committed by Eliot Berriot
Browse files

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

parent d8dd76f1
The currently playing track is now highlighted with an orange play icon (#832)
\ No newline at end of file
......@@ -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)
......
<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>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment