Added Hide Stories option + Fixed Options for recommended channels an…

…d vieweres also watch (#1062)

CHANGELOG-nightly.md

@@ -1,5 +1,7 @@
-### 3.1.1.3100
+### 3.1.1 4000
 
+-   Added option to settings to hide Stories from the sidebar
+-   Fixed settings to hide recommended channels and viewers also watch channels
 -   Fixed an issue where history navigation is accidentally triggered during IME composition
 
 ### 3.1.1.3000

package.json

@@ -4,7 +4,7 @@
 	"description": "Improve your viewing experience on Twitch & YouTube with new features, emotes, vanity and performance.",
 	"private": true,
 	"version": "3.1.1",
-	"dev_version": "3.0",
+	"dev_version": "4.0",
 	"scripts": {
 		"start": "NODE_ENV=dev yarn build:dev && NODE_ENV=dev vite --mode dev",
 		"build:section:app": "vite build --config vite.config.mts",

src/site/twitch.tv/modules/hidden-elements/HiddenElementsModule.vue

@@ -166,6 +166,12 @@ export const config = [
 		],
 		defaultValue: 0,
 	}),
+	declareConfig("layout.hide_stories", "TOGGLE", {
+		path: ["Site Layout", "Sidebar"],
+		label: "Hide Stories",
+		hint: "If checked, Stories will be hidden from the side bar",
+		defaultValue: false,
+	}),
 ];
 </script>
 
@@ -240,13 +246,65 @@ export const config = [
 }
 
 .seventv-hide-recommended-channels {
-	#side-nav > *:nth-child(1) > *:nth-child(1) > *:nth-child(3) {
+	div[class$="side-nav--collapsed"]
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(3)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(2)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(3) {
+		display: none !important;
+	}
+
+	div[class$="side-nav--expanded"]
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(3)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(2)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(4) {
 		display: none !important;
 	}
 }
 
 .seventv-hide-viewers-also-watch {
-	#side-nav > *:nth-child(1) > *:nth-child(1) > *:nth-child(4) {
+	div[class$="side-nav--collapsed"]
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(3)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(2)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(4) {
+		display: none !important;
+	}
+
+	div[class$="side-nav--expanded"]
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(3)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(2)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(1)
+		> *:nth-child(5) {
 		display: none !important;
 	}
 }
@@ -316,5 +374,14 @@ export const config = [
 		display: none !important;
 	}
 }
+
+.seventv-hide-stories {
+	div[class$="storiesLeftNavSection--csO9S"] {
+		display: none !important;
+	}
+	button:has(div[class$="storiesLeftNavSectionCollapsedButton--txKvw"]) {
+		display: none !important;
+	}
+}
 /* stylelint-enable */
 </style>

src/site/twitch.tv/modules/hidden-elements/hiddenElements.ts

@@ -23,6 +23,7 @@ const hidePlayerExtensions = useConfig<boolean>("player.hide_player_extensions")
 const hideChannelPointBalanceButton = useConfig<boolean>("layout.hide_channel_point_balance_button");
 const hideOnscreenCelebrations = useConfig<boolean>("player.hide_onscreen_celebrations");
 const hideWhispers = useConfig<number>("layout.hide_whispers");
+const hideStories = useConfig<boolean>("layout.hide_stories");
 export const hiddenElementSettings: Array<{ class: string; isHidden: Ref<boolean> }> = [
 	{ class: "seventv-hide-leaderboard", isHidden: hideLeaderboard },
 	{ class: "seventv-hide-buttons-below-chatbox", isHidden: hideButtonsBelowChatbox },
@@ -47,4 +48,5 @@ export const hiddenElementSettings: Array<{ class: string; isHidden: Ref<boolean
 	{ class: "seventv-hide-onscreen-celebrations", isHidden: hideOnscreenCelebrations },
 	{ class: "seventv-hide-whispers-fullscreen", isHidden: computed(() => hideWhispers.value === 1) },
 	{ class: "seventv-hide-whispers-all", isHidden: computed(() => hideWhispers.value === 2) },
+	{ class: "seventv-hide-stories", isHidden: hideStories },
 ];