Display rich embed support

This commit is contained in:
Jeremy Zhang
2017-11-05 05:59:06 +00:00
parent 962880f652
commit eff2b3bb46
8 changed files with 240 additions and 8 deletions

View File

@ -491,7 +491,6 @@ p.mentioned span.chatmessage {
background-color: rgba(0, 0, 0, 0.2);
color: #82b1ff;
cursor: pointer;
}
.chatmessage .channellink:hover {
@ -499,6 +498,92 @@ p.mentioned span.chatmessage {
color: white;
}
.embeds {
display: block;
width: 60%;
}
@media(max-width: 600px) {
.embeds {
width: 100%;
}
}
.richembed {
display: flex;
border: solid 1px grey;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
margin-top: 3px;
}
.richembed .color {
width: 6px;
background-color: #cacbce;
}
.richembed .rich {
margin: 10px;
}
.richembed img {
border-radius: 5px;
}
.richembed .author img, .richembed .footer img {
width: 20px;
border-radius: 100px;
vertical-align: bottom;
}
.richembed .content {
display: flex;
}
.richembed .thumbnail {
margin-left: 2px;
}
.richembed .thumbnail img {
width: 100%;
max-width: 170px;
}
.richembed .fields {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.richembed .field-name {
font-weight: bold;
}
.richembed .field {
flex: 0;
min-width: 100%;
}
.richembed .field.inline {
flex: 1;
flex-basis: auto;
min-width: 100px;
}
@media(max-width: 600px) {
.richembed .field.inline {
flex: 0;
flex-basis: unset;
min-width: 100%;
}
}
.richembed .image img {
max-width: 300px;
width: 100%;
}
#emoji-picker {
color: black;
position: fixed;

View File

@ -854,6 +854,34 @@
return "https://cdn.discordapp.com/avatars/" + user_id + "/" + avatar_hash + ".png";
}
}
function parse_message_embeds(embeds) {
var emb = [];
for (var i = 0; i < embeds.length; i++) {
var disembed = embeds[i];
if (disembed.type != "rich") {
continue;
}
disembed.toRenderFooter = false;
if (disembed.footer) {
disembed.toRenderFooter = true;
} else if (disembed.timestamp) {
disembed.toRenderFooter = true;
}
disembed.footerVerticalBar = disembed.footer && disembed.timestamp;
if (disembed.timestamp) {
disembed.formatted_timestamp = moment(disembed.timestamp).format('ddd MMM Do, YYYY [at] h:mm A');
}
if (disembed.color) {
disembed.hexColor = "#" + disembed.color.toString(16);
}
var template = $('#mustache_richembed').html();
Mustache.parse(template);
var rendered = Mustache.render(template, disembed);
emb.push(rendered);
}
return emb;
}
function fill_discord_messages(messages, jumpscroll, replace=null) {
if (messages.length == 0) {
@ -906,6 +934,11 @@
select_channel($(this).attr("channelid"), true);
});
}
var embeds = parse_message_embeds(message.embeds);
$("#discordmessage_"+message.id).parent().find("span.embeds").text("");
for(var j = 0; j < embeds.length; j++) {
$("#discordmessage_"+message.id).parent().find("span.embeds").append(embeds[j]);
}
var usrcachekey = username + "#" + message.author.discriminator;
if (usrcachekey.startsWith("(Titan Dev) ")) {
usrcachekey = usrcachekey.substr(12);
@ -943,7 +976,7 @@
jumpscroll = true;
} else {
fet = fetch(channel_id, last_message_id);
jumpscroll = element_in_view($('#discordmessage_'+last_message_id).parent(), true);
jumpscroll = element_in_view($('#discordmessage_'+last_message_id).parent());
}
fet.done(function(data) {
var status = data.status;
@ -1284,7 +1317,7 @@
if (selected_channel != thismsgchan) {
return;
}
var jumpscroll = element_in_view($('#discordmessage_'+last_message_id).parent(), true);
var jumpscroll = element_in_view($('#discordmessage_'+last_message_id).parent());
last_message_id = fill_discord_messages([msg], jumpscroll);
});