connect favorites data to favorites page

+ detach isSmall and isMedium classes from the v-scroll-page class
+ customize the TopTracks component to be usable with the favorite tracks page
+ add queue methods to play tracks from favorites page
+ handle playing from artist top tracks in parent component

src/assets/scss/Global/app-grid.scss

@@ -110,7 +110,7 @@ $g-border: solid 1px $gray5;
   }
 }
 
-.v-scroll-page.isSmall {
+.isSmall {
   .songlist-item {
     grid-template-columns: 1.75rem 2fr 2.5rem 2.5rem;
   }
@@ -128,7 +128,7 @@ $g-border: solid 1px $gray5;
   }
 }
 
-.v-scroll-page.isMedium {
+.isMedium {
   // hide album column
   .songlist-item {
     grid-template-columns: 1.75rem 1.5fr 1fr 2.5rem 2.5rem;

src/components/AlbumView/ArtistAlbums.vue

@@ -3,17 +3,13 @@
     <h3>
       <span>{{ title }} </span>
       <span
-        class="see-more"
+        class="see-all"
         v-if="maxAbumCards <= albums.length"
-        @click="store.setPage(albumType)"
+        @click="
+          !favorites ? useArtistDiscographyStore().setPage(albumType) : null
+        "
       >
-        <RouterLink
-          :to="{
-            name: Routes.artistDiscography,
-            params: { hash: artisthash },
-          }"
-          >SEE ALL</RouterLink
-        >
+        <RouterLink :to="route">SEE ALL</RouterLink>
       </span>
     </h3>
     <div class="cards">
@@ -23,22 +19,19 @@
 </template>
 
 <script setup lang="ts">
-import AlbumCard from "../shared/AlbumCard.vue";
 import { Album } from "@/interfaces";
-
 import { maxAbumCards } from "@/stores/content-width";
-import { Routes } from "@/router/routes";
-
 import { discographyAlbumTypes } from "@/composables/enums";
 import useArtistDiscographyStore from "@/stores/pages/artistDiscog";
 
-const store = useArtistDiscographyStore();
+import AlbumCard from "../shared/AlbumCard.vue";
 
 defineProps<{
   title: string;
-  artisthash: string;
   albums: Album[];
-  albumType: discographyAlbumTypes;
+  albumType?: discographyAlbumTypes;
+  favorites?: boolean;
+  route: string;
 }>();
 </script>
 
@@ -53,7 +46,7 @@ defineProps<{
     padding: 0 $medium;
     margin-bottom: $small;
 
-    .see-more {
+    .see-all {
       font-size: $medium;
 
       a:hover {

src/components/ArtistView/TopTracks.vue

@@ -1,59 +1,35 @@
 <template>
   <div class="artist-top-tracks">
     <h3 class="section-title">
-      Tracks
-      <span class="see-more">
-        <RouterLink
-          :to="{
-            name: Routes.artistTracks,
-            params: {
-              hash: artist.info.artisthash,
-            },
-            query: {
-              artist: artist.info.name,
-            },
-          }"
-          >SEE ALL</RouterLink
-        >
+      {{ title }}
+      <span class="see-all">
+
+        <RouterLink :to="route">SEE ALL</RouterLink>
       </span>
     </h3>
-    <div class="tracks">
+    <div class="tracks" :class="{ isSmall, isMedium }">
       <SongItem
-        v-for="(song, index) in artist.tracks"
+        v-for="(song, index) in tracks"
         :track="song"
         :index="index + 1"
-        @playThis="playFromPage(index)"
+        @playThis="playHandler(index)"
       />
     </div>
-    <div class="error" v-if="!artist.tracks.length">No tracks</div>
+    <div class="error" v-if="!tracks.length">No tracks</div>
   </div>
 </template>
 
 <script setup lang="ts">
 import SongItem from "../shared/SongItem.vue";
-import useArtistPageStore from "@/stores/pages/artist";
-import useQueueStore from "@/stores/queue";
-import { FromOptions, playSources } from "@/composables/enums";
+import { Track } from "@/interfaces";
+import { isMedium, isSmall } from "@/stores/content-width";
 
-import { getArtistTracks } from "@/composables/fetch/artists";
-import { Routes } from "@/router/routes";
-
-const artist = useArtistPageStore();
-const queue = useQueueStore();
-
-async function playFromPage(index: number) {
-  if (
-    queue.from.type == FromOptions.artist &&
-    queue.from.artisthash == artist.info.artisthash
-  ) {
-    queue.play(index);
-    return;
-  }
-
-  const tracks = await getArtistTracks(artist.info.artisthash);
-  queue.playFromArtist(artist.info.artisthash, artist.info.name, tracks);
-  queue.play(index);
-}
+defineProps<{
+  tracks: Track[];
+  route: string;
+  title: string;
+  playHandler: (index: number) => void;
+}>();
 </script>
 
 <style lang="scss">
@@ -74,7 +50,7 @@ async function playFromPage(index: number) {
     justify-content: space-between;
   }
 
-  .see-more {
+  .see-all {
     font-size: $medium;
 
     a:hover {

src/components/PlaylistView/ArtistsList.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="f-artists">
+    <h3>{{ title }} <span class="see-all">SEE ALL</span></h3>
+    <div class="artist-list">
+      <ArtistCard
+        v-for="artist in artists.slice(0, maxAbumCards)"
+        :key="artist.image"
+        :artist="artist"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ArtistCard from "@/components/shared/ArtistCard.vue";
+import { Artist } from "@/interfaces";
+import { maxAbumCards } from "@/stores/content-width";
+
+defineProps<{
+  artists: Artist[];
+  title: string;
+}>();
+</script>
+
+<style lang="scss">
+.f-artists {
+  h3 {
+    display: flex;
+    justify-content: space-between;
+    padding-left: $medium;
+
+    .see-all {
+      font-size: $medium;
+    }
+  }
+
+  .artist-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  }
+}
+</style>

src/components/PlaylistView/FeaturedArtists.vue

@@ -1,112 +0,0 @@
-<template>
-  <div class="f-artists">
-    <div class="header">
-      <div class="headin">Featured Artists</div>
-      <div class="xcontrols">
-        <div class="prev icon" @click="scrollLeft()"><ArrowSvg /></div>
-        <div class="next icon" @click="scrollRight()"><ArrowSvg /></div>
-      </div>
-    </div>
-    <div class="separator no-border"></div>
-    <div class="artists" ref="artists_dom">
-      <ArtistCard
-        v-for="artist in artists"
-        :key="artist.image"
-        :artist="artist"
-        :color="'ffffff00'"
-      />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import ArtistCard from "@/components/shared/ArtistCard.vue";
-import { Artist } from "@/interfaces";
-import { ref } from "@vue/reactivity";
-import ArrowSvg from "../../assets/icons/right-arrow.svg";
-
-defineProps<{
-  artists: Artist[];
-}>();
-
-const artists_dom = ref(null);
-
-const scrollLeft = () => {
-  const dom = artists_dom.value;
-  dom.scrollBy({
-    left: -700,
-    behavior: "smooth",
-  });
-};
-
-const scrollRight = () => {
-  const dom = artists_dom.value;
-  dom.scrollBy({
-    left: 700,
-    behavior: "smooth",
-  });
-};
-</script>
-
-<style lang="scss">
-.f-artists {
-  width: 100%;
-  padding: 0 $small;
-  border-radius: $small;
-  user-select: none;
-  position: relative;
-
-  .header {
-    display: flex;
-    align-items: center;
-    position: relative;
-
-    .headin {
-      font-size: 1.5rem;
-      font-weight: 900;
-      margin-left: $small;
-    }
-  }
-}
-
-.f-artists .xcontrols {
-  z-index: 1;
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  gap: 1rem;
-
-  .prev {
-    transform: rotate(180deg);
-  }
-
-  .icon {
-    border-radius: $small;
-    transition: all 0.5s ease;
-    background-color: rgb(51, 51, 51);
-    padding: $smaller;
-
-    svg {
-      display: flex;
-    }
-
-    &:hover {
-      background-color: $accent;
-      transition: all 0.5s ease;
-    }
-  }
-}
-
-.f-artists > .artists {
-  display: flex;
-  align-items: flex-end;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-  gap: $small;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-</style>

src/components/nav/Titles/QueueTitle.vue

@@ -27,6 +27,7 @@ import SearchSvg from "@/assets/icons/search.svg";
 import ArtistSvg from "@/assets/icons/artist.svg";
 
 import { RouteLocationRaw } from "vue-router";
+import HeartSvg from "@/assets/icons/heart.fill.svg";
 
 const queue = useQueueStore();
 
@@ -95,6 +96,15 @@ function getSource() {
         },
       };
 
+    case FromOptions.favorite:
+      return {
+        name: "Favorite tracks",
+        icon: HeartSvg,
+        location: {
+          name: Routes.favorites,
+        },
+      };
+
     default:
       return { name: "👻 No source", location: {} };
   }

src/components/shared/ArtistCard.vue

@@ -7,16 +7,8 @@
       },
     }"
   >
-    <div
-      class="artist-card"
-      :class="{ _is_on_sidebar: alt }"
-      :style="{ backgroundColor: `${artist.colors[0]}` }"
-    >
-      <img
-        class="artist-image circular"
-        :src="imguri + artist.image"
-        loading="lazy"
-      />
+    <div class="artist-card">
+      <img class="artist-image circular" :src="imguri + artist.image" />
       <div class="artist-name t-center">
         {{ artist.name }}
       </div>
@@ -33,7 +25,6 @@ const imguri = paths.images.artist.large;
 
 defineProps<{
   artist: Artist;
-  alt?: boolean;
 }>();
 </script>
 
@@ -58,7 +49,6 @@ defineProps<{
 
   .artist-image {
     width: 100%;
-    // margin-bottom: $small;
     transition: all 0.5s ease-in-out;
     object-fit: cover;
   }

src/composables/enums.ts

@@ -4,7 +4,7 @@ export enum playSources {
   search,
   folder,
   artist,
-  albumCard,
+  favorite,
 }
 
 export enum NotifType {
@@ -22,6 +22,7 @@ export enum FromOptions {
   search = "search",
   artist = "artist",
   albumCard = "albumCard",
+  favorite = "favorite",
 }
 
 export enum ContextSrc {

src/composables/fetch/album.ts

@@ -8,6 +8,7 @@ const {
   albumartists: albumArtistsUrl,
   albumbio: albumBioUrl,
   albumsByArtistUrl,
+  favAlbums,
 } = paths.api;
 
 const getAlbumData = async (hash: string, ToastStore: typeof useNotifStore) => {

src/composables/fetch/favorite.ts

@@ -3,6 +3,7 @@ import { paths } from "@/config";
 import { favType, NotifType } from "@/composables/enums";
 
 import { useNotifStore as notif } from "@/stores/notification";
+import { Album, Artist, Track } from "@/interfaces";
 
 export async function addFavorite(favtype: favType, itemhash: string) {
   const { data, error } = await useAxios({
@@ -45,3 +46,30 @@ export async function removeFavorite(favtype: favType, itemhash: string) {
 
   return true;
 }
+
+export async function getFavAlbums(limit = 6) {
+  const { data } = await useAxios({
+    url: paths.api.favAlbums + `?limit=${limit}`,
+    get: true,
+  });
+
+  return data.albums as Album[];
+}
+
+export async function getFavTracks(limit = 5) {
+  const { data } = await useAxios({
+    url: paths.api.favTracks + `?limit=${limit}`,
+    get: true,
+  });
+
+  return data.tracks as Track[];
+}
+
+export async function getFavArtists(limit = 6) {
+  const { data } = await useAxios({
+    url: paths.api.favArtists + `?limit=${limit}`,
+    get: true,
+  });
+
+  return data.artists as Artist[];
+}

src/config.ts

@@ -35,6 +35,9 @@ const baseImgUrl = baseApiUrl + "/img";
 const paths = {
   api: {
     album: baseApiUrl + "/album",
+    favAlbums: baseApiUrl + "/albums/favorite",
+    favTracks: baseApiUrl + "/tracks/favorite",
+    favArtists: baseApiUrl + "/artists/favorite",
     artist: baseApiUrl + "/artist",
     favorite: baseApiUrl + "/favorite",
     get removeFavorite() {

src/interfaces.ts

@@ -121,6 +121,10 @@ export interface fromArtist {
   artistname: string;
 }
 
+export interface fromFav {
+  type: FromOptions.favorite;
+}
+
 export interface subPath {
   name: string;
   path: string;

src/stores/pages/artistDiscog.ts

@@ -39,7 +39,8 @@ export default defineStore("artistDiscography", {
           );
       }
     },
-    setPage(page: discographyAlbumTypes) {
+    setPage(page: discographyAlbumTypes | undefined) {
+      // @ts-ignore
       this.page = page;
     },
     fetchAlbums(artisthash: string) {

src/stores/queue.ts

@@ -9,6 +9,7 @@ import updateMediaNotif from "../composables/mediaNotification";
 import {
   fromAlbum,
   fromArtist,
+  fromFav,
   fromFolder,
   fromPlaylist,
   fromSearch,
@@ -24,7 +25,13 @@ function shuffle(tracks: Track[]) {
   return shuffled;
 }
 
-type From = fromFolder | fromAlbum | fromPlaylist | fromSearch | fromArtist;
+type From =
+  | fromFolder
+  | fromAlbum
+  | fromPlaylist
+  | fromSearch
+  | fromArtist
+  | fromFav;
 
 let audio = new Audio();
 audio.autoplay = false;
@@ -189,6 +196,13 @@ export default defineStore("Queue", {
 
       this.setNewQueue(tracks);
     },
+    playFromFav(tracks: Track[]) {
+      this.from = <fromFav>{
+        type: FromOptions.favorite,
+      };
+
+      this.setNewQueue(tracks);
+    },
     addTrackToQueue(track: Track) {
       this.tracklist.push(track);
     },

src/views/ArtistView/Main.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="artist-page v-scroll-page"
-    style="height: 100%"
-    :class="{ isSmall, isMedium }"
-  >
+  <div class="artist-page v-scroll-page" style="height: 100%">
     <DynamicScroller
       :items="scrollerItems"
       :min-item-size="64"
@@ -29,8 +25,6 @@
 </template>
 
 <script setup lang="ts">
-import { isMedium, isSmall } from "@/stores/content-width";
-
 import Header from "@/components/ArtistView/Header.vue";
 import TopTracks from "@/components/ArtistView/TopTracks.vue";
 import useArtistPageStore from "@/stores/pages/artist";
@@ -39,9 +33,12 @@ import ArtistAlbumsFetcher from "@/components/ArtistView/ArtistAlbumsFetcher.vue
 import { computed } from "vue";
 import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute } from "vue-router";
 import { Album } from "@/interfaces";
-import { discographyAlbumTypes } from "@/composables/enums";
+import { discographyAlbumTypes, FromOptions } from "@/composables/enums";
+import useQueueStore from "@/stores/queue";
+import { getArtistTracks } from "@/composables/fetch/artists";
 
 const store = useArtistPageStore();
+const queue = useQueueStore();
 const route = useRoute();
 
 interface ScrollerItem {
@@ -55,11 +52,6 @@ const header: ScrollerItem = {
   component: Header,
 };
 
-const top_tracks: ScrollerItem = {
-  id: "artist-top-tracks",
-  component: TopTracks,
-};
-
 const artist_albums_fetcher: ScrollerItem = {
   id: "artist-albums-fetcher",
   component: ArtistAlbumsFetcher,
@@ -100,6 +92,20 @@ function createAbumComponent(title: AlbumType, albums: Album[]) {
       albums,
       title,
       artisthash: route.params.hash,
+      route: `/artists/${store.info.artisthash}/discography?artist=${store.info.name}`,
+    },
+  };
+}
+
+function getTopTracksComponent(): ScrollerItem {
+  return {
+    id: "artist-top-tracks",
+    component: TopTracks,
+    props: {
+      tracks: store.tracks,
+      title: "Tracks",
+      route: `/artists/${store.info.artisthash}/tracks?artist=${store.info.name}`,
+      playHandler: handlePlay,
     },
   };
 }
@@ -108,7 +114,7 @@ const scrollerItems = computed(() => {
   let components = [header];
 
   if (store.tracks.length > 0) {
-    components.push(top_tracks);
+    components.push(getTopTracksComponent());
   }
 
   components = [...components, artist_albums_fetcher];
@@ -139,6 +145,20 @@ const scrollerItems = computed(() => {
   return components;
 });
 
+async function handlePlay(index: number) {
+  if (
+    queue.from.type == FromOptions.artist &&
+    queue.from.artisthash == store.info.artisthash
+  ) {
+    queue.play(index);
+    return;
+  }
+
+  const tracks = await getArtistTracks(store.info.artisthash);
+  queue.playFromArtist(store.info.artisthash, store.info.name, tracks);
+  queue.play(index);
+}
+
 onBeforeRouteUpdate(async (to) => {
   await store.getData(to.params.hash as string);
 });

src/views/Favorites.vue

@@ -6,13 +6,66 @@
       <div class="artists">Artists</div>
       <div class="folders">Folders</div>
     </div>
+    <div class="fav-tracks">
+      <TopTracks
+        :tracks="favTracks"
+        :route="'/home'"
+        :title="'Favorite tracks'"
+        :playHandler="handlePlay"
+      />
+    </div>
+
+    <div class="fav-albums">
+      <ArtistAlbums
+        :albums="favAlbums"
+        :albumType="discographyAlbumTypes.albums"
+        :title="'Favorite albums'"
+        :route="'some'"
+      />
+    </div>
+    <div class="fav-artists">
+      <FeaturedArtists :artists="favArtists" :title="'Favorite artists'" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import AlbumSvg from "@/assets/icons/album.svg";
-import ArtistSvg from "@/assets/icons/artist.svg";
-import TrackSvg from "@/assets/icons/artist.svg";
+import { onMounted, Ref, ref } from "vue";
+
+import ArtistAlbums from "@/components/AlbumView/ArtistAlbums.vue";
+import TopTracks from "@/components/ArtistView/TopTracks.vue";
+import FeaturedArtists from "@/components/PlaylistView/ArtistsList.vue";
+import { discographyAlbumTypes } from "@/composables/enums";
+import {
+  getFavAlbums,
+  getFavArtists,
+  getFavTracks,
+} from "@/composables/fetch/favorite";
+import { Album, Artist, Track } from "@/interfaces";
+import useQueueStore from "@/stores/queue";
+import { maxAbumCards } from "@/stores/content-width";
+
+const queue = useQueueStore();
+
+const favAlbums: Ref<Album[]> = ref([]);
+const favTracks: Ref<Track[]> = ref([]);
+const favArtists: Ref<Artist[]> = ref([]);
+
+onMounted(() => {
+  getFavTracks().then((tracks) => (favTracks.value = tracks));
+  getFavAlbums(maxAbumCards.value).then((albums) => (favAlbums.value = albums));
+  getFavArtists(maxAbumCards.value).then(
+    (artists) => (favArtists.value = artists)
+  );
+});
+
+async function handlePlay(index: number) {
+  console.log(index);
+
+  const tracks = await getFavTracks(0);
+  queue.playFromFav(tracks);
+  queue.play(index);
+}
 </script>
 
 <style lang="scss">
@@ -23,6 +76,7 @@ $artistsbg: rgb(0, 255, 21);
 .favorites-page {
   height: 100%;
   overflow: scroll;
+  padding-bottom: 4rem;
 
   .header > * {
     padding: 1rem;
@@ -54,5 +108,30 @@ $artistsbg: rgb(0, 255, 21);
       background-color: $gray2;
     }
   }
+
+  .fav-tracks {
+    h3 {
+      padding-left: 2rem;
+      display: flex;
+      justify-content: space-between;
+
+      .see-all {
+        font-size: $medium;
+      }
+    }
+    margin: 1rem 0;
+  }
+
+  .fav-albums {
+    // margin-top: 3rem;
+    .album-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    }
+  }
+
+  .fav-artists {
+    margin-top: 3rem;
+  }
 }
 </style>