From ef2926f18fc191f4a52de44dcccbbca701cef2ec Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 2 Aug 2022 23:46:13 +0300
Subject: [PATCH] group album tracks as they appear (in queue)

+ move handling disc logic to the album store
---
 src/components/FolderView/SongList.vue    | 17 ++++++++++-----
 src/components/LeftSidebar/nowPlaying.vue |  3 ++-
 src/stores/pages/album.ts                 | 25 +++++++++++++++++++---
 src/views/album/Content.vue               |  2 +-
 src/views/album/index.vue                 | 26 ++---------------------
 5 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index f1c8a847..6dc90b4f 100644
--- a/src/components/FolderView/SongList.vue
+++ b/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;
   });
diff --git a/src/components/LeftSidebar/nowPlaying.vue b/src/components/LeftSidebar/nowPlaying.vue
index 5104dad7..a7c84d8a 100644
--- a/src/components/LeftSidebar/nowPlaying.vue
+++ b/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;
     }
   }
diff --git a/src/stores/pages/album.ts b/src/stores/pages/album.ts
index a9aac3dd..81c4a302 100644
--- a/src/stores/pages/album.ts
+++ b/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.info = tracks.info;
+      this.discs = createDiscs(sortTracks(album.tracks));
+      Object.keys(this.discs).forEach((disc) => {
+        this.tracks.push(...this.discs[disc]);
+      });
+
+      this.info = album.info;
       this.artists = artists;
     },
     /**
diff --git a/src/views/album/Content.vue b/src/views/album/Content.vue
index cc3dc877..693b2fb8 100644
--- a/src/views/album/Content.vue
+++ b/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>
diff --git a/src/views/album/index.vue b/src/views/album/index.vue
index ac503585..9edf3342 100644
--- a/src/views/album/index.vue
+++ b/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(() => {
-    discs.value = createDiscs(album.tracks);
-  });
+  await album.fetchTracksAndArtists(to.params.hash.toString());
 });
 </script>