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) } } }