diff --git a/src/webpage/embed.ts b/src/webpage/embed.ts index 3b2e32c..ef3857d 100644 --- a/src/webpage/embed.ts +++ b/src/webpage/embed.ts @@ -210,7 +210,6 @@ class Embed { const div = document.createElement("div"); div.classList.add("messageimgdiv"); const img = createImg(this.json.thumbnail.proxy_url); - img.classList.add("messageimg"); img.onclick = () => { const full = new ImagesDisplay([ new File( @@ -442,7 +441,6 @@ class Embed { video.controls = true; video.preload = "metadata"; video.src = videoUrl; - video.classList.add("messageimg"); if (this.json.video?.width) { let scale = 1; const max = 96 * 3; diff --git a/src/webpage/file.ts b/src/webpage/file.ts index 8f91e18..2bfeb6a 100644 --- a/src/webpage/file.ts +++ b/src/webpage/file.ts @@ -44,7 +44,7 @@ class File { this.content_type = fileJSON.content_type; this.size = fileJSON.size; } - getHTML(temp: boolean = false, fullScreen = false, OSpoiler = false, max = 96 * 3): HTMLElement { + getHTML(temp: boolean = false, fullScreen = false, OSpoiler = false, max = 96 * 3, gallery = false): HTMLElement { function makeSpoilerHTML(): HTMLElement { const spoil = document.createElement("div"); spoil.classList.add("fSpoil"); @@ -80,8 +80,10 @@ class File { img.height = this.height; } if (!fullScreen) { - img.classList.add("messageimg"); div.classList.add("messageimgdiv"); + if (gallery) { + div.classList.add("messagegallerydiv"); + } img.onclick = () => { if (this.owner) { const full = new ImagesDisplay( @@ -106,12 +108,13 @@ class File { img.setSrcs(src); }); div.append(img); - if (this.width && !fullScreen) { + // Non-gallery images are sized according to their actual size + if (!gallery && this.width && !fullScreen) { img.style.width = div.style.width = this.width + "px"; img.style.height = div.style.height = this.height + "px"; - } else if (!fullScreen) { - img.style.maxWidth = div.style.maxWidth = 96 * 3 + "px"; - img.style.maxHeight = div.style.maxHeight = 96 * 3 + "px"; + } else if (!gallery && !fullScreen) { + img.style.maxWidth = div.style.maxWidth = max + "px"; + img.style.maxHeight = div.style.maxHeight = max + "px"; } img.isAnimated().then((animated) => { if (!animated || !this.owner || fullScreen) return; diff --git a/src/webpage/message.ts b/src/webpage/message.ts index 1839bb4..c38080c 100644 --- a/src/webpage/message.ts +++ b/src/webpage/message.ts @@ -1083,8 +1083,9 @@ class Message extends SnowFlake { if (this.attachments.length) { const attach = document.createElement("div"); attach.classList.add("flexltr", "attachments"); + const isGallery = this.attachments.length > 1; for (const thing of this.attachments) { - attach.appendChild(thing.getHTML()); + attach.appendChild(thing.getHTML(false, false, false, 96 * 3, isGallery)); } messagedwrap.appendChild(attach); } diff --git a/src/webpage/style.css b/src/webpage/style.css index a76a8e4..1c84886 100644 --- a/src/webpage/style.css +++ b/src/webpage/style.css @@ -2509,16 +2509,13 @@ span.instanceStatus { overflow: clip; width: fit-content; height: fit-content; -} -.messageimg { - height: 100%; - width: 100%; - object-fit: contain; - user-select: none; - cursor: pointer; -} -.attachments .messageimg { - border-radius: 4px; + img, div { + height: 100%; + width: 100%; + object-fit: contain; + user-select: none; + cursor: pointer; + } } #replybox { height: 32px; @@ -3193,6 +3190,21 @@ span .quote:last-of-type .quoteline { max-height: 25%; max-width: 50%; } + .messageimgdiv { + img, video { + border-radius: 4px; + } + } + .messagegallerydiv { + object-fit: fill; + height: 200px; + max-width: 50%; + overflow: hidden; + img, video { + height: 100%; + object-fit: cover; + } + } } .embed { max-width: 400px;