From b65eb4580cb52bb2760a719220eb00555eab43f0 Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Sun, 13 Dec 2020 11:56:01 +0100
Subject: [PATCH] fix genre page only showing 10 albums

---
 src/library/genre/GenreDetails.vue     | 17 +++++++------
 src/shared/api.ts                      |  6 ++---
 src/shared/components/InfiniteList.vue | 34 ++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 10 deletions(-)
 create mode 100644 src/shared/components/InfiniteList.vue

diff --git a/src/library/genre/GenreDetails.vue b/src/library/genre/GenreDetails.vue
index 27d8ad2..7dc7067 100644
--- a/src/library/genre/GenreDetails.vue
+++ b/src/library/genre/GenreDetails.vue
@@ -19,9 +19,9 @@
       </ContentLoader>
     </template>
     <template v-else>
-      <ContentLoader v-slot :loading="albums == null">
-        <AlbumList :items="albums" />
-      </ContentLoader>
+      <InfiniteList v-slot="{ items }" :load="loadAlbums">
+        <AlbumList :items="items" />
+      </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>
diff --git a/src/shared/api.ts b/src/shared/api.ts
index d79a76f..6276597 100644
--- a/src/shared/api.ts
+++ b/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)
diff --git a/src/shared/components/InfiniteList.vue b/src/shared/components/InfiniteList.vue
new file mode 100644
index 0000000..c3781b2
--- /dev/null
+++ b/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>