From d114aa48cdfb58a46bdaea54bdce54bb3cfec3d7 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 6 Sep 2022 16:10:22 +0300
Subject: [PATCH] fix play from sidebar queue

---
 src/components/RightSideBar/Main.vue  |  1 +
 src/components/RightSideBar/Queue.vue | 52 ++++++++++++---------------
 2 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/src/components/RightSideBar/Main.vue b/src/components/RightSideBar/Main.vue
index d844502..d3d7d3f 100644
--- a/src/components/RightSideBar/Main.vue
+++ b/src/components/RightSideBar/Main.vue
@@ -51,6 +51,7 @@ const settings = useSettingsStore();
       height: 100%;
       overflow: hidden;
       display: grid;
+      gap: $small;
       grid-template-rows: max-content 1fr;
     }
   }
diff --git a/src/components/RightSideBar/Queue.vue b/src/components/RightSideBar/Queue.vue
index f1c2d45..9d1234a 100644
--- a/src/components/RightSideBar/Queue.vue
+++ b/src/components/RightSideBar/Queue.vue
@@ -1,47 +1,39 @@
 <template>
-    <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"
-        />
+  <QueueActions />
+  <div
+    class="scrollable-r"
+    @mouseover="mouseover = true"
+    @mouseout="mouseover = false"
+  >
+    <div class="inner">
+      <TrackItem
+        v-for="(t, index) in queue.tracklist"
+        :key="index"
+        :track="t"
+        :index="index + 1"
+        :isPlaying="queue.playing"
+        :isHighlighted="false"
+        :isCurrent="index === queue.currentindex"
+        @PlayThis="playFromQueue(index)"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onUpdated, ref } from "vue";
+import { onUpdated, ref } from "vue";
 
 import useQStore from "@/stores/queue";
 import { focusElem } from "@/utils";
 
 import TrackItem from "../shared/TrackItem.vue";
-import SongItem from "../shared/SongItem.vue";
 import QueueActions from "./Queue/QueueActions.vue";
 
-const props = defineProps<{
-  isOnQueuePage?: boolean;
-}>();
-
-const TrackComponent = computed(() => {
-  if (props.isOnQueuePage) {
-    return SongItem;
-  }
-
-  return TrackItem;
-});
-
 const queue = useQStore();
 const mouseover = ref(false);
 
-function setMouseOver(val: boolean) {
-  mouseover.value = val;
+function playFromQueue(index: number) {
+  queue.play(index);
 }
 
 onUpdated(() => {
@@ -59,8 +51,8 @@ onUpdated(() => {
   overflow: auto;
 
   .inner {
-    scrollbar-color: grey transparent;
-    margin: 1rem 0;
+    // scrollbar-color: grey transparent;
+    margin-bottom: 1rem;
   }
 }
 </style>