Add shorts and videos filter to the feed

src/components/FeedPage.vue

@@ -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>

src/locales/en.json

@@ -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}?",