From c8b13eacd47c7d9e385d09e11effde86a5aadefc Mon Sep 17 00:00:00 2001 From: pimothyxd <29018740+pimothyxd@users.noreply.github.com> Date: Wed, 25 Sep 2024 15:40:35 +0200 Subject: [PATCH 1/3] shared chat base --- src/site/twitch.tv/modules/chat/ChatController.vue | 1 + src/site/twitch.tv/modules/chat/ChatModule.vue | 6 ++++++ src/types/twitch.d.ts | 13 +++++++++++++ 3 files changed, 20 insertions(+) diff --git a/src/site/twitch.tv/modules/chat/ChatController.vue b/src/site/twitch.tv/modules/chat/ChatController.vue index 7431c9fc..539752b3 100644 --- a/src/site/twitch.tv/modules/chat/ChatController.vue +++ b/src/site/twitch.tv/modules/chat/ChatController.vue @@ -64,6 +64,7 @@ const props = defineProps<{ list: HookedInstance; buffer?: HookedInstance; events?: HookedInstance; + presentation?: HookedInstance; }>(); const mod = getModule<"TWITCH", "chat">("chat")!; diff --git a/src/site/twitch.tv/modules/chat/ChatModule.vue b/src/site/twitch.tv/modules/chat/ChatModule.vue index 96e2ab80..d42aca53 100644 --- a/src/site/twitch.tv/modules/chat/ChatModule.vue +++ b/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" /> @@ -94,6 +95,11 @@ useComponentHook( }, ); +const chatListPresentation = useComponentHook({ + parentSelector: ".stream-chat", + predicate: (n) => n.props && n.props.sharedChatDataByChannelID, +}); + const isHookable = ref(false); const isHookableDbc = refDebounced(isHookable, 200); diff --git a/src/types/twitch.d.ts b/src/types/twitch.d.ts index 651add8e..87fff0d7 100644 --- a/src/types/twitch.d.ts +++ b/src/types/twitch.d.ts @@ -220,6 +220,10 @@ declare module Twitch { onClearChatEvent: (e: { channel: string }) => void; }; + export type ChatListPresentationComponent = ReactExtended.WritableComponent<{ + sharedChatDataByChannelID: Map; + }>; + 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; From 5e3dbd26808b56c5389c45c0427b846decac9702 Mon Sep 17 00:00:00 2001 From: FrantaBOT Date: Wed, 25 Sep 2024 16:22:17 +0200 Subject: [PATCH 2/3] shared chat --- src/app/chat/Badge.vue | 13 ++++- src/app/chat/UserMessage.vue | 1 + src/app/chat/UserTag.vue | 17 +++++- src/app/chat/msg/14.SubscriptionMessage.vue | 4 +- src/app/chat/msg/15.Resubscription.vue | 4 +- src/app/chat/msg/21.SubGift.vue | 1 + src/app/chat/msg/26.Raid.vue | 4 +- src/app/chat/msg/35.SubMysteryGift.vue | 5 +- src/app/chat/msg/41.BitsBadgeTier.vue | 6 +- src/app/chat/msg/43.PointsReward.vue | 1 + src/app/chat/msg/49.AnnouncementMessage.vue | 5 +- src/app/chat/msg/52.ViewerMilestone.vue | 6 +- src/common/chat/ChatMessage.ts | 5 ++ .../twitch.tv/modules/chat/ChatController.vue | 57 +++++++++++++++++-- src/site/twitch.tv/modules/chat/ChatList.vue | 13 +++++ src/types/twitch.messages.d.ts | 9 +++ src/worker/worker.http.ts | 8 ++- 17 files changed, 138 insertions(+), 21 deletions(-) diff --git a/src/app/chat/Badge.vue b/src/app/chat/Badge.vue index 21923ade..97dbbed9 100644 --- a/src/app/chat/Badge.vue +++ b/src/app/chat/Badge.vue @@ -6,6 +6,7 @@ :alt="alt" :style="{ backgroundColor, + borderRadius, }" @mouseenter="show(imgRef)" @mouseleave="hide()" @@ -20,16 +21,18 @@ 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 | string | 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: string) => `${badge.slice(0, -9)}28x28.png 1.6x, ${badge.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"> & string & Twitch.ChatBadge); const imgRef = ref(); @@ -44,6 +47,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%"; +}