@@ -47,19 +47,30 @@ import VideoItem from "@/components/VideoItem.vue";
export default {
data() {
return {
+ currentVideoCount: 0,
+ videoStep: 100,
+ videosStore: [],
videos: [],
selectedSort: "descending",
};
},
mounted() {
this.fetchFeed().then(videos => {
- this.videos = videos;
+ this.videosStore = videos;
+ this.loadMoreVideos();
this.updateWatched(this.videos);
});
},
activated() {
document.title = this.$t("titles.feed") + " - Piped";
if (this.videos.length > 0) this.updateWatched(this.videos);
+ window.addEventListener("scroll", this.handleScroll);
+ },
+ deactivated() {
+ window.removeEventListener("scroll", this.handleScroll);
+ },
+ unmounted() {
+ window.removeEventListener("scroll", this.handleScroll);
},
methods: {
async fetchFeed() {
@@ -83,6 +94,16 @@ export default {
break;
}
},
+ 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);
+ },
+ handleScroll() {
+ if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
+ this.loadMoreVideos();
+ }
+ },
},
computed: {
getRssUrl(_this) {