diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 367496504d..45f5decfef 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -24,7 +24,7 @@
-
+
@@ -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 > 0 && this.videosCount % 100 != 0) return;
+
+ this.loading = true;
this.loadMoreVideos();
}
},