display map thumbnail as bg again

Author: Meta Construct

.gitignore

@@ -7,6 +7,7 @@ dist
 data
 build
 resources/game-server-status/style.css
+cache
 
 # Our files
 .env
@@ -15,4 +16,4 @@ resources/game-server-status/style.css
 !*.example.json
 deploy.sh
 markov_data.txt
-metaconcord.db
+metaconcord.db

app/services/webapp/api/game-server-status.ts

@@ -3,6 +3,19 @@ import GameServer from "@/app/services/gamebridge/GameServer.js";
 import nodeHtmlToImage from "node-html-to-image";
 import path from "path";
 import pug from "pug";
+import { access, mkdir, readFile, writeFile } from "fs/promises";
+import { constants as fs_constants } from "fs";
+import mime from "mime";
+
+const cacheFolder = path.join(process.cwd(), "cache", "map-thumbnails");
+
+const imageToDataURL = async filePath => {
+	const mimeType = mime.getType(filePath);
+	if (!mimeType) throw new Error("No MIME type from path?");
+
+	const base64 = await readFile(filePath, { encoding: "base64" });
+	return `data:${mimeType};base64,${base64}`;
+};
 
 export default async (webApp: WebApp): Promise<void> => {
 	webApp.app.get("/server-status/:id{/:bruh}", async (req, res) => {
@@ -25,11 +38,56 @@ export default async (webApp: WebApp): Promise<void> => {
 			!req.headers.accept ||
 			req.headers["user-agent"]?.includes("+https://discordapp.com");
 
+		// #region Map Thumbnail
+		const mapThumbnail = server.status.mapThumbnail;
+		const workshopMap = server.workshopMap;
+		let thumbFilepath: string | undefined = undefined;
+		if (mapThumbnail?.match(/^https?:\/\//) && workshopMap) {
+			await access(cacheFolder, fs_constants.F_OK).catch(() =>
+				mkdir(cacheFolder, { recursive: true })
+			);
+
+			const _thumbFilepath = path.join(cacheFolder, `${workshopMap.id}`);
+			let hasFile = true;
+			// have to assume these are the only extensions we expect...
+			for (const ext of [".webp", ".jpg", ".jpeg", ".png", ".gif"]) {
+				await access(_thumbFilepath + ext, fs_constants.F_OK).catch(() => {
+					hasFile = false;
+				});
+				if (hasFile) {
+					thumbFilepath = _thumbFilepath + ext;
+					break;
+				}
+			}
+			if (!thumbFilepath) {
+				try {
+					const response = await fetch(mapThumbnail);
+					if (response.ok) {
+						const contentType = response.headers.get("content-type");
+						if (!contentType) throw new Error("No content-type");
+
+						const ext = mime.getExtension(contentType);
+						if (!ext) throw new Error("No extension");
+
+						thumbFilepath = [_thumbFilepath, ext.toLowerCase()].join(".");
+
+						const buffer = Buffer.from(await response.arrayBuffer());
+						await writeFile(thumbFilepath, buffer);
+					}
+				} catch (err) {}
+			}
+		} else {
+			thumbFilepath = mapThumbnail as string;
+		}
+		const mapThumbnail64 = await imageToDataURL(thumbFilepath);
+		// #endregion
+
 		const html = pug.renderFile(
 			path.join(process.cwd(), "resources/game-server-status/view.pug"),
 			{
 				server,
 				image: !!discordBot,
+				mapThumbnail64,
 			}
 		);
 		if (discordBot) {

package.json

@@ -40,6 +40,7 @@
 		"graphql-request": "^5.0.0",
 		"irc-upd": "^0.11.0",
 		"jsonwebtoken": "^9.0.0",
+		"mime": "^4.1.0",
 		"node-html-to-image": "^5.0.0",
 		"node-schedule": "^2.1.1",
 		"node-ssh": "^13.0.0",

resources/game-server-status/view.pug

@@ -17,11 +17,11 @@ html(lang="en")
 					justify-content: center;
 				}
 	body
-		main(style=`background-image: url(${mapThumbnail})`)
+		main(style=`background-image: url(${mapThumbnail64})`)
 			ul.playerlist
 				each player in server.status.players
 					li.player(class={ 'is-admin': player.isAdmin, 'is-banned': player.isBanned, 'is-afk': player.isAfk, 'is-pirate': player.isPirate })
 						a(title="View profile", href=player.accountId ? `https://steamcommunity.com/profiles/[U:1:${player.accountId}]` : "#", target="_blank")
 							if (player.avatar)
 								img.avatar(src=player.avatar)
-							span.nick #{player.nick}
+							span.nick #{player.nick}

yarn.lock

@@ -3551,6 +3551,11 @@ mime-types@^3.0.0, mime-types@^3.0.1:
   dependencies:
     mime-db "^1.54.0"
 
+mime@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-4.1.0.tgz#ec55df7aa21832a36d44f0bbee5c04639b27802f"
+  integrity sha512-X5ju04+cAzsojXKes0B/S4tcYtFAJ6tTMuSPBEn9CPGlrWr8Fiw7qYeLT0XyH80HSoAoqWCaz+MWKh22P7G1cw==
+
 mimic-response@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"