From fa8be2cde4173ad1f5e9957ab8b497031fcec9e5 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 20 Sep 2022 00:16:26 +0300
Subject: [PATCH] feat: add heart icon on left now playing card

---
 src/assets/icons/heart.fill.svg            |  3 +
 src/components/LeftSidebar/NP/SongCard.vue | 67 ++++++++++++++--------
 src/components/LeftSidebar/nowPlaying.vue  |  5 +-
 3 files changed, 50 insertions(+), 25 deletions(-)
 create mode 100644 src/assets/icons/heart.fill.svg

diff --git a/src/assets/icons/heart.fill.svg b/src/assets/icons/heart.fill.svg
new file mode 100644
index 0000000..5e26014
--- /dev/null
+++ b/src/assets/icons/heart.fill.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9912 22.1445C14.2197 22.1445 14.5449 21.9775 14.8086 21.8105C19.7217 18.6465 22.8682 14.9375 22.8682 11.1758C22.8682 7.9502 20.6445 5.7002 17.8408 5.7002C16.0918 5.7002 14.7822 6.66699 13.9912 8.11719C13.2178 6.67578 11.8994 5.7002 10.1504 5.7002C7.34668 5.7002 5.11426 7.9502 5.11426 11.1758C5.11426 14.9375 8.26074 18.6465 13.1738 21.8105C13.4463 21.9775 13.7715 22.1445 13.9912 22.1445Z" fill="#EB5757"/>
+</svg>
diff --git a/src/components/LeftSidebar/NP/SongCard.vue b/src/components/LeftSidebar/NP/SongCard.vue
index 69aeee8..383ef89 100644
--- a/src/components/LeftSidebar/NP/SongCard.vue
+++ b/src/components/LeftSidebar/NP/SongCard.vue
@@ -1,28 +1,32 @@
 <template>
   <div class="sidebar-songcard">
-    <router-link
-      :to="{
-        name: 'AlbumView',
-        params: {
-          hash: track?.albumhash ? track.albumhash : ' ',
-        },
-      }"
-    >
-      <div class="art">
+    <div class="art">
+      <router-link
+        :to="{
+          name: 'AlbumView',
+          params: {
+            hash: track?.albumhash ? track.albumhash : ' ',
+          },
+        }"
+      >
         <img
           :src="imguri + track?.image"
           alt=""
           class="l-image rounded force-lm"
         />
-        <div id="bitrate" v-if="track?.bitrate">
-          {{ track.filetype }}• {{ track.bitrate }}
-        </div>
+      </router-link>
+      <div id="bitrate" v-if="track?.bitrate">
+        {{ track.filetype }}• {{ track.bitrate }}
       </div>
-    </router-link>
+      <div class="heart rounded-sm" @click="heartClicked = !heartClicked">
+        <HeartSvg v-if="!heartClicked" />
+        <HeartFilledSvg v-else />
+      </div>
+    </div>
 
     <div class="bottom">
-      <div class="title ellip t-center">
-        {{ props.track?.title || "♥ Hello ♥" }}
+      <div class="title ellip t-center" v-tooltip="track?.title">
+        {{ track?.title || "♥ Hello ♥" }}
       </div>
       <ArtistName
         :artists="track?.artist || []"
@@ -34,14 +38,21 @@
 </template>
 
 <script setup lang="ts">
-import { paths } from "../../../config";
-import { Track } from "../../../interfaces";
+import { ref } from "vue";
+
+import { paths } from "@/config";
+import { Track } from "@/interfaces";
 import ArtistName from "@/components/shared/ArtistName.vue";
 
-const props = defineProps<{
+import HeartSvg from "@/assets/icons/heart.svg";
+import HeartFilledSvg from "@/assets/icons/heart.fill.svg";
+
+defineProps<{
   track: Track | null;
 }>();
 
+const heartClicked = ref<boolean>(false);
+
 const imguri = paths.images.thumb.large;
 </script>
 
@@ -54,12 +65,23 @@ const imguri = paths.images.thumb.large;
     margin-bottom: $small;
     position: relative;
 
+    .heart {
+      position: absolute;
+      bottom: -$smaller;
+      right: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: $smaller;
+    }
+
     img {
       width: 100%;
       height: auto;
       aspect-ratio: 1;
       object-fit: cover;
       cursor: pointer;
+      margin-bottom: 2rem;
     }
 
     #bitrate {
@@ -67,11 +89,10 @@ const imguri = paths.images.thumb.large;
       font-size: 0.75rem;
       width: max-content;
       padding: 0.2rem 0.35rem;
-      bottom: 1rem;
-      left: 1rem;
-      background-color: $black;
+      bottom: $smaller;
+      left: 0;
+      background-color: $gray4;
       border-radius: $smaller;
-      box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.438);
       text-transform: uppercase;
     }
   }
@@ -88,7 +109,7 @@ const imguri = paths.images.thumb.large;
 
   .artists {
     font-size: 0.85rem;
-    opacity: 0.75;
+    opacity: 0.5;
     margin: 0 auto;
 
     &:hover {
diff --git a/src/components/LeftSidebar/nowPlaying.vue b/src/components/LeftSidebar/nowPlaying.vue
index c75f8fe..5547c4b 100644
--- a/src/components/LeftSidebar/nowPlaying.vue
+++ b/src/components/LeftSidebar/nowPlaying.vue
@@ -2,8 +2,9 @@
   <div class="now-playing-card t-center rounded">
     <SongCard :track="queue.currenttrack" />
     <div class="l-track-time">
-      <span class="rounded">{{ formatSeconds(duration.current) }}</span
-      ><span class="rounded">{{ formatSeconds(duration.full) }}</span>
+      <span class="rounded">{{ formatSeconds(duration.current) }}</span>
+      <!-- <HeartSvg /> -->
+      <span class="rounded">{{ formatSeconds(duration.full) }}</span>
     </div>
     <Progress />
     <HotKeys />