mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 02:08:21 +00:00
Add shorts
and videos
filter to the feed
This commit is contained in:
parent
604eb5edcc
commit
981ac46bec
@ -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>
|
||||||
|
@ -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}?",
|
||||||
|
Loading…
Reference in New Issue
Block a user