Piped/src/components/FeedPage.vue

165 lines
5.6 KiB
Vue
Raw Normal View History

<template>
<h1 v-t="'titles.feed'" class="my-4 text-center font-bold" />
<div class="flex flex-col flex-wrap gap-2 children:(flex items-center gap-1) md:flex-row md:items-center">
<span>
<label for="filters">
<strong v-text="`${$t('actions.filter')}:`" />
</label>
<select
id="filters"
v-model="selectedFilter"
default="all"
class="select flex-grow"
@change="onFilterChange()"
>
2023-07-27 11:46:05 +00:00
<option v-for="filter in availableFilters" :key="filter" v-t="`video.${filter}`" :value="filter" />
</select>
</span>
<span>
<label for="group-selector">
<strong v-text="`${$t('titles.channel_groups')}:`" />
</label>
<select id="group-selector" v-model="selectedGroupName" default="" class="select flex-grow">
2023-07-27 11:46:05 +00:00
<option v-t="`video.all`" value="" />
<option
v-for="group in channelGroups"
:key="group.groupName"
:value="group.groupName"
v-text="group.groupName"
/>
</select>
</span>
<span class="md:ml-auto">
<SortingSelector by-key="uploaded" @apply="order => videos.sort(order)" />
</span>
</div>
<hr />
2023-05-07 17:56:56 +00:00
<span class="flex gap-2">
2023-11-07 17:51:06 +00:00
<router-link v-t="'titles.subscriptions'" class="btn" to="/subscriptions" />
<a :href="getRssUrl" class="btn">
<font-awesome-icon icon="rss" />
</a>
2021-09-04 15:02:59 +00:00
</span>
<hr />
<LoadingIndicatorPage :show-content="videosStore != null" class="video-grid">
2023-05-07 17:56:56 +00:00
<template v-for="video in filteredVideos" :key="video.url">
<VideoItem v-if="shouldShowVideo(video)" :is-feed="true" :item="video" />
</template>
</LoadingIndicatorPage>
</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";
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
export default {
components: {
VideoItem,
2022-05-19 21:17:58 +00:00
SortingSelector,
LoadingIndicatorPage,
},
data() {
return {
currentVideoCount: 0,
videoStep: 100,
videosStore: null,
videos: [],
availableFilters: ["all", "shorts", "videos"],
selectedFilter: "all",
2023-05-07 17:56:56 +00:00
selectedGroupName: "",
channelGroups: [],
};
},
computed: {
getRssUrl(_this) {
if (_this.authenticated) return _this.authApiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
else return _this.authApiUrl() + "/feed/unauthenticated/rss?channels=" + _this.getUnauthenticatedChannels();
},
2023-05-07 17:56:56 +00:00
filteredVideos(_this) {
const selectedGroup = _this.channelGroups.filter(group => group.groupName == _this.selectedGroupName);
const videos = this.getPreferenceBoolean("hideWatched", false)
? this.videos.filter(video => !video.watched)
: this.videos;
2023-05-07 17:56:56 +00:00
return _this.selectedGroupName == ""
? videos
: videos.filter(video => selectedGroup[0].channels.includes(video.uploaderUrl.substr(-11)));
2023-05-07 17:56:56 +00:00
},
},
mounted() {
this.fetchFeed().then(videos => {
this.videosStore = videos;
this.loadMoreVideos();
this.updateWatched(this.videos);
});
this.selectedFilter = this.getPreferenceString("feedFilter") ?? "all";
2023-05-07 17:56:56 +00:00
if (!window.db) return;
this.loadChannelGroups();
},
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(),
});
}
},
async loadChannelGroups() {
const groups = await this.getChannelGroups();
this.channelGroups.push(...groups);
},
loadMoreVideos() {
if (!this.videosStore) return;
this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length);
2023-07-19 00:40:12 +00:00
if (this.videos.length != this.videosStore.length) {
this.videos = this.videosStore.slice(0, this.currentVideoCount);
this.fetchDeArrowContent(this.videos);
2023-07-19 00:40:12 +00:00
}
},
handleScroll() {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
this.loadMoreVideos();
}
},
shouldShowVideo(video) {
switch (this.selectedFilter.toLowerCase()) {
case "shorts":
return video.isShort;
case "videos":
return !video.isShort;
default:
return true;
}
},
onFilterChange() {
this.setPreference("feedFilter", this.selectedFilter);
},
},
};
</script>