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> </a>
</span> </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"> <span class="md:float-right">
<SortingSelector by-key="uploaded" @apply="order => videos.sort(order)" /> <SortingSelector by-key="uploaded" @apply="order => videos.sort(order)" />
</span> </span>
@ -18,7 +25,9 @@
<hr /> <hr />
<div class="video-grid"> <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> </div>
</template> </template>
@ -37,6 +46,8 @@ export default {
videoStep: 100, videoStep: 100,
videosStore: [], videosStore: [],
videos: [], videos: [],
availableFilters: ["all", "shorts", "videos"],
selectedFilter: "all",
}; };
}, },
computed: { computed: {
@ -51,6 +62,8 @@ export default {
this.loadMoreVideos(); this.loadMoreVideos();
this.updateWatched(this.videos); this.updateWatched(this.videos);
}); });
this.selectedFilter = this.$route.query.filter ?? this.getPreferenceString("feedFilter") ?? "all";
}, },
activated() { activated() {
document.title = this.$t("titles.feed") + " - Piped"; document.title = this.$t("titles.feed") + " - Piped";
@ -85,6 +98,19 @@ export default {
this.loadMoreVideos(); 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> </script>

View File

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