Bugfix & print system messages in italic

gempir · Apr 30, 2024 · 68b786f · 68b786f
1 parent dd7fc40
commit 68b786f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/api/server.go b/api/server.go
@@ -89,6 +89,7 @@ type channelLogList struct {
 
 type chatMessage struct {
 	Text        string             `json:"text"`
+	SystemText  string             `json:"systemText"`
 	Username    string             `json:"username"`
 	DisplayName string             `json:"displayName"`
 	Channel     string             `json:"channel"`
@@ -457,7 +458,7 @@ func createChatMessage(parsedMessage twitch.Message) chatMessage {
 			Timestamp:   timestamp{message.Time},
 			Username:    message.TargetUsername,
 			DisplayName: message.TargetUsername,
-			Text:        buildClearChatMessageText(*message),
+			SystemText:  buildClearChatMessageText(*message),
 			Type:        message.Type,
 			Channel:     message.Channel,
 			Raw:         message.Raw,
@@ -468,7 +469,8 @@ func createChatMessage(parsedMessage twitch.Message) chatMessage {
 			Timestamp:   timestamp{message.Time},
 			Username:    message.User.Name,
 			DisplayName: message.User.DisplayName,
-			Text:        message.SystemMsg + " " + message.Message,
+			Text:        message.Message,
+			SystemText:  message.SystemMsg,
 			Type:        message.Type,
 			Channel:     message.Channel,
 			Raw:         message.Raw,

diff --git a/web/src/components/Message.tsx b/web/src/components/Message.tsx
@@ -7,7 +7,6 @@ import { ThirdPartyEmote } from "../types/ThirdPartyEmote";
 import runes from "runes";
 
 const MessageContainer = styled.div`
-
 	a {
 		margin: 0 2px;
 		color: var(--theme2);
@@ -19,6 +18,10 @@ const MessageContainer = styled.div`
 	}
 `;
 
+const SystemMessageWrapper = styled.span`
+font-style: italic;
+`;
+
 const Emote = styled.img`
 	max-height: 18px;
 	margin: 0 2px;
@@ -35,10 +38,8 @@ export function Message({ message, thirdPartyEmotes }: { message: LogMessage, th
 
 	let messageText = message.text;
 	let renderMessagePrefix = "";
-	if (message.tags['system-msg']) {
-		messageText = messageText.replace(message.tags['system-msg'] + " ", "");
-
-		renderMessagePrefix = `${message.tags['system-msg']} `;
+	if (message.systemText) {
+		renderMessagePrefix = `${message.systemText}`;
 	}
 
 	const messageTextEmoji = runes(messageText);
@@ -105,7 +106,10 @@ export function Message({ message, thirdPartyEmotes }: { message: LogMessage, th
 		}
 	}
 
+	const prefixElement = renderMessagePrefix ? 
+		<SystemMessageWrapper>{renderMessagePrefix}</SystemMessageWrapper> : null;
+
 	return <MessageContainer className="message">
-		{renderMessagePrefix}{renderMessage}
+		{prefixElement}{renderMessagePrefix && renderMessage ? ' ' : ''}{renderMessage}
 	</MessageContainer>;
 };
diff --git a/web/src/types/log.ts b/web/src/types/log.ts
@@ -9,6 +9,7 @@ export interface LogMessage extends Omit<RawLogMessage, "timestamp"> {
 
 export interface RawLogMessage {
     text: string,
+    systemText: string,
     username: string,
     displayName: string,
     channel: string,