Fix/kick

src/site/kick.com/modules/chat/ChatMessage.vue

@@ -1,28 +1,35 @@
 <template>
-	<Teleport v-for="(box, index) of containers" :key="`${index}`" :to="box">
-		<template v-for="(token, i) of tokens.get(box)">
-			<span v-if="typeof token === 'string'" :key="`${index}-${i}`" class="seventv-text-token">
-				<template v-for="(part, j) in splitToken(token)">
-					<span v-if="IsKickEmote(part)" :key="j">
-						<span class="kick-emote-token">
-							<img :src="getKickEmoteUrl(part)" alt="Kick Emote" />
+	<template v-for="(box, index) of containers" :key="index">
+		<Teleport :to="box">
+			<template v-for="(token, i) of tokens.get(box)" :key="i">
+				<span v-if="typeof token === 'string'" class="seventv-text-token">
+					<template v-for="(part, j) in splitToken(token)" :key="j">
+						<span v-if="IsKickEmote(part)">
+							<span class="kick-emote-token">
+								<img :src="getKickEmoteUrl(part)" :alt="part" />
+							</span>
 						</span>
-					</span>
-					<span v-else :key="`${index}-${j}-else`">
-						{{ part }}
-					</span>
-				</template>
-			</span>
-			<span v-else-if="IsEmoteToken(token)" :key="`${i}-else`">
-				<Emote
-					class="seventv-emote-token"
-					:emote="token.content.emote"
-					:overlaid="token.content.overlaid"
-					format="WEBP"
-				/>
-			</span>
-		</template>
-	</Teleport>
+						<span v-else>
+							{{ part }}
+						</span>
+					</template>
+				</span>
+				<span v-else-if="IsLinkToken(token)">
+					<a :href="token.content.url" target="_blank" class="seventv-links" rel="noopener noreferrer">{{
+						token.content.url
+					}}</a>
+				</span>
+				<span v-else-if="IsEmoteToken(token)">
+					<Emote
+						class="seventv-emote-token"
+						:emote="token.content.emote"
+						:overlaid="token.content.overlaid"
+						format="WEBP"
+					/>
+				</span>
+			</template>
+		</Teleport>
+	</template>
 </template>
 
 <script setup lang="ts">
@@ -32,7 +39,7 @@ import { onUnmounted } from "vue";
 import { useEventListener } from "@vueuse/core";
 import { tokenize } from "@/common/Tokenize";
 import { AnyToken } from "@/common/chat/ChatMessage";
-import { IsEmoteToken } from "@/common/type-predicates/MessageTokens";
+import { IsEmoteToken, IsLinkToken } from "@/common/type-predicates/MessageTokens";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatEmotes } from "@/composable/chat/useChatEmotes";
 import { useCosmetics } from "@/composable/useCosmetics";
@@ -62,6 +69,7 @@ const emit = defineEmits<{
 const ctx = useChannelContext();
 const emotes = useChatEmotes(ctx);
 let cosmetics;
+const regex = /\[emote:\d+:[^\]]+\]|https?:\/\/[^\s]+/g;
 
 const badgeContainer = document.createElement("seventv-container");
 
@@ -74,9 +82,8 @@ useEventListener(props.bind.usernameEl.parentElement, "click", () => {
 });
 
 function splitToken(token: string): string[] {
-	const parts = [];
+	const parts: string[] = [];
 	let lastIndex = 0;
-	const regex = /\[emote:\d+:[^\]]+\]/g;
 	let match;
 	while ((match = regex.exec(token)) !== null) {
 		if (lastIndex < match.index) {
@@ -97,7 +104,9 @@ function extractTextWithKickEmotes(el: HTMLElement): string {
 		if (node.nodeType === Node.TEXT_NODE) {
 			result += node.textContent || "";
 		} else if (node instanceof HTMLElement) {
-			if (node.hasAttribute("data-emote-id") && node.hasAttribute("data-emote-name")) {
+			if (node.tagName === "A") {
+				result += node.innerText || "";
+			} else if (node.hasAttribute("data-emote-id") && node.hasAttribute("data-emote-name")) {
 				const emoteId = node.getAttribute("data-emote-id");
 				const emoteName = node.getAttribute("data-emote-name");
 				result += `[emote:${emoteId}:${emoteName}]`;
@@ -110,7 +119,6 @@ function extractTextWithKickEmotes(el: HTMLElement): string {
 }
 
 function IsKickEmote(token: string): boolean {
-	// Check if the token matches the Kick emote format
 	return token.startsWith("[emote:") && token.endsWith("]");
 }
 
@@ -214,6 +222,10 @@ onUnmounted(() => {
 	word-break: break-word;
 }
 
+.seventv-links {
+	text-decoration-line: underline;
+}
+
 .seventv-badge-list {
 	display: inline-grid;
 	vertical-align: middle;

src/site/kick.com/modules/chat/ChatObserver.vue

@@ -16,6 +16,7 @@
 import { ObserverPromise } from "@/common/Async";
 import ChatMessageVue, { ChatMessageBinding } from "./ChatMessage.vue";
 import ChatUserCard from "./ChatUserCard.vue";
+import { Kick } from "@/types/kick.module";
 
 interface ActiveUserCard {
 	bind: ChatMessageBinding;
@@ -32,58 +33,18 @@
 const messageMap = reactive<WeakMap<HTMLDivElement, ChatMessageBinding>>(new WeakMap());
 const userCard = ref<ActiveUserCard[]>([]);
 
-function getReactProps(element: HTMLElement): object | undefined {
+function getReactProps<T>(element: HTMLElement): T | undefined {
 	for (const k in element) {
 		if (k.startsWith("__reactProps")) {
 			const props = Reflect.get(element, k);
-
 			return props;
 		}
 	}
 	return undefined;
 }
 
-interface ReplyReactMessageProps {
-	id: string;
-	metadata: {
-		original_sender: {
-			content: string;
-			id: number;
-			username: string;
-		};
-	};
-	sender: {
-		id: number;
-		username: string;
-		slug: string;
-	};
-}
-
-interface DefaultReactMessageProps {
-	channelSlug: string;
-	message: {
-		id: string;
-		chatroom_id: number;
-		content: string;
-		created_at: string;
-		sender: {
-			id: number;
-			username: string;
-			slug: string;
-			type: string;
-		};
-	};
-	sender: {
-		id: number;
-		slug: string;
-		username: string;
-	};
-	messageId: string;
-}
-
-type ReactMessageProps = DefaultReactMessageProps | ReplyReactMessageProps;
+function isDefaultReactMessageProps(props: unknown): props is Kick.Message.DefaultProps {
 
-function isDefaultReactMessageProps(props: unknown): props is DefaultReactMessageProps {
 	return (
 		props != null &&
 		typeof props === "object" &&
@@ -94,13 +55,13 @@
 	);
 }
 
-function getMessageReactProps(el: HTMLDivElement): ReactMessageProps | undefined {
-	// eslint-disable-next-line
-	const messageElements = el.querySelector('div > div[style*="chatroom-font-size"]');
+function getMessageReactProps(el: HTMLDivElement): Kick.Message.DefaultProps | undefined {
+	const messageElements = el.querySelector("div > div[style*='chatroom-font-size']");
 	if (!messageElements) return;
+	const props = getReactProps(messageElements as HTMLElement) as
+		| { children: ReactExtended.Writeable<Kick.Message.DefaultProps> }
+		| undefined;
 
-	// eslint-disable-next-line
-	const props = getReactProps(messageElements as HTMLElement) as { children: any[] } | undefined;
 
 	if (!props || !Array.isArray(props.children)) return;
 
@@ -113,7 +74,7 @@
 	const props = getMessageReactProps(el);
 	if (!props) return;
 
-	const entryID = isDefaultReactMessageProps(props) ? props.messageId : props.id;
+	const entryID = isDefaultReactMessageProps(props) ? props.messageId : props;
 	const userID = props.sender.id.toString();
 	const username = props.sender.username;
 	const texts = el.querySelectorAll<HTMLSpanElement>("span.font-normal");
@@ -280,11 +241,7 @@
 	{ childList: true },
 );
 
-// let flushTimeout: number | null = null;
 function flush(): void {
-	//if (flushTimeout) return;
-
-	//flushTimeout = window.setTimeout(() => {
 	if (messageBuffer.value.length) {
 		const unbuf = messageBuffer.value.splice(0, messageBuffer.value.length);
 
@@ -295,21 +252,13 @@
 	}
 
 	if (messageDeleteBuffer.value.length >= 25) {
-		//flushTimeout = window.setTimeout(() => {
 		for (const bind of messageDeleteBuffer.value) {
 			messages.value.splice(messages.value.indexOf(bind), 1);
 		}
 
 		messageDeleteBuffer.value.length = 0;
-
-		// flushTimeout = null;
-		//}, refreshRate.value / 1.5);
-		// } else {
-		// flushTimeout = null;
 	}
-
 	onMessageRendered();
-	//}, refreshRate.value);
 }
 
 // ftk789: I have no clue what the F is above, And why does it have setTimeouts, with it being present it lags the chat and makes it go crazy.so I just commented settimeouts.

src/types/kick.module.d.ts

@@ -4,6 +4,32 @@ import SettingsModuleVue from "@/site/kick.com/modules/settings/SettingsModule.v
 
 declare type KickModuleID = keyof KickModuleComponentMap;
 
+declare namespace Kick {
+	namespace Message {
+		interface DefaultProps {
+			channelSlug: string;
+			message: {
+				id: string;
+				chatroom_id: number;
+				content: string;
+				created_at: string;
+				sender: {
+					id: number;
+					username: string;
+					slug: string;
+					type: string;
+				};
+			};
+			sender: {
+				id: number;
+				slug: string;
+				username: string;
+			};
+			messageId: string;
+		}
+	}
+}
+
 declare type KickModuleComponentMap = {
 	auth: typeof AuthModuleVue;
 	chat: typeof ChatModuleVue;