Some emotes

tbot/web/app.py

@@ -75,6 +75,7 @@ def App():
             (r'/api/twitch/channels/([0-9]+)/check-extra-auth', handlers.api.twitch.check_extra_auth.Handler),
             (r'/api/twitch/channels/([0-9]+)/commercial', handlers.api.twitch.commercial.Handler),
             (r'/api/twitch/channels/([0-9]+)/self-subs', handlers.api.twitch.self_subs.Handler),
+            (r'/api/twitch/channels/([0-9]+)/emotes', handlers.api.twitch.emotes.EmotesHandler),
             (r'/api/live-chat/([0-9]+)', handlers.api.live_chat.LiveChatHandler),
 
             (r'/api/rtmp-auth', handlers.api.rtmp_auth.Handler),

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

@@ -0,0 +1,19 @@
+from tbot.utils.twitch import twitch_request
+from tbot.web.handlers.api.base import Api_handler
+
+
+class EmotesHandler(Api_handler):
+    async def get(self, channel_id):
+        emotes = await twitch_request(
+            self.ahttp, url='https://api.twitch.tv/helix/chat/emotes/global'
+        )
+        channel_emotes = await twitch_request(
+            self.ahttp,
+            url=f'https://api.twitch.tv/helix/chat/emotes?broadcaster_id={channel_id}',
+        )
+        self.write_object(
+            {
+                'global_emotes': emotes['data'],
+                'channel_emotes': channel_emotes['data'],
+            }
+        )

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

@@ -6,8 +6,7 @@ import "./chat.scss";
 
 export function Chat({ channelId }) {
   const { lastJsonMessage } = useWebSocket(`/api/live-chat/${channelId}`, {
-    onOpen: () => console.log("opened"),
-    shouldReconnect: (closeEvent) => true,
+    shouldReconnect: () => true,
   });
   const [messageHistory, setMessageHistory] = useState([]);
   const messagesEndRef = useRef(null);

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

@@ -1,5 +1,11 @@
 import { useState, useEffect, useCallback } from "react";
-import { EmoteFetcher, EmoteParser } from "@mkody/twitch-emoticons";
+import {
+  EmoteFetcher,
+  EmoteParser,
+  TwitchEmote,
+} from "@mkody/twitch-emoticons";
+
+import api from "tbot/twitch/api";
 
 const fetcher = new EmoteFetcher();
 const parser = new EmoteParser(fetcher, {
@@ -12,21 +18,39 @@ export function useParseEmotes({ channelId }) {
   const [loadEmotes, setLoadEmotes] = useState(1);
 
   useEffect(() => {
+    if (loadEmotes > 5) return;
     Promise.all([
+      api.get(`/api/twitch/channels/${channelId}/emotes`),
       fetcher.fetchBTTVEmotes(),
       fetcher.fetchBTTVEmotes(channelId),
       fetcher.fetchSevenTVEmotes(),
       fetcher.fetchSevenTVEmotes(channelId),
       fetcher.fetchFFZEmotes(),
       fetcher.fetchFFZEmotes(channelId),
     ])
-      .then(() => {
+      .then((data) => {
+        const emotes = [];
+        for (const emote of data[0].data.global_emotes) {
+          emote.formats = emote.format;
+          emote.code = emote.name;
+          emotes.push(
+            new TwitchEmote(fetcher.channels.get(channelId), emote.id, emote)
+          );
+        }
+        for (const emote of data[0].data.channel_emotes) {
+          emote.formats = emote.format;
+          emote.code = emote.name;
+          emotes.push(
+            new TwitchEmote(fetcher.channels.get(channelId), emote.id, emote)
+          );
+        }
+        fetcher.fromObject(emotes.map((emote) => emote.toObject()));
         setLoading(false);
       })
       .catch((err) => {
         console.error("Error loading emotes...");
         console.error(err);
-        setLoadEmotes((prev) => prev + 1);
+        setTimeout(() => setLoadEmotes((prev) => prev + 1), 500);
       });
   }, [loadEmotes]);