feat/block-chat-phrases: Add blocked phrases feature

CHANGELOG-nightly.md

@@ -4,6 +4,7 @@
 
 -   Links in chat messages now respect known TLDs instead of matching any url-like pattern
 -   Added an option to show timeouts/bans directly in the chat without being a moderator
+-   Added an option to ignore messages via highlights
 -   Added options to change what emotes are displayed in the colon list and tab-completion carousel
 -   Added an option to show the text bit for BTTV and FFZ emote modifiers
 -   Added an option to hide monitored suspicious user highlights

src/composable/chat/useChatHighlights.ts

@@ -22,6 +22,7 @@ export interface HighlightDef {
 
 	color: string;
 	label: string;
+	isIgnored?: boolean;
 	caseSensitive?: boolean;
 	flashTitle?: boolean;
 	flashTitleFn?: (msg: ChatMessage) => string;
@@ -38,6 +39,7 @@ export interface HighlightDef {
 const m = new WeakMap<ChannelContext, ChatHighlights>();
 
 const customHighlights = useConfig<Map<string, HighlightDef>>("highlights.custom");
+const ignores = useConfig<Map<string, HighlightDef>>("highlights.ignores");
 const soundVolume = useConfig<number>("highlights.sound_volume");
 
 export function useChatHighlights(ctx: ChannelContext) {
@@ -80,6 +82,24 @@ export function useChatHighlights(ctx: ChannelContext) {
 		m.set(ctx, data);
 	}
 
+	const saveAsIgnored = debounceFn(function (id: string, isIgnored: boolean): void {
+		if (!data) return;
+
+		// Add ignored highlights to their own config
+		if (isIgnored) {
+			const items: [string, HighlightDef][] = Array.from(Object.values(data.highlights))
+				.filter((h) => h.persist)
+				.filter((h) => h.isIgnored)
+				.map((h) => [h.id, toRaw(h)]);
+			ignores.value = new Map(items);
+		} else {
+			// Remove as ignored highlight and re-instate as normal highlight
+			ignores.value.delete(id);
+		}
+
+		save();
+	}, 250);
+
 	const save = debounceFn(function (): void {
 		if (!data) return;
 
@@ -138,10 +158,11 @@ export function useChatHighlights(ctx: ChannelContext) {
 		if (!data) return;
 
 		delete data.highlights[id];
+		ignores.value.delete(id);
 		save();
 	}
 
-	function checkMatch(key: string, msg: ChatMessage): boolean {
+	function checkMatch(key: string, msg: ChatMessage, skipMatchHighlight?: boolean): boolean {
 		if (!data) return false;
 
 		const h = data?.highlights[key];
@@ -172,7 +193,7 @@ export function useChatHighlights(ctx: ChannelContext) {
 			ok = h.test(msg);
 		}
 
-		if (ok) {
+		if (ok && !skipMatchHighlight) {
 			msg.setHighlight(h.color, h.label);
 
 			if (h.soundDef && !msg.historical) {
@@ -236,14 +257,21 @@ export function useChatHighlights(ctx: ChannelContext) {
 		save();
 	}
 
+	function checkIgnored(message: ChatMessage<ComponentFactory>) {
+		const allIgnores = Object.values(getAll()).filter((f) => f.isIgnored);
+		return allIgnores.some((s) => checkMatch(s.id, message, true));
+	}
+
 	return {
 		define,
 		remove,
 		getAll,
 		save,
+		saveAsIgnored,
 		updateId,
 		checkMatch,
 		updateSoundData,
 		updateFlashTitle,
+		checkIgnored,
 	};
 }

src/site/global/settings/SettingsConfigHighlights.vue

@@ -5,9 +5,10 @@
 			<div class="item heading">
 				<div>Pattern</div>
 				<div>Label</div>
-				<div class="centered">Flash Title</div>
+				<div>Ignored</div>
 				<div class="centered">RegExp</div>
 				<div>Case Sensitive</div>
+				<div class="centered">Flash Title</div>
 				<div>Color</div>
 			</div>
 
@@ -34,9 +35,8 @@
 							/>
 						</div>
 
-						<!-- Checkbox: Flash Title -->
-						<div name="flash-title" class="centered">
-							<FormCheckbox :checked="!!h.flashTitle" @update:checked="onFlashTitleChange(h, $event)" />
+						<div name="is-ignored">
+							<FormCheckbox :checked="!!h.isIgnored" @update:checked="onModeChange(h, $event)" />
 						</div>
 
 						<!-- Checkbox: RegExp -->
@@ -52,12 +52,27 @@
 							/>
 						</div>
 
+						<!-- Checkbox: Flash Title -->
+						<div name="flash-title" class="centered">
+							<FormCheckbox
+								v-if="!h.isIgnored"
+								:checked="!!h.flashTitle"
+								@update:checked="onFlashTitleChange(h, $event)"
+							/>
+						</div>
+
 						<div name="color">
-							<input v-model="h.color" type="color" @input="onColorChange(h, $event as InputEvent)" />
+							<input
+								v-if="!h.isIgnored"
+								v-model="h.color"
+								type="color"
+								@input="onColorChange(h, $event as InputEvent)"
+							/>
 						</div>
 
 						<div ref="interactRef" name="interact">
 							<button
+								v-if="!h.isIgnored"
 								ref="soundEffectButton"
 								class="sound-button"
 								:class="{ 'has-sound': !!h.soundFile }"
@@ -141,6 +156,11 @@ function onInputBlur(h: HighlightDef, inputName: keyof typeof inputs): void {
 	highlights.save();
 }
 
+function onModeChange(h: HighlightDef, checked: boolean): void {
+	h.isIgnored = checked;
+	highlights.saveAsIgnored(h.id, checked);
+}
+
 function onFlashTitleChange(h: HighlightDef, checked: boolean): void {
 	h.flashTitle = checked;
 	highlights.updateFlashTitle(h);
@@ -257,6 +277,7 @@ main.seventv-settings-custom-highlights {
 		grid-template-rows: 1fr;
 		grid-area: tabs;
 	}
+
 	.list {
 		display: grid;
 		grid-area: list;
@@ -265,12 +286,13 @@ main.seventv-settings-custom-highlights {
 		.item {
 			display: grid;
 			grid-auto-flow: row dense;
-			grid-template-columns: 20% 9rem 1fr 1fr 1fr 1fr 1fr;
+			grid-template-columns: 20% 9rem repeat(6, 1fr);
 			column-gap: 3rem;
 			padding: 1rem;
 
 			> div {
 				align-self: center;
+
 				&.centered {
 					justify-self: center;
 				}
@@ -301,6 +323,7 @@ main.seventv-settings-custom-highlights {
 
 				&:focus-within {
 					padding: 0;
+
 					span {
 						display: none;
 					}
@@ -317,6 +340,7 @@ main.seventv-settings-custom-highlights {
 				&::-webkit-color-swatch-wrapper {
 					padding: 0;
 				}
+
 				&::-webkit-color-swatch {
 					border: none;
 				}
@@ -357,6 +381,7 @@ main.seventv-settings-custom-highlights {
 					input {
 						display: none;
 					}
+
 					label {
 						cursor: pointer;
 					}
@@ -371,9 +396,11 @@ main.seventv-settings-custom-highlights {
 						p {
 							color: var(--seventv-muted);
 						}
+
 						&:hover {
 							border-color: var(--seventv-primary);
 						}
+
 						&[active="true"] {
 							color: var(--seventv-primary);
 						}
@@ -383,6 +410,7 @@ main.seventv-settings-custom-highlights {
 				svg {
 					cursor: pointer;
 					font-size: 2rem;
+
 					&:hover {
 						color: var(--seventv-primary);
 					}

src/site/twitch.tv/modules/chat/ChatController.vue

@@ -42,6 +42,7 @@ import { defineFunctionHook, definePropertyHook, unsetPropertyHook } from "@/com
 import { ChatMessage } from "@/common/chat/ChatMessage";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatEmotes } from "@/composable/chat/useChatEmotes";
+import { useChatHighlights } from "@/composable/chat/useChatHighlights";
 import { useChatMessages } from "@/composable/chat/useChatMessages";
 import { useChatProperties } from "@/composable/chat/useChatProperties";
 import { useChatScroller } from "@/composable/chat/useChatScroller";
@@ -93,6 +94,7 @@ const scroller = useChatScroller(ctx, {
 });
 const properties = useChatProperties(ctx);
 const tools = useChatTools(ctx);
+const chatHighlights = useChatHighlights(ctx);
 
 // line limit
 const lineLimit = useConfig("chat.line_limit", 150);
@@ -253,6 +255,10 @@ watch(messageBufferComponentDbc, (msgBuf, old) => {
 						m.historical = true;
 						chatList.value?.onChatMessage(m, msg as Twitch.ChatMessage, false);
 
+						if (chatHighlights.checkIgnored(m)) {
+							continue;
+						}
+
 						historical.push(m);
 						continue;
 					}
@@ -455,9 +461,11 @@ seventv-container.seventv-chat-list {
 
 .community-highlight {
 	background-color: var(--seventv-background-transparent-1) !important;
+
 	@at-root .seventv-transparent & {
 		backdrop-filter: blur(1em);
 	}
+
 	transition: background-color 0.25s;
 
 	&:hover {

src/site/twitch.tv/modules/chat/ChatList.vue

@@ -132,7 +132,9 @@ const onMessage = (msgData: Twitch.AnyMessage): boolean => {
 };
 
 function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRender = true) {
+	let shouldRenderMessage = shouldRender;
 	const c = getMessageComponent(msgData.type);
+
 	if (c) {
 		msg.setComponent(c, { msgData: msgData });
 	}
@@ -293,14 +295,18 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 		chatHighlights.checkMatch(highlightID, msg);
 	}
 
+	if (chatHighlights.checkIgnored(msg)) {
+		shouldRenderMessage = false;
+	}
+
 	if (properties.isModerator) {
 		msg.pinnable = true;
 		msg.deletable = true;
 	}
 
 	// Add message to store
 	// it will be rendered on the next tick
-	if (shouldRender) messages.add(msg);
+	if (shouldRenderMessage) messages.add(msg);
 }
 
 function onModerationMessage(msgData: Twitch.ModerationMessage) {

src/site/twitch.tv/modules/chat/ChatModule.vue

@@ -389,10 +389,14 @@ export const config = [
 			component: markRaw(SettingsConfigHighlights),
 			gridMode: "new-row",
 		},
-		label: "Custom Highlights",
-		hint: "Create custom highlights for specific words or phrases",
+		label: "Custom Highlights and Ignored terms",
+		hint: "Create custom highlights and ignored terms",
 		defaultValue: new Map(),
 	}),
+	declareConfig<Map<string, string>>("highlights.ignores", "NONE", {
+		defaultValue: new Map(),
+		label: "",
+	}),
 	declareConfig<number>("highlights.sound_volume", "SLIDER", {
 		path: ["Highlights", "Built-In"],
 		label: "Highlight Sound Volume",