Improve reactions

DiscordChatExporter.Core/Models/Reaction.cs

@@ -1,26 +1,20 @@
-using System;
-
-namespace DiscordChatExporter.Core.Models
+namespace DiscordChatExporter.Core.Models
 {
+    // https://discordapp.com/developers/docs/resources/channel#reaction-object
+
     public class Reaction
     {
         public int Count { get; }
 
-        public bool Me { get; }
-
-        public string Id { get; }
-
-        public string Name { get; }
+        public string EmojiId { get; }
 
-        public string Emoji { get; }
+        public string EmojiName { get; }
 
-        public Reaction(int count, bool me, string id, string name) 
+        public Reaction(int count, string emojiId, string emojiName) 
         {
             Count = count;
-            Me = me;
-            Id = id;
-            Name = name;
-            Emoji = (id == "" ? name : $"<:{name}:{id}>");
+            EmojiId = emojiId;
+            EmojiName = emojiName;
         }
     }
 }

DiscordChatExporter.Core/Resources/ExportTemplates/Html/Core.html

@@ -184,10 +184,16 @@
 
                     {{~ # Reactions }}
                     <div class="chatlog__reactions">
-                        {{ for reaction in message.Reactions}}
+                        {{ for reaction in message.Reactions }}
                             <div class="chatlog__reaction">
-                                <div class="chatlog__reaction-emoji">{{ reaction.Emoji | FormatContent }}</div>
-                                <div class="chatlog__reaction-count">{{ reaction.Count }}</div>
+                                <span class="chatlog__reaction-emoji">
+                                    {{ if reaction.EmojiId }}
+                                        <img class="emoji emoji--small" title="{{ reaction.EmojiName }}" src="https://cdn.discordapp.com/emojis/{{ reaction.EmojiId }}.png" />
+                                    {{ else }}
+                                        {{ reaction.EmojiName }}
+                                    {{ end }}
+                                </span>
+                                <span class="chatlog__reaction-count">{{ reaction.Count }}</span>
                             </div>
                         {{ end }}
                     </div>

DiscordChatExporter.Core/Resources/ExportTemplates/Html/DarkTheme.css

@@ -90,5 +90,9 @@ a {
 }
 
 .chatlog__reaction {
-    background-color: rgba(255, 255, 255, 0.0392157);
+    background-color: #ffffff0a;
+}
+
+.chatlog__reaction-count {
+    color: #ffffff4d;
 }

DiscordChatExporter.Core/Resources/ExportTemplates/Html/LightTheme.css

@@ -51,5 +51,9 @@ a {
 }
 
 .chatlog__reaction {
-    background-color: rgba(79, 84, 92, 0.0588235);
+    background-color: #4f545c0f;
+}
+
+.chatlog__reaction-count {
+    color: #99aab5;
 }

DiscordChatExporter.Core/Resources/ExportTemplates/Html/Shared.css

@@ -38,10 +38,15 @@ img {
     margin-right: 1px;
     width: 24px;
     height: 24px;
-    vertical-align: -.4em;
+    vertical-align: middle;
+}
+
+.emoji--small {
+    width: 16px;
+    height: 16px;
 }
 
-.emoji-jumboable {
+.emoji--large {
     width: 32px;
     height: 32px;
 }
@@ -286,23 +291,21 @@ img {
 }
 
 .chatlog__reactions {
-    display: flex;
+    display: flex;    
 }
 
 .chatlog__reaction {
-    margin: 2px;
+    margin: 6px 2px 2px 2px;
+    padding: 2px 6px 2px 2px;
     border-radius: 3px;
-    display: block;
-    padding-right: 6px;
 }
 
 .chatlog__reaction-emoji {
-    display: inline;
     margin-left: 3px;
-    padding-right: 3px;
-    font-size: large;
+    vertical-align: middle;
 }
 
 .chatlog__reaction-count {
-    display: inline;
+    font-size: .875em;
+    vertical-align: middle;
 }

DiscordChatExporter.Core/Services/DataService.Parsers.cs

@@ -141,11 +141,10 @@ namespace DiscordChatExporter.Core.Services
         private Reaction ParseReaction(JToken json)
         {
             var count = json["count"].Value<int>();
-            var me = json["me"].Value<bool>();
-            var id = json["emoji"]["id"]?.ToString();
-            var name = json["emoji"]["name"].ToString();
+            var emojiId = json["emoji"]["id"]?.Value<string>();
+            var emojiName = json["emoji"]["name"].Value<string>();
 
-            return new Reaction(count, me, id, name);
+            return new Reaction(count, emojiId, emojiName);
         }
 
         private Message ParseMessage(JToken json)