Render image messages

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]

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()

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,

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