Add+style system style chat message. Closes #1998

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -12,6 +12,7 @@ import { ChatMessage } from '../../../interfaces/chat-message.model';
 import { ChatTextField, ChatUserMessage } from '..';
 import ChatModeratorNotification from '../ChatModeratorNotification/ChatModeratorNotification';
 import ChatActionMessage from '../ChatAction/ChatActionMessage';
+import ChatSystemMessage from '../ChatSystemMessage/ChatSystemMessage';
 
 interface Props {
   messages: ChatMessage[];
@@ -95,6 +96,14 @@ export default function ChatContainer(props: Props) {
         return getConnectedInfoMessage(message);
       case MessageType.USER_JOINED:
         return getUserJoinedMessage(message as ChatMessage);
+      case MessageType.SYSTEM:
+        return (
+          <ChatSystemMessage
+            message={message as ChatMessage}
+            highlightString={usernameToHighlight} // What to highlight in the message
+            key={message.id}
+          />
+        );
 
       default:
         return null;

web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss

@@ -1,13 +1,38 @@
-@import 'styles/mixins.scss';
-
 .chatSystemMessage {
-  background-color: var(--theme-unknown-2);
+  background: var(--theme-background-secondary);
+  background: linear-gradient(
+    70deg,
+    rgb(78, 54, 114) 0%,
+    rgb(65, 28, 139) 40%,
+    rgb(83, 67, 130) 80%
+  );
   margin: 5px;
-  border-radius: 15px;
+  border-radius: 5px;
-  border-color: rgba(0, 0, 0, 0.3);
   border-width: 1px;
   border-style: solid;
-  padding: 10px 10px;
+  padding: 12px 12px;
   max-width: 400px;
-  @include flexCenter;
+
+  .user {
+    display: flex;
+    align-items: center;
+    font-family: var(--theme-header-font-family);
+    font-weight: bold;
+    color: white;
+  }
+  .message {
+    color: white;
+
+    p {
+      color: white;
+      margin: unset;
+    }
+
+    mark {
+      padding-left: 0.35em;
+      padding-right: 0.35em;
+      color: var(--theme-text-highlight);
+      background-color: var(--color-bg-highlight);
+    }
+  }
 }

web/components/chat/ChatSystemMessage/ChatSystemMessage.tsx

@@ -1,9 +1,25 @@
+/* eslint-disable react/no-danger */
+import { Highlight } from 'react-highlighter-ts';
+import { ChatMessage } from '../../../interfaces/chat-message.model';
 import s from './ChatSystemMessage.module.scss';
 
 interface Props {
-  message: string;
+  message: ChatMessage;
+  highlightString: string;
 }
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function ChatSystemMessage({ message }: Props) {
+export default function ChatSystemMessage({ message, highlightString }: Props) {
-  return <div className={s.chatSystemMessage}>{message}</div>;
+  const { body, user } = message;
+  const { displayName } = user;
+
+  return (
+    <div className={s.chatSystemMessage}>
+      <div className={s.user}>
+        <span className={s.userName}>{displayName}</span>
+      </div>
+      <Highlight search={highlightString}>
+        <div className={s.message} dangerouslySetInnerHTML={{ __html: body }} />
+      </Highlight>
+    </div>
+  );
 }

web/components/stores/ClientConfigStore.tsx

@@ -277,6 +277,9 @@ export function ClientConfigStore() {
       case MessageType.USER_JOINED:
         setChatMessages(currentState => [...currentState, message as ChatEvent]);
         break;
+      case MessageType.SYSTEM:
+        setChatMessages(currentState => [...currentState, message as ChatEvent]);
+        break;
       default:
         console.error('Unknown socket message type: ', message.type);
     }

web/stories/ChatSystemMessage.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import ChatSystemMessage from '../components/chat/ChatSystemMessage/ChatSystemMessage';
 import Mock from './assets/mocks/chatmessage-system.png';
+import { ChatMessage } from '../interfaces/chat-message.model';
 
 export default {
   title: 'owncast/Chat/Messages/System',
@@ -21,8 +22,26 @@ export default {
 
 const Template: ComponentStory<typeof ChatSystemMessage> = args => <ChatSystemMessage {...args} />;
 
+const message: ChatMessage = JSON.parse(`{
+  "type": "SYSTEM",
+  "id": "wY-MEXwnR",
+  "timestamp": "2022-04-28T20:30:27.001762726Z",
+  "user": {
+    "id": "h_5GQ6E7R",
+    "displayName": "Cool Server Name",
+    "createdAt": "2022-03-24T03:52:37.966584694Z",
+    "scopes": []
+  },
+  "body": "Test system message from the chat server."}`);
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Basic = Template.bind({});
 Basic.args = {
-  message: 'This is a system message.',
+  message,
+};
+
+export const HighlightExample = Template.bind({});
+HighlightExample.args = {
+  message,
+  highlightString: 'chat',
 };