Fix #262: added feedback on shuffle button

changes/changelog.d/262.enhancement

+Added feedback on shuffle button (#262)

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>

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