diff --git a/ChatTwo/Http/Processing.cs b/ChatTwo/Http/Processing.cs
index 183dc02..75b0394 100644
--- a/ChatTwo/Http/Processing.cs
+++ b/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 $"
";
+ return $"
";
}
var colour = text.Foreground;
diff --git a/ChatTwo/Http/RouteController.cs b/ChatTwo/Http/RouteController.cs
index 8025a64..4826d01 100644
--- a/ChatTwo/Http/RouteController.cs
+++ b/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);
}
diff --git a/ChatTwo/Http/static/start.js b/ChatTwo/Http/static/start.js
index 8fde8be..25d2d79 100644
--- a/ChatTwo/Http/static/start.js
+++ b/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";