Add support for overLayImage

package.json

@@ -15,8 +15,8 @@
 	"author": "",
 	"license": "GPL-3.0",
 	"devDependencies": {
-		"@alt1/font-loader": "^1.0.0-alpha.2",
-		"@alt1/imagedata-loader": "^1.0.0-alpha.2",
+		"@alt1/font-loader": "^1.0.0-alpha.6",
+		"@alt1/imagedata-loader": "^1.0.0-alpha.6",
 		"@alt1/webpack": "^1.0.0-alpha.5",
 		"@types/autobind-decorator": "^2.1.0",
 		"@types/classnames": "^2.2.11",

src/appframe/alt1api.ts

@@ -2,6 +2,7 @@
 import type * as alt1types from "alt1";
 import { ipcRenderer } from "electron";
 import { FlatImageData, SyncResponse, OverlayCommand, RsClientState } from "../shared";
+import { decodeImageString } from "alt1";
 
 let warningsTriggered: string[] = [];
 function warn(key: string, message: string) {
@@ -141,8 +142,25 @@ var alt1api: Partial<typeof alt1> = {
 		return alt1.overLayTextEx(text, color, size, x, y, time, "", false, true);
 	},
 	overLayImage(x, y, imgstr, imgwidth, time) {
-		warn("overlayimg", "alt1.overLayImage is not implemented");
-		return false;
+		const raw = atob(imgstr);
+		var height = raw.length / 4 / imgwidth;
+		if (!Number.isInteger(height)) {
+			height = Math.floor(height);
+			if (!Number.isInteger(height)) {
+				throw new Error("Invalid data or width: height not an int");
+			}
+		}
+		var sprite = new ImageData(imgwidth, height);
+		decodeImageString(imgstr, sprite, 0, 0, imgwidth, height);
+		let flatImageData: FlatImageData = {
+			data: sprite.data,
+			width: imgwidth,
+			height: height,
+		};
+		if (sprite.height > 0 && sprite.width > 0) {
+			queueOverlayCommand({ command: "draw", time, action: { type: "sprite", x, y, sprite: flatImageData } });
+		}
+		return true;
 	},
 	overLaySetGroup(groupid: string) { queueOverlayCommand({ command: "setgroup", groupid }); },
 	overLaySetGroupZIndex(groupid: string, zindex: number) { queueOverlayCommand({ command: "setgroupzindex", groupid, zindex }); },

src/lib.ts

@@ -38,7 +38,7 @@ export function relPath(relpath: string) {
 
 export function patchImageDataShow() {
 	if (process.env.NODE_ENV === "development") {
-		(ImageData.prototype.show as any) = function (this: ImageData) { showImageData(this); }
+		(ImageData.prototype.show as any) = function(this: ImageData) { showImageData(this); }
 	}
 }
 

src/overlayframe/index.tsx

@@ -154,7 +154,11 @@ function redraw(now: number, force = false) {
 					ctx.textBaseline = act.center ? "middle" : "top";
 					ctx.fillText(act.text, act.x, act.y);
 				} else if (act.type == "sprite") {
-					//TODO
+					// Check if width and height are valid positive numbers before drawing
+					if (act.sprite.width > 0 && act.sprite.height > 0) {
+						const imageData = new ImageData(act.sprite.data, act.sprite.width, act.sprite.height);
+						ctx.putImageData(imageData, act.x, act.y);
+					}
 				}
 			}
 		}

src/settings.ts

@@ -97,8 +97,8 @@ class ManagedSettings extends TypedEmitter<SettingsEvents> {
 	}
 
 
-	set captureMode(mode: CaptureMode) { 
-		if (!Object.keys(checkSettings.props.captureMode.opts).includes(mode)) { 
+	set captureMode(mode: CaptureMode) {
+		if (!Object.keys(checkSettings.props.captureMode.opts).includes(mode)) {
 			console.log("unknown capture mode", mode);
 			return;
 		}
@@ -114,4 +114,4 @@ class ManagedSettings extends TypedEmitter<SettingsEvents> {
 	}
 }
 
-export var settings = new ManagedSettings(configFile);
+export var settings = new ManagedSettings(configFile);