refactor(twitch/chat): shared chat pill styling

CHANGELOG-nightly.md

@@ -1,3 +1,10 @@
+### 3.1.15.2000
+
+-   Fixed an issue causing the option to hide shared chat to hide all messages
+-   Added an option to change the shared chat pill style
+-   Added an option to use a highlighted border around source chat messages
+-   Added an option to change the color of the highlighted border for source chat messages
+
 ### 3.1.15.1000
 
 -   Added required Firefox built-in consent metadata to the manifest

src/app/chat/Badge.vue

@@ -16,26 +16,22 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { TWITCH_PROFILE_IMAGE_REGEX } from "@/common/Constant";
 import { useTooltip } from "@/composable/useTooltip";
 import BadgeTooltip from "./BadgeTooltip.vue";
 
 const props = defineProps<{
 	alt: string;
-	type: "twitch" | "picture" | "app";
-	badge: Twitch.ChatBadge | Twitch.SharedChat | SevenTV.Cosmetic<"BADGE">;
+	type: "twitch" | "app";
+	badge: Twitch.ChatBadge | 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.replace(TWITCH_PROFILE_IMAGE_REGEX, "28x28")} 1.6x,
-		${badge.profileImageURL.replace(TWITCH_PROFILE_IMAGE_REGEX, "70x70")} 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.SharedChat & Twitch.ChatBadge);
+}[props.type](props.badge as SevenTV.Cosmetic<"BADGE"> & Twitch.ChatBadge);
 
 const imgRef = ref<HTMLElement>();
 

src/app/chat/UserMessage.vue

@@ -22,6 +22,20 @@
 			:data-highlight-label="msg.highlight.label"
 		/>
 
+		<div
+			v-if="msg.sourceData && shouldShowPill"
+			v-tooltip="`Sent from ${msg.sourceData.displayName}'s channel`"
+			:alt="`Sent from ${msg.sourceData.displayName}'s channel`"
+			class="seventv-chat-message-shared-chat-icon"
+			:style="{
+				'--seventv-pill-border-color': pillBorderColor,
+			}"
+			:data-pill-style="sharedChatPillStyle"
+			:data-use-border="sharedChatSourceBorder"
+		>
+			<img :srcset="msg.sourceData.profileImageURL" :alt="msg.sourceData.displayName" />
+		</div>
+
 		<!-- Timestamp -->
 		<template v-if="properties.showTimestamps || msg.historical || forceTimestamp">
 			<span class="seventv-chat-message-timestamp">
@@ -38,7 +52,6 @@
 		<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)"
@@ -90,7 +103,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRef, watch, watchEffect } from "vue";
+import { computed, ref, toRef, watch, watchEffect } from "vue";
 import { useTimeoutFn } from "@vueuse/shared";
 import { SetHexAlpha } from "@/common/Color";
 import { log } from "@/common/Logger";
@@ -144,6 +157,12 @@ const { pinChatMessage } = useChatModeration(ctx, msg.value.author?.username ??
 
 const emoteScale = useConfig<number>("chat.emote_scale");
 
+const sharedChatPillStyle = useConfig<0 | 1 | 2>("chat.shared_chat.pill_style");
+const sharedChatPillOnlyMod = useConfig<boolean>("chat.shared_chat.pill_only_mod");
+const sharedChatSourceBorder = useConfig<boolean>("chat.shared_chat.source_border");
+const sharedChatCustomSourceBorder = useConfig<boolean>("chat.shared_chat.custom_source_border");
+const sharedChatCustomSourceBorderColor = useConfig<string>("chat.shared_chat.source_border_color");
+
 // TODO: css variables
 const meStyle = useConfig<number>("chat.slash_me_style");
 const highlightStyle = useConfig<number>("highlights.display_style");
@@ -160,6 +179,27 @@ const cosmetics = props.msg.author ? useCosmetics(props.msg.author.id) : { emote
 // Timestamp
 const timestamp = ref("");
 
+// Shared Chat
+const shouldShowPill = computed(() => {
+	if (sharedChatPillOnlyMod.value && !ctx.actor.roles.has("MODERATOR")) {
+		return false;
+	}
+
+	return sharedChatPillStyle.value !== 0;
+});
+
+const pillBorderColor = computed(() => {
+	if (!sharedChatSourceBorder.value || ctx.username !== msg.value.sourceData?.login) {
+		return "transparent";
+	}
+
+	if (sharedChatCustomSourceBorder.value) {
+		return sharedChatCustomSourceBorderColor.value;
+	}
+
+	return "var(--seventv-channel-accent)";
+});
+
 // Tokenize the message
 type MessageTokenOrText = AnyToken | string;
 const tokenizer = props.msg.getTokenizer();
@@ -349,4 +389,46 @@ watchEffect(() => {
 	letter-spacing: -0.1rem;
 	color: var(--seventv-muted);
 }
+
+.seventv-chat-message-shared-chat-icon {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	width: 2.2rem;
+	height: 2.2rem;
+	margin-right: 0.5rem;
+	overflow: hidden;
+	vertical-align: middle;
+
+	img {
+		width: 100%;
+		height: 100%;
+	}
+
+	&[data-use-border="true"] {
+		padding: 0.2rem;
+		border: 2px solid var(--seventv-pill-border-color);
+	}
+
+	&[data-use-border="false"] {
+		width: 1.8rem;
+		height: 1.8rem;
+	}
+
+	&[data-pill-style="1"] {
+		border-radius: 0.3em;
+
+		img {
+			border-radius: 0.1em;
+		}
+	}
+
+	&[data-pill-style="2"] {
+		border-radius: 100%;
+
+		img {
+			border-radius: 100%;
+		}
+	}
+}
 </style>

src/app/chat/UserTag.vue

@@ -12,13 +12,6 @@
 			"
 			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"

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

@@ -171,12 +171,13 @@ function onChatMessage(msg: ChatMessage, msgData: Twitch.AnyMessage, shouldRende
 		sourceRoomID = msg.channelID;
 	}
 
-	if (hideSharedChat.value && msg.channelID != sourceRoomID) {
+	const sourceData = sourceRoomID ? sharedChatData.value?.get(sourceRoomID) : undefined;
+	if (hideSharedChat.value && sourceData && msg.channelID != sourceRoomID) {
 		return;
 	}
 
 	if (sourceRoomID && !hideSharedChat.value) {
-		msgData.sourceData = sharedChatData.value?.get(sourceRoomID);
+		msgData.sourceData = sourceData;
 		msg.setSourceData(msgData.sourceData);
 	}
 

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

@@ -462,9 +462,47 @@ export const config = [
 	}),
 	declareConfig("chat.hide_shared_chat", "TOGGLE", {
 		label: "Hide Shared Chat",
-		hint: "Hides messages from other chats",
-		path: ["Chat", "Style"],
+		hint: "Hide messages from other chats",
+		path: ["Chat", "Shared Chat", 100],
+		defaultValue: false,
+	}),
+	declareConfig<number>("chat.shared_chat.pill_style", "DROPDOWN", {
+		path: ["Chat", "Shared Chat", 101],
+		label: "Chat Pill Style",
+		hint: "Choose how or if, to show shared chat pills",
+		options: [
+			["Off", 0],
+			["Rounded", 1],
+			["Circle", 2],
+		],
+		defaultValue: 2,
+	}),
+	declareConfig("chat.shared_chat.pill_only_mod", "TOGGLE", {
+		label: "Show Chat Pill only when Moderator or Streamer",
+		hint: "Whether or not to show the pill only when in chats where you are Moderator or Streamer",
+		path: ["Chat", "Shared Chat", 102],
+		disabledIf: () => useConfig<number>("chat.shared_chat.pill_style").value === 0,
+		defaultValue: false,
+	}),
+	declareConfig("chat.shared_chat.source_border", "TOGGLE", {
+		label: "Show Source Chat Border",
+		hint: "Whether or not to show a highlighted border around pills, sent in the source chat",
+		path: ["Chat", "Shared Chat", 103],
+		defaultValue: true,
+	}),
+	declareConfig("chat.shared_chat.custom_source_border", "TOGGLE", {
+		label: "Use Custom Border Color",
+		hint: "Whether or not to use a custom highlighted border around pills",
+		path: ["Chat", "Shared Chat", 104],
+		disabledIf: () => !useConfig("chat.shared_chat.source_border").value,
 		defaultValue: false,
 	}),
+	declareConfig("chat.shared_chat.source_border_color", "COLOR", {
+		label: "Custom Source Chat Border Color",
+		hint: "Configure the color of the highlighted border around pills",
+		path: ["Chat", "Shared Chat", 105],
+		disabledIf: () => !useConfig("chat.shared_chat.custom_source_border").value,
+		defaultValue: "#29B6F6",
+	}),
 ];
 </script>