From 887f60c8518c2bb5f96f5d7e9f708e326c2fd3b2 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 30 Mar 2022 14:54:27 +0300
Subject: [PATCH] [client] use Queue store on songlist

---
 src/components/FolderView/SongList.vue | 46 +++++++++++---------------
 src/components/RightSideBar/Queue.vue  | 46 ++++++++++++--------------
 2 files changed, 41 insertions(+), 51 deletions(-)

diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index 469ccab9..ed02d72e 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="folder">
-    <div class="table rounded" v-if="props.songs.length">
+    <div class="table rounded" v-if="props.tracks.length">
       <div class="thead">
         <div class="index"></div>
         <div class="track-header">Track</div>
@@ -10,8 +10,8 @@
       </div>
       <div class="songlist">
         <SongItem
-          v-for="(song, index) in props.songs"
-          :key="song"
+          v-for="(song, index) in props.tracks"
+          :key="song.trackid"
           :song="song"
           :index="index + 1"
           @updateQueue="updateQueue"
@@ -19,7 +19,7 @@
         />
       </div>
     </div>
-    <div v-else-if="props.songs.length === 0 && search_query">
+    <div v-else-if="props.tracks.length === 0 && search_query">
       <div class="no-results">
         <div class="text">Nothing down here 😑</div>
       </div>
@@ -28,45 +28,39 @@
   </div>
 </template>
 
-<script setup>
-import { onMounted } from "@vue/runtime-core";
+<script setup lang="ts">
 import { useRoute } from "vue-router";
 
 import SongItem from "../shared/SongItem.vue";
 
-import routeLoader from "@/composables/routeLoader.js";
-import perks from "@/composables/perks.js";
-import state from "@/composables/state";
+import routeLoader from "../../composables/routeLoader.js";
+import state from "../../composables/state";
+import useQStore from "../../stores/queue";
+import { Track } from "../../interfaces";
 
-const props = defineProps({
-  songs: {
-    type: Array,
-    required: true,
-  },
-});
+const queue = useQStore();
 
-let route;
+const props = defineProps<{
+  tracks: Track[];
+  path?: string;
+}>();
 
+let route = useRoute().name;
+console.log(route);
 const search_query = state.search_query;
 
-onMounted(() => {
-  route = useRoute().name;
-});
-
-function updateQueue(song) {
-  let type;
-
+function updateQueue(song: Track) {
+  
   switch (route) {
     // check which route the play request come from
     case "FolderView":
-      type = "folder";
+      queue.playFromFolder(props.path, props.tracks, song);
       break;
     case "AlbumView":
-      type = "album";
       break;
   }
 
-  perks.updateQueue(song, type);
+  // perks.updateQueue(song, type);
 }
 
 function loadAlbum(title, albumartist) {
diff --git a/src/components/RightSideBar/Queue.vue b/src/components/RightSideBar/Queue.vue
index 23daf235..016e75e1 100644
--- a/src/components/RightSideBar/Queue.vue
+++ b/src/components/RightSideBar/Queue.vue
@@ -3,18 +3,18 @@
     <div class="r-grid">
       <div class="main-item border">
         <p class="heading">COMING UP NEXT</p>
-        <div class="itemx" @click="playNext">
+        <div class="itemx" @click="queue.playNext">
           <div
             class="album-art image"
             :style="{
-              backgroundImage: `url(&quot;${next.image}&quot;)`,
+              backgroundImage: `url(&quot;${queue.next.image}&quot;)`,
             }"
           ></div>
           <div class="tags">
-            <p class="title ellip">{{ next.title }}</p>
+            <p class="title ellip">{{ queue.next.title }}</p>
             <hr />
             <p class="artist ellip">
-              <span v-for="artist in putCommas(next.artists)" :key="artist">{{
+              <span v-for="artist in putCommas(queue.next.artists)" :key="artist">{{
                 artist
               }}</span>
             </p>
@@ -22,36 +22,32 @@
         </div>
       </div>
       <div class="scrollable-r border rounded">
-        <TrackItem v-for="song in queue" :key="song.trackid" :track="song" />
+        <TrackItem
+          v-for="t in queue.tracks"
+          :key="t.trackid"
+          :track="t"
+          @playThis="playThis"
+          :isCurrent="t.trackid === queue.current.trackid"
+          :isPlaying="queue.playing"
+        />
       </div>
     </div>
   </div>
 </template>
 
-<script>
-import perks from "@/composables/perks.js";
-import audio from "@/composables/playAudio.js";
+<script setup lang="ts">
+import perks from "../../composables/perks.js";
 import { ref } from "@vue/reactivity";
 import TrackItem from "../shared/TrackItem.vue";
+import useQStore from "../../stores/queue";
+import { Track } from "../../interfaces.js";
+const queue = useQStore();
 
-export default {
-  setup() {
-    const queue = ref(perks.queue);
-    const next = ref(perks.next);
+const putCommas = perks.putCommas;
 
-    const { playNext } = audio;
-
-    const putCommas = perks.putCommas;
-
-    return {
-      playNext,
-      putCommas,
-      queue,
-      next,
-    };
-  },
-  components: { TrackItem },
-};
+function playThis(track: Track) {
+  queue.play(track);
+}
 </script>
 
 <style lang="scss">