From 866f3278a570f433cfaf9b40122d9a1acd219f71 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sun, 26 Jun 2022 19:37:48 +0300
Subject: [PATCH] show track number as index in album page

---
 src/components/FolderView/SongList.vue | 23 +++++++++++++++++++++--
 src/interfaces.ts                      |  1 +
 src/views/AlbumView.vue                |  2 +-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index e5fb9e6..9a5d95a 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -10,10 +10,10 @@
       </div>
       <div class="songlist">
         <SongItem
-          v-for="(track, index) in tracks"
+          v-for="track in getTracks()"
           :key="track.trackid"
           :song="track"
-          :index="index + 1"
+          :index="track.index"
           @updateQueue="updateQueue"
           :isPlaying="queue.playing"
           :isCurrent="queue.current.trackid == track.trackid"
@@ -43,6 +43,7 @@ const props = defineProps<{
   path?: string;
   pname?: string;
   playlistid?: string;
+  on_album_page?: boolean;
 }>();
 
 let route = useRoute().name;
@@ -68,6 +69,24 @@ function updateQueue(track: Track) {
       break;
   }
 }
+
+function getTracks() {
+  if (props.on_album_page) {
+    let tracks = props.tracks.map((track, index) => {
+      track.index = track.tracknumber;
+      return track;
+    });
+
+    return tracks;
+  }
+
+  let tracks = props.tracks.map((track, index) => {
+    track.index = index + 1;
+    return track;
+  });
+
+  return tracks;
+}
 </script>
 
 <style lang="scss">
diff --git a/src/interfaces.ts b/src/interfaces.ts
index c6bd34e..71016d6 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -15,6 +15,7 @@ export interface Track {
   image: string;
   tracknumber?: number;
   disknumber?: number;
+  index?: number
 }
 
 export interface Folder {
diff --git a/src/views/AlbumView.vue b/src/views/AlbumView.vue
index 8f789ef..d3be5a0 100644
--- a/src/views/AlbumView.vue
+++ b/src/views/AlbumView.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="separator" id="av-sep"></div>
     <div class="songs rounded">
-      <SongList :tracks="album.tracks" />
+      <SongList :tracks="album.tracks" :on_album_page="true"/>
     </div>
     <div class="separator" id="av-sep"></div>
     <FeaturedArtists :artists="album.artists" />