fix play from album (agaiiiiin!)

src/components/ArtistView/TopTracks.vue

@@ -3,7 +3,6 @@
     <h3 class="section-title">
       {{ title }}
       <span class="see-all">
-
         <RouterLink :to="route">SEE ALL</RouterLink>
       </span>
     </h3>
@@ -48,6 +47,7 @@ defineProps<{
   h3 {
     display: flex;
     justify-content: space-between;
+    padding-left: 1rem !important; // applies to favorite page
   }
 
   .see-all {

src/components/nav/NavBar.vue

@@ -16,6 +16,7 @@
           v-if="$route.name == Routes.artistDiscography"
         />
         <ArtistTracksTitle v-if="$route.name == Routes.artistTracks" />
+        <FavoritesNav v-if="$route.name === Routes.favorites" />
       </div>
     </div>
   </div>
@@ -38,6 +39,7 @@ import SearchTitle from "./Titles/SearchTitle.vue";
 import SettingsTitle from "./Titles/SettingsTitle.vue";
 import ArtistDiscographyTitle from "./Titles/ArtistDiscographyTitle.vue";
 import ArtistTracksTitle from "./Titles/ArtistTracksTitle.vue";
+import FavoritesNav from "./Titles/FavoritesNav.vue";
 
 const route = useRoute();
 

src/components/nav/Titles/FavoritesNav.vue

@@ -0,0 +1,3 @@
+<template>
+  <h2 style="margin: 0">Favorites</h2>
+</template>

src/components/shared/SongItem.vue

@@ -14,7 +14,7 @@
         {{ index }}
       </div>
       <div class="heart-icon">
-        <HeartFillSvg v-if="is_fav" />
+        <HeartFillSvg v-if="props.track.is_favorite" />
         <HeartSvg v-else />
       </div>
     </div>
@@ -120,10 +120,16 @@ function isCurrentPlaying() {
   return isCurrent() && queue.playing;
 }
 
-const is_fav = ref(props.track.is_favorite);
+// const is_fav = ref(props.track.is_favorite);
 
 function addToFav(trackhash: string) {
-  favoriteHandler(is_fav, favType.track, trackhash);
+  favoriteHandler(
+    props.track.is_favorite,
+    favType.track,
+    trackhash,
+    () => (props.track.is_favorite = true),
+    () => (props.track.is_favorite = false)
+  );
 }
 </script>
 

src/composables/usePlayFrom.ts

@@ -47,7 +47,7 @@ export default async function play(
       useQueue.playFromAlbum(
         a_store.info.title,
         a_store.info.albumhash,
-        a_store.allTracks
+        a_store.srcTracks
       );
       useQueue.play();
       break;

src/stores/pages/album.ts

@@ -47,6 +47,7 @@ export default defineStore("album", {
     srcTracks: <Track[]>[],
     albumArtists: <{ artisthash: string; albums: Album[] }[]>[],
     bio: null,
+    discs: <Disc>{},
   }),
   actions: {
     /**
@@ -60,7 +61,17 @@ export default defineStore("album", {
       this.srcTracks = album.tracks;
       this.info = album.info;
 
-      this.srcTracks = sortByTrackNumber(this.srcTracks);
+      const tracks = sortByTrackNumber(this.srcTracks);
+      this.discs = createDiscs(tracks);
+
+      this.srcTracks = Object.keys(this.discs).reduce(
+        (tracks: Track[], disc) => {
+          const disc_tracks = this.discs[disc];
+
+          return [...tracks, ...disc_tracks];
+        },
+        []
+      );
 
       this.srcTracks.forEach((t, index) => {
         t.master_index = index;
@@ -91,19 +102,26 @@ export default defineStore("album", {
     },
   },
   getters: {
-    discs(): Disc {
+    // discs(): Disc {
-      return createDiscs(this.srcTracks);
+    //   return createDiscs(this.srcTracks);
-    },
+    // },
     /**
      * All tracks ordered by disc and track number.
      */
-    allTracks(): Track[] {
+    // allTracks(): Track[] {
-      return Object.keys(this.discs).reduce((tracks: Track[], disc) => {
+    //   const tracks = Object.keys(this.discs).reduce((tracks: Track[], disc) => {
-        const disc_tracks = this.discs[disc];
+    //     const disc_tracks = this.discs[disc];
 
-        return [...tracks, ...disc_tracks];
+    //     return [...tracks, ...disc_tracks];
-      }, []);
+    //   }, []);
-    },
+
+    //   tracks.map((t, index) => {
+    //     t.master_index = index;
+    //     return t;
+    //   });
+
+    //   return tracks;
+    // },
     filteredTracks(): ComputedRef<FuseResult[]> {
       const discs = this.discs;
       let tracks: Track[] | AlbumDisc[] = [];

src/views/AlbumView/index.vue

@@ -118,7 +118,7 @@ const scrollerItems = computed(() => {
 
 function playFromAlbum(index: number) {
   const { title, albumartists, albumhash } = album.info;
-  queue.playFromAlbum(title, albumhash, album.allTracks);
+  queue.playFromAlbum(title, albumhash, album.srcTracks);
   queue.play(index);
 }
 

src/views/ArtistView/Main.vue

@@ -180,5 +180,9 @@ onBeforeRouteLeave(async () => {
     margin: 1rem;
     padding-left: 1rem;
   }
+
+  .see-all {
+    opacity: 0.75;
+  }
 }
 </style>

src/views/Favorites.vue

@@ -1,30 +1,24 @@
 <template>
   <div class="content-page favorites-page">
-    <div class="header">
+    <div class="fav-albums" v-if="favAlbums.length">
-      <div class="tracks">Tracks</div>
+      <ArtistAlbums
-      <div class="albums">Albums</div>
+        :albums="favAlbums"
-      <div class="artists">Artists</div>
+        :albumType="discographyAlbumTypes.albums"
-      <div class="folders">Folders</div>
+        :title="'Albums 💜'"
+        :route="'some'"
+      />
     </div>
-    <div class="fav-tracks">
+    <div class="fav-tracks" v-if="favTracks.length">
       <TopTracks
         :tracks="favTracks"
         :route="'/home'"
-        :title="'Favorite tracks'"
+        :title="'Tracks 💛'"
         :playHandler="handlePlay"
       />
     </div>
 
-    <div class="fav-albums">
+    <div class="fav-artists" v-if="favArtists.length">
-      <ArtistAlbums
+      <FeaturedArtists :artists="favArtists" :title="'Artists 💚'" />
-        :albums="favAlbums"
-        :albumType="discographyAlbumTypes.albums"
-        :title="'Favorite albums'"
-        :route="'some'"
-      />
-    </div>
-    <div class="fav-artists">
-      <FeaturedArtists :artists="favArtists" :title="'Favorite artists'" />
     </div>
   </div>
 </template>
@@ -60,8 +54,6 @@ onMounted(() => {
 });
 
 async function handlePlay(index: number) {
-  console.log(index);
-
   const tracks = await getFavTracks(0);
   queue.playFromFav(tracks);
   queue.play(index);
@@ -69,69 +61,37 @@ async function handlePlay(index: number) {
 </script>
 
 <style lang="scss">
-$tracksbg: rgb(55, 74, 243);
-$albumsbg: rgb(255, 123, 0);
-$artistsbg: rgb(0, 255, 21);
-
 .favorites-page {
   height: 100%;
   overflow: scroll;
   padding-bottom: 4rem;
 
-  .header > * {
+  h3 {
-    padding: 1rem;
+    margin-top: 0;
-    display: grid;
-    place-content: center;
-    border-radius: $small;
-    font-weight: bold;
-    width: 10rem;
   }
 
-  .header {
+  .see-all {
-    width: 100%;
+    opacity: 0.75;
-    display: flex;
-    gap: 1rem;
-
-    .albums {
-      background: $orange;
-    }
-
-    .tracks {
-      background-color: $pink;
-    }
-
-    .artists {
-      background-color: $blue;
-    }
-
-    .folders {
-      background-color: $gray2;
-    }
   }
 
   .fav-tracks {
-    h3 {
+    margin-bottom: 2rem;
-      padding-left: 2rem;
-      display: flex;
-      justify-content: space-between;
 
-      .see-all {
+    h3 {
-        font-size: $medium;
+      margin-top: 0;
     }
+
+    .artist-top-tracks {
+      margin-top: 0;
     }
-    margin: 1rem 0;
   }
 
   .fav-albums {
-    // margin-top: 3rem;
     .album-list {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
     }
-  }
+    margin-bottom: 2rem;
-
-  .fav-artists {
-    margin-top: 3rem;
   }
 }
 </style>