[client] add playlists and playlist page

src/components/LeftSidebar/Navigation.vue

@@ -31,7 +31,7 @@ const menus = [
   },
   {
     name: "playlists",
-    route_name: "PlaylistView",
+    route_name: "Playlists",
   },
   {
     name: "folders",

src/components/PlaylistView/Header.vue

@@ -2,8 +2,10 @@
   <div class="p-header">
     <div class="info">
       <div>
-        <div class="title">Makaveli Radio</div>
-        <div class="metrics rounded border">45 Tracks • 3 Hours 4 Minutes</div>
+        <div class="title">{{ props.info.name }}</div>
+        <div class="metrics rounded border">
+          {{ props.info.count }} Tracks • {{ props.info.duration }}
+        </div>
       </div>
       <div class="buttons">
         <button class="play">
@@ -16,12 +18,23 @@
       </div>
     </div>
     <div class="last-updated">
-      <span class="status">Last updated yesterday |&#160;</span>
+      <span class="status">Last updated {{props.info.lastUpdated}} |&#160;</span>
       <span class="edit">Edit</span>
     </div>
   </div>
 </template>
 
+<script setup lang="ts">
+const props = defineProps<{
+  info: {
+    name: string;
+    count: number;
+    duration: string;
+    lastUpdated: string;
+  };
+}>();
+</script>
+
 <style lang="scss">
 .p-header {
   display: grid;
@@ -30,7 +43,7 @@
   background-image: url("../../assets/images/eggs.jpg");
   position: relative;
   margin-top: $small;
-    border-radius: .75rem;
+  border-radius: 0.75rem;
 
   .last-updated {
     position: absolute;
@@ -69,7 +82,7 @@
     align-items: flex-end;
     padding: 1rem 1rem 4rem 1rem;
     box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.658);
-    border-radius: .75rem;
+    border-radius: 0.75rem;
     background-color: $body;
 
     @include phone-only {
@@ -90,8 +103,8 @@
 
     .buttons {
       position: absolute;
-      bottom:1rem;
-      left:1rem;
+      bottom: 1rem;
+      left: 1rem;
       display: flex;
       gap: $small;
 

src/components/nav/NavBar.vue

@@ -5,7 +5,7 @@
         <PlayBtn />
       </div>
       <div class="info">
-        <div class="title">Legends never die</div>
+        <div class="title">Playlists</div>
       </div>
     </div>
     <div class="center rounded"></div>

src/components/playlists/PlaylistCard.vue

@@ -0,0 +1,44 @@
+<template>
+  <router-link
+    :to="{ name: 'PlaylistView', params: { pid: props.playlist.playlistid } }"
+    :playlist="props.playlist"
+    class="p-card rounded shadow-sm"
+  >
+    <div class="image rounded"></div>
+    <div class="bottom">
+      <div class="name ellip">{{ props.playlist.name }}</div>
+      <div class="count">N Tracks</div>
+    </div>
+  </router-link>
+</template>
+
+<script setup lang="ts">
+import { Playlist } from "../../interfaces";
+
+const props = defineProps<{
+  playlist: Playlist;
+}>();
+</script>
+
+<style lang="scss">
+.p-card {
+  width: 100%;
+  background-color: $gray;
+  padding: $small;
+
+  .image {
+    min-width: 100%;
+    height: 8.5rem;
+    background-image: url("../../assets/images/eggs.jpg");
+  }
+
+  .bottom {
+    margin-top: $small;
+
+    .count {
+      font-size: $medium;
+      color: $red;
+    }
+  }
+}
+</style>

src/composables/playlists.ts

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

src/interfaces.ts

@@ -52,6 +52,7 @@ interface Playlist {
   name: string;
   description?: string;
   image?: string;
+  tracks?: Track[];
 }
 
 interface Notif {

src/main.js

@@ -8,6 +8,6 @@ import { createPinia } from 'pinia'
 import "../src/assets/css/global.scss";
 
 const app = createApp(App);
-app.use(router);
 app.use(createPinia())
+app.use(router);
 app.mount('#app');

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import Home from "../views/Home.vue";
 import FolderView from "../views/FolderView.vue";
 import PlaylistView from "../views/PlaylistView.vue";
+import Playlists from "../views/Playlists.vue";
 
 import AlbumsExplorer from "../views/AlbumsExplorer.vue";
 import AlbumView from "../views/AlbumView.vue";
@@ -9,6 +10,9 @@ import AlbumView from "../views/AlbumView.vue";
 import ArtistsExplorer from "../views/ArtistsExplorer.vue";
 import SettingsView from "../views/SettingsView.vue";
 
+import usePStore from "../stores/playlists";
+import usePTrackStore from "../stores/p.ptracks";
+
 const routes = [
   {
     path: "/",
@@ -25,9 +29,20 @@ const routes = [
     redirect: "/folder/home",
   },
   {
-    path: "/playlist",
+    path: "/playlists",
+    name: "Playlists",
+    component: Playlists,
+    beforeEnter: async () => {
+      await usePStore().fetchAll();
+    },
+  },
+  {
+    path: "/playlist/:pid",
     name: "PlaylistView",
     component: PlaylistView,
+    beforeEnter: async (to) => {
+      await usePTrackStore().fetchAll(to.params.pid);
+    },
   },
   {
     path: "/albums",
@@ -53,7 +68,7 @@ const routes = [
     path: "/:pathMatch(.*)",
     // alias: "*",
     component: () => import("../views/NotFound.vue"),
-  }
+  },
 ];
 
 const router = createRouter({

src/stores/p.ptracks.ts

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

src/stores/playlists.ts

@@ -7,8 +7,10 @@ export default defineStore("playlists", {
     playlists: <Playlist[]>[],
   }),
   actions: {
-    fetchAll() {
-      
+    async fetchAll() {
+      const playlists = await getAllPlaylists();
+
+      this.playlists = playlists;
     },
   },
 });

src/views/PlaylistView.vue

@@ -1,40 +1,29 @@
 <template>
   <div class="playlist-view">
-    <Header :playlist_info="playlist_info" />
+    <Header :info="info" />
     <div class="separator no-border"></div>
 
     <div class="songlist rounded">
-      <SongList :songs="songs" />
+      <SongList :songs="playlist.tracks" />
     </div>
     <div class="separator no-border"></div>
     <FeaturedArtists />
   </div>
 </template>
 
-<script>
-import Header from "@/components/PlaylistView/Header.vue";
-import SongList from "@/components/FolderView/SongList.vue";
-import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
-import state from "@/composables/state";
-export default {
-  components: {
-    Header,
-    SongList,
-    FeaturedArtists,
-  },
-  setup() {
-    return {
-      songs: state.queue,
-      playlist_info: {
-        name: "Dax Radio",
-        count: state.folder_song_list.value.length,
-        duration: "0:00",
-        image: "../../assets/images/null.webp",
-        artist: "",
-        artist_image: "",
-      },
-    };
-  },
+<script setup lang="ts">
+import Header from "../components/PlaylistView/Header.vue";
+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,
+  duration: "3 hours, 4 minutes",
+  lastUpdated: "yesterday",
 };
 </script>
 

src/views/Playlists.vue

@@ -0,0 +1,32 @@
+<template>
+  <div id="p-view">
+    <div class="grid">
+      <PlaylistCard
+        v-for="p in pStore.playlists"
+        :key="p.playlistid"
+        :playlist="p"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PlaylistCard from "../components/playlists/PlaylistCard.vue";
+
+import usePStore from "../stores/playlists";
+const pStore = usePStore();
+</script>
+
+<style lang="scss">
+#p-view {
+  margin: $small;
+  padding: $small;
+  overflow: auto;
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+    gap: 1rem;
+  }
+}
+</style>