From 981ac46bec4df456fa92678364f62d51601c79a2 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Fri, 27 Jan 2023 17:07:02 +0100
Subject: [PATCH 1/3] Add `shorts` and `videos` filter to the feed

---
 src/components/FeedPage.vue | 28 +++++++++++++++++++++++++++-
 src/locales/en.json         |  3 ++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 8927a16c..06d5fa32 100644
--- a/src/components/FeedPage.vue
+++ b/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>
diff --git a/src/locales/en.json b/src/locales/en.json
index 498199d6..1f9e94d4 100644
--- a/src/locales/en.json
+++ b/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}?",

From 9e97fc732be584e9f981336a00c4dcdaf27acbff Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Fri, 27 Jan 2023 19:05:02 +0100
Subject: [PATCH 2/3] Improve the `switch` statement at the feed filter

---
 src/components/FeedPage.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 06d5fa32..94c19348 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -99,13 +99,13 @@ export default {
             }
         },
         shouldShowVideo(video) {
-            switch (this.selectedFilter) {
-                case "all":
-                    return true;
+            switch (this.selectedFilter.toLowerCase()) {
+                case "shorts":
+                    return video.isShort;
                 case "videos":
                     return !video.isShort;
                 default:
-                    return video.isShort;
+                    return true;
             }
         },
         onFilterChange() {

From b0146189ab67addcce63e8929e3ce77aa787af6d Mon Sep 17 00:00:00 2001
From: Bnyro <82752168+Bnyro@users.noreply.github.com>
Date: Fri, 27 Jan 2023 21:12:03 +0100
Subject: [PATCH 3/3] Remove the duplicated filter query handling

---
 src/components/FeedPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 94c19348..e5caf90a 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -63,7 +63,7 @@ export default {
             this.updateWatched(this.videos);
         });
 
-        this.selectedFilter = this.$route.query.filter ?? this.getPreferenceString("feedFilter") ?? "all";
+        this.selectedFilter = this.getPreferenceString("feedFilter") ?? "all";
     },
     activated() {
         document.title = this.$t("titles.feed") + " - Piped";