major refactors

- add album page store
- show loaders in beforeEnter guards
- show bitrate on now playing card
- etc

src/components/FolderView/SongList.vue

@@ -15,7 +15,8 @@
           :song="song"
           :index="index + 1"
           @updateQueue="updateQueue"
-          @loadAlbum="loadAlbum"
+          :isPlaying="queue.playing"
+          :isCurrent="queue.current.trackid == song.trackid"
         />
       </div>
     </div>
@@ -33,7 +34,6 @@ import { useRoute } from "vue-router";
 
 import SongItem from "../shared/SongItem.vue";
 
-import routeLoader from "../../composables/routeLoader.js";
 import state from "../../composables/state";
 import useQStore from "../../stores/queue";
 import { Track } from "../../interfaces";
@@ -43,28 +43,29 @@ const queue = useQStore();
 const props = defineProps<{
   tracks: Track[];
   path?: string;
+  pname?: string;
+  playlistid?: string;
 }>();
 
 let route = useRoute().name;
-console.log(route);
 const search_query = state.search_query;
 
-function updateQueue(song: Track) {
-  
+function updateQueue(track: Track) {
   switch (route) {
     // check which route the play request come from
     case "FolderView":
-      queue.playFromFolder(props.path, props.tracks, song);
+      queue.playFromFolder(props.path, props.tracks);
+      queue.play(track);
       break;
     case "AlbumView":
+      queue.playFromAlbum(track.album, track.albumartist, props.tracks);
+      queue.play(track);
+      break;
+    case "PlaylistView":
+      queue.playFromPlaylist(props.pname, props.playlistid, props.tracks);
+      queue.play(track);
       break;
   }
-
-  // perks.updateQueue(song, type);
-}
-
-function loadAlbum(title, albumartist) {
-  routeLoader.toAlbum(title, albumartist);
 }
 </script>
 

src/components/LeftSidebar/SongCard.vue

@@ -2,6 +2,20 @@
   <div class="info">
     <div class="desc">
       <div>
+        <div class="art">
+          <div
+            class="l-image image rounded"
+            :style="{
+              backgroundImage: `url(&quot;${track.image}&quot;)`,
+            }"
+          ></div>
+        </div>
+        <div id="bitrate">
+          <span v-if="track.bitrate > 330"
+            >FLAC • {{ track.bitrate }}</span
+          >
+          <span v-else>MP3 | {{ track.bitrate }}</span>
+        </div>
         <div class="title ellip">{{ props.track.title }}</div>
         <div class="separator no-border"></div>
         <div class="artists ellip" v-if="props.track.artists[0] !== ''">

src/components/LeftSidebar/nowPlaying.vue

@@ -4,15 +4,6 @@
     <div class="button menu image rounded"></div>
     <div class="separator no-border"></div>
     <div>
-      <div class="art">
-        <div
-          class="l-image image rounded"
-          :style="{
-            backgroundImage: `url(&quot;${queue.current.image}&quot;)`,
-          }"
-        ></div>
-      </div>
-      <div class="separator no-border"></div>
       <SongCard :track="queue.current" />
       <Progress :seek="queue.seek" :pos="queue.current_time" />
       <HotKeys
@@ -81,6 +72,7 @@ const queue = useQStore();
     width: 100%;
     display: grid;
     place-items: center;
+    margin-bottom: $small;
 
     .l-image {
       height: 12rem;
@@ -88,6 +80,18 @@ const queue = useQStore();
     }
   }
 
+  #bitrate {
+    position: absolute;
+    font-size: 0.75rem;
+    width: max-content;
+    padding: 0.2rem;
+    top: 13.25rem;
+    left: 1.5rem;
+    background-color: $black;
+    border-radius: $smaller;
+    box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.438);
+  }
+
   .title {
     font-weight: 900;
   }

src/components/PlaylistView/FeaturedArtists.vue

@@ -58,12 +58,13 @@ export default {
 
 <style lang="scss">
 .f-artists {
-  height: 15.5em;
+  height: 14.5em;
   width: calc(100%);
   padding: $small;
+  padding-bottom: 0;
   border-radius: $small;
   user-select: none;
-  background: linear-gradient(58deg, $gray 0%, rgba(5, 0, 7, 0.5) 100%);
+  background: linear-gradient(0deg, transparent, $black);
   position: relative;
 
   .header {
@@ -75,7 +76,8 @@ export default {
     .headin {
       font-size: 1.5rem;
       font-weight: 900;
-      display: flex;
+      // border: solid;
+      margin-left: $small;
     }
   }
 }

src/components/PlaylistView/Header.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="p-header">
-    <div class="carddd circular">
+    <div class="carddd">
       <div class="type">❤ Playlist</div>
       <div class="title ellip">{{ props.info.name }}</div>
       <div class="desc">
         {{ props.info.desc[0] }}
       </div>
-      <div class="duration rounded">4 Tracks • 3 Hours</div>
+      <div class="duration">4 Tracks • 3 Hours</div>
       <div class="btns">
         <PlayBtnRect />
       </div>
@@ -77,6 +77,7 @@ const props = defineProps<{
     width: 25rem;
     padding: 1rem;
     background-color: rgba(5, 4, 4, 0.829);
+    border-radius: .75rem;
 
     .type {
       color: rgba(255, 255, 255, 0.692);
@@ -85,6 +86,7 @@ const props = defineProps<{
     .title {
       font-size: 2.5rem;
       font-weight: 900;
+      text-transform: capitalize;
     }
 
     .desc {
@@ -105,6 +107,7 @@ const props = defineProps<{
       padding: $smaller;
       border: solid 1px $gray1;
       user-select: none;
+      border-radius: $smaller;
     }
 
     .btns {

src/components/RightSideBar/Queue.vue

@@ -14,9 +14,11 @@
             <p class="title ellip">{{ queue.next.title }}</p>
             <hr />
             <p class="artist ellip">
-              <span v-for="artist in putCommas(queue.next.artists)" :key="artist">{{
-                artist
-              }}</span>
+              <span
+                v-for="artist in putCommas(queue.next.artists)"
+                :key="artist"
+                >{{ artist }}</span
+              >
             </p>
           </div>
         </div>
@@ -37,10 +39,11 @@
 
 <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";
+import { onBeforeMount } from "vue";
+
 const queue = useQStore();
 
 const putCommas = perks.putCommas;

src/components/Search/TracksGrid.vue

@@ -8,6 +8,8 @@
             v-for="track in props.tracks"
             :key="track.trackid"
             :track="track"
+            :isPlaying="queue.playing"
+            :isCurrent="queue.current.trackid == track.trackid"
           />
         </tbody>
       </table>
@@ -19,9 +21,10 @@
 <script setup>
 import LoadMore from "./LoadMore.vue";
 import TrackItem from "../shared/TrackItem.vue";
+import useQStore from "../../stores/queue";
 
 let counter = 0;
-
+const queue = useQStore();
 const props = defineProps({
   tracks: {
     type: Object,

src/components/playlists/PlaylistCard.vue

@@ -7,7 +7,7 @@
     <div class="image rounded"></div>
     <div class="bottom">
       <div class="name ellip">{{ props.playlist.name }}</div>
-      <div class="count">N Tracks</div>
+      <div class="count">{{ props.playlist.count }} Tracks</div>
     </div>
   </router-link>
 </template>
@@ -23,21 +23,35 @@ const props = defineProps<{
 <style lang="scss">
 .p-card {
   width: 100%;
-  background-color: $gray;
+  background: $gray;
   padding: $small;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: $accent;
+    .bottom > .count {
+      color: $white;
+    }
+  }
 
   .image {
     min-width: 100%;
     height: 10rem;
     background-image: url("../../assets/images/eggs.jpg");
+    background-size: auto 10rem;
+    transition: all 0.2s ease;
   }
 
   .bottom {
     margin-top: $small;
 
+    .name {
+      text-transform: capitalize;
+    }
+
     .count {
       font-size: $medium;
-      color: $red;
+      color: $indigo;
     }
   }
 }

src/components/shared/SongItem.vue

@@ -1,10 +1,7 @@
 <template>
   <div
     class="songlist-item rounded"
-    :class="[
-      { current: current.trackid === props.song.trackid },
-      { 'context-on': context_on },
-    ]"
+    :class="[{ current: props.isCurrent }, { 'context-on': context_on }]"
     @dblclick="emitUpdate(props.song)"
     @contextmenu="showContextMenu"
   >
@@ -17,8 +14,8 @@
       >
         <div
           class="now-playing-track image"
-          v-if="current.trackid === props.song.trackid"
-          :class="{ active: is_playing, not_active: !is_playing }"
+          v-if="props.isPlaying && props.isCurrent"
+          :class="{ active: isPlaying, not_active: !isPlaying }"
         ></div>
       </div>
       <div @click="emitUpdate(props.song)">
@@ -46,14 +43,20 @@
         <span class="artist">{{ props.song.albumartist }}</span>
       </div>
     </div>
-    <div class="song-album">
-      <div
-        class="album ellip"
-        @click="emitLoadAlbum(props.song.album, props.song.albumartist)"
-      >
+    <router-link
+      class="song-album"
+      :to="{
+        name: 'AlbumView',
+        params: {
+          album: props.song.album,
+          artist: props.song.albumartist,
+        },
+      }"
+    >
+      <div class="album ellip">
         {{ props.song.album }}
       </div>
-    </div>
+    </router-link>
     <div class="song-duration">
       {{ perks.formatSeconds(props.song.length) }}
     </div>
@@ -62,7 +65,6 @@
 
 <script setup lang="ts">
 import perks from "../../composables/perks.js";
-import state from "../../composables/state";
 import useContextStore from "../../stores/context";
 import useModalStore from "../../stores/modal";
 
@@ -72,7 +74,6 @@ import { Track } from "../../interfaces.js";
 
 const contextStore = useContextStore();
 const modalStore = useModalStore();
-
 const context_on = ref(false);
 
 const showContextMenu = (e: Event) => {
@@ -92,23 +93,17 @@ const showContextMenu = (e: Event) => {
 const props = defineProps<{
   song: Track;
   index: Number;
+  isPlaying: Boolean;
+  isCurrent: Boolean;
 }>();
 
 const emit = defineEmits<{
   (e: "updateQueue", song: Track): void;
-  (e: "loadAlbum", album: string, artist: string): void;
 }>();
 
 function emitUpdate(track: Track) {
   emit("updateQueue", track);
 }
-
-function emitLoadAlbum(title: string, artist: string) {
-  emit("loadAlbum", title, artist);
-}
-
-const is_playing = state.is_playing;
-const current = state.current;
 </script>
 
 <style lang="scss">