From 59129ba20aa01a11529dc116e055a8f7f30e72e1 Mon Sep 17 00:00:00 2001
From: chylex <contact@chylex.com>
Date: Sat, 4 Jun 2022 15:50:05 +0200
Subject: [PATCH] Change image alt text in viewer to indicate when images are
 loading, and when loading fails

Related to #79
---
 app/Resources/Viewer/scripts/discord.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/Resources/Viewer/scripts/discord.js b/app/Resources/Viewer/scripts/discord.js
index 0cc85d3..d282ad4 100644
--- a/app/Resources/Viewer/scripts/discord.js
+++ b/app/Resources/Viewer/scripts/discord.js
@@ -128,12 +128,12 @@ const DISCORD = (function() {
 			
 			// noinspection HtmlUnknownTarget
 			templateEmbedImage = new TEMPLATE([
-				"<a href='{url}' class='embed thumbnail'><img src='{src}' alt='(image attachment not found)'></a><br>"
+				"<a href='{url}' class='embed thumbnail'><img src='{src}' alt='(image attachment is loading...)' onerror='DISCORD.handleImageLoadError(this)'></a><br>"
 			].join(""));
 			
 			// noinspection HtmlUnknownTarget
 			templateEmbedImageWithSize = new TEMPLATE([
-				"<a href='{url}' class='embed thumbnail'><img src='{src}' width='{width}' height='{height}' alt='(image attachment not found)'></a><br>"
+				"<a href='{url}' class='embed thumbnail'><img src='{src}' width='{width}' height='{height}' alt='(image attachment is loading...)' onerror='DISCORD.handleImageLoadError(this)'></a><br>"
 			].join(""));
 			
 			// noinspection HtmlUnknownTarget
@@ -164,6 +164,12 @@ const DISCORD = (function() {
 			].join(""));
 		},
 		
+		handleImageLoadError(ele) {
+			// noinspection JSUnusedGlobalSymbols
+			ele.onerror = null;
+			ele.setAttribute("alt", "(image attachment not found)");
+		},
+		
 		isImageAttachment(attachment) {
 			const dot = attachment.url.lastIndexOf(".");
 			const ext = dot === -1 ? "" : attachment.url.substring(dot).toLowerCase();