2021-07-16 22:56:41 +00:00
|
|
|
<template>
|
2021-12-27 14:46:26 +00:00
|
|
|
<h1 v-t="'titles.feed'" class="font-bold text-center" />
|
2021-07-16 22:56:41 +00:00
|
|
|
|
2022-01-12 11:59:50 +00:00
|
|
|
<button v-if="authenticated" class="btn mr-2" @click="exportHandler">
|
|
|
|
<router-link to="/subscriptions">Subscriptions</router-link>
|
2021-09-04 15:02:59 +00:00
|
|
|
</button>
|
2021-07-16 22:56:41 +00:00
|
|
|
|
2021-09-04 15:02:59 +00:00
|
|
|
<span>
|
2021-12-27 22:33:55 +00:00
|
|
|
<a :href="getRssUrl">
|
2022-01-12 11:59:50 +00:00
|
|
|
<font-awesome-icon icon="rss" />
|
2021-12-27 22:33:55 +00:00
|
|
|
</a>
|
2021-09-04 15:02:59 +00:00
|
|
|
</span>
|
|
|
|
|
2021-12-27 14:46:29 +00:00
|
|
|
<span class="md:float-right">
|
2021-12-27 23:34:59 +00:00
|
|
|
<Sorting by-key="uploaded" @apply="order => videos.sort(order)" />
|
2021-09-04 15:02:59 +00:00
|
|
|
</span>
|
2021-07-19 19:44:55 +00:00
|
|
|
|
2021-07-16 22:56:41 +00:00
|
|
|
<hr />
|
|
|
|
|
2021-12-27 14:46:22 +00:00
|
|
|
<div class="video-grid">
|
2021-12-27 14:46:39 +00:00
|
|
|
<VideoItem v-for="video in videos" :key="video.url" :video="video" />
|
2021-07-16 22:56:41 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2022-04-08 15:46:49 +00:00
|
|
|
import VideoItem from "./VideoItem.vue";
|
|
|
|
import Sorting from "./Sorting.vue";
|
2021-07-21 12:32:17 +00:00
|
|
|
|
2021-07-16 22:56:41 +00:00
|
|
|
export default {
|
2021-10-08 18:52:51 +00:00
|
|
|
components: {
|
|
|
|
VideoItem,
|
2021-12-27 23:34:59 +00:00
|
|
|
Sorting,
|
2021-10-08 18:52:51 +00:00
|
|
|
},
|
2021-07-16 22:56:41 +00:00
|
|
|
data() {
|
|
|
|
return {
|
2021-09-11 19:31:01 +00:00
|
|
|
currentVideoCount: 0,
|
|
|
|
videoStep: 100,
|
|
|
|
videosStore: [],
|
2021-07-16 22:56:41 +00:00
|
|
|
videos: [],
|
|
|
|
};
|
|
|
|
},
|
2021-10-08 18:52:51 +00:00
|
|
|
computed: {
|
|
|
|
getRssUrl(_this) {
|
|
|
|
return _this.apiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
|
|
|
|
},
|
|
|
|
},
|
2021-07-16 22:56:41 +00:00
|
|
|
mounted() {
|
2021-08-22 10:27:09 +00:00
|
|
|
this.fetchFeed().then(videos => {
|
2021-09-11 19:31:01 +00:00
|
|
|
this.videosStore = videos;
|
|
|
|
this.loadMoreVideos();
|
2021-08-22 10:27:09 +00:00
|
|
|
this.updateWatched(this.videos);
|
|
|
|
});
|
2021-07-16 22:56:41 +00:00
|
|
|
},
|
2021-07-21 10:59:53 +00:00
|
|
|
activated() {
|
2021-08-25 19:55:30 +00:00
|
|
|
document.title = this.$t("titles.feed") + " - Piped";
|
2021-08-22 10:27:09 +00:00
|
|
|
if (this.videos.length > 0) this.updateWatched(this.videos);
|
2021-09-11 19:31:01 +00:00
|
|
|
window.addEventListener("scroll", this.handleScroll);
|
|
|
|
},
|
|
|
|
deactivated() {
|
|
|
|
window.removeEventListener("scroll", this.handleScroll);
|
|
|
|
},
|
|
|
|
unmounted() {
|
|
|
|
window.removeEventListener("scroll", this.handleScroll);
|
2021-07-21 10:59:53 +00:00
|
|
|
},
|
2021-07-16 22:56:41 +00:00
|
|
|
methods: {
|
|
|
|
async fetchFeed() {
|
|
|
|
return await this.fetchJson(this.apiUrl() + "/feed", {
|
|
|
|
authToken: this.getAuthToken(),
|
|
|
|
});
|
|
|
|
},
|
2021-09-11 19:31:01 +00:00
|
|
|
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();
|
|
|
|
}
|
|
|
|
},
|
2021-07-16 22:56:41 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|