fix genre page only showing 10 albums

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,
-      offset: 0,
+      size,
+      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>