src/js/events/image.js

@@ -16,23 +16,7 @@ class Image extends GroupableEvent {
 			image.attribute("width", info.w)
 			image.attribute("height", info.h)
 		}
-		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)
+		this.child(image)
 		super.render()
 	}
 

src/js/events/membership.js

@@ -96,24 +96,6 @@ 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("", [
@@ -124,4 +106,4 @@ class UnknownMembership extends MembershipEvent {
 	}
 }
 
-module.exports = [JoinedEvent, InvitedEvent, LeaveEvent, BanEvent, UnknownMembership]
+module.exports = [JoinedEvent, InvitedEvent, LeaveEvent, UnknownMembership]

src/js/events/message.js

@@ -85,18 +85,6 @@ 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: 1
+				limit: 5
 			},
 			// 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, div, span
+  a, select, button, input, video
     outline-color: #fff
 
     &:focus

src/sass/components/chat-banner.sass

@@ -9,12 +9,9 @@
   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,7 +58,6 @@
     // fix whitespace
     font-size: 0
     margin-top: 8px
-    display: flex
 
   &--pending
     opacity: 0.5
@@ -150,37 +149,3 @@
     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,9 +18,6 @@
     @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

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

src/sass/main.sass

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