Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 10:33:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

web/timeline: add support for rendering captions

Browse source
This commit is contained in:
Tulir Asokan 2024-10-10 23:20:10 +03:00
parent 45d5d2a1a5
commit 842c8a593a
1 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
web/src/ui/timeline/content/MessageBody.tsx
View file

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