More message types (#36)

* Fix username rendering

* WIP refactoring and implementation of sub messages

* WIP

* lint

* use `import: default`

* Implementation of some sub message types

* Timestamps on messages

* More message types and settings

* Change some px values monkaS

* Better typing for setting nodes

* Fix type

* Update options for slider

* Implement suggestions

* Fix linelimit config

* Setting toggle styling

* Implement announcement type

* Styling improvements ++

* Added cheerEmote support

* Use twitch's setting for showTimestamps

Co-authored-by: Anatole <[email protected]>

src/app.d.ts

@@ -58,13 +58,30 @@ declare namespace SevenTV {
 		value: T;
 	}
 
-	interface SettingNode<T extends SettingType> {
+	interface SettingNode<T extends SettingType, K extends SettingNode.ComponentType = "CUSTOM"> {
 		key: string;
 		label: string;
 		hint?: string;
 		type: SettingNode.ComponentType;
 		component?: Raw<object>;
-		options?: SettingType[];
+		options?: {
+			SELECT: [string, T][];
+			DROPDOWN: [string, T][];
+			CHECKBOX: never;
+			INPUT: string;
+			TOGGLE: {
+				left: string;
+				right: string;
+			};
+			SLIDER: {
+				min: number;
+				max: number;
+				step: number;
+				unit: string;
+			};
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			CUSTOM: any;
+		}[K];
 		predicate?: (p: T) => boolean;
 
 		value?: T;

src/assets/svg/Logo.vue → src/assets/svg/logos/Logo.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script setup lang="ts">
-import Logo7TV from "@/assets/svg/Logo7TV.vue";
-import LogoBTTV from "@/assets/svg/LogoBTTV.vue";
-import LogoFFZ from "@/assets/svg/LogoFFZ.vue";
-import LogoTwitch from "@/assets/svg/LogoTwitch.vue";
+import Logo7TV from "@/assets/svg/logos/Logo7TV.vue";
+import LogoBTTV from "@/assets/svg/logos/LogoBTTV.vue";
+import LogoFFZ from "@/assets/svg/logos/LogoFFZ.vue";
+import LogoTwitch from "@/assets/svg/logos/LogoTwitch.vue";
 
 const props = withDefaults(
 	defineProps<{

src/assets/svg/twitch/TwAnnounce.vue

@@ -0,0 +1,9 @@
+<template>
+	<svg fill="var(--color-fill-current)" width="18px" height="20px" version="1.1" viewBox="0 0 20 20" x="0px" y="0px">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M11 14l7 4V2l-7 4H4a2 2 0 00-2 2v4a2 2 0 002 2h2v4h2v-4h3zm1-6.268l4-2.286v9.108l-4-2.286V7.732zM10 12H4V8h6v4z"
+		></path>
+	</svg>
+</template>

src/assets/svg/twitch/TwGift.vue

@@ -0,0 +1,11 @@
+<template>
+	<svg width="25px" height="20px" version="1.1" viewBox="0 0 20 20" x="0px" y="0px" fill="var(--color-fill-current)">
+		<g>
+			<path
+				fill-rule="evenodd"
+				d="M16 6h2v6h-1v6H3v-6H2V6h2V4.793c0-2.507 3.03-3.762 4.803-1.99.131.131.249.275.352.429L10 4.5l.845-1.268a2.81 2.81 0 01.352-.429C12.969 1.031 16 2.286 16 4.793V6zM6 4.793V6h2.596L7.49 4.341A.814.814 0 006 4.793zm8 0V6h-2.596l1.106-1.659a.814.814 0 011.49.451zM16 8v2h-5V8h5zm-1 8v-4h-4v4h4zM9 8v2H4V8h5zm0 4H5v4h4v-4z"
+				clip-rule="evenodd"
+			></path>
+		</g>
+	</svg>
+</template>

src/assets/svg/twitch/TwMassGift.vue

@@ -0,0 +1,7 @@
+<template>
+	<img
+		alt="mystery gift"
+		class="mystery-gift-theme__image"
+		src="https://static-cdn.jtvnw.net/subs-image-assets/gift-illus.png"
+	/>
+</template>

src/common/Transform.ts

@@ -57,6 +57,39 @@ export function convertTwitchEmote(data: Partial<Twitch.TwitchEmote>): SevenTV.E
 	};
 }
 
+export function convertCheerEmote(data: Twitch.ChatMessage.Part.EmoteContent): SevenTV.Emote {
+	return {
+		id: data.emoteID ?? "",
+		name: `${data.alt} ${data.cheerAmount}`,
+		flags: 0,
+		tags: [],
+		lifecycle: 3,
+		listed: true,
+		owner: null,
+		host: {
+			url: data.images?.dark["1x"].split("/").slice(0, -1).join("/") ?? "",
+			files: [
+				{
+					name: "1.gif",
+					format: "GIF",
+				},
+				{
+					name: "2.gif",
+					format: "GIF",
+				},
+				{
+					name: "3.gif",
+					format: "GIF",
+				},
+				{
+					name: "4.gif",
+					format: "GIF",
+				},
+			],
+		},
+	};
+}
+
 export function convertBttvEmoteSet(data: BTTV.UserResponse, channelID: string): SevenTV.EmoteSet {
 	const channelEmotes = data.channelEmotes ?? [];
 	const sharedEmotes = data.sharedEmotes ?? [];

src/site/twitch.tv/ChatAPI.ts

@@ -4,11 +4,12 @@ import { useConfig } from "@/composable/useSettings";
 import UiScrollableVue from "@/ui/UiScrollable.vue";
 
 const scrollduration = useConfig<number>("chat.smooth_scroll_duration");
+const lineLimit = useConfig<number>("chat.line_limit");
 
 const data = reactive({
 	// Message Data
-	messages: [] as Twitch.ChatMessage[],
-	messageBuffer: [] as Twitch.ChatMessage[],
+	messages: [] as Twitch.DisplayableMessage[],
+	messageBuffer: [] as Twitch.DisplayableMessage[],
 	chatters: {} as Record<string, object>,
 
 	// Emote Data
@@ -21,18 +22,22 @@ const data = reactive({
 	// User State Data
 	isModerator: false,
 	isVIP: false,
+	isDarkTheme: 1,
+	primaryColorHex: "#000000",
+	useHighContrastColors: true,
+	showTimestamps: false,
 	currentChannel: {} as CurrentChannel,
 
 	// Scroll Data
 	userInput: 0,
-	lineLimit: 150,
+	lineLimit: lineLimit,
 	init: false,
 	sys: true,
 	visible: true,
 	paused: false, // whether or not scrolling is paused
 	duration: scrollduration,
 
-	scrollBuffer: [] as Twitch.ChatMessage[], // twitch chat message buffe when scrolling is paused
+	scrollBuffer: [] as Twitch.DisplayableMessage[], // twitch chat message buffe when scrolling is paused
 	scrollClear: () => {
 		return;
 	},
@@ -61,10 +66,10 @@ export function useChatAPI(scroller?: Ref<InstanceType<typeof UiScrollableVue> |
 		}
 	});
 
-	function addMessage(message: Twitch.ChatMessage): void {
+	function addMessage(message: Twitch.DisplayableMessage): void {
 		if (data.paused) {
 			// if scrolling is paused, buffer the message
-			data.scrollBuffer.push(message as Twitch.ChatMessage);
+			data.scrollBuffer.push(message as Twitch.DisplayableMessage);
 			if (data.scrollBuffer.length > data.lineLimit) data.scrollBuffer.shift();
 
 			return;
@@ -220,8 +225,12 @@ export function useChatAPI(scroller?: Ref<InstanceType<typeof UiScrollableVue> |
 		duration,
 		isModerator,
 		isVIP,
+		isDarkTheme,
 		sendMessage,
 		currentChannel,
+		primaryColorHex,
+		useHighContrastColors,
+		showTimestamps,
 	} = toRefs(data);
 
 	return {
@@ -234,6 +243,10 @@ export function useChatAPI(scroller?: Ref<InstanceType<typeof UiScrollableVue> |
 
 		isModerator: isModerator,
 		isVIP: isVIP,
+		isDarkTheme: isDarkTheme,
+		primaryColorHex: primaryColorHex,
+		useHighContrastColors: useHighContrastColors,
+		showTimestamps: showTimestamps,
 		currentChannel: currentChannel,
 
 		scrollSys: sys,

src/site/twitch.tv/index.ts

@@ -115,7 +115,7 @@ export namespace Selectors {
 	export const ChatMessageTimestamp = ".chat-line__timestamp";
 }
 
-export const enum MessageType {
+export enum MessageType {
 	MESSAGE = 0,
 	EXTENSIONMESSAGE,
 	MODERATION,

src/site/twitch.tv/modules/chat/ChatBackend.ts

@@ -1,4 +1,4 @@
-import { getChatController, getEmoteButton } from "@/site/twitch.tv";
+import { getEmoteButton } from "@/site/twitch.tv";
 import { darken, hasBadContrast, parseToRgba } from "color2k";
 
 export const tools = {
@@ -58,39 +58,33 @@ export const sendDummyMessage = (controller: Twitch.ChatControllerComponent) =>
 	});
 };
 
-// Temporary solution
-const darkTheme = getChatController()?.props.theme === 1;
+const calculated = { 0: {}, 1: {} } as Record<0 | 1, Record<string, string>>;
 
-const calculated = new Map<boolean, Map<string, string>>();
-calculated.set(true, new Map<string, string>());
-calculated.set(false, new Map<string, string>());
+export function normalizeUsername(color: string, theme: 0 | 1): string {
+	let temp = color.toLowerCase();
+	const backgroundColor = theme ? "#0f0e11" : "#faf9fa";
 
-export function normalizeUsername(colour: string, readableColors: boolean): string {
-	let temp = colour.toLowerCase();
-	const shouldShiftUp = readableColors === darkTheme;
-	const backgroundColor = shouldShiftUp ? "#0f0e11" : "#faf9fa";
-
-	if (!hasBadContrast(temp, "readable", backgroundColor)) return temp;
+	if (!hasBadContrast(temp, "aa", backgroundColor)) return temp;
 
 	// See if we have calculated the value
-	const stored = calculated.get(shouldShiftUp)?.get(colour);
+	const stored = calculated[theme][color];
 	if (stored) return stored;
 
 	const rgb = parseToRgba(temp).slice(0, 3);
 
-	if (shouldShiftUp && rgb.every((e) => e < 36)) {
-		calculated.get(shouldShiftUp)?.set(colour, "#7a7a7a");
+	if (theme && rgb.every((e) => e < 36)) {
+		calculated[theme][color] = "#7a7a7a";
 		return "#7a7a7a";
 	}
 
 	let i = 0;
 
-	while (hasBadContrast(temp, "readable", backgroundColor) && i < 50) {
-		temp = darken(temp, 0.1 * (shouldShiftUp ? -1 : 1));
+	while (hasBadContrast(temp, "aa", backgroundColor) && i < 50) {
+		temp = darken(temp, 0.1 * (theme ? -1 : 1));
 		i++;
 	}
 
-	calculated.get(shouldShiftUp)?.set(colour, temp);
+	calculated[theme][color] = temp;
 
 	return temp;
 }