group album tracks as they appear (in queue)

+ move handling disc logic to the album store

src/components/FolderView/SongList.vue

@@ -6,7 +6,7 @@
       </div>
       <div class="songlist">
         <SongItem
-          v-for="track in getTracks()"
+          v-for="track in getTrackList()"
           :key="track.trackid"
           :track="track"
           :index="track.index"
@@ -34,6 +34,7 @@ import { focusElem } from "@/composables/perks";
 import { onMounted, onUpdated, ref } from "vue";
 import { Track } from "@/interfaces";
 import useQStore from "@/stores/queue";
+import useAlbumStore from "@/stores/pages/album";
 
 const queue = useQStore();
 
@@ -90,13 +91,16 @@ function updateQueue(track: Track) {
       queue.play(index);
       break;
     case "AlbumView":
+      const album = useAlbumStore();
+      const tindex = album.tracks.findIndex((t) => t.trackid === track.trackid);
+
       queue.playFromAlbum(
         track.album,
         track.albumartist,
         track.albumhash,
-        props.tracks
+        album.tracks
       );
-      queue.play(index);
+      queue.play(tindex);
       break;
     case "PlaylistView":
       queue.playFromPlaylist(props.pname, props.playlistid, props.tracks);
@@ -105,7 +109,10 @@ function updateQueue(track: Track) {
   }
 }
 
-function getTracks() {
+/**
+ * Used to show track numbers as indexes in the album page.
+ */
+function getTrackList() {
   if (props.on_album_page) {
     let tracks = props.tracks.map((track) => {
       track.index = track.tracknumber;
@@ -115,7 +122,7 @@ function getTracks() {
     return tracks;
   }
 
-  let tracks = props.tracks.map((track, index) => {
+  const tracks = props.tracks.map((track, index) => {
     track.index = index + 1;
     return track;
   });

src/components/LeftSidebar/nowPlaying.vue

@@ -72,10 +72,11 @@ const showContextMenu = (e: Event) => {
   .l-track-time {
     display: flex;
     justify-content: space-between;
+    opacity: 0.8;
+    margin-top: $small;
 
     span {
       font-size: small;
-      // background-color: $gray;
       padding: $smaller;
     }
   }

src/stores/pages/album.ts

@@ -17,10 +17,24 @@ function sortTracks(tracks: Track[]) {
   });
 }
 
+interface Discs {
+  [key: string]: Track[];
+}
+
+function createDiscs(tracks: Track[]): Discs {
+  return tracks.reduce((group, track) => {
+    const { discnumber } = track;
+    group[discnumber] = group[discnumber] ?? [];
+    group[discnumber].push(track);
+    return group;
+  }, {} as Discs);
+}
+
 export default defineStore("album", {
   state: () => ({
     info: <AlbumInfo>{},
     tracks: <Track[]>[],
+    discs: <Discs>{},
     artists: <Artist[]>[],
     bio: null,
   }),
@@ -31,11 +45,16 @@ export default defineStore("album", {
      * @param hash title of the album
      */
     async fetchTracksAndArtists(hash: string) {
-      const tracks = await getAlbumTracks(hash, useNotifStore);
+      this.tracks = [];
+      const album = await getAlbumTracks(hash, useNotifStore);
       const artists = await getAlbumArtists(hash);
 
-      this.tracks = sortTracks(tracks.tracks);
+      this.discs = createDiscs(sortTracks(album.tracks));
-      this.info = tracks.info;
+      Object.keys(this.discs).forEach((disc) => {
+        this.tracks.push(...this.discs[disc]);
+      });
+
+      this.info = album.info;
       this.artists = artists;
     },
     /**

src/views/album/Content.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="album-tracks rounded">
     <div v-for="(disc, key) in discs" class="album-disc">
-      <SongList :key="key" :tracks="disc" :on_album_page="true" :c="key" />
+      <SongList :key="key" :tracks="disc" :on_album_page="true" :disc="key" />
     </div>
   </div>
 </template>

src/views/album/index.vue

@@ -4,7 +4,7 @@
       <Header :album="album.info" />
     </template>
     <template #content>
-      <Content :discs="discs" />
+      <Content :discs="album.discs" />
     </template>
     <template #bottom>
       <Bottom
@@ -28,36 +28,14 @@ import Page from "@/layouts/HeaderContentBottom.vue";
 import Bottom from "./Bottom.vue";
 import Content from "./Content.vue";
 import Header from "./Header.vue";
-import { Track } from "@/interfaces";
-import { ref } from "vue";
 
 const album = useAStore();
 
-// function that takes in a Track[] and returns a Track[][] which is a list of tracks split into discs
-interface Disc {
-  [key: string]: Track[];
-}
-
-function createDiscs(tracks: Track[]): Disc {
-  // group tracks by disc using array.reduce
-  return tracks.reduce((group, track) => {
-    const { discnumber } = track;
-    group[discnumber] = group[discnumber] ?? [];
-    group[discnumber].push(track);
-    return group;
-  }, {} as Disc);
-}
-
-const discs = ref(createDiscs(album.tracks));
-
-console.log(discs.value);
 function fetchAlbumBio(params: RouteParams) {
   album.fetchBio(params.hash.toString());
 }
 
 onBeforeRouteUpdate(async (to: RouteLocationNormalized) => {
-  await album.fetchTracksAndArtists(to.params.hash.toString()).then(() => {
+  await album.fetchTracksAndArtists(to.params.hash.toString());
-    discs.value = createDiscs(album.tracks);
-  });
 });
 </script>