From 540906b9e38f4dbce0e9ca4239adfa4f34b3a6b3 Mon Sep 17 00:00:00 2001
From: Karlis Cudars <karlis.cudars1996@gmail.com>
Date: Sat, 30 Oct 2021 21:48:41 +0300
Subject: [PATCH] Infinite scroll fix in Feeds, search, channel view page

---
 src/components/Channel.vue       | 9 +++++----
 src/components/FeedPage.vue      | 9 +++++----
 src/components/SearchResults.vue | 9 +++++----
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index 016d1b3b..c94e4333 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -54,14 +54,14 @@ export default {
     },
     activated() {
         if (this.channel && !this.channel.error) document.title = this.channel.name + " - Piped";
-        window.addEventListener("scroll", this.handleScroll);
+        document.getElementsByTagName("main")[0].addEventListener("scroll", this.handleScroll);
         if (this.channel && !this.channel.error) this.updateWatched(this.channel.relatedStreams);
     },
     deactivated() {
-        window.removeEventListener("scroll", this.handleScroll);
+        document.getElementsByTagName("main")[0].removeEventListener("scroll", this.handleScroll);
     },
     unmounted() {
-        window.removeEventListener("scroll", this.handleScroll);
+        document.getElementsByTagName("main")[0].removeEventListener("scroll", this.handleScroll);
     },
     methods: {
         async fetchSubscribedStatus() {
@@ -96,7 +96,8 @@ export default {
         },
         handleScroll() {
             if (this.loading || !this.channel || !this.channel.nextpage) return;
-            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
+            var mainElem = document.getElementsByTagName("main")[0];
+            if (mainElem.offsetHeight + mainElem.scrollTop >= mainElem.scrollHeight - mainElem.clientHeight) {
                 this.loading = true;
                 this.fetchJson(this.apiUrl() + "/nextpage/channel/" + this.channel.id, {
                     nextpage: this.channel.nextpage,
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index bcb5f903..6cef8408 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -142,13 +142,13 @@ export default {
     activated() {
         document.title = this.$t("titles.feed") + " - Piped";
         if (this.videos.length > 0) this.updateWatched(this.videos);
-        window.addEventListener("scroll", this.handleScroll);
+        document.getElementsByTagName("main")[0].addEventListener("scroll", this.handleScroll);
     },
     deactivated() {
-        window.removeEventListener("scroll", this.handleScroll);
+        document.getElementsByTagName("main")[0].removeEventListener("scroll", this.handleScroll);
     },
     unmounted() {
-        window.removeEventListener("scroll", this.handleScroll);
+        document.getElementsByTagName("main")[0].removeEventListener("scroll", this.handleScroll);
     },
     methods: {
         async fetchFeed() {
@@ -178,7 +178,8 @@ export default {
                 this.videos = this.videosStore.slice(0, this.currentVideoCount);
         },
         handleScroll() {
-            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
+            var mainElem = document.getElementsByTagName("main")[0];
+            if (mainElem.offsetHeight + mainElem.scrollTop >= mainElem.scrollHeight - mainElem.clientHeight) {
                 this.loadMoreVideos();
             }
         },
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 49a8e92f..11792647 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -144,13 +144,13 @@ export default {
         this.updateResults();
     },
     activated() {
-        window.addEventListener("scroll", this.handleScroll);
+        document.getElementsByTagName("main")[0].addEventListener("scroll", this.handleScroll);
     },
     deactivated() {
-        window.removeEventListener("scroll", this.handleScroll);
+        document.getElementsByTagName("main")[0].removeEventListener("scroll", this.handleScroll);
     },
     unmounted() {
-        window.removeEventListener("scroll", this.handleScroll);
+        document.getElementsByTagName("main")[0].removeEventListener("scroll", this.handleScroll);
     },
     methods: {
         async fetchResults() {
@@ -165,7 +165,8 @@ export default {
         },
         handleScroll() {
             if (this.loading || !this.results || !this.results.nextpage) return;
-            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
+            var mainElem = document.getElementsByTagName("main")[0];
+            if (mainElem.offsetHeight + mainElem.scrollTop >= mainElem.scrollHeight - mainElem.clientHeight) {
                 this.loading = true;
                 this.fetchJson(this.apiUrl() + "/nextpage/search", {
                     nextpage: this.results.nextpage,