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