Merge branch 'feature/53-shortcut-favorite' into 'develop'

Fixed #53: f shortcut for favorite and avoiding collisions with 'exact' modifier

Closes #53

See merge request funkwhale/funkwhale!30

CHANGELOG

@@ -5,6 +5,10 @@ Changelog
 0.2.7 (Unreleased)
 ------------------
 
+- Shortcuts: can now use the ``f`` shortcut to toggle the currently playing track
+  as a favorite (#53)
+- Shortcuts: avoid collisions between shortcuts by using the exact modifier (#53)
+
 
 0.2.6 (2017-12-15)
 ------------------

front/src/components/audio/Player.vue

@@ -57,11 +57,12 @@
       </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)"
+      @keydown.space.prevent.exact="pauseOrPlay"
+      @keydown.ctrl.left.prevent.exact="queue.previous"
+      @keydown.ctrl.right.prevent.exact="queue.next"
+      @keydown.ctrl.down.prevent.exact="queue.incrementVolume(-0.1)"
+      @keydown.ctrl.up.prevent.exact="queue.incrementVolume(0.1)"
+      @keydown.f.prevent.exact="favoriteTracks.toggle(queue.currentTrack.id)"
       />
 
   </div>
@@ -70,10 +71,11 @@
 <script>
 import GlobalEvents from '@/components/utils/global-events'
 
+import favoriteTracks from '@/favorites/tracks'
 import queue from '@/audio/queue'
+import radios from '@/radios'
 import Track from '@/audio/track'
 import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
-import radios from '@/radios'
 
 export default {
   name: 'player',
@@ -86,6 +88,7 @@ export default {
       sliderVolume: this.currentVolume,
       queue: queue,
       Track: Track,
+      favoriteTracks,
       radios
     }
   },

front/src/components/favorites/TrackFavoriteIcon.vue

@@ -1,4 +1,4 @@
-<template>
+ <template>
   <button @click="favoriteTracks.set(track.id, !isFavorite)" v-if="button" :class="['ui', 'pink', {'inverted': isFavorite}, {'favorited': isFavorite}, 'button']">
     <i class="heart icon"></i>
     <template v-if="isFavorite">
@@ -24,11 +24,6 @@ export default {
       favoriteTracks
     }
   },
-  methods: {
-    toggleFavorite () {
-      this.isFavorite = !this.isFavorite
-    }
-  },
   computed: {
     title () {
       if (this.isFavorite) {

front/src/favorites/tracks.js

@@ -33,6 +33,10 @@ export default {
       })
     }
   },
+  toggle (id) {
+    let isFavorite = this.objects[id]
+    this.set(id, !isFavorite)
+  },
   fetch (url) {
     // will fetch favorites by batches from API to have them locally
     var self = this