From c9cd6a8067b5fde4dd8af5d4711a35a2dc71c0a2 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 6 Sep 2022 15:59:18 +0300
Subject: [PATCH] remove div nesting on right sidebar

+ rewrite vTooltip to handle updates to tooltip text
---
 src/components/FolderView/SongList.vue | 57 +++++---------------------
 src/components/RightSideBar/Main.vue   | 55 +++++++++++--------------
 src/components/RightSideBar/Queue.vue  | 57 ++++++++------------------
 src/components/shared/SongItem.vue     |  4 +-
 src/directives/vTooltip.ts             | 30 ++++++++------
 src/views/FolderView.vue               | 26 ++++++++----
 src/views/album/Content.vue            | 14 ++++++-
 src/views/playlist/Content.vue         | 19 ++++++++-
 8 files changed, 123 insertions(+), 139 deletions(-)

diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index 41f1154..e65f928 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -16,17 +16,17 @@
     </div>
     <div class="songlist">
       <SongItem
-        v-for="track in getTrackList()"
+        v-for="(track, index) in getTrackList()"
         :key="track.trackid"
         :track="track"
         :index="track.index"
-        @updateQueue="updateQueue"
+        @updateQueue="updateQueue(index)"
         :isPlaying="queue.playing"
         :isCurrent="queue.currentid == track.trackid"
       />
     </div>
-    <div class="copyright" v-if="copyright && copyright()">
-      {{ copyright() }}
+    <div class="copyright" v-if="copyright && copyright">
+      {{ copyright }}
     </div>
   </div>
   <div v-else-if="tracks.length === 0">
@@ -38,19 +38,16 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { useRoute } from "vue-router";
 import { useElementSize } from "@vueuse/core";
 
 import SongItem from "../shared/SongItem.vue";
 
 import { Routes } from "@/composables/enums";
 import { Track } from "@/interfaces";
-import useAlbumStore from "@/stores/pages/album";
 import useQStore from "@/stores/queue";
 import { computed } from "@vue/reactivity";
 
 const queue = useQStore();
-const album = useAlbumStore();
 
 const props = defineProps<{
   tracks: Track[];
@@ -59,14 +56,15 @@ const props = defineProps<{
   playlistid?: string;
   on_album_page?: boolean;
   disc?: string | number;
-  copyright?: (() => string) | null;
+  copyright?: string | null;
 }>();
 
-const route = useRoute();
-const routename = route.name as string;
+const emit = defineEmits<{
+  (e: "playFromPage", index: number): void;
+}>();
 
 const tracklistElem = ref<HTMLElement | null>(null);
-const { width, height } = useElementSize(tracklistElem);
+const { width } = useElementSize(tracklistElem);
 
 const brk = {
   sm: 500,
@@ -76,41 +74,8 @@ const brk = {
 const isSmall = computed(() => width.value < brk.sm);
 const isMedium = computed(() => width.value > brk.sm && width.value < brk.md);
 
-/**
- * Plays a clicked track and updates the queue
- *
- * @param track Track object
- */
-function updateQueue(track: Track) {
-  const index = props.tracks.findIndex(
-    (t: Track) => t.trackid === track.trackid
-  );
-
-  switch (routename) {
-    case Routes.folder:
-      queue.playFromFolder(props.path || "", props.tracks);
-      queue.play(index);
-      break;
-    case Routes.album:
-      const tindex = album.tracks.findIndex((t) => t.trackid === track.trackid);
-
-      queue.playFromAlbum(
-        track.album || "",
-        track.albumartist || "",
-        track.albumhash || "",
-        album.tracks
-      );
-      queue.play(tindex);
-      break;
-    case Routes.playlist:
-      queue.playFromPlaylist(
-        props.pname || "",
-        props.playlistid || "",
-        props.tracks
-      );
-      queue.play(index);
-      break;
-  }
+function updateQueue(index: number) {
+  emit("playFromPage", index);
 }
 
 /**
diff --git a/src/components/RightSideBar/Main.vue b/src/components/RightSideBar/Main.vue
index 20b39b7..d844502 100644
--- a/src/components/RightSideBar/Main.vue
+++ b/src/components/RightSideBar/Main.vue
@@ -2,20 +2,18 @@
   <div
     class="r-sidebar rounded border"
     :style="{
-      marginBottom: !settings.use_alt_np ? '-1rem' : '',
+      marginBottom: !settings.show_alt_np ? '-1rem' : '',
     }"
   >
-    <div class="grid">
-      <div class="r-content">
-        <div class="r-dash" v-if="tabs.current === tabs.tabs.home">
-          <DashBoard />
-        </div>
-        <div class="r-search" v-if="tabs.current === tabs.tabs.search">
-          <Search />
-        </div>
-        <div class="r-queue" v-if="tabs.current === tabs.tabs.queue">
-          <Queue />
-        </div>
+    <div class="r-content">
+      <div class="r-dash" v-if="tabs.current === tabs.tabs.home">
+        <DashBoard />
+      </div>
+      <div class="r-search" v-if="tabs.current === tabs.tabs.search">
+        <Search />
+      </div>
+      <div class="r-queue" v-if="tabs.current === tabs.tabs.queue">
+        <Queue />
       </div>
     </div>
   </div>
@@ -35,28 +33,25 @@ const settings = useSettingsStore();
 <style lang="scss">
 .r-sidebar {
   width: 100%;
+  overflow: hidden;
 
-  .grid {
-    display: flex;
-    position: relative;
+  .r-content {
+    width: 100%;
     height: 100%;
 
-    .r-content {
-      grid-area: content;
+    .r-search {
+      height: 100%;
+    }
+
+    .r-dash {
+      height: 100%;
+    }
+
+    .r-queue {
+      height: 100%;
       overflow: hidden;
-      width: 100%;
-
-      .r-search {
-        height: 100%;
-      }
-
-      .r-dash {
-        height: 100%;
-      }
-
-      .r-queue {
-        height: 100%;
-      }
+      display: grid;
+      grid-template-rows: max-content 1fr;
     }
   }
 }
diff --git a/src/components/RightSideBar/Queue.vue b/src/components/RightSideBar/Queue.vue
index cdaba9c..f1c2d45 100644
--- a/src/components/RightSideBar/Queue.vue
+++ b/src/components/RightSideBar/Queue.vue
@@ -1,20 +1,16 @@
 <template>
-  <div class="up-next">
-    <div class="r-grid">
-      <div class="scrollable-r rounded">
-        <QueueActions />
-        <div class="inner">
-          <TrackComponent
-            v-for="(t, index) in queue.tracklist"
-            :key="index"
-            :track="t"
-            :index="index + 1"
-            :isPlaying="queue.playing"
-            :isHighlighted="false"
-            :isCurrent="index === queue.currentindex"
-          />
-        </div>
-      </div>
+    <QueueActions />
+    <div class="scrollable-r">
+      <div class="inner">
+        <TrackComponent
+          v-for="(t, index) in queue.tracklist"
+          :key="index"
+          :track="t"
+          :index="index + 1"
+          :isPlaying="queue.playing"
+          :isHighlighted="false"
+          :isCurrent="index === queue.currentindex"
+        />
     </div>
   </div>
 </template>
@@ -58,32 +54,13 @@ onUpdated(() => {
 </script>
 
 <style lang="scss">
-.up-next {
-  overflow: hidden;
+.scrollable-r {
   height: 100%;
+  overflow: auto;
 
-  .heading {
-    position: relative;
-    margin: 0.5rem 0 1rem 0;
-  }
-
-  .r-grid {
-    position: relative;
-    height: 100%;
-
-    .scrollable-r {
-      height: 100%;
-      overflow: hidden;
-      display: grid;
-      grid-template-rows: max-content 1fr;
-
-      .inner {
-        overflow: scroll;
-        overflow-x: hidden;
-        scrollbar-color: grey transparent;
-        margin: 1rem 0;
-      }
-    }
+  .inner {
+    scrollbar-color: grey transparent;
+    margin: 1rem 0;
   }
 }
 </style>
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index 35798c9..8cbe574 100644
--- a/src/components/shared/SongItem.vue
+++ b/src/components/shared/SongItem.vue
@@ -86,11 +86,11 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: "updateQueue", song: Track): void;
+  (e: "updateQueue"): void;
 }>();
 
 function emitUpdate(track: Track) {
-  emit("updateQueue", track);
+  emit("updateQueue");
 }
 
 function showMenu(e: Event) {
diff --git a/src/directives/vTooltip.ts b/src/directives/vTooltip.ts
index 39d52bd..eb56af4 100644
--- a/src/directives/vTooltip.ts
+++ b/src/directives/vTooltip.ts
@@ -11,13 +11,15 @@ function hideTooltip() {
   tooltip.style.visibility = "hidden";
 }
 
-function handleHover(el: HTMLElement, text: string, isHovered: Ref<boolean>) {
+function handleHover(el: HTMLElement, text: string, handleOthers = true) {
+  let isHovered = false;
+
   el.addEventListener("mouseover", () => {
-    isHovered.value = true;
+    isHovered = true;
     tooltip.innerText = text;
 
     setTimeout(() => {
-      if (isHovered.value) {
+      if (isHovered) {
         tooltip.style.visibility = "visible";
 
         createPopper(el, tooltip, {
@@ -37,28 +39,32 @@ function handleHover(el: HTMLElement, text: string, isHovered: Ref<boolean>) {
         });
       }
     }, 2000);
+
+    function handleHide() {
+      ["mouseout", "click"].forEach((event) => {
+        el.addEventListener(event, () => {
+          isHovered = false;
+          hideTooltip();
+        });
+      });
+    }
+
+    handleOthers ? handleHide() : null;
   });
 }
 let isHovered = ref(false);
 
 export default {
-  state: {},
   mounted(el: HTMLElement, binding) {
     if (tooltip === undefined) {
       tooltip = getTooltip();
     }
 
-    handleHover(el, binding.value, isHovered);
-    ["mouseout", "click"].forEach((event) => {
-      el.addEventListener(event, () => {
-        isHovered.value = false;
-        hideTooltip();
-      });
-    });
+    handleHover(el, binding.value);
   },
   updated(el, binding) {
     el.removeEventListener("mouseover", () => {});
-    handleHover(el, binding.value, isHovered);
+    handleHover(el, binding.value, false);
   },
   beforeUnmount(el: HTMLElement) {
     hideTooltip();
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index ceec48d..3ec3238 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -12,8 +12,12 @@
           loading="lazy"
         />
       </div>
-      <FolderList :folders="FStore.dirs" v-if="FStore.dirs.length" />
-      <SongList :tracks="FStore.tracks" :path="FStore.path" />
+      <FolderList :folders="folder.dirs" v-if="folder.dirs.length" />
+      <SongList
+        :tracks="folder.tracks"
+        :path="folder.path"
+        @playFromPage="playFromPage"
+      />
     </div>
   </div>
 </template>
@@ -26,12 +30,14 @@ import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
 import FolderSvg from "@/assets/icons/folder.svg";
 
-import useFStore from "../stores/pages/folder";
-import useLoaderStore from "../stores/loader";
+import useFolderStore from "@/stores/pages/folder";
+import useQueueStore from "@/stores/queue";
+import useLoaderStore from "@/stores/loader";
 import { isSameRoute } from "@/composables/perks";
 
 const loader = useLoaderStore();
-const FStore = useFStore();
+const folder = useFolderStore();
+const queue = useQueueStore();
 
 const scrollable = ref<any>(null);
 
@@ -40,11 +46,17 @@ function getFolderName(route: RouteLocationNormalized) {
   return path.split("/").pop();
 }
 
+function playFromPage(index: number) {
+  queue.playFromFolder(folder.path, folder.tracks);
+  queue.play(index);
+}
+
 onBeforeRouteUpdate((to, from) => {
   if (isSameRoute(to, from)) return;
 
   loader.startLoading();
-  FStore.fetchAll(to.params.path as string)
+  folder
+    .fetchAll(to.params.path as string)
 
     .then(() => {
       scrollable.value.scrollTop = 0;
@@ -107,7 +119,7 @@ onBeforeRouteUpdate((to, from) => {
       width: 100%;
       object-fit: cover;
       object-position: bottom right;
-      transition: all .25s ease;
+      transition: all 0.25s ease;
     }
   }
 
diff --git a/src/views/album/Content.vue b/src/views/album/Content.vue
index bcc4d62..ebb618e 100644
--- a/src/views/album/Content.vue
+++ b/src/views/album/Content.vue
@@ -6,7 +6,8 @@
         :tracks="disc"
         :on_album_page="true"
         :disc="key"
-        :copyright="isLastDisc(key) ? () => copyright : null"
+        :copyright="isLastDisc(key) ? copyright : null"
+        @playFromPage="playFromAlbumPage"
       />
     </div>
   </div>
@@ -15,6 +16,8 @@
 <script setup lang="ts">
 import { Track } from "@/interfaces";
 import SongList from "@/components/FolderView/SongList.vue";
+import useQueueStore from "@/stores/queue";
+import useAlbumStore from "@/stores/pages/album";
 
 const props = defineProps<{
   discs: {
@@ -23,11 +26,20 @@ const props = defineProps<{
   copyright?: string;
 }>();
 
+const queue = useQueueStore();
+const album = useAlbumStore();
+
 // check if the disc is the last disc
 const isLastDisc = (disc: string | number) => {
   const discs = Object.keys(props.discs);
   return discs[discs.length - 1] === disc;
 };
+
+function playFromAlbumPage(index: number) {
+  const { title, artist, hash } = album.info;
+  queue.playFromAlbum(title, artist, hash, album.tracks);
+  queue.play(index);
+}
 </script>
 
 <style lang="scss">
diff --git a/src/views/playlist/Content.vue b/src/views/playlist/Content.vue
index b4a60d8..2fbc276 100644
--- a/src/views/playlist/Content.vue
+++ b/src/views/playlist/Content.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="songlist rounded">
     <div v-if="tracks.length">
-      <SongList :tracks="tracks" :pname="name" :playlistid="playlistid"/>
+      <SongList
+        :tracks="tracks"
+        :pname="name"
+        :playlistid="playlistid"
+        @playFromPage="playFromPlaylistPage"
+      />
     </div>
     <div v-else-if="tracks.length === 0 && count > 0">
       <div class="no-results">
@@ -17,6 +22,9 @@
 </template>
 
 <script setup lang="ts">
+import useQueueStore from "@/stores/queue";
+import usePlaylistStore from "@/stores/pages/playlist";
+
 import SongList from "@/components/FolderView/SongList.vue";
 import { Track } from "@/interfaces";
 
@@ -26,4 +34,13 @@ defineProps<{
   name: string;
   playlistid: string;
 }>();
+
+const queue = useQueueStore();
+const playlist = usePlaylistStore();
+
+function playFromPlaylistPage(index: number) {
+  const { name, playlistid } = playlist.info;
+  queue.playFromPlaylist(name, playlistid, playlist.tracks);
+  queue.play(index);
+}
 </script>