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
Download patch file Download diff file Expand all files Collapse all files

45
src/components/FeedPage.vue
View file

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