Fixed #52: Added shuffling controls

CHANGELOG

@@ -9,6 +9,7 @@ Changelog
   as a favorite (#53)
 - Shortcuts: avoid collisions between shortcuts by using the exact modifier (#53)
 - Player: Added looping controls and shortcuts (#52)
+- Player: Added shuffling controls and shortcuts (#52)
 
 
 0.2.6 (2017-12-15)

front/src/audio/queue.js

@@ -1,10 +1,12 @@
+import Vue from 'vue'
+import _ from 'lodash'
+
 import logger from '@/logging'
 import cache from '@/cache'
 import config from '@/config'
 import Audio from '@/audio'
 import backend from '@/audio/backend'
 import radios from '@/radios'
-import Vue from 'vue'
 import url from '@/utils/url'
 import auth from '@/auth'
 
@@ -316,6 +318,13 @@ class Queue {
     }
   }
 
+  shuffle () {
+    let tracks = this.tracks
+    let shuffled = _.shuffle(tracks)
+    this.clean()
+    this.appendMany(shuffled)
+  }
+
 }
 
 let queue = new Queue()

front/src/components/audio/Player.vue

@@ -97,7 +97,14 @@
           class="repeat orange secondary icon">
         </i>
       </div>
-      <div class="three wide column"></div>
+      <div
+        @click="queue.shuffle()"
+        :disabled="queue.tracks.length === 0"
+        title="Shuffle your queue"
+        class="two wide column control">
+        <i :class="['ui', 'random', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
+      </div>
+      <div class="one wide column"></div>
       <div
         @click="queue.clean()"
         :disabled="queue.tracks.length === 0"
@@ -114,6 +121,7 @@
       @keydown.ctrl.up.prevent.exact="queue.incrementVolume(0.1)"
       @keydown.f.prevent.exact="favoriteTracks.toggle(queue.currentTrack.id)"
       @keydown.l.prevent.exact="queue.toggleLooping"
+      @keydown.s.prevent.exact="queue.shuffle"
       />
 
   </div>