Add known sizes of images to the viewer

Related to #79
This commit is contained in:
chylex 2022-06-04 15:29:42 +02:00
parent c9bb46c8c7
commit f7bfe052ca
No known key found for this signature in database
GPG Key ID: 4DE42C8F19A80548
2 changed files with 22 additions and 2 deletions

View File

@ -26,6 +26,7 @@ const DISCORD = (function() {
let templateUserAvatar; let templateUserAvatar;
let templateAttachmentDownload; let templateAttachmentDownload;
let templateEmbedImage; let templateEmbedImage;
let templateEmbedImageWithSize;
let templateEmbedRich; let templateEmbedRich;
let templateEmbedRichNoDescription; let templateEmbedRichNoDescription;
let templateEmbedUrl; let templateEmbedUrl;
@ -64,6 +65,19 @@ const DISCORD = (function() {
return "<p>" + processed + "</p>"; return "<p>" + processed + "</p>";
}; };
const getImageEmbed = function(url, image) {
if (!SETTINGS.enableImagePreviews) {
return "";
}
if (image.width && image.height) {
return templateEmbedImageWithSize.apply({ url, src: image.url, width: image.width, height: image.height });
}
else {
return templateEmbedImage.apply({ url, src: image.url });
}
};
return { return {
setup() { setup() {
templateChannelServer = new TEMPLATE([ templateChannelServer = new TEMPLATE([
@ -117,6 +131,11 @@ const DISCORD = (function() {
"<a href='{url}' class='embed thumbnail'><img src='{src}' alt='(image attachment not found)'></a><br>" "<a href='{url}' class='embed thumbnail'><img src='{src}' alt='(image attachment not found)'></a><br>"
].join("")); ].join(""));
// noinspection HtmlUnknownTarget
templateEmbedImageWithSize = new TEMPLATE([
"<a href='{url}' class='embed thumbnail'><img src='{src}' width='{width}' height='{height}' alt='(image attachment not found)'></a><br>"
].join(""));
// noinspection HtmlUnknownTarget // noinspection HtmlUnknownTarget
templateEmbedRich = new TEMPLATE([ templateEmbedRich = new TEMPLATE([
"<div class='embed download'><a href='{url}' class='title'>{title}</a><p class='desc'>{description}</p></div>" "<div class='embed download'><a href='{url}' class='title'>{title}</a><p class='desc'>{description}</p></div>"
@ -183,10 +202,10 @@ const DISCORD = (function() {
return templateEmbedUnsupported.apply(embed); return templateEmbedUnsupported.apply(embed);
} }
else if ("image" in embed && embed.image.url) { else if ("image" in embed && embed.image.url) {
return SETTINGS.enableImagePreviews ? templateEmbedImage.apply({ url: embed.url, src: embed.image.url }) : ""; return getImageEmbed(embed.url, embed.image);
} }
else if ("thumbnail" in embed && embed.thumbnail.url) { else if ("thumbnail" in embed && embed.thumbnail.url) {
return SETTINGS.enableImagePreviews ? templateEmbedImage.apply({ url: embed.url, src: embed.thumbnail.url }) : ""; return getImageEmbed(embed.url, embed.thumbnail);
} }
else if ("title" in embed && "description" in embed) { else if ("title" in embed && "description" in embed) {
return templateEmbedRich.apply(embed); return templateEmbedRich.apply(embed);

View File

@ -112,6 +112,7 @@
} }
.message .thumbnail img { .message .thumbnail img {
width: auto;
max-width: 100%; max-width: 100%;
max-height: 320px; max-height: 320px;
border-radius: 3px; border-radius: 3px;