From 06bc25711c75cd93fea6e66b737fa9971d6966c0 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Wed, 25 Nov 2020 10:48:14 +0530
Subject: [PATCH] Infinite scrolling for channel pages.

---
 src/components/Channel.vue | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index 3797ad4f..790053f7 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -51,6 +51,10 @@ export default {
     },
     mounted() {
         this.getChannelData();
+        window.addEventListener("scroll", this.handleScroll);
+    },
+    unmounted() {
+        window.removeEventListener("scroll", this.handleScroll);
     },
     methods: {
         async fetchChannel() {
@@ -69,6 +73,31 @@ export default {
         },
         timeFormat(d) {
             return require("@/utils/TimeUtils.js").default.timeFormat(d);
+        },
+        handleScroll() {
+            if (this.loading || !this.channel || !this.channel.nextpage) return;
+            if (
+                window.innerHeight + window.scrollY >=
+                document.body.offsetHeight - window.innerHeight / 2
+            ) {
+                this.loading = true;
+                fetch(
+                    Constants.BASE_URL +
+                        "/nextpage/channels/" +
+                        this.$route.params.channelId +
+                        "?url=" +
+                        encodeURIComponent(this.channel.nextpage)
+                )
+                    .then(body => body.json())
+                    .then(json => {
+                        this.channel.relatedStreams.concat(json.relatedStreams);
+                        this.channel.nextpage = json.nextpage;
+                        this.loading = false;
+                        json.relatedStreams.map(stream =>
+                            this.channel.relatedStreams.push(stream)
+                        );
+                    });
+            }
         }
     }
 };