From 4312a4899bbae7f0c7db6453b8540b1dfb897b57 Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Thu, 13 May 2021 13:00:38 +0200
Subject: [PATCH] add favourite button to player

---
 src/library/track/CellActions.vue |  4 ++--
 src/player/Player.vue             | 10 ++++++++++
 src/player/store.ts               |  7 +++++++
 src/shared/store.ts               |  8 ++++++++
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/library/track/CellActions.vue b/src/library/track/CellActions.vue
index bb633bc..a6eb7e0 100644
--- a/src/library/track/CellActions.vue
+++ b/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.$api.removeFavourite(this.track.id, 'track')
+          ? this.$store.dispatch('addFavourite', this.track.id)
+          : this.$store.dispatch('removeFavourite', this.track.id)
       },
       download() {
         window.location.href = this.$api.getDownloadUrl(this.track.id)
diff --git a/src/player/Player.vue b/src/player/Player.vue
index 58e4d92..ef928c8 100644
--- a/src/player/Player.vue
+++ b/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>
diff --git a/src/player/store.ts b/src/player/store.ts
index 1f2f224..582f29f 100644
--- a/src/player/store.ts
+++ b/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: {
diff --git a/src/shared/store.ts b/src/shared/store.ts
index 4ee3036..a1d2d64 100644
--- a/src/shared/store.ts
+++ b/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')
     }
   },
 })