🔷 add PlayingFrom component to right sidebar

🔷 move upNext card into separate component
🔷 a lot of refactors

src/assets/css/global.scss

@@ -38,11 +38,7 @@ a {
 }
 
 .border {
-  border: solid 1px $gray;
-}
-
-.border-sm {
-  border: solid 1px #27262654;
+  border: solid 1px $gray3;
 }
 
 .separator {

src/components/AlbumView/Header.vue

@@ -4,47 +4,38 @@
       <div
         class="image art shadow-lg rounded"
         :style="{
-          backgroundImage: `url(&quot;${props.album_info.image}&quot;)`,
+          backgroundImage: `url(&quot;${props.album.image}&quot;)`,
         }"
       ></div>
       <div class="info">
         <div class="top">
           <div class="h">Album</div>
           <div class="separator no-border"></div>
-          <div class="title">{{ props.album_info.album }}</div>
-          <div class="artist">{{ props.album_info.artist }}</div>
+          <div class="title">{{ props.album.album }}</div>
+          <div class="artist">{{ props.album.artist }}</div>
         </div>
         <div class="separator no-border"></div>
         <div class="bottom">
           <div class="stats shadow-sm">
-            {{ props.album_info.count }} Tracks •
-            {{ perks.formatSeconds(props.album_info.duration, "long") }} •
-            {{ props.album_info.date }}
-          </div>
-          <div class="play rounded" @click="playAlbum">
-            <div class="icon"></div>
-            <div>Play</div>
+            {{ props.album.count }} Tracks •
+            {{ perks.formatSeconds(props.album.duration, "long") }} •
+            {{ props.album.date }}
           </div>
+          <PlayBtnRect :source="playSources.album" />
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup>
-import state from "@/composables/state";
-import perks from "@/composables/perks.js";
-
-const props = defineProps({
-  album_info: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-function playAlbum() {
-  perks.updateQueue(state.album.tracklist[0], "album");
-}
+<script setup lang="ts">
+import perks from "../../composables/perks.js";
+import { AlbumInfo } from "../../interfaces.js";
+import PlayBtnRect from "../shared/PlayBtnRect.vue";
+import { playSources } from "../../composables/enums";
+const props = defineProps<{
+  album: AlbumInfo;
+}>();
 </script>
 
 <style lang="scss">

src/components/PlaylistView/FeaturedArtists.vue

@@ -13,7 +13,7 @@
         v-for="artist in artists"
         :key="artist"
         :artist="artist"
-        :color="ffffff00"
+        :color="'ffffff00'"
       />
     </div>
   </div>

src/components/PlaylistView/Header.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="p-header">
     <div class="carddd">
-      <div class="art image"></div>
+      <div class="art image shadow-sm"></div>
       <div class="info">
         <div class="btns">
           <PlayBtnRect :source="playSources.playlist" />
         </div>
-        <div class="duration">4 Tracks • 3 Hours</div>
+        <div class="duration">{{props.info.count}} Tracks • 3 Hours</div>
         <div class="desc">
-          {{ props.info.desc[0] }}
+          {{ props.info.description }}
         </div>
         <div class="title ellip">{{ props.info.name }}</div>
         <div class="type">Playlist</div>
@@ -25,16 +25,11 @@
 
 <script setup lang="ts">
 import { playSources } from "../../composables/enums";
+import { Playlist } from "../../interfaces";
 
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 const props = defineProps<{
-  info: {
-    name: string;
-    count: number;
-    duration: string;
-    desc: string;
-    lastUpdated: string;
-  };
+  info: Playlist;
 }>();
 </script>
 
@@ -43,9 +38,7 @@ const props = defineProps<{
   display: grid;
   grid-template-columns: 1fr;
   height: 14rem;
-  // background-image: url("../../assets/images/eggs.jpg");
-
-  background-image: linear-gradient(23deg, $black 40%, rgb(141, 11, 2), $black);
+  background-image: linear-gradient(37deg, $black 4%, $accent, $black);
   position: relative;
   margin-top: $small;
   border-radius: 0.75rem;

src/components/RightSideBar/Home/Main.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="r-home">
-   <Recommendations />
+    <UpNext :next="queue.next" :playNext="queue.playNext" />
+    <Recommendations />
   </div>
 </template>
 
 <style lang="scss">
 .r-home {
   height: calc(100% - 1rem);
-  // padding: 0 $small $small 0;
+  padding: 0 $small $small 0;
+  margin-top: $small;
 }
 </style>
 
-<script setup>
-import Recommendations from '../Recommendation.vue';
-</script>
+<script setup lang="ts">
+import Recommendations from "../Recommendation.vue";
+import UpNext from "../queue/upNext.vue";
+import useQStore from "../../../stores/queue";
+const queue = useQStore();
+</script>

src/components/RightSideBar/Queue.vue

@@ -1,28 +1,8 @@
 <template>
   <div class="up-next">
     <div class="r-grid">
-      <div class="main-item border">
-        <p class="heading">COMING UP NEXT</p>
-        <div class="itemx" @click="queue.playNext">
-          <div
-            class="album-art image"
-            :style="{
-              backgroundImage: `url(&quot;${queue.next.image}&quot;)`,
-            }"
-          ></div>
-          <div class="tags">
-            <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
-              >
-            </p>
-          </div>
-        </div>
-      </div>
+      <PlayingFrom :from="queue.from" />
+      <UpNext :next="queue.next" :playNext="queue.playNext" />
       <div class="scrollable-r border rounded">
         <TrackItem
           v-for="t in queue.tracks"
@@ -38,16 +18,14 @@
 </template>
 
 <script setup lang="ts">
-import perks from "../../composables/perks.js";
 import TrackItem from "../shared/TrackItem.vue";
 import useQStore from "../../stores/queue";
 import { Track } from "../../interfaces.js";
-import { onBeforeMount } from "vue";
+import PlayingFrom from "./queue/playingFrom.vue";
+import UpNext from "./queue/upNext.vue";
 
 const queue = useQStore();
 
-const putCommas = perks.putCommas;
-
 function playThis(track: Track) {
   queue.play(track);
 }
@@ -64,53 +42,11 @@ function playThis(track: Track) {
     margin: 0.5rem 0 1rem 0;
   }
 
-  .main-item {
-    border-radius: 0.5rem;
-    padding: 0.5rem;
-    margin-bottom: 0.5rem;
-
-    .itemx {
-      display: flex;
-      align-items: center;
-      padding: 0.5rem;
-      cursor: pointer;
-      border-radius: 0.5rem;
-
-      &:hover {
-        background-color: $gray;
-      }
-    }
-
-    .album-art {
-      width: 4.5rem;
-      height: 4.5rem;
-      background-image: url(../../assets/images/null.webp);
-      margin: 0 0.5rem 0 0;
-      border-radius: 0.5rem;
-    }
-
-    .tags {
-      hr {
-        border: none;
-        margin: 0.3rem;
-      }
-      .title {
-        width: 20rem;
-        margin: 0;
-      }
-      .artist {
-        width: 20rem;
-        margin: 0;
-        font-size: small;
-      }
-    }
-  }
-
   .r-grid {
     position: relative;
     height: 100%;
     display: grid;
-    grid-template-rows: min-content;
+    grid-template-rows: max-content max-content 1fr;
 
     .scrollable-r {
       height: 100%;

src/components/RightSideBar/Recommendation.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="r-tracks rounded border">
-    <p class="heading">SIMILAR TRACKS</p>
+    <div class="heading">Similar Tracks</div>
     <div class="tracks">
       <div class="song-item" v-for="song in songs" :key="song">
         <div class="album-art image"></div>
@@ -37,8 +37,13 @@ export default {
 
 <style lang="scss">
 .r-tracks {
-  margin: 0.5rem 0.5rem 0.5rem 0;
+  margin: 0.5rem 0 0.5rem 0;
   padding: 0.5rem;
+
+  .heading {
+    font-size: 1.25rem;
+    margin-bottom: 0.5rem !important;
+  }
 }
 
 .r-tracks .tracks .song-item {

src/components/RightSideBar/Search.vue

@@ -170,7 +170,6 @@ search.$subscribe((mutation, state) => {
     padding: $medium;
     border-radius: $small;
     margin-bottom: $small;
-    text-align: center !important;
     font-size: 2rem;
     color: $white;
   }

src/components/RightSideBar/queue/playingFrom.vue

@@ -0,0 +1,157 @@
+<template>
+  <div id="playing-from" class="rounded" @click="goTo">
+  <div class="abs shadow-sm">Playing From</div>
+    <div class="h">
+      <div class="icon image" :class="from.type"></div>
+      {{ from.type }}
+    </div>
+    <div class="name">
+      <div id="to">
+        {{ from.name }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { fromFolder, fromAlbum, fromPlaylist } from "../../../interfaces";
+import { FromOptions } from "../../../composables/enums";
+import { useRouter } from "vue-router";
+import { computed } from "@vue/reactivity";
+
+const props = defineProps<{
+  from: fromFolder | fromAlbum | fromPlaylist;
+}>();
+
+interface from {
+  type: string;
+  name: string;
+}
+
+const from = computed((): from => {
+  switch (props.from.type) {
+    case undefined:
+      return {
+        type: "album",
+        name: "Welcome to Alice",
+      };
+    case FromOptions.folder:
+      return {
+        type: "folder",
+        name: props.from.name,
+      };
+    case FromOptions.album:
+      return {
+        type: "album",
+        name: props.from.name,
+      };
+    case FromOptions.playlist:
+      return {
+        type: "playlist",
+        name: props.from.name,
+      };
+  }
+});
+
+const router = useRouter();
+
+function goToAlbum() {
+  router.push({
+    name: "AlbumView",
+    params: {
+      album: props.from.name,
+      artist: props.from.albumartist,
+    },
+  });
+}
+
+function goToFolder() {
+  router.push({
+    name: "FolderView",
+    params: {
+      path: props.from.path,
+    },
+  });
+}
+
+function goToPlaylist() {
+  router.push({
+    name: "PlaylistView",
+    params: {
+      pid: props.from.playlistid,
+    },
+  });
+}
+
+function goTo() {
+  switch (props.from.type) {
+    case FromOptions.folder:
+      goToFolder();
+      break;
+    case FromOptions.album:
+      goToAlbum();
+      break;
+    case FromOptions.playlist:
+      goToPlaylist();
+      break;
+  }
+}
+</script>
+
+<style lang="scss">
+#playing-from {
+  background: linear-gradient(-200deg, $gray4 40%, $red, $gray4);
+  background-size: 120%;
+  padding: 0.75rem;
+  margin-bottom: $small;
+  cursor: pointer;
+  position: relative;
+  transition: all .2s ease;
+
+  &:hover {
+    background-position: -4rem;
+  }
+
+  .abs {
+    position: absolute;
+    right: $small;
+    top: $small;
+    font-size: .9rem;
+    background-color: $gray;
+    padding: $smaller;
+    border-radius: .25rem;
+  }
+
+  .name {
+    text-transform: capitalize;
+    font-weight: bolder;
+  }
+
+  .h {
+    font-size: .9rem;
+    margin-bottom: $small;
+    display: flex;
+    align-items: center;
+    gap: $small;
+    text-transform: capitalize;
+    color: rgba(255, 255, 255, 0.664);
+
+    .icon {
+      height: 1.25rem;
+      width: 1.25rem;
+    }
+
+    .folder {
+      background-image: url("../../../assets/icons/folder.fill.svg") !important;
+    }
+
+    .album {
+      background-image: url("../../../assets/icons/album.svg") !important;
+    }
+
+    .playlist {
+      background-image: url("../../../assets/icons/playlist.svg") !important;
+    }
+  }
+}
+</style>

src/components/RightSideBar/queue/upNext.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="main-item border" @click="playNext">
+    <div class="h">#Up_Next</div>
+    <div class="itemx  shadow">
+      <div
+        class="album-art image"
+        :style="{
+          backgroundImage: `url(&quot;${next.image}&quot;)`,
+        }"
+      ></div>
+      <div class="tags">
+        <p class="title ellip">{{ next.title }}</p>
+        <hr />
+        <p class="artist ellip">
+          <span v-for="artist in perks.putCommas(next.artists)" :key="artist">{{
+            artist
+          }}</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Track } from "../../../interfaces";
+import perks from "../../../composables/perks";
+
+const props = defineProps<{
+  next: Track;
+  playNext: () => void;
+}>();
+</script>
+
+<style lang="scss">
+.main-item {
+  border-radius: 0.5rem;
+  margin-bottom: 0.5rem;
+  position: relative;
+
+  &:hover {
+    background-color: $accent;
+    border:  1px solid transparent;
+
+    .h {
+      background-color: $black;
+    }
+  }
+
+  .h {
+    position: absolute;
+    right: $small;
+    top: $small;
+    font-size: 0.9rem;
+    background-color: $accent;
+    padding: $smaller;
+    border-radius: 0.25rem;
+  }
+
+  .itemx {
+    display: flex;
+    align-items: center;
+    border-radius: 0.5rem;
+    padding: 0.75rem;
+    cursor: pointer;
+  }
+
+  .album-art {
+    width: 4.5rem;
+    height: 4.5rem;
+    background-image: url(../../assets/images/null.webp);
+    margin: 0 0.5rem 0 0;
+    border-radius: 0.5rem;
+  }
+
+  .tags {
+    hr {
+      border: none;
+      margin: 0.3rem;
+    }
+    .title {
+      width: 20rem;
+      margin: 0;
+    }
+    .artist {
+      width: 20rem;
+      margin: 0;
+      font-size: small;
+    }
+  }
+}
+</style>

src/components/contextMenu.vue

@@ -89,6 +89,7 @@ const context = useContextStore();
       position: absolute;
       right: -13rem;
       width: 13rem;
+      top: -0.5rem;
       max-height: 21.25rem;
 
       padding: $small !important;

src/components/shared/PlayBtnRect.vue

@@ -35,11 +35,11 @@ function play() {
       break;
     case playSources.playlist:
       queue.playFromPlaylist(
-        playlist.playlist.name,
-        playlist.playlist.playlistid,
-        playlist.playlist.tracks
+        playlist.info.name,
+        playlist.info.playlistid,
+        playlist.tracks
       );
-      queue.play(playlist.playlist.tracks[0]);
+      queue.play(playlist.tracks[0]);
       break;
   }
 }
@@ -53,11 +53,7 @@ function play() {
   height: 2.5rem;
   padding-left: 0.75rem;
   cursor: pointer;
-  background: linear-gradient(
-    34deg,
-    rgba(255, 166, 0, 0.644) 30%,
-    rgb(214, 188, 38)
-  );
+  background: linear-gradient(34deg, $accent, $red);
   user-select: none;
   transition: all 0.5s ease;
 

src/composables/enums.ts

@@ -10,3 +10,10 @@ export enum NotifType {
   Info,
   Error,
 }
+
+export enum FromOptions {
+  playlist = "playlist",
+  folder = "folder",
+  album = "album",
+  search = "search",
+}

src/composables/playlists.ts

@@ -95,12 +95,16 @@ async function getPTracks(playlistid: string) {
 async function getPlaylist(pid: string) {
   const uri = state.settings.uri + "/playlist/" + pid;
 
-  let playlist: Playlist;
+  let playlist = {
+    info: {},
+    tracks: <Track[]>[],
+  };
 
   await axios
     .get(uri)
     .then((res) => {
-      playlist = res.data.data;
+      playlist.info = res.data.info;
+      playlist.tracks = res.data.tracks;
     })
     .catch((err) => {
       new Notification("Something funny happened!", NotifType.Error);
@@ -110,4 +114,10 @@ async function getPlaylist(pid: string) {
   return playlist;
 }
 
-export { createNewPlaylist, getAllPlaylists, addTrackToPlaylist, getPTracks, getPlaylist };
+export {
+  createNewPlaylist,
+  getAllPlaylists,
+  addTrackToPlaylist,
+  getPTracks,
+  getPlaylist,
+};

src/interfaces.ts

@@ -1,4 +1,5 @@
-import { NotifType } from "./stores/enums";
+import { FromOptions } from "./composables/enums";
+import { NotifType } from "./composables/enums";
 
 interface Track {
   trackid: string;
@@ -62,4 +63,31 @@ interface Notif {
   type: NotifType;
 }
 
-export { Track, Folder, AlbumInfo, Artist, Option, Playlist, Notif };
+interface fromFolder {
+  type: FromOptions;
+  path: string;
+  name: string;
+}
+interface fromAlbum {
+  type: FromOptions;
+  name: string;
+  albumartist: string;
+}
+interface fromPlaylist {
+  type: FromOptions;
+  name: string;
+  playlistid: string;
+}
+
+export {
+  Track,
+  Folder,
+  AlbumInfo,
+  Artist,
+  Option,
+  Playlist,
+  Notif,
+  fromFolder,
+  fromAlbum,
+  fromPlaylist,
+};

src/stores/fromFolder.ts

@@ -0,0 +1 @@
+

src/stores/p.ptracks.ts

@@ -1,15 +1,17 @@
 import { defineStore } from "pinia";
-import { getPlaylist, getPTracks } from "../composables/playlists";
+import { getPlaylist } from "../composables/playlists";
 import { Track, Playlist } from "../interfaces";
 
 export default defineStore("playlist-tracks", {
   state: () => ({
-    playlist: <Playlist>{},
+    info: <Playlist>{},
+    tracks: <Track[]>[],
   }),
   actions: {
     async fetchAll(playlistid: string) {
       const playlist = await getPlaylist(playlistid);
-      this.playlist = playlist;
+      this.info = playlist.info;
+      this.tracks = playlist.tracks;
     },
   },
 });

src/stores/queue.ts

@@ -1,31 +1,8 @@
 import { defineStore } from "pinia";
 import state from "../composables/state";
-import { Track } from "../interfaces";
+import { Track, fromFolder, fromAlbum, fromPlaylist } from "../interfaces";
 import notif from "../composables/mediaNotification";
-
-enum FromOptions {
-  playlist = "Playlist",
-  folder = "Folder",
-  album = "Album",
-  search = "Search",
-}
-
-interface fromFolder {
-  type: FromOptions.folder;
-  path: string;
-}
-
-interface fromAlbum {
-  type: FromOptions.album;
-  name: string;
-  albumartist: string;
-}
-
-interface fromPlaylist {
-  type: FromOptions.playlist;
-  name: string;
-  playlistid: string;
-}
+import { FromOptions } from "../composables/enums";
 
 function addQToLocalStorage(
   from: fromFolder | fromAlbum | fromPlaylist,
@@ -84,7 +61,6 @@ export default defineStore("Queue", {
       })
         .then(() => {
           this.audio.play().then(() => {
-
             this.playing = true;
             notif(track, this.playPause, this.playNext, this.playPrev);
 
@@ -108,6 +84,7 @@ export default defineStore("Queue", {
         this.play(this.current);
       } else if (this.audio.paused) {
         this.audio.play();
+        this.playing = true;
       } else {
         this.audio.pause();
         this.playing = false;
@@ -131,6 +108,7 @@ export default defineStore("Queue", {
     },
     readQueueFromLocalStorage() {
       const queue = localStorage.getItem("queue");
+
       if (queue) {
         const parsed = JSON.parse(queue);
         this.from = parsed.from;
@@ -180,30 +158,30 @@ export default defineStore("Queue", {
       }
     },
     playFromFolder(fpath: string, tracks: Track[]) {
-      this.setNewQueue(tracks);
-
       this.from = <fromFolder>{
         type: FromOptions.folder,
         path: fpath,
+        name: fpath.split("/").splice(-1).join(""),
       };
+      this.setNewQueue(tracks);
     },
     playFromAlbum(aname: string, albumartist: string, tracks: Track[]) {
-      this.setNewQueue(tracks);
-
       this.from = <fromAlbum>{
         type: FromOptions.album,
         name: aname,
         albumartist: albumartist,
       };
+
+      this.setNewQueue(tracks);
     },
     playFromPlaylist(pname: string, pid: string, tracks: Track[]) {
-      this.setNewQueue(tracks);
-
       this.from = <fromPlaylist>{
         type: FromOptions.playlist,
         name: pname,
         playlistid: pid,
       };
+
+      this.setNewQueue(tracks);
     },
   },
 });

src/views/AlbumView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="al-view rounded">
     <div>
-      <Header :album_info="album.info" />
+      <Header :album="album.info" />
     </div>
     <div class="separator" id="av-sep"></div>
     <div class="songs rounded">

src/views/PlaylistView.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="playlist-view">
-    <Header :info="info" />
+    <Header :info="playlist.info" />
     <div class="separator no-border"></div>
 
     <div class="songlist rounded">
       <SongList
         :tracks="playlist.tracks"
-        :pname="info.name"
-        :playlistid="playlist.playlistid"
+        :pname="playlist.info.name"
+        :playlistid="playlist.info.playlistid"
       />
     </div>
     <div class="separator no-border"></div>
@@ -21,15 +21,7 @@ import SongList from "../components/FolderView/SongList.vue";
 import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
 import usePTrackStore from "../stores/p.ptracks";
 
-const playlist = usePTrackStore().playlist;
-
-const info = {
-  name: playlist.name,
-  count: playlist.tracks.length,
-  desc: playlist.description,
-  duration: "3 hours, 4 minutes",
-  lastUpdated: "yesterday",
-};
+const playlist = usePTrackStore();
 </script>
 
 <style lang="scss">