separate out message relate utils, create message component

webroot/js/chat/message.js

@@ -3,50 +3,48 @@ import htm from 'https://unpkg.com/htm?module';
 // Initialize htm with Preact
 const html = htm.bind(h);
 
-import {messageBubbleColorForString } from '../utils/user-colors.js';
+import { messageBubbleColorForString } from '../utils/user-colors.js';
+import { formatMessageText } from '../utils/chat.js';
+import { generateAvatar } from '../utils.js';
+import SOCKET_MESSAGE_TYPES from './chat/socket-message-types.js';
 
 export default class Message extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      displayForm: false,
-    };
-
-    this.handleKeydown = this.handleKeydown.bind(this);
-    this.handleDisplayForm = this.handleDisplayForm.bind(this);
-    this.handleHideForm = this.handleHideForm.bind(this);
-    this.handleUpdateUsername = this.handleUpdateUsername.bind(this);
-  }
-
-
-
   render(props) {
-    const { message, type } = props;
-    const { image, author, text } = message;
-
-    const styles = {
-      info: {
-        display: displayForm || narrowSpace ? 'none' : 'flex',
-      },
-      form: {
-        display: displayForm ? 'flex' : 'none',
-      },
-    };
-
-    return (
-      html`
-        <div class="message flex">
-          <div class="message-avatar rounded-full flex items-center justify-center" v-bind:style="{ backgroundColor: message.userColor() }">
-            <img
-              v-bind:src="message.image"
-            />
-          </div>
-          <div class="message-content">
-            <p class="message-author text-white font-bold">{{ message.author }}</p>
-            <p class="message-text text-gray-400 font-thin " v-html="message.formatText()"></p>
+    const { message } = props;
+    const { type } = message;
+
+    if (type === SOCKET_MESSAGE_TYPES.CHAT) {
+      const { image, author, body, type } = message;
+      const formattedMessage = formatMessageText(body);
+      const avatar = image || generateAvatar(author);
+      const avatarBgColor = { backgroundColor: messageBubbleColorForString(author) };
+      return (
+        html`
+          <div class="message flex">
+            <div
+              class="message-avatar rounded-full flex items-center justify-center"
+              style=${avatarBgColor}
+            >
+              <img src=${avatar} />
+            </div>
+            <div class="message-content">
+              <p class="message-author text-white font-bold">${author}</p>
+              <p class="message-text text-gray-400 font-thin">${formattedMessage}</p>
+            </div>
+        </div>
+      `);
+    } else if (type === SOCKET_MESSAGE_TYPES.NAME_CHANGE) {
+      const { oldName, newName, image } = message;
+      return (
+        html`
+          <div class="message flex">
+            <img class="mr-2" src=${image} />
+            <div class="text-white text-center">
+              <span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
+            </div>
           </div>
-      </div>
-    `);
+        `
+      )
+    }
   }
 }

webroot/js/utils/chat.js

@@ -5,3 +5,31 @@ export const KEY_CHAT_FIRST_MESSAGE_SENT = 'owncast_first_message_sent';
 export const CHAT_INITIAL_PLACEHOLDER_TEXT = 'Type here to chat, no account necessary.';
 export const CHAT_PLACEHOLDER_TEXT = 'Message';
 export const CHAT_PLACEHOLDER_OFFLINE = 'Chat is offline.';
+
+export function formatMessageText(message) {
+  showdown.setFlavor('github');
+  var markdownToHTML = new showdown.Converter({
+    emoji: true,
+    openLinksInNewWindow: true,
+    tables: false,
+    simplifiedAutoLink: false,
+    literalMidWordUnderscores: true,
+    strikethrough: true,
+    ghMentions: false,
+  }).makeHtml(this.body);
+  const linked = autoLink(markdownToHTML, {
+    embed: true,
+    removeHTTP: true,
+    linkAttr: {
+      target: '_blank'
+    }
+  });
+  const highlighted = highlightUsername(linked);
+  return addNewlines(highlighted);
+}
+
+function highlightUsername(message) {
+  const username = document.getElementById('self-message-author').value;
+  const pattern = new RegExp('@?' + username.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi');
+  return message.replace(pattern, '<span class="highlighted">$&</span>');
+}

webroot/standalone-chat.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <script src="//unpkg.com/showdown/dist/showdown.min.js"></script>
 
   </head>