From 4e0837a62730b003c03fc09d16af0ca06f73da59 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sat, 8 Oct 2022 20:05:16 +0300
Subject: [PATCH] use @vueuse/useClickOutside to hide context menu

---
 src/App.vue                    |  8 --------
 src/components/BottomBar.vue   |  1 -
 src/components/ContextMenu.vue | 23 ++++++++++++++++++++++-
 src/views/QueueView.vue        |  4 ++--
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 727293b8..3cc7a141 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -53,19 +53,11 @@ import LeftSidebar from "./components/LeftSidebar/index.vue";
 const queue = useQStore();
 const router = useRouter();
 const modal = useModalStore();
-const context_store = useContextStore();
 const settings = useSettingsStore();
-const app_dom = document.getElementById("app") as HTMLElement;
 
 queue.readQueue();
 handleShortcuts(useQStore);
 
-app_dom.addEventListener("click", (e) => {
-  if (context_store.visible) {
-    context_store.hideContextMenu();
-  }
-});
-
 router.afterEach(() => {
   (document.getElementById("acontent") as HTMLElement).scrollTo(0, 0);
 });
diff --git a/src/components/BottomBar.vue b/src/components/BottomBar.vue
index 194cd913..345897e5 100644
--- a/src/components/BottomBar.vue
+++ b/src/components/BottomBar.vue
@@ -67,7 +67,6 @@ import { paths } from "@/config";
 import { formatSeconds } from "@/utils";
 import { Routes } from "@/composables/enums";
 
-
 import useQStore from "@/stores/queue";
 import ArtistName from "@/components/shared/ArtistName.vue";
 import HotKeys from "@/components/LeftSidebar/NP/HotKeys.vue";
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index 63999da5..ebedaae0 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="context-menu rounded shadow-lg"
+    ref="contextMenu"
     :class="[
       { 'context-menu-visible': context.visible },
       { 'context-normalizedX': context.normalizedX },
@@ -29,10 +30,30 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
+import { onClickOutside } from "@vueuse/core";
+
 import useContextStore from "../stores/context";
 import ContextItem from "./Contextmenu/ContextItem.vue";
-
 const context = useContextStore();
+
+const contextMenu = ref<HTMLElement>();
+
+let clickCount = 0;
+
+onClickOutside(contextMenu, (e) => {
+  if (!context.visible) {
+    clickCount = 0;
+    return;
+  }
+  clickCount++;
+
+  if (context.visible && clickCount == 2) {
+    context.hideContextMenu();
+    e.stopImmediatePropagation();
+    clickCount = 0;
+  }
+});
 </script>
 
 <style lang="scss">
diff --git a/src/views/QueueView.vue b/src/views/QueueView.vue
index 8def29d0..dd1b41cf 100644
--- a/src/views/QueueView.vue
+++ b/src/views/QueueView.vue
@@ -16,9 +16,9 @@
       <SongItem
         :track="item.track"
         :index="index + 1"
-        :isCurrent="queue.currentid === item.trackid"
+        :isCurrent="queue.currentid === item.track.trackid"
         :isCurrentPlaying="
-          queue.currentid === item.trackid && queue.playing
+          queue.currentid === item.track.trackid && queue.playing
         "
         @playThis="playFromQueue(index)"
       />