Fix fetching pages of albums in album detail view

changes/changelog.d/1927.bugfix

@@ -0,0 +1 @@
+Fix fetching pages of albums in album detail view (#1927)

front/src/components/audio/track/Table.vue

@@ -138,7 +138,7 @@ if (props.tracks === undefined) {
 }
 
 const updatePage = (page: number) => {
-  if (props.tracks.length === 0) {
+  if (props.tracks === undefined) {
     currentPage.value = page
     fetchData()
   } else {
@@ -234,7 +234,7 @@ const updatePage = (page: number) => {
 
         <track-row
           v-for="(track, index) in allTracks"
-          :key="track.id + (track.position ?? 0)"
+          :key="`${track.id} ${track.position}`"
           :data-track-id="track.id"
           :data-track-position="track.position"
           :track="track"
@@ -256,7 +256,7 @@ const updatePage = (page: number) => {
       >
         <pagination
           :total="totalTracks"
-          :current="tracks.length > 0 ? page : currentPage"
+          :current="tracks !== undefined ? page : currentPage"
           :paginate-by="paginateBy"
           @update:current="updatePage"
         />
@@ -296,7 +296,7 @@ const updatePage = (page: number) => {
           v-if="paginateResults && totalTracks > paginateBy"
           :paginate-by="paginateBy"
           :total="totalTracks"
-          :current="tracks.length > 0 ? page : currentPage"
+          :current="tracks !== undefined ? page : currentPage"
           :compact="true"
           @update:current="updatePage"
         />

front/src/components/library/AlbumDetail.vue

@@ -5,6 +5,7 @@ import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 import ChannelEntries from '~/components/audio/ChannelEntries.vue'
 import TrackTable from '~/components/audio/track/Table.vue'
 import PlayButton from '~/components/audio/PlayButton.vue'
+import Pagination from '~/components/vui/Pagination.vue'
 
 interface Events {
   (e: 'page-changed', page: number): void
@@ -75,11 +76,19 @@ const getDiscKey = (disc: Track[]) => disc.map(track => track.id).join('|')
           :show-art="false"
           :show-album="false"
           :show-artist="false"
-          :paginate-results="true"
-          :total="totalTracks"
+          :paginate-results="false"
+        />
+      </div>
+      <div
+        v-if="totalTracks > paginateBy"
+        class="ui center aligned basic segment tablet-and-below"
+      >
+        <pagination
+          :current="page"
           :paginate-by="paginateBy"
-          :page="page"
-          @page-changed="emit('page-changed', page)"
+          :total="totalTracks"
+          :compact="true"
+          @update:current="(page: number) => emit('page-changed', page)"
         />
       </div>
     </template>
@@ -95,7 +104,7 @@ const getDiscKey = (disc: Track[]) => disc.map(track => track.id).join('|')
         :total="totalTracks"
         :paginate-by="paginateBy"
         :page="page"
-        @page-changed="emit('page-changed', page)"
+        @page-changed="(page) => emit('page-changed', page)"
       />
     </template>
     <template v-if="!artist.channel && !isSerie">