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

CHANGELOG-nightly.md

@@ -8,6 +8,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 in chat settings
 -   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

@@ -10,19 +10,24 @@ import { useConfig } from "../useSettings";
 
 interface ChatHighlights {
 	highlights: Record<string, HighlightDef>;
+	ignores: Record<string, IgnoreDef>;
 }
 
-export interface HighlightDef {
+export interface IgnoreDef {
 	id: string;
 
 	pattern?: string;
 	test?: (msg: ChatMessage) => boolean;
 	regexp?: boolean;
 	readonly cachedRegExp?: RegExp;
 
-	color: string;
 	label: string;
 	caseSensitive?: boolean;
+	persist?: boolean;
+}
+
+export interface HighlightDef extends IgnoreDef {
+	color: string;
 	flashTitle?: boolean;
 	flashTitleFn?: (msg: ChatMessage) => string;
 	soundPath?: string;
@@ -32,15 +37,17 @@ export interface HighlightDef {
 		type: string;
 		data: ArrayBuffer;
 	};
-	persist?: boolean;
 }
 
+export type HighlightType = HighlightDef | IgnoreDef;
+
 const m = new WeakMap<ChannelContext, ChatHighlights>();
 
 const customHighlights = useConfig<Map<string, HighlightDef>>("highlights.custom");
+const ignores = useConfig<Map<string, IgnoreDef>>("chat.ignores");
 const soundVolume = useConfig<number>("highlights.sound_volume");
 
-export function useChatHighlights(ctx: ChannelContext) {
+export function useChatHighlights(ctx: ChannelContext, useIgnores?: boolean) {
 	const visibility = useDocumentVisibility();
 
 	const assetsBase = inject(SITE_ASSETS_URL, "");
@@ -52,6 +59,7 @@ export function useChatHighlights(ctx: ChannelContext) {
 	if (!data) {
 		data = reactive<ChatHighlights>({
 			highlights: {},
+			ignores: {},
 		});
 
 		watch(
@@ -77,37 +85,77 @@ export function useChatHighlights(ctx: ChannelContext) {
 			},
 		);
 
+		watch(
+			ignores,
+			(h) => {
+				if (!data) return;
+
+				// Clear all custom highlights
+				for (const [k, v] of Object.entries(data.ignores)) {
+					if (!v.persist) continue;
+					delete data.ignores[k];
+				}
+
+				for (const [, v] of h) {
+					data.ignores[v.id] = v;
+				}
+			},
+			{
+				immediate: true,
+			},
+		);
+
 		m.set(ctx, data);
 	}
 
+	const storeType: Record<string, HighlightType> = useIgnores ? data.ignores : data.highlights;
+
 	const save = debounceFn(function (): void {
 		if (!data) return;
 
-		const items: [string, HighlightDef][] = Array.from(Object.values(data.highlights))
-			.filter((h) => h.persist)
-			.map((h) => [
-				h.id,
-				toRaw({
-					...h,
-					soundFile: toRaw(h.soundFile),
-					soundDef: undefined,
-					flashTitleFn: undefined,
-				}),
-			]);
-
-		customHighlights.value = new Map(items);
+		if (useIgnores) {
+			const items: [string, IgnoreDef][] = Array.from(Object.values(data.ignores))
+				.filter((h) => h.persist)
+				.map((h) => [
+					h.id,
+					toRaw({
+						...h,
+					}),
+				]);
+			ignores.value = new Map(items);
+		} else {
+			const items: [string, HighlightDef][] = Array.from(Object.values(data.highlights))
+				.filter((h) => h.persist)
+				.map((h) => [
+					h.id,
+					toRaw({
+						...h,
+						soundFile: toRaw(h.soundFile),
+						soundDef: undefined,
+						flashTitleFn: undefined,
+					}),
+				]);
+			customHighlights.value = new Map(items);
+		}
 	}, 250);
 
-	function define(id: string, def: Omit<HighlightDef, "id">, persist?: boolean): HighlightDef {
-		if (!data) return {} as HighlightDef;
+	function define(id: string, def: Omit<HighlightType, "id">, persist?: boolean): HighlightType {
+		if (!data) return {} as HighlightType;
 
-		const h = (data.highlights[id] = { ...def, id, persist });
-		updateSoundData(h);
+		const h: HighlightType = (storeType[id] = { ...def, id, persist });
+		if (!useIgnores && isHighlight(h)) {
+			updateSoundData(h);
+		}
 
 		if (!persist) return h;
 
 		// Store to DB
-		customHighlights.value.set(id, markRaw(h));
+		if (!useIgnores && isHighlight(h)) {
+			customHighlights.value.set(id, markRaw(h));
+		} else {
+			ignores.value.set(id, markRaw(h));
+		}
+
 		save();
 
 		return h;
@@ -137,14 +185,15 @@ export function useChatHighlights(ctx: ChannelContext) {
 	function remove(id: string): void {
 		if (!data) return;
 
-		delete data.highlights[id];
+		delete storeType[id];
+
 		save();
 	}
 
 	function checkMatch(key: string, msg: ChatMessage): boolean {
 		if (!data) return false;
 
-		const h = data?.highlights[key];
+		const h = storeType[key];
 		if (!h) return false;
 
 		let ok = false;
@@ -172,7 +221,7 @@ export function useChatHighlights(ctx: ChannelContext) {
 			ok = h.test(msg);
 		}
 
-		if (ok) {
+		if (ok && !useIgnores && isHighlight(h)) {
 			msg.setHighlight(h.color, h.label);
 
 			if (h.soundDef && !msg.historical) {
@@ -216,26 +265,31 @@ export function useChatHighlights(ctx: ChannelContext) {
 			});
 	}
 
-	function getAll(): Record<string, HighlightDef> {
+	function getAll(): Record<string, HighlightType> {
 		if (!data) return {};
 
-		return toReactive(data.highlights);
+		return toReactive(storeType);
 	}
 
 	function updateId(oldId: string, newId: string): void {
 		if (!data) return;
 
-		const h = data.highlights[oldId];
+		const h = storeType[oldId];
 		if (!h) return;
 
-		data.highlights[newId] = h;
-		delete data.highlights[oldId];
+		storeType[newId] = h;
+		delete storeType[oldId];
 
 		h.id = newId;
 
 		save();
 	}
 
+	function checkIgnored(message: ChatMessage<ComponentFactory>) {
+		const allIgnores = Object.values(getAll());
+		return allIgnores.some((s) => checkMatch(s.id, message));
+	}
+
 	return {
 		define,
 		remove,
@@ -245,5 +299,10 @@ export function useChatHighlights(ctx: ChannelContext) {
 		checkMatch,
 		updateSoundData,
 		updateFlashTitle,
+		checkIgnored,
 	};
 }
+
+export const isHighlight = (def: Omit<HighlightType, "id">): def is HighlightDef => {
+	return (def as HighlightDef).color !== undefined;
+};