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

Implement support for feed pagination.

Browse source
This commit is contained in:
Kavin 2023-05-01 21:22:34 +01:00
parent 8983745bbb
commit d320cca0d9
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
1 changed files with 33 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/components/FeedPage.vue
View file

@ -24,7 +24,7 @@
<hr />
<LoadingIndicatorPage :show-content="videosStore != null" class="video-grid">
<LoadingIndicatorPage :show-content="videos != null" class="video-grid">
<template v-for="video in videos" :key="video.url">
<VideoItem v-if="shouldShowVideo(video)" :is-feed="true" :item="video" />
</template>
@ -44,12 +44,11 @@ export default {
},
data() {
return {
currentVideoCount: 0,
videoStep: 100,
videosStore: null,
videos: [],
videos: null,
videosCount: 0,
availableFilters: ["all", "shorts", "videos"],
selectedFilter: "all",
loading: false,
};
},
computed: {
@ -60,8 +59,8 @@ export default {
},
mounted() {
this.fetchFeed().then(videos => {
this.videosStore = videos;
this.loadMoreVideos();
this.videos = videos;
this.videosCount = videos.length;
this.updateWatched(this.videos);
});
@ -69,7 +68,7 @@ export default {
},
activated() {
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);
},
deactivated() {
@ -90,13 +89,35 @@ export default {
});
}
},
loadMoreVideos() {
this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length);
if (this.videos.length != this.videosStore.length)
this.videos = this.videosStore.slice(0, this.currentVideoCount);
async loadMoreVideos() {
const start = this.videos[this.videos.length - 1].uploaded;
if (this.authenticated) {
return await this.fetchJson(this.authApiUrl() + "/feed", {
authToken: this.getAuthToken(),
start,
}).then(videos => {
this.videos = this.videos.concat(videos);
this.videosCount = videos.length > 0 ? this.videos.length : -1;
this.loading = false;
});
} else {
return await this.fetchJson(this.authApiUrl() + "/feed/unauthenticated", {
channels: this.getUnauthenticatedChannels(),
start,
}).then(videos => {
this.videos = this.videos.concat(videos);
this.videosCount = videos.length > 0 ? this.videos.length : -1;
this.loading = false;
});
}
},
handleScroll() {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
if (this.loading) return;
if (this.videos == null) return;
if (this.videosCount % 100 != 0) return;
this.loading = true;
this.loadMoreVideos();
}
},