From 4acd806e66c9050d22c48aa3d2a0f0aaa66eabdf Mon Sep 17 00:00:00 2001
From: Cadence Ember <cadence@disroot.org>
Date: Sun, 8 Nov 2020 01:04:42 +1300
Subject: [PATCH] Render image messages

---
 src/js/events/image.js            | 32 +++++++++++++++++++++++++++++++
 src/js/events/message.js          |  1 +
 src/js/events/render-event.js     |  2 ++
 src/sass/components/messages.sass | 15 ++++++++++++++-
 4 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/js/events/image.js

diff --git a/src/js/events/image.js b/src/js/events/image.js
new file mode 100644
index 0000000..ec5a9d4
--- /dev/null
+++ b/src/js/events/image.js
@@ -0,0 +1,32 @@
+const {ejs, ElemJS} = require("../basic")
+const {resolveMxc} = require("../functions")
+const {MatrixEvent} = require("./event")
+
+class Image extends MatrixEvent {
+	render() {
+		this.clearChildren()
+		this.class("c-message--media")
+		const image = (
+			ejs("img")
+				.class("c-message__image")
+				.attribute("src", resolveMxc(this.data.content.url))
+		)
+		const info = this.data.content.info
+		if (info && info.w && info.h) {
+			image.attribute("width", info.w)
+			image.attribute("height", info.h)
+		}
+		this.child(image)
+		super.render()
+	}
+
+	static canRender(event) {
+		return event.type === "m.room.message" && event.content.msgtype === "m.image"
+	}
+
+	canGroup() {
+		return true
+	}
+}
+
+module.exports = [Image]
diff --git a/src/js/events/message.js b/src/js/events/message.js
index 2bd69ed..a6a5ee4 100644
--- a/src/js/events/message.js
+++ b/src/js/events/message.js
@@ -142,6 +142,7 @@ function autoLinkText(text) {
 class TextMessage extends MatrixEvent {
 	render() {
 		this.clearChildren()
+		this.class("c-message--plain")
 		const fragment = autoLinkText(this.data.content.body)
 		this.child(fragment)
 		super.render()
diff --git a/src/js/events/render-event.js b/src/js/events/render-event.js
index e4616a2..9337a2d 100644
--- a/src/js/events/render-event.js
+++ b/src/js/events/render-event.js
@@ -1,9 +1,11 @@
+const imageEvent = require("./image")
 const messageEvent = require("./message")
 const encryptedEvent = require("./encrypted")
 const membershipEvent = require("./membership")
 const unknownEvent = require("./unknown")
 
 const events = [
+	...imageEvent,
 	...messageEvent,
 	...encryptedEvent,
 	...membershipEvent,
diff --git a/src/sass/components/messages.sass b/src/sass/components/messages.sass
index ffc1517..5f0290d 100644
--- a/src/sass/components/messages.sass
+++ b/src/sass/components/messages.sass
@@ -49,7 +49,14 @@
   overflow-wrap: anywhere
   opacity: 1
   transition: opacity 0.2s ease-out
-  white-space: pre-wrap
+
+  &--plain
+    white-space: pre-wrap
+
+  &--media
+    // fix whitespace
+    font-size: 0
+    margin-top: 8px
 
   &--pending
     opacity: 0.5
@@ -68,6 +75,12 @@
     &:hover
       background-color: c.$darker
 
+  &__image
+    width: auto
+    height: auto
+    max-width: 400px
+    max-height: 300px
+
   // message formatting rules
 
   code, pre