diff --git a/changes/changelog.d/262.enhancement b/changes/changelog.d/262.enhancement
new file mode 100644
index 0000000000000000000000000000000000000000..cad67e939528317c60c989a1d6493c9fa5cbbc6f
--- /dev/null
+++ b/changes/changelog.d/262.enhancement
@@ -0,0 +1 @@
+Added feedback on shuffle button (#262)
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index c475ec684a008ec46392361523eefc77ab38b0e6..3c922e14ad323d75413d969ba7c033add19e92e0 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -113,7 +113,8 @@
:disabled="queue.tracks.length === 0"
:title="$t('Shuffle your queue')"
class="two wide column control">
- <i @click="shuffle()" :class="['ui', 'random', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
+ <div v-if="isShuffling" class="ui inline shuffling inverted small active loader"></div>
+ <i v-else @click="shuffle()" :class="['ui', 'random', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
</div>
<div class="one wide column"></div>
<div
@@ -158,6 +159,7 @@ export default {
data () {
let defaultAmbiantColors = [[46, 46, 46], [46, 46, 46], [46, 46, 46], [46, 46, 46]]
return {
+ isShuffling: false,
renderAudio: true,
sliderVolume: this.volume,
Track: Track,
@@ -173,9 +175,24 @@ export default {
...mapActions({
togglePlay: 'player/togglePlay',
clean: 'queue/clean',
- shuffle: 'queue/shuffle',
updateProgress: 'player/updateProgress'
}),
+ shuffle () {
+ if (this.isShuffling) {
+ return
+ }
+ let self = this
+ this.isShuffling = true
+ setTimeout(() => {
+ self.$store.dispatch('queue/shuffle', () => {
+ self.isShuffling = false
+ self.$store.commit('ui/addMessage', {
+ content: self.$t('Queue shuffled!'),
+ date: new Date()
+ })
+ })
+ }, 100)
+ },
next () {
let self = this
this.$store.dispatch('queue/next').then(() => {
@@ -402,5 +419,8 @@ export default {
.ui.feed.icon {
margin: 0;
}
+.shuffling.loader.inline {
+ margin: 0;
+}
</style>
diff --git a/front/src/store/queue.js b/front/src/store/queue.js
index 23e074a80c36fb849eb306ea59da68756a05282b..2d6c667b29ba5e87623f3cc60e7be31e0d5d3fc4 100644
--- a/front/src/store/queue.js
+++ b/front/src/store/queue.js
@@ -72,16 +72,20 @@ export default {
}
},
- appendMany ({state, dispatch}, {tracks, index}) {
+ appendMany ({state, dispatch}, {tracks, index, callback}) {
logger.default.info('Appending many tracks to the queue', tracks.map(e => { return e.title }))
if (state.tracks.length === 0) {
index = 0
} else {
index = index || state.tracks.length
}
- tracks.forEach((t) => {
- dispatch('append', {track: t, index: index, skipPlay: true})
+ let total = tracks.length
+ tracks.forEach((t, i) => {
+ let p = dispatch('append', {track: t, index: index, skipPlay: true})
index += 1
+ if (callback && i + 1 === total) {
+ p.then(callback)
+ }
})
dispatch('resume')
},
@@ -148,13 +152,17 @@ export default {
// so we replay automatically on next track append
commit('ended', true)
},
- shuffle ({dispatch, commit, state}) {
+ shuffle ({dispatch, commit, state}, callback) {
let toKeep = state.tracks.slice(0, state.currentIndex + 1)
let toShuffle = state.tracks.slice(state.currentIndex + 1)
let shuffled = toKeep.concat(_.shuffle(toShuffle))
commit('player/currentTime', 0, {root: true})
commit('tracks', [])
- dispatch('appendMany', {tracks: shuffled})
+ let params = {tracks: shuffled}
+ if (callback) {
+ params.callback = callback
+ }
+ dispatch('appendMany', params)
}
}
}