handle discs in album page

server/app/api/album.py

@@ -68,7 +68,7 @@ def get_album():
         album.count == 1
         and tracks[0].title == album.title
         and tracks[0].tracknumber == 1
-        and tracks[0].disknumber == 1
+        and tracks[0].discnumber == 1
     ):
         album.is_single = True
 

server/app/functions.py

@@ -97,7 +97,7 @@ class CheckArtistImages:
     @staticmethod
     def check_if_exists(img_path: str):
         """
-        Checks if an image exists on disk.
+        Checks if an image exists on c.
         """
 
         if os.path.exists(img_path):

server/app/lib/taglib.py

@@ -147,7 +147,7 @@ def parse_track_number(tags):
 
 def parse_disc_number(tags):
     """
-    Parses the disk number from an audio file.
+    Parses the disc number from an audio file.
     """
     try:
         disc_number = int(tags["discnumber"][0])
@@ -183,7 +183,7 @@ def get_tags(fullpath: str) -> dict | None:
         "genre": parse_genre_tag(tags),
         "date": parse_date_tag(tags)[:4],
         "tracknumber": parse_track_number(tags),
-        "disknumber": parse_disc_number(tags),
+        "discnumber": parse_disc_number(tags),
         "copyright": parse_copyright(tags),
         "length": round(tags.info.length),
         "bitrate": round(int(tags.info.bitrate) / 1000),

server/app/models.py

@@ -25,7 +25,7 @@ class Track:
     genre: str
     bitrate: int
     tracknumber: int
-    disknumber: int
+    discnumber: int
     albumhash: str
     date: str
     image: str
@@ -42,7 +42,7 @@ class Track:
         self.genre = tags["genre"]
         self.bitrate = int(tags["bitrate"])
         self.length = int(tags["length"])
-        self.disknumber = int(tags["disknumber"])
+        self.discnumber = int(tags["discnumber"])
         self.albumhash = tags["albumhash"]
         self.date = tags["date"]
         self.image = tags["albumhash"] + ".webp"

src/components/FolderView/SongList.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="folder">
     <div class="table rounded" v-if="tracks.length">
+      <div class="header" v-if="disc">
+        <div class="disc-number">Disc {{ disc }}</div>
+      </div>
       <div class="songlist">
         <SongItem
           v-for="track in getTracks()"
@@ -40,6 +43,7 @@ const props = defineProps<{
   pname?: string;
   playlistid?: string;
   on_album_page?: boolean;
+  disc?: string | number;
 }>();
 
 const route = useRoute();
@@ -135,6 +139,17 @@ function getTracks() {
   background-color: $gray5;
   padding: $small 0;
 
+  .header {
+    margin: $small;
+
+    .disc-number {
+      font-size: small;
+      font-weight: bold;
+      margin: $small 1.5rem;
+      color: $gray1;
+    }
+  }
+
   .current {
     a {
       color: inherit;

src/interfaces.ts

@@ -14,7 +14,7 @@ export interface Track {
   genre?: string;
   image: string;
   tracknumber?: number;
-  disknumber?: number;
+  discnumber?: number;
   index?: number;
   uniq_hash: string;
 }

src/views/album/Content.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="songs rounded">
+  <div class="album-tracks rounded">
-    <SongList :tracks="tracks" :on_album_page="true" />
+    <div v-for="(disc, key) in discs" class="album-disc">
+      <SongList :key="key" :tracks="disc" :on_album_page="true" :c="key" />
+    </div>
   </div>
 </template>
 
@@ -9,6 +11,15 @@ import { Track } from "@/interfaces";
 import SongList from "@/components/FolderView/SongList.vue";
 
 defineProps<{
-  tracks: Track[];
+  discs: {
+    [key: string]: Track[];
+  };
 }>();
 </script>
+
+<style lang="scss">
+.album-tracks {
+  display: grid;
+  gap: 1rem;
+}
+</style>

src/views/album/index.vue

@@ -4,7 +4,7 @@
       <Header :album="album.info" />
     </template>
     <template #content>
-      <Content :tracks="album.tracks" />
+      <Content :discs="discs" />
     </template>
     <template #bottom>
       <Bottom
@@ -28,14 +28,36 @@ 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());
+  await album.fetchTracksAndArtists(to.params.hash.toString()).then(() => {
+    discs.value = createDiscs(album.tracks);
+  });
 });
 </script>