Implement reactions

webapp/titanembeds/redisqueue.py

@@ -59,6 +59,7 @@ class RedisQueue:
                 "channel_id": str(x["channel_id"]),
                 "mentions": x["mentions"],
                 "embeds": x["embeds"],
+                "reactions": x["reactions"]
             }
             if message["author"]["id"] not in guild_members:
                 member = self.get_guild_member(guild_id, message["author"]["id"])

webapp/titanembeds/static/css/embed.css

@@ -793,6 +793,42 @@ p.mentioned span.chatmessage {
   max-width: 400px;
 }
 
+#chatcontent span.reactions {
+  display: block;
+}
+
+#chatcontent span.reactions .reaction {
+  background-color: rgba(0, 0, 0, 0.1);
+  font-size: 12pt;
+  border-radius: 5px;
+  margin-left: 6px;
+  padding-left: 3px;
+  padding-right: 3px;
+  color: #C3C4C5;
+  cursor: pointer;
+  height: 27px;
+  display: inline-block;
+  min-width: 50px;
+}
+
+#chatcontent span.reactions .reaction:hover {
+  transform: scale(1.3);
+}
+
+#chatcontent span.reactions .reaction:hover:active {
+  transform: scale(0.9);
+}
+
+#chatcontent span.reactions .reaction img {
+  width: 18px;
+  vertical-align: middle;
+}
+
+#chatcontent span.reactions .reaction .count {
+  float: right;
+  margin-right: 6px;
+}
+
 .wdt-emoji-popup {
   position: fixed;
   bottom: 5%;

webapp/titanembeds/static/js/embed.js

@@ -1152,6 +1152,29 @@
         }
         return emb;
     }
+    
+    function parse_message_reactions(reactions) {
+        var reacts = []
+        var template = $("#mustache_reactionchip").html();
+        Mustache.parse(template);
+        for (var i = 0; i < reactions.length; i++) {
+            var disreact = reactions[i];
+            var emoji = disreact.emoji;
+            if (emoji.id) {
+                disreact.img_url = "https://cdn.discordapp.com/emojis/" + emoji.id;
+                if (emoji.animated) {
+                    disreact.img_url += ".gif";
+                } else {
+                    disreact.img_url += ".png";
+                }
+            } else {
+                disreact.img_url = $(twemoji.parse(emoji.name)).attr("src");
+            }
+            var rendered = Mustache.render(template, disreact);
+            reacts.push(rendered);
+        }
+        return reacts;
+    }
 
     function fill_discord_messages(messages, jumpscroll, replace) {
         if (replace === undefined) {
@@ -1215,6 +1238,11 @@
             for(var j = 0; j < embeds.length; j++) {
                 $("#discordmessage_"+message.id).parent().find("span.embeds").append(embeds[j]);
             }
+            var reactions = parse_message_reactions(message.reactions);
+            $("#discordmessage_"+message.id).parent().find("span.reactions").text("");
+            for(var j = 0; j < reactions.length; j++) {
+                $("#discordmessage_"+message.id).parent().find("span.reactions").append(reactions[j]);
+            }
             var usrcachekey = username + "#" + message.author.discriminator;
             if (usrcachekey.startsWith("(Titan Dev) ")) {
                 usrcachekey = usrcachekey.substr(12);
@@ -1783,6 +1811,33 @@
             fill_discord_messages([msg], false, msgelem_parent);
         });
         
+        socket.on("MESSAGE_REACTION_ADD", function (msg) {
+            var msgelem = $("#discordmessage_"+msg.id);
+            if (msgelem.length == 0) {
+                return;
+            }
+            var msgelem_parent = msgelem.parent();
+            fill_discord_messages([msg], false, msgelem_parent);
+        });
+        
+        socket.on("MESSAGE_REACTION_REMOVE", function (msg) {
+            var msgelem = $("#discordmessage_"+msg.id);
+            if (msgelem.length == 0) {
+                return;
+            }
+            var msgelem_parent = msgelem.parent();
+            fill_discord_messages([msg], false, msgelem_parent);
+        });
+        
+        socket.on("MESSAGE_REACTION_REMOVE_ALL", function (msg) {
+            var msgelem = $("#discordmessage_"+msg.id);
+            if (msgelem.length == 0) {
+                return;
+            }
+            var msgelem_parent = msgelem.parent();
+            fill_discord_messages([msg], false, msgelem_parent);
+        });
+        
         socket.on("GUILD_MEMBER_ADD", function (usr) {
             if (usr.status != "offline") {
                 discord_users_list.push(usr);

webapp/titanembeds/templates/embed.html.j2

@@ -350,7 +350,7 @@
     </script>
     
     <script id="mustache_usermessage" type="text/template">
-      <p><img class="authoravatar" src="{{avatar}}"> <span class="chatusername"><span class="authorname">{{username}}</span><span class="authorhash">#</span><span class="authordiscriminator">{{discriminator}}</span></span> <span id="discordmessage_{{id}}" title="{{full_timestamp}}" class="chattimestamp">{{time}}</span> <span class="chatmessage">{{{content}}}</span><span class="embeds"></span></p>
+      <p><img class="authoravatar" src="{{avatar}}"> <span class="chatusername"><span class="authorname">{{username}}</span><span class="authorhash">#</span><span class="authordiscriminator">{{discriminator}}</span></span> <span id="discordmessage_{{id}}" title="{{full_timestamp}}" class="chattimestamp">{{time}}</span> <span class="chatmessage">{{{content}}}</span><span class="embeds"></span><span class="reactions"></span></p>
     </script>
 
     <script id="mustache_memberrole" type="text/template">
@@ -481,6 +481,10 @@
           </span>
         </div>
     </script>
+    
+    <script id="mustache_reactionchip" type="text/template">
+      <span class="reaction tooltipped" data-position="top" data-delay="200" data-tooltip="{{#emoji.id}}:{{/emoji.id}}{{emoji.name}}{{#emoji.id}}:{{/emoji.id}}"><img src="{{img_url}}"> <span class="count">{{count}}</span></span>
+    </script>
     {% endraw %}
 
     <script>