Merge branch 'pr-498'

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;

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;

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);
 			}

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;