Few changes to chat

Added moderator icon

changed styling for a name change message

Now usernames collapse as long as the user is the same

Imported two weights of Poppins and the OpenSans variable instead of def
400

This is some progress on #1859 and #1625

web/components/chat/ChatContainer/ChatContainer.module.scss

@@ -15,3 +15,20 @@
   position: absolute;
   bottom: 5px;
 }
+
+.nameChangeView {
+  display: flex;
+  font-size: 0.9rem;
+  border-radius: var(--theme-rounded-corners);
+  padding: 5px 15px;
+  color: var(--color-owncast-gray-300);
+  background-color: var(--color-owncast-background);
+  & .nameChangeText {
+    font-weight: bold;
+    font-family: var(--theme-header-font-family);
+    & .plain {
+      font-weight: normal;
+      font-family: var(--font-owncast-family) !important;
+    }
+  }
+}

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -1,7 +1,7 @@
 import { Button, Spin } from 'antd';
 import { Virtuoso } from 'react-virtuoso';
 import { useState, useMemo, useRef } from 'react';
-import { LoadingOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
+import { EditFilled, LoadingOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
 import { MessageType, NameChangeEvent } from '../../../interfaces/socket-events';
 import s from './ChatContainer.module.scss';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
@@ -29,13 +29,20 @@ export default function ChatContainer(props: Props) {
     const color = `var(--theme-user-colors-${displayColor})`;
 
     return (
-      <div>
-        <span style={{ color }}>{oldName}</span> is now known as {displayName}
+      <div className={s.nameChangeView}>
+        <div style={{ marginRight: 5, height: 'max-content', margin: 'auto 5px auto 0'}}>
+          <EditFilled />
+        </div>
+        <div className={s.nameChangeText}>
+          <span style={{ color }}>{oldName}</span>
+          <span className={s.plain}> is now known as </span>
+          <span style={{ color }}>{displayName}</span>
+        </div>
       </div>
     );
   };
 
-  const getViewForMessage = (message: ChatMessage | NameChangeEvent) => {
+  const getViewForMessage = (index: number, message: ChatMessage | NameChangeEvent) => {
     switch (message.type) {
       case MessageType.CHAT:
         return (
@@ -44,7 +51,7 @@ export default function ChatContainer(props: Props) {
             showModeratorMenu={isModerator} // Moderators have access to an additional menu
             highlightString={usernameToHighlight} // What to highlight in the message
             sentBySelf={message.user?.id === chatUserId} // The local user sent this message
-            sameUserAsLast={message.user?.id === messages[messages.length - 1].user?.id}
+            sameUserAsLast={isSameUserAsLast(messages, index)}
             key={message.id}
           />
         );
@@ -63,7 +70,7 @@ export default function ChatContainer(props: Props) {
           ref={chatContainerRef}
           initialTopMostItemIndex={messages.length - 1} // Force alignment to bottom
           data={messages}
-          itemContent={(_, message) => getViewForMessage(message)}
+          itemContent={(index, message) => getViewForMessage(index, message)}
           followOutput="auto"
           alignToBottom
           atBottomStateChange={bottom => setAtBottom(bottom)}
@@ -100,3 +107,11 @@ export default function ChatContainer(props: Props) {
     </div>
   );
 }
+
+function isSameUserAsLast(messages: ChatMessage[], index: number) {
+  const message = messages[index]
+  const { user: { id }} = message
+  const lastMessage = messages[index - 1]
+  
+  return id === lastMessage?.user.id
+}

web/components/chat/ChatUserMessage/ChatUserMessage.module.scss

@@ -3,7 +3,6 @@
   font-size: 0.9rem;
   padding: 5px 15px 5px 5px;
   padding-left: 1rem;
-  // animation: chatFadeIn .1s ease-in;
   .background {
     position: absolute;
     z-index: -1;
@@ -17,11 +16,16 @@
     overflow: hidden;
   }
   .user {
+    display: flex;
+    align-items: center;
     font-family: var(--theme-header-font-family);
     font-weight: bold;
+    .userName {
+      margin-left: .3rem;
+    }
   }
   .message {
-    color: var(--color-owncast-grey-100);
+    color: var(--color-owncast-gray-300);
 
     mark {
       color: white;
@@ -68,11 +72,16 @@
     }
   }
 
+
   .modMenuWrapper {
     position: absolute;
     display: none;
     top: 0;
     right: 10px;
+    & button:focus,
+    & button:active {
+      display: block !important;
+    }
   }
 
   &:hover .modMenuWrapper {
@@ -81,12 +90,3 @@
 }
 
 
-@keyframes chatFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -8,6 +8,7 @@ import { DeleteOutlined, EllipsisOutlined, StopOutlined } from '@ant-design/icon
 import s from './ChatUserMessage.module.scss';
 import { formatTimestamp } from './messageFmt';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
+import { ModIcon } from '../../ui';
 
 interface Props {
   message: ChatMessage;
@@ -46,7 +47,8 @@ export default function ChatUserMessage({
       >
         {!sameUserAsLast && (
           <div className={s.user} style={{ color }}>
-            {displayName}
+            <ModIcon />
+            <span className={s.userName}>{displayName}</span>
           </div>
         )}
         <Highlight search={highlightString}>

web/components/ui/ModIcon.tsx

@@ -0,0 +1,23 @@
+export default function ModIcon({
+  style = { width: '1rem', height: '1rem' },
+  fill = 'none',
+  stroke = 'var(--color-owncast-gray-300)',
+}) {
+  return (
+    <svg
+      fill={fill}
+      stroke={stroke}
+      style={style}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+    <title>This user has moderation rights</title>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+      />
+    </svg>
+  );
+}

web/components/ui/index.tsx

@@ -2,3 +2,4 @@ export { default as Header } from './Header/index';
 export { default as Sidebar } from './Sidebar/index';
 export { default as Footer } from './Footer/index';
 export { default as Content } from './Content/index';
+export { default as ModIcon } from './ModIcon';

web/styles/globals.scss

@@ -1,5 +1,6 @@
-@import "@fontsource/open-sans";
-@import "@fontsource/poppins";
+@import "@fontsource/open-sans/variable.css";
+@import "@fontsource/poppins/400.css";
+@import "@fontsource/poppins/600.css";
 
 // @import "~antd/dist/antd.dark";