Added emotes, twitch emotes to come

package.json

@@ -34,6 +34,7 @@
     "webpack-cli": "^4.8.0"
   },
   "dependencies": {
+    "@mkody/twitch-emoticons": "^2.8.9",
     "axios": "^0.21.3",
     "downshift": "^6.1.7",
     "moment": "^2.29.1",
@@ -42,6 +43,7 @@
     "react-dom": "^17.0.2",
     "react-router-config": "^5.1.1",
     "react-router-dom": "^5.3.0",
-    "react-use-websocket": "^3.0.0"
+    "react-use-websocket": "^3.0.0",
+    "sanitize-html": "^2.13.1"
   }
 }

tbot/twitch_bot/tasks/chatlog.py

@@ -19,6 +19,7 @@ async def message(nick, target, message, **kwargs):
             kwargs['id'],
             kwargs['display-name'],
             kwargs['color'],
+            kwargs['emotes'],
         )
     )
 
@@ -33,7 +34,16 @@ async def message(nick, target, message, **kwargs):
 
 
 async def save(
-    type_, channel, channel_id, user, user_id, message, msg_id, display_name, user_color
+    type_,
+    channel,
+    channel_id,
+    user,
+    user_id,
+    message,
+    msg_id,
+    display_name,
+    user_color,
+    emotes,
 ):
     try:
         now = datetime.utcnow()
@@ -116,7 +126,8 @@ async def save(
                     'user': display_name,
                     'message': message,
                     'created_at': datetime.now(tz=timezone.utc).isoformat(),
-                    'color': user_color,
+                    'user_color': user_color,
+                    'emotes': emotes,
                 },
             )
     except Exception:

tbot/twitch_bot/tasks/youtube_chat.py

@@ -123,7 +123,7 @@ async def parse_chatmessages(channel_id: str, live_chat_id: str, chat: dict):
                 'user': m['authorDetails']['displayName'],
                 'message': m['snippet']['displayMessage'],
                 'created_at': m['snippet']['publishedAt'],
-                'color': '',
+                'user_color': '',
             },
         )
 

tbot/web/handlers/api/twitch/chatlog.py

@@ -1,8 +1,10 @@
-from tornado import web
-from ..base import Api_handler
 from dateutil.parser import parse
+from tornado import web
+
 from tbot import utils
 
+from ..base import Api_handler
+
 
 class Handler(Api_handler):
 

tbot/web/ui/live_chat/components/chat.jsx

@@ -1,21 +1,17 @@
 import React, { useState, useEffect, useRef } from "react";
-import useWebSocket, { ReadyState } from "react-use-websocket";
+import { useParseEmotes } from "./parse_emotes";
+import useWebSocket from "react-use-websocket";
+import sanitizeHtml from "sanitize-html";
 import "./chat.scss";
 
 export function Chat({ channelId }) {
-  const {
-    sendMessage,
-    sendJsonMessage,
-    lastMessage,
-    lastJsonMessage,
-    readyState,
-    getWebSocket,
-  } = useWebSocket(`/api/live-chat/${channelId}`, {
+  const { lastJsonMessage } = useWebSocket(`/api/live-chat/${channelId}`, {
     onOpen: () => console.log("opened"),
     shouldReconnect: (closeEvent) => true,
   });
   const [messageHistory, setMessageHistory] = useState([]);
   const messagesEndRef = useRef(null);
+  const { parseEmoteMessage } = useParseEmotes({ channelId });
 
   useEffect(() => {
     if (lastJsonMessage !== null) {
@@ -41,7 +37,18 @@ export function Chat({ channelId }) {
             <span className="username" style={{ color: msg.color }}>
               {msg.user}
             </span>
-            : <span className="text">{msg.message}</span>
+            :{" "}
+            <span
+              className="text"
+              dangerouslySetInnerHTML={{
+                __html: sanitizeHtml(parseEmoteMessage(msg.message), {
+                  allowedTags: ["img"],
+                  allowedAttributes: {
+                    img: ["src", "title", "class"],
+                  },
+                }),
+              }}
+            ></span>
           </div>
         ))}
         <div ref={messagesEndRef} />

tbot/web/ui/live_chat/components/chat.scss

@@ -26,7 +26,7 @@
 .message {
     padding: 2px 0;
     display: flex;
-    align-items: baseline;
+    align-items: center;
 }
 
 .username {

tbot/web/ui/live_chat/components/parse_emotes.jsx

@@ -0,0 +1,41 @@
+import { useState, useEffect, useCallback } from "react";
+import { EmoteFetcher, EmoteParser } from "@mkody/twitch-emoticons";
+
+const fetcher = new EmoteFetcher();
+const parser = new EmoteParser(fetcher, {
+  template: '<img class="emote" alt="{name}" src="{link}">',
+  match: /(\w+)+?/g,
+});
+
+export function useParseEmotes({ channelId }) {
+  const [loading, setLoading] = useState(true);
+  const [loadEmotes, setLoadEmotes] = useState(1);
+
+  useEffect(() => {
+    Promise.all([
+      fetcher.fetchBTTVEmotes(),
+      fetcher.fetchBTTVEmotes(channelId),
+      fetcher.fetchSevenTVEmotes(),
+      fetcher.fetchSevenTVEmotes(channelId),
+      fetcher.fetchFFZEmotes(),
+      fetcher.fetchFFZEmotes(channelId),
+    ])
+      .then(() => {
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error("Error loading emotes...");
+        console.error(err);
+        setLoadEmotes((prev) => prev + 1);
+      });
+  }, [loadEmotes]);
+
+  const parseEmoteMessage = useCallback((message) => {
+    if (!loading) {
+      return message;
+    }
+    return parser.parse(message);
+  }, []);
+
+  return { parseEmoteMessage, loading };
+}