Adding spoilers to FluffyChat

Why do no end-to-end encrypted (E2EE) messaging app support spoilers? After searching for quite some time, the closest I found was Telegram's disappearing messages, which blur media. That works, but I don't really like Telegram, and don't want the messages get deleted. I just want them to be hidden until I click on them.

Although, while looking at the message info in some old chats, I noticed something interesting. I had sent an image and noticed its metadata included page.codeberg.everypizza.msc4193.spoiler. Intrigued, I revisited the client I used at the time when I was experimenting with different Matrix clients - Cinny - and discovered it does support spoilers! Unfortunately, Cinny isn't really great on my phone, because my keyboard doesn't like the text input, which is kind of an important feature of a messaging app. Looking for the string online revealed why that weird string was the spoiler metadata: MSC4193, where it specifies this is the unstable prefix before switching to m.spoiler. This also links to the Cinny PR that added spoiler support to Cinny.

With that info gained, I decided to take matters into my own hands. I forked FluffyChat and added spoiler support myself, and thirty minutes later, it just works™. Building for Android on Flutter was a bit tricky, but I managed to figure it out.

Chat screenshot — A screenshot showing a chat with a spoiler message blurred out.

Send screenshot — A screenshot of the message input field with the spoiler option available.

This was just two changes in two files.

Adding the spoiler toggle and spoiler metadata to extraContent to send_file_dialog.dart
Checking if spoiler metadata is set in image_bubble.dart and then blurring the image and adding the spoiler text. You can find the diff here

Upstreaming the changes will take a bit more time, as any changes in the UI need to be approved via an issue first.

I will keep this blog updated as soon as the changes are upstreamed.