Show missing replies in the viewer & optimize message object representation (app)

app/Resources/Viewer/scripts/discord.js

@@ -171,7 +171,7 @@ const DISCORD = (function() {
 					return DOM.getHumanReadableTime(value);
 				}
 				else if (property === "contents") {
-					return value == null || value.length === 0 ? "" : processMessageContents(value);
+					return value && value.length > 0 ? processMessageContents(value) : "";
 				}
 				else if (property === "embeds") {
 					if (!value) {
@@ -225,8 +225,8 @@ const DISCORD = (function() {
 					return STATE.hasActiveFilter ? "<span class='info jump' data-jump='" + value + "'>Jump to message</span>" : "";
 				}
 				else if (property === "reply") {
-					if (value === null) {
-						return "";
+					if (!value) {
+						return value === null ? "<span class='reply-contents reply-missing'>(replies to an unknown message)</span>" : "";
 					}
 					
 					const user = "<span class='reply-username' title='#" + (value.user.tag ? value.user.tag : "????") + "'>" + value.user.name + "</span>";
@@ -236,7 +236,7 @@ const DISCORD = (function() {
 					return "<span class='jump' data-jump='" + value.id + "'>Jump to reply</span><span class='user'>" + avatar + user + "</span>" + contents;
 				}
 				else if (property === "reactions"){
-					if (value === null){
+					if (!value){
 						return "";
 					}
 					

app/Resources/Viewer/scripts/state.js

@@ -206,28 +206,47 @@ const STATE = (function() {
 			const user = getUser(message.u);
 			const avatar = user.avatar ? { id: getUserId(message.u), path: user.avatar } : null;
 			
-			const reply = "r" in message ? getMessageById(message.r) : null;
-			const replyUser = reply ? getUser(reply.u) : null;
-			const replyAvatar = replyUser && replyUser.avatar ? { id: getUserId(reply.u), path: replyUser.avatar } : null;
-			const replyObj = reply ? {
-				"id": message.r,
-				"user": replyUser,
-				"avatar": replyAvatar,
-				"contents": reply.m
-			} : null;
-			
-			return {
+			const obj = {
 				user,
 				avatar,
 				"timestamp": message.t,
-				"contents": ("m" in message) ? message.m : null,
-				"embeds": ("e" in message) ? message.e.map(embed => JSON.parse(embed)) : [],
-				"attachments": ("a" in message) ? message.a : [],
-				"edit": ("te" in message) ? message.te : null,
 				"jump": key,
-				"reply": replyObj,
-				"reactions": ("re" in message) ? message.re : null
 			};
+			
+			if ("m" in message) {
+				obj["contents"] = message.m;
+			}
+			
+			if ("e" in message) {
+				obj["embeds"] = message.e.map(embed => JSON.parse(embed));
+			}
+			
+			if ("a" in message) {
+				obj["attachments"] = message.a;
+			}
+			
+			if ("te" in message) {
+				obj["edit"] = message.te;
+			}
+			
+			if ("r" in message) {
+				const replyMessage = getMessageById(message.r);
+				const replyUser = replyMessage ? getUser(replyMessage.u) : null;
+				const replyAvatar = replyUser && replyUser.avatar ? { id: getUserId(replyMessage.u), path: replyUser.avatar } : null;
+				
+				obj["reply"] = replyMessage ? {
+					"id": message.r,
+					"user": replyUser,
+					"avatar": replyAvatar,
+					"contents": replyMessage.m
+				} : null;
+			}
+			
+			if ("re" in message) {
+				obj["reactions"] = message.re;
+			}
+			
+			return obj;
 		});
 	};
 	

app/Resources/Viewer/styles/messages.css

@@ -221,6 +221,10 @@
   padding: 1px 2px;
 }
 
+.reply-missing {
+  color: rgba(255, 255, 255, 0.55);
+}
+
 .reactions {
   margin-top: 4px;
 }