fix playing from album bug when there's inconsistent discs

~ eg. when there's no disc 1, but there's disc 2, or 3

src/composables/fetch/album.ts

@@ -26,7 +26,6 @@ const getAlbumData = async (hash: string, ToastStore: typeof useNotifStore) => {
   if (status == 204) {
     ToastStore().showNotification("Album not created yet!", NotifType.Error);
   }
-
   return data as AlbumData;
 };
 

src/interfaces.ts

@@ -16,15 +16,17 @@ export interface Track extends AlbumDisc {
   filepath?: string;
   duration?: number;
   bitrate: number;
-  genre?: string;
   image: string;
   track: number;
   disc: number;
   index: number;
   trackhash: string;
-  copyright?: string;
   filetype: string;
   is_favorite: boolean;
+
+  genre?: string;
+  copyright?: string;
+  master_index?: number;
 }
 
 export interface Folder {

src/stores/pages/album.ts

@@ -9,7 +9,6 @@ import { maxAbumCards } from "@/stores/content-width";
 import { getAlbum, getAlbumsFromArtist } from "../../composables/fetch/album";
 import { Album, FuseResult, Track } from "../../interfaces";
 import { useNotifStore } from "../notification";
-import router from "@/router";
 
 interface Disc {
   [key: string]: Track[];
@@ -25,12 +24,6 @@ function sortByTrackNumber(tracks: Track[]) {
   });
 }
 
-// function albumHasNoDiscs(album: Album) {
-//   if (album.is_single) return true;
-
-//   return false;
-// }
-
 /**
  *
  * @param tracks The raw tracklist from the server
@@ -39,8 +32,10 @@ function sortByTrackNumber(tracks: Track[]) {
 function createDiscs(tracks: Track[]) {
   return tracks.reduce((group, track) => {
     const { disc } = track;
+
     group[disc] = group[disc] ?? [];
     group[disc].push(track);
+
     return group;
   }, {} as Disc);
 }
@@ -49,7 +44,7 @@ export default defineStore("album", {
   state: () => ({
     query: "",
     info: <Album>{},
-    rawTracks: <Track[]>[],
+    srcTracks: <Track[]>[],
     albumArtists: <{ artisthash: string; albums: Album[] }[]>[],
     bio: null,
   }),
@@ -62,8 +57,14 @@ export default defineStore("album", {
     async fetchTracksAndArtists(hash: string) {
       const album = await getAlbum(hash, useNotifStore);
 
-      this.rawTracks = album.tracks;
+      this.srcTracks = album.tracks;
       this.info = album.info;
+
+      this.srcTracks = sortByTrackNumber(this.srcTracks);
+
+      this.srcTracks.forEach((t, index) => {
+        t.master_index = index;
+      });
     },
     async fetchArtistAlbums() {
       const albumartists = this.info.albumartists;
@@ -85,14 +86,7 @@ export default defineStore("album", {
   },
   getters: {
     discs(): Disc {
-      return createDiscs(sortByTrackNumber(this.rawTracks));
+      return createDiscs(this.srcTracks);
-    },
-    allTracks(): Track[] {
-      return Object.keys(this.discs).reduce((tracks: Track[], disc) => {
-        const disc_tracks = this.discs[disc];
-
-        return [...tracks, ...disc_tracks];
-      }, []);
     },
     filteredTracks(): ComputedRef<FuseResult[]> {
       const discs = this.discs;

src/stores/queue.ts

@@ -46,7 +46,6 @@ export default defineStore("Queue", {
     play(index: number = 0) {
       if (this.tracklist.length === 0) return;
       this.currentindex = index;
-      console.log(this.tracklist.length);
 
       if (!this.mousover) {
         this.queueScrollFunction(this.currentindex - 1);

src/views/AlbumView/Bottom.vue

@@ -1,24 +0,0 @@
-<template>
-  <div class="bottom-content">
-    <FeaturedArtists :artists="artists" />
-
-    <AlbumBio
-      :bio="bio"
-      :images="{ album: image, artist: artists[0]?.image }"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Artist } from "@/interfaces";
-import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
-import AlbumBio from "@/components/AlbumView/AlbumBio.vue";
-
-defineProps<{
-  artists: Artist[];
-  bio: string | null;
-  image: string;
-}>();
-</script>
-
-<style lang="scss"></style>

src/views/AlbumView/index.vue

@@ -11,9 +11,7 @@
         <component
           :is="item.component"
           v-bind="item.props"
-          @playThis="
+          @playThis="playFromAlbum(item.props.track.master_index)"
-            playFromAlbum(item.props.track.index - item.props.track.disc)
-          "
         />
       </div>
     </RecycleScroller>
@@ -122,7 +120,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);
 }