fix genre page only showing 10 albums

src/library/genre/GenreDetails.vue

@@ -19,9 +19,9 @@
       </ContentLoader>
     </template>
     <template v-else>
-      <ContentLoader v-slot :loading="albums == null">
+      <InfiniteList v-slot="{ items }" :load="loadAlbums">
-        <AlbumList :items="albums" />
+        <AlbumList :items="items" />
-      </ContentLoader>
+      </InfiniteList>
     </template>
   </div>
 </template>
@@ -29,11 +29,13 @@
   import Vue from 'vue'
   import AlbumList from '@/library/album/AlbumList.vue'
   import TrackList from '@/library/TrackList.vue'
+  import InfiniteList from '@/shared/components/InfiniteList.vue'
 
   export default Vue.extend({
     components: {
       AlbumList,
       TrackList,
+      InfiniteList,
     },
     props: {
       id: { type: String, required: true },
@@ -41,17 +43,18 @@
     },
     data() {
       return {
-        albums: null as null | any[],
         tracks: null as null | any[],
       }
     },
     created() {
-      this.$api.getAlbumsByGenre(this.id).then(result => {
-        this.albums = result
-      })
       this.$api.getTracksByGenre(this.id).then(result => {
         this.tracks = result
       })
+    },
+    methods: {
+      loadAlbums(offset: number) {
+        return this.$api.getAlbumsByGenre(this.id, 50, offset)
+      }
     }
   })
 </script>

src/shared/api.ts

@@ -115,12 +115,12 @@ export class API {
       .sort((a: any, b:any) => b.albumCount - a.albumCount)
   }
 
-  async getAlbumsByGenre(id: string) {
+  async getAlbumsByGenre(id: string, size: number, offset = 0) {
     const params = {
       type: 'byGenre',
       genre: id,
-      count: 500,
+      size,
-      offset: 0,
+      offset,
     }
     const response = await this.get('rest/getAlbumList2', params)
     return (response.albumList2?.album || []).map(this.normalizeAlbum, this)

src/shared/components/InfiniteList.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <slot :items="items" />
+    <InfiniteLoader :loading="loading" :has-more="hasMore" @load-more="loadMore" />
+  </div>
+</template>
+  <script lang="ts">
+  import Vue from 'vue'
+
+  export default Vue.extend({
+    props: {
+      load: { type: Function, required: true },
+    },
+    data() {
+      return {
+        items: [] as any[],
+        loading: false,
+        offset: 0 as number,
+        hasMore: true,
+      }
+    },
+    methods: {
+      loadMore() {
+        this.loading = true
+        this.load(this.offset).then((items: any[]) => {
+          this.items.push(...items)
+          this.offset += items.length
+          this.hasMore = items.length > 0
+          this.loading = false
+        })
+      }
+    }
+  })
+</script>