show track number as index in album page

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">

src/interfaces.ts

@@ -15,6 +15,7 @@ export interface Track {
   image: string;
   tracknumber?: number;
   disknumber?: number;
+  index?: number
 }
 
 export interface Folder {

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" />