add featured artists to playlist page

+ fetch album bio on raising bottom container

src/composables/pages/playlists.ts

@@ -1,3 +1,4 @@
+import { Artist } from "./../../interfaces";
 import { Playlist, Track } from "../../interfaces";
 import { Notification, NotifType } from "../../stores/notification";
 import state from "../state";
@@ -120,6 +121,32 @@ async function updatePlaylist(pid: string, playlist: FormData, pStore: any) {
   }
 }
 
+/**
+ * Gets the artists in a playlist.
+ * @param pid The playlist id to fetch tracks for.
+ * @returns {Promise<Artist[]>} A promise that resolves to an array of artists.
+ */
+export async function getPlaylistArtists(pid: string): Promise<Artist[]> {
+  const uri = state.settings.uri + "/playlist/artists";
+
+  const { data, error } = await useAxios({
+    url: uri,
+    props: {
+      pid: pid,
+    },
+  });
+
+  if (error) {
+    new Notification("Something funny happened!", NotifType.Error);
+  }
+
+  if (data) {
+    return data.data as Artist[];
+  }
+
+  return [];
+}
+
 export {
   createNewPlaylist,
   getAllPlaylists,

src/layouts/HeaderContentBottom.vue

@@ -28,14 +28,23 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import useVisibility from "../../composables/useVisibility";
-import useNavStore from "../../stores/nav";
+import useVisibility from "@/composables/useVisibility";
+import useNavStore from "@/stores/nav";
+import { onBeforeRouteUpdate, RouteParams, useRoute } from "vue-router";
 
 const nav = useNavStore();
 
+const props = defineProps<{
+  /**
+   *  Called when the bottom container is raised.
+   */
+  onBottomRaised?: (routeparams?: RouteParams) => void;
+}>();
+
 let elem: HTMLElement = null;
 let classlist: DOMTokenList = null;
 
+const route = useRoute();
 const apheader = ref<HTMLElement>(null);
 const apbottomcontainer = ref(null);
 const bottomContainerRaised = ref(false);
@@ -45,6 +54,12 @@ onMounted(() => {
   classlist = elem.classList;
 });
 
+onBeforeRouteUpdate((to) => {
+  if (bottomContainerRaised.value) {
+    props.onBottomRaised(to.params);
+  }
+});
+
 function handleVisibilityState(state: boolean) {
   resetBottomPadding();
 
@@ -59,14 +74,19 @@ function resetBottomPadding() {
   classlist.remove("addbottompadding");
 }
 
+let bottomRaisedCallbackExecuted = false;
+
 function toggleBottom() {
   bottomContainerRaised.value = !bottomContainerRaised.value;
 
   if (bottomContainerRaised.value) {
     classlist.add("addbottompadding");
+    if (!bottomRaisedCallbackExecuted) {
+      bottomRaisedCallbackExecuted = true;
+      props.onBottomRaised(route.params);
+    }
     return;
   }
-
   if (elem.scrollTop == 0) {
     classlist.remove("addbottompadding");
   }

src/router/index.js

@@ -66,7 +66,6 @@ const routes = [
       state.loading.value = true;
       await useAStore().fetchTracksAndArtists(to.params.hash);
       state.loading.value = false;
-      useAStore().fetchBio(to.params.hash);
     },
   },
   {

src/stores/pages/playlist.ts

@@ -1,11 +1,16 @@
+import { Artist } from "./../../interfaces";
 import { defineStore } from "pinia";
-import { getPlaylist } from "../../composables/pages/playlists";
+import {
+  getPlaylist,
+  getPlaylistArtists,
+} from "../../composables/pages/playlists";
 import { Track, Playlist } from "../../interfaces";
 
 export default defineStore("playlist-tracks", {
   state: () => ({
     info: <Playlist>{},
     tracks: <Track[]>[],
+    artists: <Artist[]>[],
   }),
   actions: {
     /**
@@ -18,6 +23,10 @@ export default defineStore("playlist-tracks", {
       this.info = playlist.info;
       this.tracks = playlist.tracks;
     },
+
+    async fetchArtists(playlistid: string) {
+      this.artists = await getPlaylistArtists(playlistid);
+    },
     /**
      * Updates the playlist header info. This is used when the playlist is
      * updated.

src/views/album/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Page>
+  <Page :onBottomRaised="fetchAlbumBio">
     <template #header>
       <Header :album="album.info" />
     </template>
@@ -13,18 +13,22 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeRouteUpdate, RouteLocationNormalized } from "vue-router";
+import { onBeforeRouteUpdate, RouteLocationNormalized, RouteParams } from "vue-router";
 import useAStore from "@/stores/pages/album";
 
-import Page from "../layouts/HeaderContentBottom.vue";
+import Page from "@/layouts/HeaderContentBottom.vue";
 import Header from "./Header.vue";
 import Content from "./Content.vue";
 import Bottom from "./Bottom.vue";
+import { onBeforeUnmount } from "vue";
 
 const album = useAStore();
 
+function fetchAlbumBio(params: RouteParams) {
+  album.fetchBio(params.hash.toString());
+}
+
 onBeforeRouteUpdate(async (to: RouteLocationNormalized) => {
   await album.fetchTracksAndArtists(to.params.hash.toString());
-  album.fetchBio(to.params.hash.toString());
 });
 </script>

src/views/playlist/index.vue

@@ -12,21 +12,29 @@
       />
     </template>
     <template #bottom>
-      <FeaturedArtists :artists="[]" />
+      <FeaturedArtists :artists="playlist.artists" />
     </template>
   </Page>
 </template>
 
 <script setup lang="ts">
-import Page from "../layouts/HeaderContentBottom.vue";
+import Page from "@/layouts/HeaderContentBottom.vue";
 
 import Header from "@/components/PlaylistView/Header.vue";
 import Content from "./Content.vue";
 import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
 
 import usePTrackStore from "@/stores/pages/playlist";
+import { onBeforeUnmount, onMounted } from "vue";
+import { useRoute } from "vue-router";
 
+const route = useRoute();
 const playlist = usePTrackStore();
+
+onMounted(() => {
+  playlist.fetchArtists(route.params.pid as string);
+});
+
 </script>
 
 <style lang="scss"></style>