diff --git a/src/components/channel/ChannelList.vue b/src/components/channel/ChannelList.vue
index 18c4a1afc..45799c157 100644
--- a/src/components/channel/ChannelList.vue
+++ b/src/components/channel/ChannelList.vue
@@ -50,6 +50,26 @@
{{ group.title }}
+
+
+
+
+ {{ group.hide ? mdiEyeOffOutline : mdiEyeOutline }}
+
+
+
+
+ {{
+ group.hide
+ ? $t("component.channelList.enableGroupDisplay")
+ : $t("component.channelList.disableGroupDisplay")
+ }}
+
+
@@ -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);
+ },
},
};
diff --git a/src/components/multiview/VideoSelector.vue b/src/components/multiview/VideoSelector.vue
index 378a4f89b..ff3ffb428 100644
--- a/src/components/multiview/VideoSelector.vue
+++ b/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));
diff --git a/src/components/video/VideoCardList.vue b/src/components/video/VideoCardList.vue
index 112961d8c..4851337a3 100644
--- a/src/components/video/VideoCardList.vue
+++ b/src/components/video/VideoCardList.vue
@@ -127,6 +127,7 @@ export default {
ignoreBlock: false,
hideCollabs: false,
hideIgnoredTopics: true,
+ hideGroups: true,
forOrg: "",
...this.filterConfig,
};
diff --git a/src/locales/en/ui.yml b/src/locales/en/ui.yml
index 7cd1008c1..079e69e45 100644
--- a/src/locales/en/ui.yml
+++ b/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'
diff --git a/src/mixins/filterVideos.js b/src/mixins/filterVideos.js
index c27ecdf8c..14340ddad 100644
--- a/src/mixins/filterVideos.js
+++ b/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;
},
diff --git a/src/store/settings.module.js b/src/store/settings.module.js
index 9b0622b3b..451bce3b8 100644
--- a/src/store/settings.module.js
+++ b/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);