From 31312d175491081cd178079f11bf77d3b40b67e8 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 30 Dec 2022 11:48:38 +0300
Subject: [PATCH] fix heart button reactivity on songitem

---
 src/components/shared/SongItem.vue | 25 +++++++++++++++----------
 src/utils/useCreateTrackProps.ts   |  1 +
 src/views/AlbumView/index.vue      |  7 +++----
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index 3971615d..db13bda7 100644
--- a/src/components/shared/SongItem.vue
+++ b/src/components/shared/SongItem.vue
@@ -14,7 +14,7 @@
         {{ index }}
       </div>
       <div class="heart-icon">
-        <HeartFillSvg v-if="props.track.is_favorite" />
+        <HeartFillSvg v-if="is_fav" />
         <HeartSvg v-else />
       </div>
     </div>
@@ -29,7 +29,7 @@
       </div>
       <div v-tooltip class="song-title">
         <div class="with-flag" @click.prevent="emitUpdate">
-          <span class="title ellip" ref="artisttitle">
+          <span class="title ellip">
             {{ track.title }}
           </span>
           <MasterFlag v-if="track.bitrate > 1024" />
@@ -70,7 +70,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { onBeforeUpdate, onUpdated, ref, toRef, watch } from "vue";
 
 import { showTrackContextMenu as showContext } from "@/composables/context";
 import { paths } from "@/config";
@@ -92,14 +92,14 @@ const imguri = paths.images.thumb.small;
 const context_menu_showing = ref(false);
 const queue = useQueueStore();
 
-const artisttitle = ref<HTMLElement | null>(null);
-
 const props = defineProps<{
   track: Track;
   index: Number | String;
   hide_album?: Boolean;
 }>();
 
+const is_fav = ref(props.track.is_favorite);
+
 const emit = defineEmits<{
   (e: "playThis"): void;
 }>();
@@ -120,17 +120,22 @@ function isCurrentPlaying() {
   return isCurrent() && queue.playing;
 }
 
-// const is_fav = ref(props.track.is_favorite);
-
 function addToFav(trackhash: string) {
   favoriteHandler(
-    props.track.is_favorite,
+    is_fav.value,
     favType.track,
     trackhash,
-    () => (props.track.is_favorite = true),
-    () => (props.track.is_favorite = false)
+    () => (is_fav.value = true),
+    () => (is_fav.value = false)
   );
 }
+
+watch(
+  () => props.track.is_favorite,
+  (newValue) => {
+    is_fav.value = newValue;
+  }
+);
 </script>
 
 <style lang="scss">
diff --git a/src/utils/useCreateTrackProps.ts b/src/utils/useCreateTrackProps.ts
index 8d42487e..3f24bc4d 100644
--- a/src/utils/useCreateTrackProps.ts
+++ b/src/utils/useCreateTrackProps.ts
@@ -1,5 +1,6 @@
 import { Track } from "@/interfaces";
 import queue from "@/stores/queue";
+import { toRef } from "vue";
 
 export default function createTrackProps(track: Track) {
   return {
diff --git a/src/views/AlbumView/index.vue b/src/views/AlbumView/index.vue
index a2aadc5a..306b2a64 100644
--- a/src/views/AlbumView/index.vue
+++ b/src/views/AlbumView/index.vue
@@ -23,7 +23,6 @@ import { computed } from "@vue/reactivity";
 import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
 
 import { Track } from "@/interfaces";
-import { createTrackProps } from "@/utils";
 
 import useAlbumStore from "@/stores/pages/album";
 import useQueueStore from "@/stores/queue";
@@ -61,7 +60,7 @@ class songItem {
     this.id = Math.random();
     this.props = track.is_album_disc_number
       ? { album_disc: track }
-      : { ...createTrackProps(track), hide_album: true, index: track.track };
+      : { track, hide_album: true, index: track.track };
     this.component = track.is_album_disc_number ? AlbumDiscBar : SongItem;
   }
 }
@@ -94,7 +93,7 @@ function getArtistAlbumComponents(): ScrollerItem[] {
         albums: ar.albums,
         title: `More from ${artistname}`,
         albumType: discographyAlbumTypes.all,
-        route: `/artists/${artisthash}/discography`
+        route: `/artists/${artisthash}/discography`,
       },
       size: 20 * 16,
     };
@@ -117,7 +116,7 @@ const scrollerItems = computed(() => {
 });
 
 function playFromAlbum(index: number) {
-  const { title, albumartists, albumhash } = album.info;
+  const { title, albumhash } = album.info;
   queue.playFromAlbum(title, albumhash, album.srcTracks);
   queue.play(index);
 }