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/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