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