FIx ban and timeout messages and add chat history

src/assets/messageParser.ts

@@ -1,5 +1,6 @@
 import type { Badge, ParsedMessage } from './types'
-import { getBadgesFromMessage } from './badges'
+import { getBadges, getBadgesFromMessage } from './badges'
+import type { StreamMessage } from '@/types'
 
 export function parseMessage(messageData: any, allBadges: Badge[]): ParsedMessage {
   const message = JSON.parse(messageData)
@@ -50,6 +51,20 @@ export function parseMessage(messageData: any, allBadges: Badge[]): ParsedMessag
         }
       }
     }
+    case 'CLEARCHAT': {
+      let duration = message.tags['@ban-duration']
+      if (!message.tags['@ban-duration']) {
+        duration = 0
+      }
+
+      return {
+        type: 'CLEARCHAT',
+        data: {
+          username: message.message.replace(/(\r\n|\n|\r)/gm, ""),
+          duration
+        }
+      }
+    }
     // Add more cases for other message types here
     default: {
       return {
@@ -59,3 +74,25 @@ export function parseMessage(messageData: any, allBadges: Badge[]): ParsedMessag
     }
   }
 }
+
+export function parseChatHistory(messages: StreamMessage[], badges: Badge[]) {
+  let parsedMessages = []
+
+  for (let i = 0; i < messages.length; i++) {
+    const message = messages[i]
+    
+    const data: ParsedMessage = {
+      type: 'PRIVMSG',
+      data: {
+        message: message.message,
+        username: message.username,
+        color: message.color,
+        badges: getBadges(badges, message.badges)
+      }
+    }
+
+    parsedMessages.push(data)
+  }
+
+  return parsedMessages
+}

src/components/TwitchChat.vue

@@ -3,7 +3,7 @@ import { ref, inject } from 'vue'
 
 import BadgeVue from './ChatBadge.vue'
 import { getBadges } from '@/assets/badges'
-import { parseMessage } from '@/assets/messageParser'
+import { parseMessage, parseChatHistory } from '@/assets/messageParser'
 import { getEndpoint } from '@/mixins'
 
 import type { Badge, ParsedMessage } from '@/assets/types'
@@ -42,6 +42,7 @@ export default {
     }
   },
   async mounted() {
+
     if (!this.$props.isVod) {
       const chatStatusMessage = this.$refs.initConnectingStatus as Element
       this.ws!.onmessage = (message) => {
@@ -58,6 +59,12 @@ export default {
         this.ws!.send('JOIN ' + this.$props.channelName?.toLowerCase())
       }
     }
+
+    await getEndpoint(`api/chat/${this.$props.channelName}/history`)
+    .then((data) => {
+      this.messages = parseChatHistory(data, this.badges)
+    })
+
   },
   beforeUnmount() {
     this.ws?.close()
@@ -182,6 +189,11 @@ export default {
           <p> {{ $t("chat.resub", { username: message.data.username, duration : message.data.months }) }} </p>
         </div>
 
+        <div v-else-if="message.type === 'CLEARCHAT'" class="text-white inline-flex p-1 rounded-md">
+          <p v-if="!message.data.duration" class="text-sm text-gray-500 italic"> {{ $t("chat.banned", { username: message.data.username }) }} </p>
+          <p v-else class="text-sm text-gray-500 italic"> {{ $t("chat.timeout", { username: message.data.username, duration: message.data.duration }) }} </p>
+        </div>
+
         <div v-else class="text-white">
           {{ message }}
         </div>

src/locales

@@ -1 +1 @@
-Subproject commit 1d5cb5d2208ad9b9134ab970d68033ccf4e9ef27
+Subproject commit 10d7cc027c65e925ff943c566155496c65789c54

src/types/Chat.ts

@@ -16,3 +16,15 @@ export interface Metadata {
   message: string
   tags: { [k: string]: any }
 }
+
+export interface StreamMessageBadge {
+	version: string
+	setId: string
+}
+
+export interface StreamMessage {
+	message: string
+	username: string
+	color:    string
+	badges: StreamMessageBadge[]
+}