Piped/src/components/FeedPage.vue

105 lines
3.4 KiB
Vue
Raw Normal View History

<template>
2021-12-27 14:46:26 +00:00
<h1 v-t="'titles.feed'" class="font-bold text-center" />
2021-12-27 14:46:26 +00:00
<button v-if="authenticated" class="btn" style="margin-right: 0.5rem" @click="exportHandler">
2021-10-28 17:55:20 +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">
<font-awesome-icon icon="rss" style="padding-top: 0.2rem" />
</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 16:29:25 +00:00
<label for="ddlSortBy" v-text="$t('actions.sort_by')" />
2021-12-27 14:46:29 +00:00
<select id="ddlSortBy" v-model="selectedSort" class="select w-auto" @change="onChange()">
<option v-t="'actions.most_recent'" value="descending" />
<option v-t="'actions.least_recent'" value="ascending" />
<option v-t="'actions.channel_name_asc'" value="channel_ascending" />
<option v-t="'actions.channel_name_desc'" value="channel_descending" />
2021-09-04 15:02:59 +00:00
</select>
</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>
import VideoItem from "@/components/VideoItem.vue";
export default {
components: {
VideoItem,
},
data() {
return {
currentVideoCount: 0,
videoStep: 100,
videosStore: [],
videos: [],
2021-07-27 18:04:27 +00:00
selectedSort: "descending",
};
},
computed: {
getRssUrl(_this) {
return _this.apiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
},
},
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() {
return await this.fetchJson(this.apiUrl() + "/feed", {
authToken: this.getAuthToken(),
});
},
2021-07-27 18:04:27 +00:00
onChange() {
switch (this.selectedSort) {
case "ascending":
this.videos.sort((a, b) => a.uploaded - b.uploaded);
break;
case "descending":
this.videos.sort((a, b) => b.uploaded - a.uploaded);
break;
case "channel_ascending":
this.videos.sort((a, b) => a.uploaderName.localeCompare(b.uploaderName));
break;
case "channel_descending":
this.videos.sort((a, b) => b.uploaderName.localeCompare(a.uploaderName));
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();
}
},
},
};
</script>