Merge pull request #1078 from FrantaBOT/feature/shared-chat

Feat: Added shared chat support

src/app/chat/Badge.vue

@@ -6,6 +6,7 @@
 			:alt="alt"
 			:style="{
 				backgroundColor,
+				borderRadius,
 			}"
 			@mouseenter="show(imgRef)"
 			@mouseleave="hide()"
@@ -20,16 +21,19 @@ import BadgeTooltip from "./BadgeTooltip.vue";
 
 const props = defineProps<{
 	alt: string;
-	type: "twitch" | "app";
-	badge: Twitch.ChatBadge | SevenTV.Cosmetic<"BADGE">;
+	type: "twitch" | "picture" | "app";
+	badge: Twitch.ChatBadge | Twitch.SharedChat | SevenTV.Cosmetic<"BADGE">;
 }>();
 
 const backgroundColor = ref("");
+const borderRadius = ref("");
 const srcset = {
 	twitch: (badge: Twitch.ChatBadge) => `${badge.image1x} 1x, ${badge.image2x} 2x, ${badge.image4x} 4x`,
+	picture: (badge: Twitch.SharedChat) =>
+		`${badge.profileImageURL.slice(0, -9)}28x28.png 1.6x, ${badge.profileImageURL.slice(0, -9)}70x70.png 3.8x`,
 	app: (badge: SevenTV.Cosmetic<"BADGE">) =>
 		badge.data.host.files.map((fi, i) => `https:${badge.data.host.url}/${fi.name} ${i + 1}x`).join(", "),
-}[props.type](props.badge as SevenTV.Cosmetic<"BADGE"> & Twitch.ChatBadge);
+}[props.type](props.badge as SevenTV.Cosmetic<"BADGE"> & Twitch.SharedChat & Twitch.ChatBadge);
 
 const imgRef = ref<HTMLElement>();
 
@@ -44,6 +48,10 @@ function isApp(badge: typeof props.badge): badge is SevenTV.Cosmetic<"BADGE"> {
 if (isApp(props.badge)) {
 	backgroundColor.value = props.badge.data.backgroundColor ?? "";
 }
+
+if (typeof props.badge == "string") {
+	borderRadius.value = "25%";
+}
 </script>
 
 <style scoped lang="scss">

src/app/chat/UserMessage.vue

@@ -38,6 +38,7 @@
 		<UserTag
 			v-if="msg.author && !hideAuthor"
 			:user="msg.author"
+			:source-data="msg.sourceData"
 			:badges="msg.badges"
 			:msg-id="msg.sym"
 			@open-native-card="openViewerCard($event, msg.author.username, msg.id)"

src/app/chat/UserTag.vue

@@ -2,9 +2,18 @@
 	<div v-if="user && user.displayName" ref="tagRef" class="seventv-chat-user" :style="{ color: user.color }">
 		<!--Badge List -->
 		<span
-			v-if="!hideBadges && ((twitchBadges.length && twitchBadgeSets?.count) || cosmetics.badges.size)"
+			v-if="
+				!hideBadges && ((twitchBadges.length && twitchBadgeSets?.count) || cosmetics.badges.size || sourceData)
+			"
 			class="seventv-chat-user-badge-list"
 		>
+			<Badge
+				v-if="sourceData"
+				:key="sourceData.login"
+				:badge="sourceData"
+				:alt="sourceData.displayName"
+				type="picture"
+			/>
 			<Badge
 				v-for="badge of twitchBadges"
 				:key="badge.id"
@@ -60,6 +69,7 @@ import { autoPlacement, shift } from "@floating-ui/dom";
 const props = withDefaults(
 	defineProps<{
 		user: ChatUser;
+		sourceData?: Twitch.SharedChat;
 		msgId?: symbol;
 		asMention?: boolean;
 		hideBadges?: boolean;
@@ -106,7 +116,10 @@ watchEffect(() => {
 			const setID = key;
 			const badgeID = value;
 
-			for (const setGroup of [twitchBadgeSets.value.channelsBySet, twitchBadgeSets.value.globalsBySet]) {
+			for (const setGroup of [
+				props.sourceData?.badges.channelsBySet ?? twitchBadgeSets.value.channelsBySet,
+				twitchBadgeSets.value.globalsBySet,
+			]) {
 				if (!setGroup) continue;
 
 				const set = setGroup.get(setID);

src/app/chat/msg/14.SubscriptionMessage.vue

@@ -11,7 +11,9 @@
 				</span>
 				<span class="bold">Subscribed</span>
 				with
-				{{ plan }}.
+				{{ plan }}
+				<template v-if="msgData.sourceData"> to {{ msgData.sourceData.displayName }} </template>
+				<span>.</span>
 			</div>
 		</div>
 

src/app/chat/msg/15.Resubscription.vue

@@ -11,7 +11,9 @@
 				</span>
 				<span class="bold">Subscribed</span>
 				with
-				{{ plan }}. They've subscribed for
+				{{ plan }}
+				<template v-if="msgData.sourceData"> to {{ msgData.sourceData.displayName }} </template>
+				<span>. They've subscribed for </span>
 				<span class="bold"> {{ msgData.cumulativeMonths }} months</span>
 				<template v-if="msgData.shouldShareStreakTenure">
 					, {{ msgData.streakMonths }} month{{ (msgData.streakMonths ?? 0) > 1 ? "s" : "" }} in a row.

src/app/chat/msg/21.SubGift.vue

@@ -12,6 +12,7 @@
 				<span class="bold"> Tier {{ msgData.methods?.plan.charAt(0) }} </span>
 				Sub to
 				<span class="bold"> {{ msgData.recipientDisplayName }} </span>
+				<template v-if="msgData.sourceData"> in {{ msgData.sourceData.displayName }}'s channel! </template>
 			</div>
 		</div>
 	</span>

src/app/chat/msg/26.Raid.vue

@@ -1,7 +1,9 @@
 <template>
 	<span class="seventv-raid-message-container seventv-highlight">
 		<span class="bold">{{ msgData.params.displayName }}</span>
-		raided with a viewer count of
+		raided
+		<template v-if="msgData.sourceData"> {{ msgData.sourceData.displayName }}'s channel </template>
+		with a viewer count of
 		<span class="bold"> {{ msgData.params.viewerCount }}</span>
 		<span>.</span>
 	</span>

src/app/chat/msg/35.SubMysteryGift.vue

@@ -11,7 +11,10 @@
 				is gifting {{ msgData.massGiftCount }} Tier {{ msgData.plan.charAt(0) }} Sub{{
 					msgData.massGiftCount > 1 ? "s" : ""
 				}}
-				to {{ msgData.channel }}'s community.
+				<template v-if="msgData.sourceData">
+					<span>to {{ msgData.sourceData.displayName }}'s community</span>
+				</template>
+				<span>.</span>
 				<template v-if="msgData.senderCount == msgData.massGiftCount">
 					It's their first Gift Sub in the channel!
 				</template>

src/app/chat/msg/41.BitsBadgeTier.vue

@@ -9,7 +9,11 @@
 					{{ msgData.user.displayName }}
 				</span>
 				just earned a new
-				<span class="bold">{{ msgData.threshold }} Bits badge!</span>
+				<span class="bold">{{ msgData.threshold }} Bits badge</span>
+				<template v-if="msgData.sourceData">
+					<span> in {{ msgData.sourceData.displayName }}'s channel</span>
+				</template>
+				<span>!</span>
 			</div>
 		</div>
 		<div v-if="msg.body" class="bits-badge-message">

src/app/chat/msg/43.PointsReward.vue

@@ -9,6 +9,7 @@
 				<span class="reward-name bold">
 					{{ msgData.reward.name }}
 				</span>
+				<template v-if="msgData.sourceData"> in {{ msgData.sourceData.displayName }}'s channel </template>
 			</div>
 			<span class="reward-cost bold">
 				<TwChannelPoints />

src/app/chat/msg/49.AnnouncementMessage.vue

@@ -4,7 +4,10 @@
 			<div class="announce-icon">
 				<TwAnnounce />
 			</div>
-			<div class="announce-title">Announcement</div>
+			<div class="announce-title">
+				<template v-if="msgData.sourceData"> {{ msgData.sourceData.displayName }}'s </template>
+				Announcement
+			</div>
 		</div>
 		<div class="announce-message">
 			<slot />

src/app/chat/msg/52.ViewerMilestone.vue

@@ -15,7 +15,11 @@
 				</div>
 				<span class="bold">Watch Streak Reached!: </span>
 				<span v-if="msg.author">{{ msg.author.displayName }}</span>
-				is currently on a {{ msgData.watchStreak }}-stream streak!
+				is currently on a {{ msgData.watchStreak }}-stream streak
+				<template v-if="msgData.sourceData">
+					<span>in {{ msgData.sourceData.displayName }}'s channel</span>
+				</template>
+				<span>!</span>
 			</div>
 		</div>
 

src/common/chat/ChatMessage.ts

@@ -10,6 +10,7 @@ export class ChatMessage<C extends ComponentFactory = ComponentFactory> {
 	public body = "";
 	public author: ChatUser | null = null;
 	public channelID = "";
+	public sourceData: Twitch.SharedChat | undefined;
 	private component?: C | null = null;
 	public componentProps?: InstanceType<C>["$props"] | null = null;
 	public highlight: Highlight | null = null;
@@ -96,6 +97,10 @@ export class ChatMessage<C extends ComponentFactory = ComponentFactory> {
 		this.id = id;
 	}
 
+	public setSourceData(sourceData: Twitch.SharedChat | undefined): void {
+		this.sourceData = sourceData;
+	}
+
 	public setHighlight(color: string, label: string): void {
 		this.highlight = {
 			color,

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

@@ -10,7 +10,12 @@
 			@mouseleave="properties.hovering = false"
 		>
 			<div id="seventv-message-container" class="seventv-message-container">
-				<ChatList ref="chatList" :list="list" :message-handler="messageHandler" />
+				<ChatList
+					ref="chatList"
+					:list="list"
+					:shared-chat-data="sharedChatDataByChannelID"
+					:message-handler="messageHandler"
+				/>
 			</div>
 
 			<!-- New Messages during Scrolling Pause -->
@@ -40,7 +45,7 @@ import { log } from "@/common/Logger";
 import { HookedInstance, awaitComponents } from "@/common/ReactHooks";
 import { defineFunctionHook, definePropertyHook, unsetPropertyHook } from "@/common/Reflection";
 import { ChatMessage } from "@/common/chat/ChatMessage";
-import { ChannelRole, useChannelContext } from "@/composable/channel/useChannelContext";
+import { ChannelContext, ChannelRole, useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatEmotes } from "@/composable/chat/useChatEmotes";
 import { useChatMessages } from "@/composable/chat/useChatMessages";
 import { useChatProperties } from "@/composable/chat/useChatProperties";
@@ -64,12 +69,13 @@ const props = defineProps<{
 	list: HookedInstance<Twitch.ChatListComponent>;
 	buffer?: HookedInstance<Twitch.MessageBufferComponent>;
 	events?: HookedInstance<Twitch.ChatEventComponent>;
+	presentation?: HookedInstance<Twitch.ChatListPresentationComponent>;
 }>();
 
 const mod = getModule<"TWITCH", "chat">("chat")!;
 const { sendMessage: sendWorkerMessage } = useWorker();
 
-const { list, controller, room } = toRefs(props);
+const { list, controller, room, presentation } = toRefs(props);
 
 const el = document.createElement("seventv-container");
 el.id = "seventv-chat-controller";
@@ -101,6 +107,7 @@ const ignoreClearChat = useConfig<boolean>("chat.ignore_clear_chat");
 
 // Defines the current channel for hooking
 const currentChannel = ref<CurrentChannel | null>(null);
+const sharedChannels = new Map<string, ChannelContext>();
 
 // Capture the chat root node
 watchEffect(() => {
@@ -224,9 +231,22 @@ definePropertyHook(controller.value.component, "props", {
 		// Send presence upon message sent
 		messages.sendMessage = v.chatConnectionAPI.sendMessage;
 		defineFunctionHook(v.chatConnectionAPI, "sendMessage", function (old, ...args) {
-			worker.sendMessage("CHANNEL_ACTIVE_CHATTER", {
-				channel: toRaw(ctx.base),
-			});
+			if (sharedChatDataByChannelID.value?.size != 0) {
+				for (const [key, value] of sharedChatDataByChannelID.value?.entries() ?? []) {
+					worker.sendMessage("CHANNEL_ACTIVE_CHATTER", {
+						channel: {
+							id: key,
+							username: value.login,
+							displayName: value.displayName,
+							active: true,
+						},
+					});
+				}
+			} else {
+				worker.sendMessage("CHANNEL_ACTIVE_CHATTER", {
+					channel: toRaw(ctx.base),
+				});
+			}
 
 			// Run message content patching middleware
 			for (const fn of mod.instance?.messageSendMiddleware.values() ?? []) {
@@ -244,6 +264,32 @@ definePropertyHook(controller.value.component, "props", {
 	},
 });
 
+const sharedChatDataByChannelID = ref<Map<string, Twitch.SharedChat> | null>(null);
+watch(
+	presentation,
+	(inst, old) => {
+		if (!inst || !inst.component) return;
+
+		if (old && old.component && inst !== old) {
+			unsetPropertyHook(old.component, "props");
+			return;
+		}
+
+		definePropertyHook(inst.component, "props", {
+			value(v) {
+				sharedChatDataByChannelID.value = v.sharedChatDataByChannelID;
+
+				for (const channelID of sharedChatDataByChannelID.value.keys()) {
+					if (!sharedChannels.has(channelID) && channelID != ctx.id) {
+						sharedChannels.set(channelID, useChannelContext(channelID, true));
+					}
+				}
+			},
+		});
+	},
+	{ immediate: true },
+);
+
 const a = awaitComponents<Twitch.MessageCardOpeners>({
 	parentSelector: ".stream-chat",
 	predicate: (n) => {

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

@@ -51,6 +51,7 @@ import BasicSystemMessage from "@/app/chat/msg/BasicSystemMessage.vue";
 const props = defineProps<{
 	list: HookedInstance<Twitch.ChatListComponent>;
 	messageHandler: Twitch.MessageHandlerAPI | null;
+	sharedChatData: Map<string, Twitch.SharedChat> | null;
 }>();
 
 const ctx = useChannelContext();
@@ -78,6 +79,7 @@ const showMonitoredLowTrustUser = useConfig<boolean>("highlights.basic.monitored
 
 const messageHandler = toRef(props, "messageHandler");
 const list = toRef(props, "list");
+const sharedChatData = toRef(props, "sharedChatData");
 
 // Unrender messages out of view
 const chatListEl = ref<HTMLElement>();
@@ -162,6 +164,17 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 		msg.setHighlight("#ff7d00", "Restricted Suspicious User");
 	}
 
+	let sourceRoomID =
+		msgData.sourceRoomID ?? msgData.sharedChat?.sourceRoomID ?? msgData.message?.sourceRoomID ?? null;
+	if (!sourceRoomID && msgData.nonce) {
+		sourceRoomID = msg.channelID;
+	}
+
+	if (sourceRoomID) {
+		msgData.sourceData = sharedChatData.value?.get(sourceRoomID);
+		msg.setSourceData(msgData.sourceData);
+	}
+
 	// define message author
 	const authorData = msgData.user ?? msgData.message?.user ?? null;
 	if (authorData) {

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

@@ -7,6 +7,7 @@
 			:room="chatRoom.instances[0] ?? undefined"
 			:buffer="chatBuffer.instances[0] ?? undefined"
 			:events="chatEvents.instances[0] ?? undefined"
+			:presentation="chatListPresentation.instances[0] ?? undefined"
 		/>
 	</template>
 </template>
@@ -94,6 +95,11 @@ useComponentHook<Twitch.ChatCommunityPointsButtonComponent>(
 	},
 );
 
+const chatListPresentation = useComponentHook<Twitch.ChatListPresentationComponent>({
+	parentSelector: ".stream-chat",
+	predicate: (n) => n.props && n.props.sharedChatDataByChannelID,
+});
+
 const isHookable = ref(false);
 const isHookableDbc = refDebounced(isHookable, 200);
 

src/types/twitch.d.ts

@@ -220,6 +220,10 @@ declare module Twitch {
 		onClearChatEvent: (e: { channel: string }) => void;
 	};
 
+	export type ChatListPresentationComponent = ReactExtended.WritableComponent<{
+		sharedChatDataByChannelID: Map<string, SharedChat>;
+	}>;
+
 	export interface MessageHandlerAPI {
 		addMessageHandler: (event: (msg: ChatMessage) => void) => void;
 		removeMessageHandler: (event: (msg: ChatMessage) => void) => void;
@@ -838,6 +842,15 @@ declare module Twitch {
 		badges?: { id: string }[];
 	}
 
+	export interface SharedChat {
+		badges: BadgeSets;
+		displayName: string;
+		login: string;
+		primaryColorHex: string;
+		profileImageURL: string;
+		status: "ACTIVE" | "INACTIVE";
+	}
+
 	export interface TwitchEmote {
 		id: string;
 		modifiers?: any;