From af3f9146602407694926174db659210a35804c9a Mon Sep 17 00:00:00 2001
From: chylex <contact@chylex.com>
Date: Sat, 3 Apr 2021 00:07:29 +0200
Subject: [PATCH] Tweak reaction saving and rendering

---
 reserve.txt                    | 19 ++++++++---------
 src/tracker/savefile.js        | 37 +++++++++++++++++++++-------------
 src/viewer/scripts/discord.js  | 27 +++++++++++++------------
 src/viewer/scripts/state.js    |  2 +-
 src/viewer/styles/messages.css | 27 +++++++++----------------
 5 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/reserve.txt b/reserve.txt
index b0cca23..326e0f0 100644
--- a/reserve.txt
+++ b/reserve.txt
@@ -27,9 +27,13 @@ f
 e
 a
 t
+te
 d
 r
-te
+re
+c
+n
+an
 tag
 avatar
 author
@@ -52,6 +56,11 @@ attachments
 title
 description
 reply
+reactions
+emoji
+count
+animated
+ext
 toDate
 memoizedProps
 props
@@ -61,11 +70,3 @@ messages
 msSaveBlob
 messageReference
 message_id
-reactions
-emoji
-animated
-re
-en
-eid
-c
-ext
diff --git a/src/tracker/savefile.js b/src/tracker/savefile.js
index ee6f9a1..b5936b6 100644
--- a/src/tracker/savefile.js
+++ b/src/tracker/savefile.js
@@ -42,8 +42,8 @@
  *         u: <user index of the sender>,
  *         t: <message timestamp>,
  *         m: <message content>, // only present if not empty
- *         f: <message flags>,   // only present if edited in which case it equals 1, deprecated (use 'te' instead),
- *         te: <edit timestamp>, // only present if edited,
+ *         f: <message flags>,   // only present if edited in which case it equals 1, deprecated (use 'te' instead)
+ *         te: <edit timestamp>, // only present if edited
  *         e: [ // omit for no embeds
  *           {
  *             url: <embed url>,
@@ -57,13 +57,14 @@
  *             url: <attachment url>
  *           }, ...
  *         ],
- *         r: <reply message id> // only present if referencing another message (reply),
- *         re: [ // reactions
+ *         r: <reply message id>, // only present if referencing another message (reply)
+ *         re: [ // omit for no reactions
  *           {
- *             en: <emoji name>,
- *             eid: <emoji id>,
- *             a: <emoji is animated>,
  *             c: <react count>
+ *             n: <emoji name>,
+ *             id: <emoji id>,          // only present for custom emoji
+ *             an: <emoji is animated>, // only present for custom animated emoji
+ *           }, ...
  *         ]
  *       }, ...
  *     }, ...
@@ -108,7 +109,7 @@ class SAVEFILE{
       channelkeys: new Set(),
       messagekeys: new Set(),
       freshmsgs: new Set()
-    }
+    };
   }
   
   static isValid(parsedObj){
@@ -248,12 +249,20 @@ class SAVEFILE{
     
     if (discordMessage.reactions.length > 0) {
       obj.re = discordMessage.reactions.map(reaction => {
-        return {
-          en: reaction.emoji.name,
-          eid: reaction.emoji.id,
-          a: reaction.emoji.animated,
-          c: reaction.count
-        };
+	      let conv = {
+		      c: reaction.count,
+		      n: reaction.emoji.name
+	      };
+	      
+	      if (reaction.emoji.id !== null) {
+	      	conv.id = reaction.emoji.id;
+	      }
+	      
+	      if (reaction.emoji.animated) {
+	      	conv.an = true;
+	      }
+	      
+	      return conv;
       });
     }
     
diff --git a/src/viewer/scripts/discord.js b/src/viewer/scripts/discord.js
index efb16a3..0234cf1 100644
--- a/src/viewer/scripts/discord.js
+++ b/src/viewer/scripts/discord.js
@@ -135,11 +135,11 @@ var DISCORD = (function(){
       ].join(""));
       
       templateReaction = new TEMPLATE([
-        "<span class='reaction-wrapper'><span class='reaction-emoji'>{en}</span><span class='count'>{c}</span></span>"
+        "<span class='reaction-wrapper'><span class='reaction-emoji'>{n}</span><span class='count'>{c}</span></span>"
       ].join(""));
       
       templateReactionCustom = new TEMPLATE([
-        "<span class='reaction-wrapper'><img src='https://cdn.discordapp.com/emojis/{eid}.{ext}' alt=':{en}:' title=':{en}:' class='reaction-emoji-custom'><span class='count'>{c}</span></span>"
+        "<span class='reaction-wrapper'><img src='https://cdn.discordapp.com/emojis/{id}.{ext}' alt=':{n}:' title=':{n}:' class='reaction-emoji-custom'><span class='count'>{c}</span></span>"
       ].join(""));
     },
     
@@ -224,21 +224,22 @@ var DISCORD = (function(){
           var contents = value.contents ? "<span class='reply-contents'>" + processMessageContents(value.contents) + "</span>" : "";
           
           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){
+        }
+        else if (property === "reactions"){
+          if (value === null){
             return "";
           }
           
-      	  return value.map(reaction => {
-      	    if (reaction.eid !== null){
-      	      reaction.ext = reaction.a ? (STATE.settings.enableAnimatedEmoji ? "gif" : "png") : "png";
-      	      return templateReactionCustom.apply(reaction);
-      	    } else{
-      	      return templateReaction.apply(reaction);
-      	    }
+          return value.map(reaction => {
+            if ("id" in reaction){
+              reaction.ext = reaction.an && STATE.settings.enableAnimatedEmoji ? "gif" : "png";
+              return templateReactionCustom.apply(reaction);
+            }
+            else {
+              return templateReaction.apply(reaction);
+            }
           }).join("");
-      	}
+        }
       });
     }
   };
diff --git a/src/viewer/scripts/state.js b/src/viewer/scripts/state.js
index ff5ad13..290bf61 100644
--- a/src/viewer/scripts/state.js
+++ b/src/viewer/scripts/state.js
@@ -168,7 +168,7 @@ var STATE = (function(){
         "edit": ("te" in message) ? message.te : (message.f & 1) === 1,
         "jump": key,
         "reply": replyObj,
-        "reactions": message.re
+        "reactions": ("re" in message) ? message.re : null
       };
     });
   };
diff --git a/src/viewer/styles/messages.css b/src/viewer/styles/messages.css
index e665df0..f14636f 100644
--- a/src/viewer/styles/messages.css
+++ b/src/viewer/styles/messages.css
@@ -221,11 +221,6 @@
   padding: 1px 2px;
 }
 
-.reply-contents code {
-  background-color: #2E3136;
-  font-family: Menlo, Consolas, Monaco, monospace;
-}
-
 .reactions {
   margin-top: 4px;
 }
@@ -233,29 +228,27 @@
 .reactions .reaction-wrapper {
   display: inline-block;
   border-radius: 4px;
-  padding: 2px 8px;
-  margin: 0 2px 2px 0;
+  margin: 3px 2px 0 0;
+  padding: 3px 6px;
   background: #42454a;
-  vertical-align: middle;
+  cursor: default;
 }
 
 .reactions .reaction-emoji {
-  margin-right: 6px;
-  width: 20px;
-  height: 20px;
+  margin-right: 5px;
+  font-size: 16px;
   display: inline-block;
-  line-height: 20px;
   text-align: center;
+  vertical-align: -5%;
 }
 
 .reactions .reaction-emoji-custom {
-  margin-right: 6px;
-  width: 20px;
-  height: 20px;
-  vertical-align: -30%;
+  height: 15px;
+  margin-right: 5px;
+  vertical-align: -10%;
 }
 
 .reactions .count {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.45);
   font-size: 14px;
 }