Merge pull request Programmer-Network#9 from petitoff/master

feat: twitch badges
Webby1015 · Oct 23, 2023 · 7c03108 · 7c03108
2 parents 0131fd3 + ac90407
commit 7c03108
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 36 deletions.
diff --git a/api/server.ts b/api/server.ts
@@ -1,7 +1,7 @@
 import fastify, {
-    FastifyInstance,
-    FastifyReply,
-    FastifyRequest,
+  FastifyInstance,
+  FastifyReply,
+  FastifyRequest,
 } from "fastify";
 import cors from "@fastify/cors";
 import fs from "fs";
@@ -14,7 +14,7 @@ export interface IMessage {
     content: string;
     emojis: string[];
     author: string;
-    badge: string;
+    badges: string[];
     authorColor: string;
 }
 
@@ -24,7 +24,7 @@ const savedMessages: IMessage[] = [];
 const userColors: { [key: string]: string } = {};
 
 server.register(cors, {
-    origin: true,
+  origin: true,
 });
 
 server.post(
@@ -42,7 +42,7 @@ server.post(
                 content: "Chat reload",
                 author: "System",
                 emojis: [],
-                badge: "",
+                badges: [],
                 authorColor: "text-indigo-500",
             });
         }
@@ -61,36 +61,36 @@ server.post(
 );
 
 server.get("/api/messages", async (_: FastifyRequest, reply: FastifyReply) => {
-    reply.send(messages);
+  reply.send(messages);
 });
 
 server.post(
-    "/api/save-message",
-    async (request: FastifyRequest, reply: FastifyReply) => {
-        const message = request.body as IMessage;
-        savedMessages.push(message);
+  "/api/save-message",
+  async (request: FastifyRequest, reply: FastifyReply) => {
+    const message = request.body as IMessage;
+    savedMessages.push(message);
 
-        fs.writeFile("messages.json", JSON.stringify(savedMessages), (err) => {
-            if (err) {
-                console.log(err);
-            }
-        });
+    fs.writeFile("messages.json", JSON.stringify(savedMessages), (err) => {
+      if (err) {
+        console.log(err);
+      }
+    });
 
-        reply.send(savedMessages);
-    }
+    reply.send(savedMessages);
+  }
 );
 
 const start = async () => {
-    try {
-        await server.listen({
-            port: 3000,
-            host: "::",
-        });
-        server.log.info(`Server listening on http://localhost:3000/`);
-    } catch (err) {
-        server.log.error(err);
-        process.exit(1);
-    }
+  try {
+    await server.listen({
+      port: 3000,
+      host: "::",
+    });
+    server.log.info(`Server listening on http://localhost:3000/`);
+  } catch (err) {
+    server.log.error(err);
+    process.exit(1);
+  }
 };
 
 start();
diff --git a/chat/src/Components/Message/Message.tsx b/chat/src/Components/Message/Message.tsx
@@ -11,7 +11,7 @@ export const Message: FC<{
     onAction: (action: string, message: unknown) => void;
     focusedMessage: IMessage | null;
 }> = ({ message, focusedMessage, onMessageClick, onAction, filter }) => {
-    const { content, author } = message;
+    const { content, author, badges } = message;
     const [hoveredId, setHoveredId] = useState<string>("");
 
     const handleSaveMessage = (message: IMessage) => {
@@ -59,6 +59,16 @@ export const Message: FC<{
                         }
                     )}
                 >
+                    <div className="flex gap-1 items-center">
+                        {badges?.map((badge, index) => (
+                            <img
+                                key={index}
+                                className="w-7 h-7"
+                                src={badge}
+                                alt={badge}
+                            />
+                        ))}
+                    </div>
                     {author}
                     {isHovered && (
                         <div className="flex gap-1 items-center">

diff --git a/chat/src/types.ts b/chat/src/types.ts
@@ -4,6 +4,6 @@ export interface IMessage {
     content: string;
     emojis: string[];
     author: string;
-    badge: string;
+    badges: string[];
     authorColor: string;
 }
diff --git a/src/content/Chat.ts b/src/content/Chat.ts
@@ -53,7 +53,7 @@ export default class ChatLoader {
                         content,
                         emojis: this.domUtils.getMessageEmojis(chatNode),
                         author: this.domUtils.getMessageAuthor(chatNode),
-                        badge: this.domUtils.getMessageBadges(chatNode),
+                        badges: this.domUtils.getMessageBadges(chatNode),
                     });
                 });
             });

diff --git a/src/content/types.ts b/src/content/types.ts
@@ -4,7 +4,7 @@ export interface IDOMUtils {
     getMessageText(node: Element): string;
     getMessageEmojis(node: Element): string[];
     getMessageAuthor(node: Element): string;
-    getMessageBadges(node: Element): string;
+    getMessageBadges(node: Element): string[];
 }
 
 export interface IDateTimeUtils {
@@ -40,5 +40,5 @@ export interface IMessage {
     content: string;
     emojis: string[];
     author: string;
-    badge: string;
+    badges: string[];
 }
diff --git a/src/content/utils/DOMUtils/index.ts b/src/content/utils/DOMUtils/index.ts
@@ -91,11 +91,16 @@ export default class DOMUtils {
 
   getMessageBadges(node: Element) {
     if (!this.selectors.messageAuthorBadge) {
-      return "";
+      return [];
     }
 
     return (
-      node.querySelector(this.selectors.messageAuthorBadge) as HTMLImageElement
-    )?.src;
+      Array.from(
+        node.querySelectorAll(
+          this.selectors.messageAuthorBadge
+        ) as NodeListOf<HTMLImageElement>
+      ).map((img) => img.src)
+
+    )
   }
 }