From 842c8a593ad22262b5dfb703e246768049d5680d Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Thu, 10 Oct 2024 23:20:10 +0300
Subject: [PATCH] web/timeline: add support for rendering captions

---
 web/src/ui/timeline/content/MessageBody.tsx | 30 ++++++++++++++-------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/web/src/ui/timeline/content/MessageBody.tsx b/web/src/ui/timeline/content/MessageBody.tsx
index f087856..e8cd6dc 100644
--- a/web/src/ui/timeline/content/MessageBody.tsx
+++ b/web/src/ui/timeline/content/MessageBody.tsx
@@ -35,6 +35,7 @@ interface TextMessageEventContent extends BaseMessageEventContent {
 
 interface MediaMessageEventContent extends BaseMessageEventContent {
 	msgtype: "m.image" | "m.file" | "m.audio" | "m.video"
+	filename?: string
 	url?: ContentURI
 	file?: {
 		url: ContentURI
@@ -79,15 +80,26 @@ const MessageBody = ({ event }: EventContentProps) => {
 	case "m.image": {
 		const openLightbox = use(LightboxContext)
 		const style = calculateMediaSize(content.info?.w, content.info?.h)
-		return <div className="media-container" style={style.container}>
-			<img
-				loading="lazy"
-				style={style.media}
-				src={getMediaURL(content.url ?? content.file?.url)}
-				alt={content.body}
-				onClick={openLightbox}
-			/>
-		</div>
+		let caption = null
+		if (content.format === "org.matrix.custom.html") {
+			caption = <div className="html-body" dangerouslySetInnerHTML={{
+				__html: sanitizeHtml(content.formatted_body!, sanitizeHtmlParams),
+			}}/>
+		} else if (content.body && content.filename && content.body !== content.filename) {
+			caption = content.body
+		}
+		return <>
+			<div className="media-container" style={style.container}>
+				<img
+					loading="lazy"
+					style={style.media}
+					src={getMediaURL(content.url ?? content.file?.url)}
+					alt={content.body}
+					onClick={openLightbox}
+				/>
+			</div>
+			{caption}
+		</>
 	}
 	}
 	return <code>{`{ "type": "${event.type}" }`}</code>