Implement user avatars into the embed

webapp/titanembeds/blueprints/admin/admin.py

@@ -1,4 +1,5 @@
 from flask import Blueprint, url_for, redirect, session, render_template, abort, request, jsonify
+from flask_socketio import emit
 from functools import wraps
 from titanembeds.database import db, get_administrators_list, Cosmetics, Guilds, UnauthenticatedUsers, UnauthenticatedBans, TitanTokens, TokenTransactions, get_titan_token, set_titan_token
 from titanembeds.oauth import generate_guild_icon_url
@@ -179,6 +180,7 @@ def update_administrate_guild(guild_id):
         guest_icon = None
     db_guild.guest_icon = guest_icon
     db.session.commit()
+    emit("guest_icon_change", {"guest_icon": guest_icon}, room="GUILD_"+guild_id, namespace="/gateway")
     return jsonify(
         id=db_guild.id,
         guild_id=db_guild.guild_id,

webapp/titanembeds/blueprints/api/api.py

@@ -358,6 +358,10 @@ def change_unauthenticated_username():
         response.status_code = 403
         return response
 
+def get_guild_guest_icon(guild_id):
+    return db.session.query(Guilds).filter(Guilds.guild_id == guild_id).first().guest_icon
+    
+
 def process_query_guild(guild_id, visitor=False):
     widget = discord_api.get_widget(guild_id)
     channels = get_guild_channels(guild_id, visitor)
@@ -367,10 +371,11 @@ def process_query_guild(guild_id, visitor=False):
         discordmembers = [{"id": 0, "color": "FFD6D6", "status": "dnd", "username": "Discord Server Widget is Currently Disabled"}]
     embedmembers = get_online_embed_users(guild_id)
     emojis = get_guild_emojis(guild_id)
+    guest_icon = get_guild_guest_icon(guild_id)
     if visitor:
         for channel in channels:
             channel["write"] = False
-    return jsonify(channels=channels, discordmembers=discordmembers, embedmembers=embedmembers, emojis=emojis, instant_invite=widget.get("instant_invite", None))
+    return jsonify(channels=channels, discordmembers=discordmembers, embedmembers=embedmembers, emojis=emojis, guest_icon=guest_icon, instant_invite=widget.get("instant_invite", None))
 
 @api.route("/query_guild", methods=["GET"])
 @valid_session_required(api=True)

webapp/titanembeds/blueprints/user/user.py

@@ -1,5 +1,6 @@
 from flask import Blueprint, request, redirect, jsonify, abort, session, url_for, render_template
 from flask import current_app as app
+from flask_socketio import emit
 from config import config
 from titanembeds.decorators import discord_users_only
 from titanembeds.database import db, Guilds, UnauthenticatedUsers, UnauthenticatedBans, Cosmetics, UserCSS, set_titan_token, get_titan_token
@@ -242,6 +243,7 @@ def update_administrate_guild(guild_id):
     db_guild.guest_icon = guest_icon
     
     db.session.commit()
+    emit("guest_icon_change", {"guest_icon": guest_icon}, room="GUILD_"+guild_id, namespace="/gateway")
     return jsonify(
         id=db_guild.id,
         guild_id=db_guild.guild_id,

webapp/titanembeds/static/css/embedstyle.css

@@ -172,11 +172,14 @@ nav .brand-logo {
 #chatcontent > p {
   display: table;
   width: 90%;
+  border-top: solid 1px rgba(0, 0, 0, 0.1);
+  padding-top: 10px;
+  margin-bottom: 11px;
 }
 
-#chatcontent > p > span {
-  display: table-row
-}
+/*#chatcontent > p > span {*/
+/*  display: table-row*/
+/*}*/
 
 ::-webkit-input-placeholder {
   color: var(--placeholder);
@@ -224,14 +227,25 @@ nav .brand-logo {
 .chatusername {
   font-weight: bold;
   color: #eceff1;
+  margin-right: 10px;
+  vertical-align: middle;
+  font-size: 110%;
 }
 
 .chattimestamp {
-  font-size: 10px;
+  font-size: 11px;
   color: #90a4ae;
   margin-right: 3px;
 }
 
+.authoravatar {
+  width: 100%;
+  max-width: 30px;
+  border-radius: 50%;
+  vertical-align: middle;
+  margin-right: 10px;
+}
+
 .footercontainer {
   width: 100%;
   position: relative;
@@ -413,12 +427,13 @@ a {
   height: 30px;
 }
 
-.chatusername {
-  display: table-header-group;
-}
+/*.chatusername {*/
+/*  display: table-header-group;*/
+/*}*/
 .chatmessage {
-  display: inline;
+  display: block;
   color: var(--chatmessage);
+  margin-top: 5px;
 }
 
 p.mentioned {
@@ -443,6 +458,7 @@ p.mentioned span.chatmessage {
   white-space: pre-wrap;
   line-height: 15px;
   padding: 5px;
+  margin-bottom: 3px;
 }
 
 #emoji-picker {

webapp/titanembeds/static/js/embed.js

@@ -35,6 +35,7 @@
     var guild_channels_list = []; // guild channels, but as a list of them
     var message_users_cache = {}; // {"name#discrim": {"data": {}, "msgs": []} Cache of the users fetched from websockets to paint the messages
     var shift_pressed = false; // Track down if shift pressed on messagebox
+    var global_guest_icon = null; // Guest icon
 
     function element_in_view(element, fullyInView) {
         var pageTop = $(window).scrollTop();
@@ -809,6 +810,14 @@
             }
         }
     }
+    
+    function generate_avatar_url(user_id, avatar_hash, message_contents=null) {
+        if (user_id == bot_client_id && (message_contents.includes("**") && ( (message_contents.includes("<")&&message_contents.includes(">")) || (message_contents.includes("[") && message_contents.includes("]")) ))) {
+            return global_guest_icon;
+        } else {
+            return "https://cdn.discordapp.com/avatars/" + user_id + "/" + avatar_hash + ".png";
+        }
+    }
 
     function fill_discord_messages(messages, jumpscroll, replace=null) {
         if (messages.length == 0) {
@@ -833,7 +842,8 @@
             if (message.author.nickname) {
                 username = message.author.nickname;
             }
-            var rendered = Mustache.render(template, {"id": message.id, "full_timestamp": message.formatted_timestamp, "time": message.formatted_time, "username": username, "discriminator": message.author.discriminator, "content": nl2br(message.content)});
+            var avatar = generate_avatar_url(message.author.id, message.author.avatar, message.content);
+            var rendered = Mustache.render(template, {"id": message.id, "full_timestamp": message.formatted_timestamp, "time": message.formatted_time, "username": username, "discriminator": message.author.discriminator, "avatar": avatar, "content": nl2br(message.content)});
             if (replace == null) {
                 $("#chatcontent").append(rendered);
                 handle_last_message_mention();
@@ -951,7 +961,10 @@
             } else {
                 parent.find(".chatusername").css("color", null);
             }
-            parent.attr("discord_userid", usr.id);
+            if (usr.avatar_url) {
+                parent.attr("discord_userid", usr.id);
+                parent.find(".authoravatar").prop("src", usr.avatar_url);
+            }
         }
     }
 
@@ -1319,6 +1332,10 @@
             cache["data"] = usr;
             process_message_users_cache_helper(key, usr);
         });
+        
+        socket.on("guest_icon_change", function (icon) {
+            global_guest_icon = icon.guest_icon;
+        });
     }
     
     function update_socket_channels() {

webapp/titanembeds/static/themes/DiscordDark/css/style.css

@@ -76,7 +76,7 @@ margin-right:4px
 #chatcontent > p { display: table; }
 #chatcontent > p > span { display: table-row }
 /*#chatcontent > p > span:nth-child(1):before { content:"Today at " }*/
-#chatcontent > p > span.chatusername { display: table-header-group }
+/*#chatcontent > p > span.chatusername { display: table-header-group }*/
 #chatcontent > p > span.chatmessage { display: table-footer-group;display:inline-block!important;color:var(--chatmessage) }
 #chatcontent {
 background:var(--main)

webapp/titanembeds/templates/embed.html.j2

@@ -218,7 +218,7 @@
     </script>
     
     <script id="mustache_usermessage" type="text/template">
-      <p><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></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></p>
     </script>
 
     <script id="mustache_memberrole" type="text/template">