From 3a9d5700ea352fe4c6052c8fd177ad1a88e767fd Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sat, 19 Oct 2024 17:27:39 +0200
Subject: [PATCH] [#414] Support paginated results on scroll in the media
 Collections component.

---
 .../Media/Providers/Jellyfin/Collections.vue  | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/Collections.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/Collections.vue
index c5ab06a892..6f29d38e62 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/Collections.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Jellyfin/Collections.vue
@@ -37,6 +37,11 @@ export default {
       default: () => [],
     },
 
+    batchItems: {
+      type: Number,
+      default: 100,
+    },
+
     parentId: {
       type: String,
     },
@@ -45,6 +50,7 @@ export default {
   data() {
     return {
       fallbackImageCollections: {},
+      maxResultIndex: this.batchItems,
     };
   },
 
@@ -74,7 +80,7 @@ export default {
         }
 
         return a.name.localeCompare(b.name)
-      })
+      }).slice(0, this.maxResultIndex)
     },
   },
 
@@ -82,6 +88,26 @@ export default {
     onImageError(collection) {
       this.fallbackImageCollections[collection.id] = true
     },
+
+    onScroll(e) {
+      const el = e.target
+      if (!el)
+        return
+
+      const bottom = (el.scrollHeight - el.scrollTop) <= el.clientHeight + 150
+      if (!bottom)
+        return
+
+      this.maxResultIndex += this.batchItems
+    },
+  },
+
+  mounted() {
+    this.$el.parentElement.addEventListener('scroll', this.onScroll)
+  },
+
+  unmounted() {
+    this.$el.parentElement.removeEventListener('scroll', this.onScroll)
   },
 }
 </script>