separate playFolder and playAlbum

src/components/AlbumView/Header.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="a-header rounded">
-    <div id="header-blur"></div>
     <div
       class="art rounded"
       :style="{
@@ -17,45 +16,44 @@
         <div class="stats">
           {{ album_info.count }} Tracks • {{ album_info.duration }} • 2021
         </div>
-        <div class="play rounded">
+        <button class="play rounded" @click="playAlbum">
           <div class="icon"></div>
           <div>Play</div>
-        </div>
+        </button>
       </div>
     </div>
-    <div class="most-played">
+    <!-- <div class="most-played">
       <div class="art image rounded"></div>
       <div>
         <div class="title">Girl Of My Dreams</div>
         <div class="artist">Juice Wrld, Suga [BTS]</div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
+import state from "@/composables/state.js"
+import perks from "@/composables/perks.js"
+
 export default {
   props: ["album_info"],
-  setup() {},
+  setup() {
+    function playAlbum() {
+      perks.updateQueue(state.album_song_list.value[0], "album")
+    }
+    return {
+      playAlbum
+    }
+  },
 };
 </script>
 
 <style lang="scss">
-#header-blur {
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  z-index: -1;
-  left: 0;
-  backdrop-filter: blur(40px);
-}
-
 .a-header {
   position: relative;
   height: 14rem;
-  background: #232526;
-  background: -webkit-linear-gradient(to right, #414345, #232526);
-  background: linear-gradient(to right, #050107, #00090e);
+  background: $card-dark;
 
   backdrop-filter: blur(40px);
   overflow: hidden;

src/components/FolderView/Header.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="folder-top flex">
     <div class="fname">
-      <button class="play image" @click="playThis(first_song)">
+      <button class="play image" @click="playFolder(first_song)">
         <div class="icon"></div>
         Play
       </button>
@@ -25,12 +25,17 @@
 
 <script>
 import perks from "@/composables/perks.js";
+import state from "@/composables/state.js"
 
 export default {
   props: ["path", "first_song"],
   setup() {
+    function playFolder(song) {
+      perks.updateQueue(song, "folder")
+    }
     return {
-      playThis: perks.updateQueue,
+      playFolder,
+      search_query: state.search_query
     };
   },
 };

src/components/FolderView/SongList.vue

@@ -19,6 +19,7 @@
             :song="song"
             :current="current"
             @updateQueue="updateQueue"
+            @loadAlbum="loadAlbum"
           />
         </tbody>
       </table>
@@ -38,8 +39,10 @@ import { ref } from "@vue/reactivity";
 import { onMounted, onUnmounted } from "@vue/runtime-core";
 
 import SongItem from "../SongItem.vue";
+import getAlbum from "@/composables/getAlbum.js";
 import perks from "@/composables/perks.js";
 import state from "@/composables/state.js";
+import { useRouter, useRoute } from "vue-router";
 
 export default {
   props: ["songs"],
@@ -51,6 +54,11 @@ export default {
     const songTitleWidth = ref(null);
 
     const minWidth = ref(300);
+    let routex;
+
+    const current = ref(perks.current);
+    const search_query = ref(state.search_query);
+    const route = useRouter();
 
     const resizeSongTitleWidth = () => {
       try {
@@ -63,6 +71,8 @@ export default {
     };
 
     onMounted(() => {
+      routex = useRoute().name;
+
       resizeSongTitleWidth();
 
       window.addEventListener("resize", () => {
@@ -76,15 +86,42 @@ export default {
       });
     });
 
-    const current = ref(perks.current);
-    const search_query = ref(state.search_query);
+    function updateQueue(song) {
+      let type;
 
-    function updateQueue(song){
-      perks.updateQueue(song)
+      switch (routex) {
+        case "FolderView":
+            type = "folder";
+          break;
+        case "AlbumView":
+            type = "album";
+          break;
+      }
+
+      perks.updateQueue(song, type);
+    }
+
+    function loadAlbum(title, album_artist) {
+      state.loading.value = true;
+
+      getAlbum(title, album_artist).then((data) => {
+        state.album_song_list.value = data.songs;
+        state.album_info.value = data.info;
+
+        route.push({
+          name: "AlbumView",
+          params: {
+            album: title,
+            artist: album_artist,
+          },
+        });
+        state.loading.value = false;
+      });
     }
 
     return {
       updateQueue,
+      loadAlbum,
       songtitle,
       songTitleWidth,
       minWidth,
@@ -107,6 +144,7 @@ export default {
   width: 100%;
   height: 100%;
   overflow-y: auto;
+  background-color: $card-dark;
 
   &::-webkit-scrollbar {
     display: none;

src/components/SongItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <tr :class="{ current: current._id == song._id }">
+  <tr :class="{ current: current._id.$oid == song._id.$oid }">
     <td
       :style="{ width: songTitleWidth + 'px' }"
       class="flex"
@@ -13,7 +13,7 @@
       >
         <div
           class="now-playing-track image"
-          v-if="current._id == song._id"
+          v-if="current._id.$oid == song._id.$oid"
           :class="{ active: is_playing, not_active: !is_playing }"
         ></div>
       </div>
@@ -35,13 +35,10 @@
       </div>
     </td>
     <td :style="{ width: songTitleWidth + 'px' }">
-      <router-link
+      <div
         class="ellip"
-        :to="{
-          name: 'AlbumView',
-          params: { album: song.album, artist: song.album_artist },
-        }"
-        >{{ song.album }}</router-link
+       @click="emitLoadAlbum(song.album, song.album_artist)"
+        >{{ song.album }}</div
       >
     </td>
     <td
@@ -58,16 +55,23 @@ import perks from "@/composables/perks.js";
 import state from "@/composables/state.js";
 
 export default {
-  props: ["song", "current", "songTitleWidth", "minWidth"],
+  props: ["song", "songTitleWidth", "minWidth"],
   setup(props, { emit }) {
     function emitUpdate(song) {
       emit("updateQueue", song);
     }
 
+    function emitLoadAlbum(title, artist){
+      console.log(title, artist)
+      emit("loadAlbum", title, artist)
+    }
+
     return {
       putCommas: perks.putCommas,
       emitUpdate,
+      emitLoadAlbum,
       is_playing: state.is_playing,
+      current: state.current
     };
   },
 };