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/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>