Add shorts and videos filter to the feed

This commit is contained in:
Bnyro 2023-01-27 17:07:02 +01:00
parent 604eb5edcc
commit 981ac46bec
2 changed files with 29 additions and 2 deletions

View File

@ -11,6 +11,13 @@
</a>
</span>
<label for="filters" class="ml-10 mr-2">
<strong v-text="`${$t('actions.filter')}:`" />
</label>
<select id="filters" v-model="selectedFilter" default="all" class="select w-auto" @change="onFilterChange()">
<option v-for="filter in availableFilters" :key="filter" :value="filter" v-t="`video.${filter}`" />
</select>
<span class="md:float-right">
<SortingSelector by-key="uploaded" @apply="order => videos.sort(order)" />
</span>
@ -18,7 +25,9 @@
<hr />
<div class="video-grid">
<VideoItem :is-feed="true" v-for="video in videos" :key="video.url" :item="video" />
<template v-for="video in videos" :key="video.url">
<VideoItem v-if="shouldShowVideo(video)" :is-feed="true" :item="video" />
</template>
</div>
</template>
@ -37,6 +46,8 @@ export default {
videoStep: 100,
videosStore: [],
videos: [],
availableFilters: ["all", "shorts", "videos"],
selectedFilter: "all",
};
},
computed: {
@ -51,6 +62,8 @@ export default {
this.loadMoreVideos();
this.updateWatched(this.videos);
});
this.selectedFilter = this.$route.query.filter ?? this.getPreferenceString("feedFilter") ?? "all";
},
activated() {
document.title = this.$t("titles.feed") + " - Piped";
@ -85,6 +98,19 @@ export default {
this.loadMoreVideos();
}
},
shouldShowVideo(video) {
switch (this.selectedFilter) {
case "all":
return true;
case "videos":
return !video.isShort;
default:
return video.isShort;
}
},
onFilterChange() {
this.setPreference("feedFilter", this.selectedFilter);
},
},
};
</script>

View File

@ -152,7 +152,8 @@
"ratings_disabled": "Ratings Disabled",
"chapters": "Chapters",
"live": "{0} Live",
"shorts": "Shorts"
"shorts": "Shorts",
"all": "All"
},
"search": {
"did_you_mean": "Did you mean: {0}?",