TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Infinite scroll fix in Feeds, search, channel view page

Browse source
This commit is contained in:
Karlis Cudars 2021-10-30 21:48:41 +03:00
parent 44735f0d03
commit 540906b9e3
3 changed files with 15 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/Channel.vue
View file

@ -54,14 +54,14 @@ export default {
}, },
activated() { activated() {
if (this.channel && !this.channel.error) document.title = this.channel.name + " - Piped"; 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); if (this.channel && !this.channel.error) this.updateWatched(this.channel.relatedStreams);
}, },
deactivated() { deactivated() {
window.removeEventListener("scroll", this.handleScroll); document.getElementsByTagName("main")[0].removeEventListener("scroll", this.handleScroll);
}, },
unmounted() { unmounted() {
window.removeEventListener("scroll", this.handleScroll); document.getElementsByTagName("main")[0].removeEventListener("scroll", this.handleScroll);
}, },
methods: { methods: {
async fetchSubscribedStatus() { async fetchSubscribedStatus() {
@ -96,7 +96,8 @@ export default {
}, },
handleScroll() { handleScroll() {
if (this.loading || !this.channel || !this.channel.nextpage) return; 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.loading = true;
this.fetchJson(this.apiUrl() + "/nextpage/channel/" + this.channel.id, { this.fetchJson(this.apiUrl() + "/nextpage/channel/" + this.channel.id, {
nextpage: this.channel.nextpage, nextpage: this.channel.nextpage,

9
src/components/FeedPage.vue
View file

@ -142,13 +142,13 @@ export default {
activated() { activated() {
document.title = this.$t("titles.feed") + " - Piped"; document.title = this.$t("titles.feed") + " - Piped";
if (this.videos.length > 0) this.updateWatched(this.videos); if (this.videos.length > 0) this.updateWatched(this.videos);
window.addEventListener("scroll", this.handleScroll); document.getElementsByTagName("main")[0].addEventListener("scroll", this.handleScroll);
}, },
deactivated() { deactivated() {
window.removeEventListener("scroll", this.handleScroll); document.getElementsByTagName("main")[0].removeEventListener("scroll", this.handleScroll);
}, },
unmounted() { unmounted() {
window.removeEventListener("scroll", this.handleScroll); document.getElementsByTagName("main")[0].removeEventListener("scroll", this.handleScroll);
}, },
methods: { methods: {
async fetchFeed() { async fetchFeed() {
@ -178,7 +178,8 @@ export default {
this.videos = this.videosStore.slice(0, this.currentVideoCount); this.videos = this.videosStore.slice(0, this.currentVideoCount);
}, },
handleScroll() { 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(); this.loadMoreVideos();
} }
}, },

9
src/components/SearchResults.vue
View file

@ -144,13 +144,13 @@ export default {
this.updateResults(); this.updateResults();
}, },
activated() { activated() {
window.addEventListener("scroll", this.handleScroll); document.getElementsByTagName("main")[0].addEventListener("scroll", this.handleScroll);
}, },
deactivated() { deactivated() {
window.removeEventListener("scroll", this.handleScroll); document.getElementsByTagName("main")[0].removeEventListener("scroll", this.handleScroll);
}, },
unmounted() { unmounted() {
window.removeEventListener("scroll", this.handleScroll); document.getElementsByTagName("main")[0].removeEventListener("scroll", this.handleScroll);
}, },
methods: { methods: {
async fetchResults() { async fetchResults() {
@ -165,7 +165,8 @@ export default {
}, },
handleScroll() { handleScroll() {
if (this.loading || !this.results || !this.results.nextpage) return; 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.loading = true;
this.fetchJson(this.apiUrl() + "/nextpage/search", { this.fetchJson(this.apiUrl() + "/nextpage/search", {
nextpage: this.results.nextpage, nextpage: this.results.nextpage,