Implement group hiding

src/components/channel/ChannelList.vue

@@ -50,6 +50,26 @@
               {{ group.title }}
             </v-list-item-title>
             <!-- TODO ADD CONFIRMATION DIALOG -->
+            <v-tooltip bottom>
+              <template #activator="{ on, attrs }">
+                <v-btn icon large @click.stop="toggleGroupDisplay(group)">
+                  <v-icon
+                    :color="group.hide ? 'red' : 'grey'"
+                    v-bind="attrs"
+                    v-on="on"
+                  >
+                    {{ group.hide ? mdiEyeOffOutline : mdiEyeOutline }}
+                  </v-icon>
+                </v-btn>
+              </template>
+              <span>
+                {{
+                  group.hide
+                    ? $t("component.channelList.enableGroupDisplay")
+                    : $t("component.channelList.disableGroupDisplay")
+                }}
+              </span>
+            </v-tooltip>
             <v-tooltip bottom>
               <template #activator="{ on, attrs }">
                 <v-btn sm outlined @click.stop="toggleFavoriteAll(index)">
@@ -130,6 +150,7 @@
 import ChannelImg from "./ChannelImg.vue";
 import ChannelInfo from "./ChannelInfo.vue";
 import ChannelSocials from "./ChannelSocials.vue";
+import { mdiEyeOffOutline, mdiEyeOutline } from "@mdi/js";
 
 export default {
     name: "ChannelList",
@@ -165,6 +186,12 @@ export default {
             default: false,
         },
     },
+    data() {
+        return {
+            mdiEyeOffOutline,
+            mdiEyeOutline,
+        };
+    },
     computed: {
         isXs() {
             return this.$vuetify.breakpoint.width <= 420;
@@ -179,6 +206,8 @@ export default {
                         title: group,
                         items: [],
                         allFavorited: true,
+                        hide: this.isHidden(group),
+                        org: this.$store.state.currentOrg.name,
                     });
                     lastGroup = group;
                 }
@@ -197,6 +226,14 @@ export default {
         isFavorited(id) {
             return this.$store.getters["favorites/isFavorited"](id);
         },
+        isHidden(groupName){
+            const org = this.$store.state.currentOrg.name;
+            const hiding = this.$store.state.settings.hiddenGroups;
+            console.log(hiding);
+            if (!hiding) return false;
+            if (!Object.keys(hiding).includes(org)) return false;
+            return this.$store.state.settings.hiddenGroups[org].includes(groupName.toLowerCase())
+        },
         toggleFavoriteAll(index) {
             if (!this.isLoggedIn) return;
             const allFav = this.channelsByGroup[index].allFavorited;
@@ -211,6 +248,9 @@ export default {
                 this.$store.dispatch("favorites/updateFavorites");
             }
         },
+        toggleGroupDisplay(group) {
+            this.$store.commit("settings/toggleGroupDisplay", group);
+        },
     },
 };
 </script>

src/components/multiview/VideoSelector.vue

@@ -252,6 +252,7 @@ export default {
                 hideIgnoredTopics: true,
                 hidePlaceholder: this.hidePlaceholder,
                 hideMissing: this.hideMissing,
+                hideGroups: true,
             };
             const isTwitchPlaceholder = (v) => (v.type === "placeholder" && v.link?.includes("twitch.tv"));
             const isPlayable = (v) => (v.type === "stream" || isTwitchPlaceholder(v));

src/components/video/VideoCardList.vue

@@ -127,6 +127,7 @@ export default {
                 ignoreBlock: false,
                 hideCollabs: false,
                 hideIgnoredTopics: true,
+                hideGroups: true,
                 forOrg: "",
                 ...this.filterConfig,
             };

src/locales/en/ui.yml

@@ -9,6 +9,8 @@ component:
     signInToFavorite: Sign in to favorite
     unfavoriteAllInGroup: Unfavorite all in group
     favoriteAllInGroup: Favorite all in group
+    enableGroupDisplay: Show channels from this group on the Home page
+    disableGroupDisplay: Hide channels from this group from the Home page
   channelInfo:
     stats: Stats
     videoCount: '{0} Videos'

src/mixins/filterVideos.js

@@ -7,24 +7,34 @@ export default {
             forOrg = "",
             hidePlaceholder = false,
             hideMissing = false,
+            hideGroups = false,
         }) {
             const blockedChannels = this.$store.getters["settings/blockedChannelIDs"];
             const ignoredTopics = this.$store.getters["settings/ignoredTopics"];
             const favoriteChannels = this.$store.getters["favorites/favoriteChannelIDs"];
             // eslint-disable-next-line no-param-reassign
             forOrg ||= this.$store.state.currentOrg.name;
+            let hiddenGroups = this.$store.state.settings.hiddenGroups;
+            const validOrgs = Object.keys(hiddenGroups)
+            const orgGroupsHidden = validOrgs.includes(v.channel.org);
 
             let keep = true;
             const channelId = v.channel_id || v.channel.id;
             const isFavoritedOrInOrg = v.channel.org === forOrg || favoriteChannels.has(channelId) || forOrg === "All Vtubers";
+            const channelGroup = (v.channel.group || (`${v.channel.suborg}`).slice(2) || "Other").toLowerCase();
+            let hideViaGroup = false;
+            if (orgGroupsHidden) hideViaGroup = hiddenGroups[v.channel.org].includes(channelGroup);
 
             if (!ignoreBlock) {
                 keep &&= !blockedChannels.has(channelId);
             }
 
+            // TODO: Update to suport hideViaGroup: mentions needs suborg field on API
             if (!isFavoritedOrInOrg) {
                 keep &&= !hideCollabs && !v.mentions?.every(
-                    ({ id, org }) => blockedChannels.has(id) || (org !== forOrg && !favoriteChannels.has(id)),
+                    ({ id, org, suborg }) => (blockedChannels.has(id) || 
+                    (hideGroups && validOrgs.includes(org) && hiddenGroups[org].includes((`${suborg}`).slice(2) || "Other"))
+                    || (org !== forOrg && !favoriteChannels.has(id))),
                 );
             }
 
@@ -39,6 +49,12 @@ export default {
             if (hideMissing) {
                 keep &&= v.status !== "missing";
             }
+
+            if (hideGroups) {
+                if (orgGroupsHidden) {
+                    keep &&= !hideViaGroup;
+                }
+            }
 
             return keep;
         },

src/store/settings.module.js

@@ -26,6 +26,7 @@ const initialState = {
     hideMissing: false,
     nameProperty: englishNamePrefs.has(lang) ? "english_name" : "name",
     hideCollabStreams: false,
+    hiddenGroups: {},
     ignoredTopics: [],
     // Valid values: "grid" | "list" | "denseList"
     homeViewMode: "grid",
@@ -141,6 +142,22 @@ const mutations = {
             state.blockedChannels.push(channel);
         }
     },
+    toggleGroupDisplay(state, group) {
+        const groupName = `${group.title}`.toLowerCase();
+        const orgName = `${group.org}`;
+        if (!state.hiddenGroups) Vue.set(state, "hiddenGroups", {});
+        if (!state.hiddenGroups[orgName]) Vue.set(state.hiddenGroups, `${orgName}`, [])
+
+        // determine to add or subtract:
+        if (state.hiddenGroups[orgName].includes(groupName)) {
+            Vue.delete(
+                state.hiddenGroups[orgName],
+                state.hiddenGroups[orgName].findIndex((x) => x.toLowerCase() === groupName),
+            );
+        } else {
+            state.hiddenGroups[orgName].push(groupName);
+        }
+    },
     toggleLiveTlBlocked(state, name) {
         if (!state.liveTlBlocked) Vue.set(state, "blockedChannels", []);
         const index = state.liveTlBlocked.indexOf(name);