Recognise image spoilers (based on "body")

src/js/events/image.js

@@ -16,7 +16,23 @@ class Image extends GroupableEvent {
 			image.attribute("width", info.w)
 			image.attribute("height", info.h)
 		}
-		this.child(image)
+		const wrapper = ejs("div").class("c-media__wrapper").child(
+			image
+		)
+		if (this.data.content.body && this.data.content.body.startsWith("SPOILER")) {
+			wrapper.attribute("tabindex", 0)
+			wrapper.class("c-media--spoiler")
+			const wall = ejs("div").class("c-media__spoiler").text("Spoiler")
+			wrapper.child(wall)
+			function toggle() {
+				wrapper.element.classList.toggle("c-media--shown")
+			}
+			wrapper.on("click", toggle)
+			wrapper.on("keydown", event => {
+				if (event.key === "Enter") toggle()
+			})
+		}
+		this.child(wrapper)
 		super.render()
 	}
 

src/js/events/membership.js

@@ -96,6 +96,24 @@ class LeaveEvent extends MembershipEvent {
 	}
 }
 
+class BanEvent extends MembershipEvent {
+	static canRender(eventData) {
+		return super.canRender(eventData) && eventData.content.membership === "ban"
+	}
+
+	render() {
+		let message =
+			 ` left (banned by ${this.data.sender}`
+			 + (this.data.content.reason ? `, reason: ${this.data.content.reason}` : "")
+			 + ")"
+		this.renderInner("static/leave-event.svg", [
+			this.smallAvatar,
+			this.senderName,
+			message
+		])
+	}
+}
+
 class UnknownMembership extends MembershipEvent {
 	render() {
 		this.renderInner("", [
@@ -106,4 +124,4 @@ class UnknownMembership extends MembershipEvent {
 	}
 }
 
-module.exports = [JoinedEvent, InvitedEvent, LeaveEvent, UnknownMembership]
+module.exports = [JoinedEvent, InvitedEvent, LeaveEvent, BanEvent, UnknownMembership]

src/js/events/message.js

@@ -85,6 +85,18 @@ function postProcessElements(element) {
 		if (color) n.style.color = color
 		if (bgColor) n.style.backgroundColor = bgColor
 	})
+
+	element.querySelectorAll("[data-mx-spoiler]").forEach(spoiler => {
+		spoiler.classList.add("mx-spoiler")
+		spoiler.setAttribute("tabindex", 0)
+		function toggle() {
+			spoiler.classList.toggle("mx-spoiler--shown")
+		}
+		spoiler.addEventListener("click", toggle)
+		spoiler.addEventListener("keydown", event => {
+			if (event.key === "Enter") toggle()
+		})
+	})
 }
 
 

src/js/sync/sync.js

@@ -11,7 +11,7 @@ function sync() {
 		room: {
 			// pulling more from the timeline massively increases download size
 			timeline: {
-				limit: 5
+				limit: 1
 			},
 			// members are not currently needed
 			state: {

src/sass/base.sass

@@ -52,7 +52,7 @@ select:-moz-focusring
   text-shadow: 0 0 0 #ddd
 
 body.show-focus
-  a, select, button, input, video
+  a, select, button, input, video, div, span
     outline-color: #fff
 
     &:focus

src/sass/components/chat-banner.sass

@@ -9,9 +9,12 @@
   margin-right: 12px
   outline-color: #000
   opacity: 0
+  transform: translateY(-40px)
+  transition: transform 0.2s ease, opacity 0.2s ease-out
 
   &--active
     opacity: 1
+    transform: translateY(0px)
 
   &__inner
     display: grid

src/sass/components/messages.sass

@@ -58,6 +58,7 @@
     // fix whitespace
     font-size: 0
     margin-top: 8px
+    display: flex
 
   &--pending
     opacity: 0.5
@@ -149,3 +150,37 @@
     padding: 12px
     background-color: c.$milder
     border-radius: 8px
+
+.c-media
+  &__wrapper
+    overflow: hidden
+    position: relative
+
+  &--spoiler
+    cursor: pointer
+
+    img
+      filter: blur(40px)
+
+  &--shown img
+    filter: none
+
+  &__spoiler
+    position: absolute
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+    display: flex
+    align-items: center
+    justify-content: center
+    font-size: 18px
+    font-weight: 500
+    color: #fff
+    text-transform: uppercase
+    background: rgba(0, 0, 0, 0.3)
+    cursor: pointer
+    pointer-events: none
+
+  &--shown &__spoiler
+    display: none

src/sass/components/read-marker.sass

@@ -18,6 +18,9 @@
     @at-root .c-message:last-child &
       top: 11px
 
+    @at-root .c-message-event &
+      top: 7px
+
   &__text
     position: absolute
     right: -14px

src/sass/components/spoilers.sass

@@ -0,0 +1,8 @@
+.mx-spoiler
+  color: #331911
+  background-color:  #331911
+  outline-color: #fff !important
+  cursor: pointer
+
+  &--shown
+    color: inherit

src/sass/main.sass

@@ -10,3 +10,4 @@
 @use "./components/highlighted-code"
 @use "./components/read-marker"
 @use "./components/chat-banner"
+@use "./components/spoilers"