Subscription groups

src/components/FeedPage.vue

@@ -18,6 +18,19 @@
         <option v-for="filter in availableFilters" :key="filter" :value="filter" v-t="`video.${filter}`" />
     </select>
 
+    <label for="group-selector" class="ml-10 mr-2">
+        <strong v-text="`${$t('titles.channel_groups')}:`" />
+    </label>
+    <select id="group-selector" v-model="selectedGroupName" default="" class="select w-auto">
+        <option value="" v-t="`video.all`" />
+        <option
+            v-for="group in channelGroups"
+            :key="group.groupName"
+            :value="group.groupName"
+            v-text="group.groupName"
+        />
+    </select>
+
     <span class="md:float-right">
         <SortingSelector by-key="uploaded" @apply="order => videos.sort(order)" />
     </span>
@@ -25,7 +38,7 @@
     <hr />
 
     <LoadingIndicatorPage :show-content="videosStore != null" class="video-grid">
-        <template v-for="video in videos" :key="video.url">
+        <template v-for="video in filteredVideos" :key="video.url">
             <VideoItem v-if="shouldShowVideo(video)" :is-feed="true" :item="video" />
         </template>
     </LoadingIndicatorPage>
@@ -50,6 +63,8 @@ export default {
             videos: [],
             availableFilters: ["all", "shorts", "videos"],
             selectedFilter: "all",
+            selectedGroupName: "",
+            channelGroups: [],
         };
     },
     computed: {
@@ -57,6 +72,12 @@ export default {
             if (_this.authenticated) return _this.authApiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
             else return _this.authApiUrl() + "/feed/unauthenticated/rss?channels=" + _this.getUnauthenticatedChannels();
         },
+        filteredVideos(_this) {
+            const selectedGroup = _this.channelGroups.filter(group => group.groupName == _this.selectedGroupName);
+            return _this.selectedGroupName == ""
+                ? _this.videos
+                : _this.videos.filter(video => selectedGroup[0].channels.includes(video.uploaderUrl.substr(-11)));
+        },
     },
     mounted() {
         this.fetchFeed().then(videos => {
@@ -66,6 +87,20 @@ export default {
         });
 
         this.selectedFilter = this.getPreferenceString("feedFilter") ?? "all";
+
+        if (!window.db) return;
+
+        const cursor = this.getChannelGroupsCursor();
+        cursor.onsuccess = e => {
+            const cursor = e.target.result;
+            if (cursor) {
+                const group = cursor.value;
+                this.channelGroups = this.channelGroups.concat({
+                    groupName: group.groupName,
+                    channels: JSON.parse(group.channels),
+                });
+            }
+        };
     },
     activated() {
         document.title = this.$t("titles.feed") + " - Piped";