twitch/chat(feat): hype chat (#711)

CHANGELOG-nightly.md

@@ -3,6 +3,7 @@
 **The changes listed here are not assigned to an official release**.
 
 - Added an option to hide the new mature content dialogs on Twitch
+- Added formatting support for Hype Chat
 - Fixed an issue which prevented moderator data from loading in User Cards
 - Fixed an issue where nametags with blending paints did not correctly use the base color and appeared invisible instead
 - Kick:

src/app/chat/msg/55.PaidMessage.vue

@@ -0,0 +1,124 @@
+<template>
+	<div
+		class="seventv-paid-message"
+		:level="msgData.level"
+		:class="{ 'seventv-paid-message-animated': animatedTier[msgData.level] }"
+	>
+		<div class="seventv-paid-message-heading">
+			<UserTag
+				v-if="msgData.message.user"
+				:user="{
+					id: msgData.message.user.userID,
+					username: msgData.message.user.userLogin,
+					displayName: msgData.message.user.displayName || msgData.message.user.userLogin,
+					color: msgData.message.user.color,
+				}"
+				:badges="msgData.message.badges"
+			/>
+		</div>
+
+		<div class="seventv-paid-message-content">
+			<template v-if="msgData.message">
+				<slot :hide-author="true" />
+			</template>
+
+			<div class="seventv-paid-message-payment">
+				{{ msgData.currency }} {{ (msgData.amount / 100).toFixed(2) }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import UserTag from "../UserTag.vue";
+
+defineProps<{
+	msgData: Twitch.PaidMessage;
+}>();
+
+const animatedTier: Record<string, 1 | undefined> = {
+	SIX: 1,
+	SEVEN: 1,
+	EIGHT: 1,
+	NINE: 1,
+	TEN: 1,
+};
+</script>
+
+<style scoped lang="scss">
+.seventv-paid-message {
+	display: grid;
+	grid-template-rows: 0.2fr 1.8fr;
+	grid-template-areas:
+		"heading"
+		"content";
+	margin: 1rem;
+	border-radius: 0.25rem;
+
+	&[level="ONE"] {
+		background: rgb(107, 129, 110);
+	}
+
+	&[level="TWO"] {
+		background: rgb(50, 132, 59);
+	}
+
+	&[level="THREE"] {
+		background: rgb(0, 122, 108);
+	}
+
+	&[level="FOUR"] {
+		background: rgb(0, 128, 169);
+	}
+
+	&[level="FIVE"] {
+		background: rgb(103, 116, 128);
+	}
+
+	&[level="SIX"] {
+		background-image: linear-gradient(90deg, #016dda, #0404ac, #016dda, #0404ac);
+	}
+
+	&[level="SEVEN"] {
+		background-image: linear-gradient(90deg, #7614c7, #5060fc, #7614c7, #5060fc);
+	}
+
+	&[level="EIGHT"] {
+		background-image: linear-gradient(90deg, #a001d4, #d211a3, #a001d4, #d211a3);
+	}
+
+	&[level="NINE"] {
+		background-image: linear-gradient(90deg, #9004bd, #cb4227, #9004bd, #cb4227);
+	}
+
+	&[level="TEN"] {
+		background-image: linear-gradient(90deg, #3919bc, #cf0110, #3919bc, #cf0110);
+	}
+}
+
+.seventv-paid-message-heading {
+	grid-area: heading;
+	background: rgba(0, 0, 0, 20%);
+	padding: 0.5rem;
+}
+
+.seventv-paid-message-content {
+	grid-area: content;
+	display: grid;
+	grid-template-rows: 1fr 1fr;
+	grid-template-areas:
+		"message"
+		"payment";
+	padding: 0.75rem;
+	row-gap: 1rem;
+}
+
+.seventv-paid-message-payment {
+	font-size: 1.5rem;
+	font-weight: 700;
+}
+
+.seventv-paid-message-animated {
+	background-size: 400% 100%;
+}
+</style>

src/app/settings/SettingsMenu.vue

@@ -229,6 +229,8 @@ watch(
 </script>
 
 <style scoped lang="scss">
+// grid.layoutit.com?id=AZllBEL
+
 @media (width <= 1120px) {
 	// Large Screen
 	:deep(.seventv-settings-expanded) {

src/site/twitch.tv/index.ts

@@ -81,6 +81,7 @@ export enum MessageType {
 	MESSAGE_ID_UPDATE = 52,
 	PINNED_CHAT = 53,
 	VIEWER_MILESTONE = 54,
+	PAID_MESSAGE = 55,
 
 	// 7TV Message Types
 	SEVENTV_EMOTE_SET_UPDATE = 7000,

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

@@ -6,8 +6,13 @@
 					:is="isModSliderEnabled && ctx.actor.roles.has('MODERATOR') && msg.author ? ModSlider : 'span'"
 					v-bind="{ msg }"
 				>
-					<component :is="msg.instance" v-bind="msg.componentProps" :msg="msg">
-						<UserMessage :msg="msg" :emotes="emotes.active" :chatters="messages.chattersByUsername" />
+					<component :is="msg.instance" v-slot="slotProps" v-bind="msg.componentProps" :msg="msg">
+						<UserMessage
+							v-bind="slotProps"
+							:msg="msg"
+							:emotes="emotes.active"
+							:chatters="messages.chattersByUsername"
+						/>
 					</component>
 				</component>
 			</template>
@@ -110,6 +115,7 @@ const onMessage = (msgData: Twitch.AnyMessage): boolean => {
 		case MessageType.CHANNEL_POINTS_REWARD:
 		case MessageType.ANNOUNCEMENT_MESSAGE:
 		case MessageType.RESTRICTED_LOW_TRUST_USER_MESSAGE:
+		case MessageType.PAID_MESSAGE:
 		case MessageType.CONNECTED:
 			onChatMessage(msg, msgData);
 			break;
@@ -127,7 +133,7 @@ const onMessage = (msgData: Twitch.AnyMessage): boolean => {
 	}
 
 	// Send message to our registered message handlers
-	messages.handlers.forEach((h) => h(msgData));
+	// messages.handlers.forEach((h) => h(msgData));
 	return true;
 };
 

src/types/twitch.messages.d.ts

@@ -95,6 +95,18 @@ declare namespace Twitch {
 		streakMonths?: number;
 	}
 
+	export interface PaidMessage extends AnyMessage {
+		isSystemMessage: boolean;
+		amount: number;
+		currency: string;
+		level: string;
+		exponent: number;
+		canonicalAmount: number;
+		endsAt: string;
+		startsAt: string;
+		message: ChatMessage;
+	}
+
 	export namespace ChatMessage {
 		export interface Part {
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any