Adjust emote size and implement load delay

ChatTwo/Http/Processing.cs

@@ -63,7 +63,7 @@ public class Processing
                 // The emote name should be safe, it is checked against a list from BTTV.
                 // Still sanitizing it for the extra safety.
                 if (image is { Failed: false })
-                    return $"<span style\"height: 1em\"><img src=\"/emote/{Sanitizer.Sanitize(emotePayload.Code)}\"></span>";
+                    return $"<span style=\"zoom:calc(16 * 4 / 3 / 40 * 1.4)\"><img class=\"emote-icon emote-icon-hq\" src=\"/emote/{Sanitizer.Sanitize(emotePayload.Code)}\"></span>";
             }
 
             var colour = text.Foreground;

ChatTwo/Http/RouteController.cs

@@ -100,13 +100,21 @@ public class RouteController
 
 
         var emote = EmoteCache.GetEmote(name);
-        if (emote is not { IsLoaded: true })
+        if (emote is null)
         {
             ctx.Response.StatusCode = 400;
             await ctx.Response.Send("Emote not valid.");
             return;
         }
 
+        // Wait for the emote to be loaded a maximum of 5 times
+        var timeout = 5;
+        while (!emote.IsLoaded && timeout > 0)
+        {
+            timeout--;
+            await Task.Delay(25);
+        }
+
         ctx.Response.Headers.Add("Cache-Control", "max-age=86400");
         await ctx.Response.Send(emote.RawData);
     }

ChatTwo/Http/static/start.js

@@ -180,12 +180,17 @@ async function AddGfdStylesheet(gfdPath, texPath) {
     const gfdPromise = LoadGfd(gfdPath);
     const texUrl = URL.createObjectURL(await texPromise);
     const gfd = await gfdPromise;
+    let width = 0;
+    let height = 0;
 
     let stylesheets = [];
     for (const entry of gfd) {
         if (entry.width * entry.height <= 0)
             continue;
 
+        width = entry.width;
+        height = entry.height;
+
         if (entry.redirect !== 0) {
             stylesheets[entry.redirect][0].push(entry.id);
             continue;
@@ -210,7 +215,7 @@ async function AddGfdStylesheet(gfdPath, texPath) {
         ];
     }
 
-    let stylesheet = ".gfd-icon::before { content: ''; display: inline-block; overflow: hidden; vertical-align: top; height:0; }";
+    let stylesheet = ".gfd-icon::before { content: ''; display: inline-block; overflow: hidden; vertical-align: top; height:0; }\n";
     for (const entry of stylesheets) {
         if (!entry)
             continue;
@@ -218,6 +223,8 @@ async function AddGfdStylesheet(gfdPath, texPath) {
         stylesheet += `\n${entry[0].map(x => `.gfd-icon.gfd-icon-${x}::before`).join(', ')}{${entry[1]};}`;
         stylesheet += `\n${entry[0].map(x => `.gfd-icon.gfd-icon-hq-${x}::before`).join(', ')}{${entry[2]};}`;
     }
+    stylesheet += "\n.emote-icon { content: ''; display: inline-block; overflow: hidden; vertical-align: top; }";
+    stylesheet += `\n.emote-icon.emote-icon-hq {width: ${width * 2}px; height: ${height * 2}px; margin-bottom: -40px}`;
 
     const styleNode = document.createElement("style");
     styleNode.type = "text/css";