From f0d3c1c663ff64f28a634ed29c942371b7547bfc Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sat, 2 Jul 2022 14:55:35 +0300
Subject: [PATCH] attach context menu to now playing song card

- clicking now playing thumbnail will send you to album page
---
 src/components/LeftSidebar/SongCard.vue   | 26 +++++++----
 src/components/LeftSidebar/nowPlaying.vue | 54 +++++++++++++++++------
 src/components/shared/SongItem.vue        | 18 ++++----
 3 files changed, 68 insertions(+), 30 deletions(-)

diff --git a/src/components/LeftSidebar/SongCard.vue b/src/components/LeftSidebar/SongCard.vue
index fddd5af3..82baf7e8 100644
--- a/src/components/LeftSidebar/SongCard.vue
+++ b/src/components/LeftSidebar/SongCard.vue
@@ -2,14 +2,24 @@
   <div class="info">
     <div class="desc">
       <div>
-        <div class="art">
-          <div
-            class="l-image image rounded"
-            :style="{
-              backgroundImage: `url(&quot;${imguri + track.image}&quot;)`,
-            }"
-          ></div>
-        </div>
+        <router-link
+          :to="{
+            name: 'AlbumView',
+            params: {
+              hash: track.albumhash,
+            },
+          }"
+        >
+          <div class="art">
+            <div
+              class="l-image image rounded"
+              :style="{
+                backgroundImage: `url(&quot;${imguri + track.image}&quot;)`,
+              }"
+            ></div>
+          </div>
+        </router-link>
+
         <div id="bitrate">
           <span v-if="track.bitrate > 1500">MASTER</span>
           <span v-else-if="track.bitrate > 330">FLAC</span>
diff --git a/src/components/LeftSidebar/nowPlaying.vue b/src/components/LeftSidebar/nowPlaying.vue
index 0b7c8e00..b7b4c370 100644
--- a/src/components/LeftSidebar/nowPlaying.vue
+++ b/src/components/LeftSidebar/nowPlaying.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="l_ rounded">
     <div class="headin">Now Playing</div>
-    <div class="button menu image rounded"></div>
+    <div
+      class="button menu rounded"
+      @click="showContextMenu"
+      :class="{ context_on: context_on }"
+    >
+      <MenuSvg />
+    </div>
     <div class="separator no-border"></div>
     <div>
       <SongCard :track="queue.current" />
@@ -16,8 +22,34 @@ import SongCard from "./SongCard.vue";
 import HotKeys from "./NP/HotKeys.vue";
 import Progress from "./NP/Progress.vue";
 import useQStore from "../../stores/queue";
+import MenuSvg from "../../assets/icons/more.svg";
+import trackContext from "@/contexts/track_context";
+import useContextStore from "@/stores/context";
+import useModalStore from "@/stores/modal";
+import useQueueStore from "@/stores/queue";
+import { ContextSrc } from "@/composables/enums";
+
+import { ref } from "vue";
 
 const queue = useQStore();
+const contextStore = useContextStore();
+const context_on = ref(false);
+
+const showContextMenu = (e: Event) => {
+  e.preventDefault();
+  e.stopPropagation();
+
+  const menus = trackContext(queue.current, useModalStore, useQueueStore);
+
+  contextStore.showContextMenu(e, menus, ContextSrc.Track);
+  context_on.value = true;
+
+  contextStore.$subscribe((mutation, state) => {
+    if (!state.visible) {
+      context_on.value = false;
+    }
+  });
+};
 </script>
 <style lang="scss">
 .l_ {
@@ -49,31 +81,27 @@ const queue = useQStore();
   }
 
   .button {
-    height: 2rem;
-    width: 2rem;
     position: absolute;
     background-size: 1.5rem;
     top: $small;
     cursor: pointer;
     transition: all 200ms;
+    display: flex;
+    align-items: center;
+    padding: $smaller;
 
     &:hover {
-      background-color: $gray2;
+      background-color: $accent;
     }
   }
 
+  .context_on {
+    background-color: $accent;
+  }
+
   .menu {
     right: $small;
-    background-image: url("../../assets/icons/right-arrow.svg");
     transform: rotate(90deg);
-
-    &:hover {
-      transform: rotate(0deg);
-    }
-  }
-
-  br {
-    height: 0rem;
   }
 
   .art {
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index 211b207a..51b8ce55 100644
--- a/src/components/shared/SongItem.vue
+++ b/src/components/shared/SongItem.vue
@@ -67,17 +67,17 @@
 </template>
 
 <script setup lang="ts">
-import { putCommas, formatSeconds } from "../../composables/perks";
-import useContextStore from "../../stores/context";
-import useModalStore from "../../stores/modal";
-import useQueueStore from "../../stores/queue";
-import { ContextSrc } from "../../composables/enums";
-import OptionSvg from "../../assets/icons/more.svg";
+import { putCommas, formatSeconds } from "@/composables/perks";
+import useContextStore from "@/stores/context";
+import useModalStore from "@/stores/modal";
+import useQueueStore from "@/stores/queue";
+import { ContextSrc } from "@/composables/enums";
+import OptionSvg from "@/assets/icons/more.svg";
 
 import { ref } from "vue";
-import trackContext from "../../contexts/track_context";
-import { Track } from "../../interfaces";
-import { paths } from "../../config";
+import trackContext from "@/contexts/track_context";
+import { Track } from "@/interfaces";
+import { paths } from "@/config";
 
 const contextStore = useContextStore();