From e30171a8decad4ca7d66e02961443b33be66d9ba Mon Sep 17 00:00:00 2001 From: Jeremy Zhang Date: Sun, 24 Sep 2017 04:17:06 +0000 Subject: [PATCH] Implement user avatars into the embed --- webapp/titanembeds/blueprints/admin/admin.py | 2 ++ webapp/titanembeds/blueprints/api/api.py | 7 +++- webapp/titanembeds/blueprints/user/user.py | 2 ++ webapp/titanembeds/static/css/embedstyle.css | 32 ++++++++++++++----- webapp/titanembeds/static/js/embed.js | 21 ++++++++++-- .../static/themes/DiscordDark/css/style.css | 2 +- webapp/titanembeds/templates/embed.html.j2 | 2 +- 7 files changed, 55 insertions(+), 13 deletions(-) diff --git a/webapp/titanembeds/blueprints/admin/admin.py b/webapp/titanembeds/blueprints/admin/admin.py index 2693d69..71f544d 100644 --- a/webapp/titanembeds/blueprints/admin/admin.py +++ b/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, diff --git a/webapp/titanembeds/blueprints/api/api.py b/webapp/titanembeds/blueprints/api/api.py index 76f2fdd..e2655b4 100644 --- a/webapp/titanembeds/blueprints/api/api.py +++ b/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) diff --git a/webapp/titanembeds/blueprints/user/user.py b/webapp/titanembeds/blueprints/user/user.py index ab2ff4c..9738823 100644 --- a/webapp/titanembeds/blueprints/user/user.py +++ b/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, diff --git a/webapp/titanembeds/static/css/embedstyle.css b/webapp/titanembeds/static/css/embedstyle.css index 9add950..e04a05d 100644 --- a/webapp/titanembeds/static/css/embedstyle.css +++ b/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 { diff --git a/webapp/titanembeds/static/js/embed.js b/webapp/titanembeds/static/js/embed.js index 30bf251..2ec68ff 100644 --- a/webapp/titanembeds/static/js/embed.js +++ b/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() { diff --git a/webapp/titanembeds/static/themes/DiscordDark/css/style.css b/webapp/titanembeds/static/themes/DiscordDark/css/style.css index b7ba7f6..62a1bec 100644 --- a/webapp/titanembeds/static/themes/DiscordDark/css/style.css +++ b/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) diff --git a/webapp/titanembeds/templates/embed.html.j2 b/webapp/titanembeds/templates/embed.html.j2 index 0984276..9095ed3 100644 --- a/webapp/titanembeds/templates/embed.html.j2 +++ b/webapp/titanembeds/templates/embed.html.j2 @@ -218,7 +218,7 @@