Support changing your own name and handling name change events

web/components/chat/ChatActionMessage.tsx

@@ -1,11 +1,11 @@
-import { ChatMessage } from '../../interfaces/chat-message.model';
-
+/* eslint-disable react/no-danger */
 interface Props {
-  // eslint-disable-next-line react/no-unused-prop-types
-  message: ChatMessage;
+  body: string;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function ChatSystemMessage(props: Props) {
-  return <div>Component goes here</div>;
+export default function ChatActionMessage(props: Props) {
+  const { body } = props;
+
+  return <div dangerouslySetInnerHTML={{ __html: body }} />;
 }

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -3,10 +3,11 @@ import { Virtuoso } from 'react-virtuoso';
 import { useRef } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 
-import { MessageType } from '../../../interfaces/socket-events';
+import { MessageType, NameChangeEvent } from '../../../interfaces/socket-events';
 import s from './ChatContainer.module.scss';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import { ChatUserMessage } from '..';
+import ChatActionMessage from '../ChatActionMessage';
 
 interface Props {
   messages: ChatMessage[];
@@ -19,10 +20,20 @@ export default function ChatContainer(props: Props) {
   const chatContainerRef = useRef(null);
   const spinIcon = <LoadingOutlined style={{ fontSize: '32px' }} spin />;
 
+  const getNameChangeViewForMessage = (message: NameChangeEvent) => {
+    const { oldName } = message;
+    const { user } = message;
+    const { displayName } = user;
+    const body = `<strong>${oldName}</strong> is now known as <strong>${displayName}</strong>`;
+    return <ChatActionMessage body={body} />;
+  };
+
   const getViewForMessage = message => {
     switch (message.type) {
       case MessageType.CHAT:
         return <ChatUserMessage message={message} showModeratorMenu={false} />;
+      case MessageType.NAME_CHANGE:
+        return getNameChangeViewForMessage(message);
       default:
         return null;
     }

web/components/modals/NameChangeModal.tsx

@@ -1,25 +1,44 @@
+import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
+import { Input, Button } from 'antd';
+import { MessageType } from '../../interfaces/socket-events';
 import WebsocketService from '../../services/websocket-service';
-// import { setLocalStorage } from '../../utils/helpers';
-import { websocketServiceAtom } from '../stores/ClientConfigStore';
+import { websocketServiceAtom, chatDisplayNameAtom } from '../stores/ClientConfigStore';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 interface Props {}
 
 export default function NameChangeModal(props: Props) {
   const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
+  const chatDisplayName = useRecoilValue<string>(chatDisplayNameAtom);
+  const [newName, setNewName] = useState<any>(chatDisplayName);
 
-  // const handleNameChange = () => {
-  //   // Send name change
-  //   const nameChange = {
-  //     type: SOCKET_MESSAGE_TYPES.NAME_CHANGE,
-  //     newName,
-  //   };
-  //   websocketService.send(nameChange);
+  const handleNameChange = () => {
+    const nameChange = {
+      type: MessageType.NAME_CHANGE,
+      newName,
+    };
+    websocketService.send(nameChange);
+  };
 
-  //   // Store it locally
-  //   setLocalStorage(KEY_USERNAME, newName);
-  // };
+  const saveEnabled =
+    newName !== chatDisplayName && newName !== '' && websocketService?.isConnected();
 
-  return <div>Name change modal component goes here</div>;
+  return (
+    <div>
+      Your chat display name is what people see when you send chat messages. Other information can
+      go here to mention auth, and stuff.
+      <Input
+        value={newName}
+        onChange={e => setNewName(e.target.value)}
+        placeholder="Your chat display name"
+        maxLength={10}
+        showCount
+        defaultValue={chatDisplayName}
+      />
+      <Button disabled={!saveEnabled} onClick={handleNameChange}>
+        Change name
+      </Button>
+    </div>
+  );
 }

web/components/stores/ClientConfigStore.tsx

@@ -12,7 +12,7 @@ import appStateModel, {
   AppStateOptions,
   makeEmptyAppState,
 } from './application-state';
-import { setLocalStorage, getLocalStorage } from '../../utils/helpers';
+import { setLocalStorage, getLocalStorage } from '../../utils/localStorage';
 import {
   ConnectedClientInfoEvent,
   MessageType,
@@ -23,6 +23,7 @@ import {
 import handleChatMessage from './eventhandlers/handleChatMessage';
 import handleConnectedClientInfoMessage from './eventhandlers/connected-client-info-handler';
 import ServerStatusService from '../../services/status-service';
+import handleNameChangeEvent from './eventhandlers/handleNameChangeEvent';
 
 const SERVER_STATUS_POLL_DURATION = 5000;
 const ACCESS_TOKEN_KEY = 'accessToken';
@@ -207,6 +208,9 @@ export function ClientConfigStore() {
       case MessageType.CHAT:
         handleChatMessage(message as ChatEvent, chatMessages, setChatMessages);
         break;
+      case MessageType.NAME_CHANGE:
+        handleNameChangeEvent(message as ChatEvent, chatMessages, setChatMessages);
+        break;
       default:
         console.error('Unknown socket message type: ', message.type);
     }

web/components/stores/eventhandlers/handleNameChangeEvent.tsx

@@ -0,0 +1,11 @@
+import { ChatMessage } from '../../../interfaces/chat-message.model';
+import { ChatEvent } from '../../../interfaces/socket-events';
+
+export default function handleNameChangeEvent(
+  message: ChatEvent,
+  messages: ChatMessage[],
+  setChatMessages,
+) {
+  const updatedMessages = [...messages, message];
+  setChatMessages(updatedMessages);
+}

web/components/video/OwncastPlayer.tsx

@@ -3,7 +3,7 @@ import { useRecoilState } from 'recoil';
 import VideoJS from './player';
 import ViewerPing from './viewer-ping';
 import VideoPoster from './VideoPoster';
-import { getLocalStorage, setLocalStorage } from '../../utils/helpers';
+import { getLocalStorage, setLocalStorage } from '../../utils/localStorage';
 import { isVideoPlayingAtom } from '../stores/ClientConfigStore';
 
 const PLAYER_VOLUME = 'owncast_volume';