add favourite button to player

src/library/track/CellActions.vue

@@ -33,8 +33,8 @@
       toggleFavourite() {
         this.favourite = !this.favourite
         return this.favourite
-          ? this.$api.addFavourite(this.track.id, 'track')
+          ? this.$store.dispatch('addFavourite', this.track.id)
-          : this.$api.removeFavourite(this.track.id, 'track')
+          : this.$store.dispatch('removeFavourite', this.track.id)
       },
       download() {
         window.location.href = this.$api.getDownloadUrl(this.track.id)

src/player/Player.vue

@@ -41,6 +41,11 @@
         <div class="col-auto col-sm p-0">
           <div class="d-flex flex-nowrap justify-content-end pr-3">
             <div class="m-0 d-none d-md-inline-flex align-items-center">
+              <b-button title="Favourite"
+                        variant="link" class="m-0"
+                        @click="toggleFavourite">
+                <Icon :icon="track.favourite ? 'heart-fill' : 'heart'" />
+              </b-button>
               <b-button id="player-volume-btn" variant="link" title="Volume">
                 <Icon :icon="muteActive ? 'volume-mute-fill' : 'volume-up-fill'" />
               </b-button>
@@ -160,6 +165,11 @@
       setVolume(volume: any) {
         return this.$store.dispatch('player/setVolume', parseFloat(volume))
       },
+      toggleFavourite() {
+        return this.track.favourite
+          ? this.$store.dispatch('removeFavourite', this.track.id)
+          : this.$store.dispatch('addFavourite', this.track.id)
+      }
     }
   })
 </script>

src/player/store.ts

@@ -133,6 +133,13 @@ export const playerModule: Module<State, any> = {
       state.mute = value <= 0.0
       localStorage.setItem('player.volume', String(value))
     },
+    updateTrack(state, track) {
+      const idx = state.queue.findIndex(x => x.id === track.id)
+      if (idx > -1) {
+        state.queue[idx] = Object.assign(state.queue[idx], track)
+        persistQueue(state)
+      }
+    },
   },
 
   actions: {

src/shared/store.ts

@@ -83,6 +83,14 @@ const setupRootModule = (authService: AuthService, api: API): Module<State, any>
       api.deletePlaylist(id).then(() => {
         commit('removePlaylist', id)
       })
+    },
+    addFavourite({ commit }, id) {
+      commit('player/updateTrack', { id, favourite: true })
+      return api.addFavourite(id, 'track')
+    },
+    removeFavourite({ commit }, id) {
+      commit('player/updateTrack', { id, favourite: false })
+      return api.removeFavourite(id, 'track')
     }
   },
 })