Piped/src/components/FeedPage.vue

91 lines
2.7 KiB
Vue
Raw Normal View History

<template>
2022-07-20 20:20:10 +00:00
<h1 v-t="'titles.feed'" class="font-bold text-center my-4" />
<button class="btn mr-2" @click="exportHandler">
2022-01-12 11:59:50 +00:00
<router-link to="/subscriptions">Subscriptions</router-link>
2021-09-04 15:02:59 +00:00
</button>
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">
2022-05-19 21:17:58 +00:00
<SortingSelector by-key="uploaded" @apply="order => videos.sort(order)" />
2021-09-04 15:02:59 +00:00
</span>
<hr />
2021-12-27 14:46:22 +00:00
<div class="video-grid">
<VideoItem v-for="video in videos" :key="video.url" :video="video" />
</div>
</template>
<script>
2022-04-08 15:46:49 +00:00
import VideoItem from "./VideoItem.vue";
2022-05-19 21:17:58 +00:00
import SortingSelector from "./SortingSelector.vue";
export default {
components: {
VideoItem,
2022-05-19 21:17:58 +00:00
SortingSelector,
},
data() {
return {
currentVideoCount: 0,
videoStep: 100,
videosStore: [],
videos: [],
};
},
computed: {
getRssUrl(_this) {
if (_this.authenticated) return _this.authApiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
else return _this.authApiUrl() + "/feed/unauthenticated/rss?channels=" + _this.getUnauthenticatedChannels();
},
},
mounted() {
this.fetchFeed().then(videos => {
this.videosStore = videos;
this.loadMoreVideos();
this.updateWatched(this.videos);
});
},
activated() {
2021-08-25 19:55:30 +00:00
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() {
if (this.authenticated) {
return await this.fetchJson(this.authApiUrl() + "/feed", {
authToken: this.getAuthToken(),
});
} else {
return await this.fetchJson(this.authApiUrl() + "/feed/unauthenticated", {
channels: this.getUnauthenticatedChannels(),
});
}
},
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();
}
},
},
};
</script>