feat(settings): add emote settings

Author: olivermrose

src/lib/components/settings/chat/Chat.svelte

@@ -3,6 +3,7 @@
 	import { settings } from "$lib/settings";
 	import Switch from "../../ui/Switch.svelte";
 	import Group from "../Group.svelte";
+	import Emotes from "./Emotes.svelte";
 	import Messages from "./Messages.svelte";
 
 	const mentionStyles = [
@@ -62,6 +63,7 @@
 			</Group>
 		</Group>
 
+		<Emotes />
 		<Messages />
 	</div>
 </div>

src/lib/components/settings/chat/Emotes.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import Switch from "$lib/components/ui/Switch.svelte";
+	import { settings } from "$lib/settings";
+	import Group from "../Group.svelte";
+</script>
+
+<Group title="Emotes">
+	<Switch bind:checked={settings.state.chat.emotes.ffz}>
+		<span class="font-medium">
+			Show <a class="text-twitch-link" href="https://www.frankerfacez.com/">FrankerFaceZ</a> emotes
+		</span>
+	</Switch>
+
+	<Switch bind:checked={settings.state.chat.emotes.bttv}>
+		<span class="font-medium">
+			Show <a class="text-twitch-link" href="https://betterttv.com/">BetterTTV</a> emotes
+		</span>
+	</Switch>
+
+	<Switch bind:checked={settings.state.chat.emotes.seventv}>
+		<span class="font-medium">
+			Show <a class="text-twitch-link" href="https://7tv.app/">7TV</a> emotes
+		</span>
+	</Switch>
+</Group>

src/lib/managers/base-emote-manager.ts

@@ -1,33 +1,28 @@
 import { SvelteMap } from "svelte/reactivity";
 import type { Emote } from "$lib/emotes";
-
-export interface EmoteProviderOptions {
-	ffz?: boolean;
-	bttv?: boolean;
-	seventv?: boolean;
-}
+import { settings } from "$lib/settings";
 
 export abstract class BaseEmoteManager extends SvelteMap<string, Emote> {
 	public abstract fetchFfz(): Promise<Emote[]>;
 	public abstract fetchBttv(): Promise<Emote[]>;
 	public abstract fetch7tv(): Promise<Emote[]>;
 
 	/**
-	 * Retrieves the list of emotes from the specified providers and caches them
-	 * for later use.
+	 * Retrieves the list of emotes from the providers enabled in the settings and
+	 * caches them for later use.
 	 */
-	public async fetch(options: EmoteProviderOptions = { ffz: true, bttv: true, seventv: true }) {
+	public async fetch() {
 		const promises: Promise<Emote[]>[] = [];
 
-		if (options.ffz) {
+		if (settings.state.chat.emotes.ffz) {
 			promises.push(this.fetchFfz());
 		}
 
-		if (options.bttv) {
+		if (settings.state.chat.emotes.bttv) {
 			promises.push(this.fetchBttv());
 		}
 
-		if (options.seventv) {
+		if (settings.state.chat.emotes.seventv) {
 			promises.push(this.fetch7tv());
 		}
 

src/lib/settings.ts

@@ -10,6 +10,12 @@ export interface AppearanceSettings {
 	timestamps: TimestampSettings;
 }
 
+export interface EmoteSettings {
+	ffz: boolean;
+	bttv: boolean;
+	seventv: boolean;
+}
+
 export interface MessageHistorySettings {
 	enabled: boolean;
 	limit: number;
@@ -20,6 +26,7 @@ export interface ChatSettings {
 	mentionStyle: "none" | "colored" | "painted";
 	localizedNames: boolean;
 	readableColors: boolean;
+	emotes: EmoteSettings;
 	history: MessageHistorySettings;
 }
 
@@ -91,6 +98,11 @@ export const settings = new RuneStore<Settings>("settings", {
 		mentionStyle: "painted",
 		localizedNames: true,
 		readableColors: true,
+		emotes: {
+			ffz: true,
+			bttv: true,
+			seventv: true,
+		},
 		history: {
 			enabled: true,
 			limit: 250,