added shortcuts for play, volume and restore

front/package.json

@@ -18,6 +18,7 @@
     "js-logger": "^1.3.0",
     "semantic-ui-css": "^2.2.10",
     "vue": "^2.3.3",
+    "vue-global-events": "^1.0.2",
     "vue-resource": "^1.3.4",
     "vue-router": "^2.3.1",
     "vuedraggable": "^2.14.1"

front/src/audio/queue.js

@@ -86,6 +86,8 @@ class Queue {
     cache.remove('queue')
   }
   setVolume (newValue) {
+    newValue = Math.min(newValue, 1)
+    newValue = Math.max(newValue, 0)
     this.state.volume = newValue
     if (this.audio.setVolume) {
       this.audio.setVolume(newValue)
@@ -94,7 +96,9 @@ class Queue {
     }
     cache.set('volume', newValue)
   }
-
+  incrementVolume (value) {
+    this.setVolume(this.state.volume + value)
+  }
   reorder (oldIndex, newIndex) {
     // called when the user uses drag / drop to reorder
     // tracks in queue

front/src/components/Sidebar.vue

@@ -87,10 +87,15 @@
   <div class="ui inverted segment player-wrapper">
     <player></player>
   </div>
+  <GlobalEvents
+    @keydown.r.stop="queue.restore"
+    />
 </div>
 </template>
 
 <script>
+import GlobalEvents from 'vue-global-events'
+
 import Player from '@/components/audio/Player'
 import favoriteTracks from '@/favorites/tracks'
 import Logo from '@/components/Logo'
@@ -109,7 +114,8 @@ export default {
     Player,
     SearchBar,
     Logo,
-    draggable
+    draggable,
+    GlobalEvents
   },
   data () {
     return {

front/src/components/audio/Player.vue

@@ -56,10 +56,20 @@
         <i title="Clear your queue" @click="queue.clean()" :class="['ui', 'trash', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" :disabled="queue.tracks.length === 0"></i>
       </div>
     </div>
+    <GlobalEvents
+      @keydown.space.prevent="pauseOrPlay"
+      @keydown.ctrl.left.prevent="queue.previous"
+      @keydown.ctrl.right.prevent="queue.next"
+      @keydown.ctrl.down.prevent="queue.incrementVolume(-0.1)"
+      @keydown.ctrl.up.prevent="queue.incrementVolume(0.1)"
+      />
+
   </div>
 </template>
 
 <script>
+import GlobalEvents from 'vue-global-events'
+
 import queue from '@/audio/queue'
 import Track from '@/audio/track'
 import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
@@ -68,7 +78,8 @@ import radios from '@/radios'
 export default {
   name: 'player',
   components: {
-    TrackFavoriteIcon
+    TrackFavoriteIcon,
+    GlobalEvents
   },
   data () {
     return {