diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx index 1ce37e5c..55b0ffc2 100644 --- a/src/app/components/RenderMessageContent.tsx +++ b/src/app/components/RenderMessageContent.tsx @@ -29,6 +29,7 @@ import { ImageViewer } from './image-viewer'; import { PdfViewer } from './Pdf-viewer'; import { TextViewer } from './text-viewer'; import { testMatrixTo } from '../plugins/matrix-to'; +import {IImageContent} from "../../types/matrix/common"; type RenderMessageContentProps = { displayName: string; @@ -67,38 +68,63 @@ export function RenderMessageContent({ ); }; + const renderCaption = () => { + const content: IImageContent = getContent(); + if(content.filename && content.filename !== content.body) { + return ( + ( + + )} + renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined} + /> + ) + } + return null; + } const renderFile = () => ( - ( - ( - + ( + } - /> - )} - renderAsTextFile={() => ( - } - /> - )} - > - - - )} - outlined={outlineAttachment} - /> + renderAsPdfFile={() => ( + } + /> + )} + renderAsTextFile={() => ( + } + /> + )} + > + + + + )} + outlined={outlineAttachment} + /> + {renderCaption()} + ); if (msgType === MsgType.Text) { @@ -158,36 +184,40 @@ export function RenderMessageContent({ if (msgType === MsgType.Image) { return ( - ( - } - renderViewer={(p) => } - /> - )} - outlined={outlineAttachment} - /> + <> + ( + } + renderViewer={(p) => } + /> + )} + outlined={outlineAttachment} + /> + {renderCaption()} + ); } if (msgType === MsgType.Video) { return ( - ( - ( + <> + ( + ( ( @@ -195,26 +225,33 @@ export function RenderMessageContent({ )} /> ) - : undefined - } - renderVideo={(p) =>