Render captions to m.file, m.image, m.video, and m.audio (#2059)

* Add rendering image captions

* Handle sending captions for images

* Fix caption rendering on m.video and m.audio too

* Remove unused renderBody() parameter

* Fix m.file rendering body instead of filename where possible

* Add caption rendering for generic files

+ Fix video and audio not properly sending captions

* Use m.text for captions & render on demand

* Allow custom HTML in sending captions

* Don't *send* captions

* mvoe content const into renderCaption()

---------

Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>

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,8 +68,30 @@ export function RenderMessageContent({
       </UrlPreviewHolder>
     );
   };
+  const renderCaption = () => {
+    const content: IImageContent = getContent();
+    if(content.filename && content.filename !== content.body) {
+      return (
+        <MText
+          edited={edited}
+          content={content}
+          renderBody={(props) => (
+            <RenderBody
+              {...props}
+              highlightRegex={highlightRegex}
+              htmlReactParserOptions={htmlReactParserOptions}
+              linkifyOpts={linkifyOpts}
+            />
+          )}
+          renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
+        />
+      )
+    }
+    return null;
+  }
 
   const renderFile = () => (
+    <>
       <MFile
         content={getContent()}
         renderFileContent={({ body, mimeType, info, encInfo, url }) => (
@@ -96,9 +119,12 @@ export function RenderMessageContent({
             >
               <DownloadFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} info={info} />
             </FileContent>
+
         )}
         outlined={outlineAttachment}
       />
+      {renderCaption()}
+    </>
   );
 
   if (msgType === MsgType.Text) {
@@ -158,6 +184,7 @@ export function RenderMessageContent({
 
   if (msgType === MsgType.Image) {
     return (
+      <>
         <MImage
           content={getContent()}
           renderImageContent={(props) => (
@@ -170,11 +197,14 @@ export function RenderMessageContent({
           )}
           outlined={outlineAttachment}
         />
+        {renderCaption()}
+      </>
     );
   }
 
   if (msgType === MsgType.Video) {
     return (
+      <>
         <MVideo
           content={getContent()}
           renderAsFile={renderFile}
@@ -202,11 +232,15 @@ export function RenderMessageContent({
           )}
           outlined={outlineAttachment}
         />
+        {renderCaption()}
+      </>
+
     );
   }
 
   if (msgType === MsgType.Audio) {
     return (
+      <>
         <MAudio
           content={getContent()}
           renderAsFile={renderFile}
@@ -215,6 +249,9 @@ export function RenderMessageContent({
           )}
           outlined={outlineAttachment}
         />
+        {renderCaption()}
+      </>
+
     );
   }
 

src/app/components/message/MsgTypeRenderers.tsx

@@ -172,6 +172,7 @@ export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNot
 
 type RenderImageContentProps = {
   body: string;
+  filename?: string;
   info?: IImageInfo & IThumbnailContent;
   mimeType?: string;
   url: string;
@@ -282,7 +283,7 @@ export function MAudio({ content, renderAsFile, renderAudioContent, outlined }:
   return (
     <Attachment outlined={outlined}>
       <AttachmentHeader>
-        <FileHeader body={content.body ?? 'Audio'} mimeType={safeMimeType} />
+        <FileHeader body={content.filename ?? content.body ?? 'Audio'} mimeType={safeMimeType} />
       </AttachmentHeader>
       <AttachmentBox>
         <AttachmentContent>
@@ -322,14 +323,14 @@ export function MFile({ content, renderFileContent, outlined }: MFileProps) {
     <Attachment outlined={outlined}>
       <AttachmentHeader>
         <FileHeader
-          body={content.body ?? 'Unnamed File'}
+          body={content.filename ?? content.body ?? 'Unnamed File'}
           mimeType={fileInfo?.mimetype ?? FALLBACK_MIMETYPE}
         />
       </AttachmentHeader>
       <AttachmentBox>
         <AttachmentContent>
           {renderFileContent({
-            body: content.body ?? 'File',
+            body: content.filename ?? content.body ?? 'File',
             info: fileInfo ?? {},
             mimeType: fileInfo?.mimetype ?? FALLBACK_MIMETYPE,
             url: mxcUrl,

src/app/features/room/msgContent.ts

@@ -42,7 +42,7 @@ const generateThumbnailContent = async (
 export const getImageMsgContent = async (
   mx: MatrixClient,
   item: TUploadItem,
-  mxc: string
+  mxc: string,
 ): Promise<IContent> => {
   const { file, originalFile, encInfo } = item;
   const [imgError, imgEl] = await to(loadImageElement(getImageFileUrl(originalFile)));
@@ -50,6 +50,7 @@ export const getImageMsgContent = async (
 
   const content: IContent = {
     msgtype: MsgType.Image,
+    filename: file.name,
     body: file.name,
   };
   if (imgEl) {
@@ -74,7 +75,7 @@ export const getImageMsgContent = async (
 export const getVideoMsgContent = async (
   mx: MatrixClient,
   item: TUploadItem,
-  mxc: string
+  mxc: string,
 ): Promise<IContent> => {
   const { file, originalFile, encInfo } = item;
 
@@ -83,6 +84,7 @@ export const getVideoMsgContent = async (
 
   const content: IContent = {
     msgtype: MsgType.Video,
+    filename: file.name,
     body: file.name,
   };
   if (videoEl) {
@@ -122,6 +124,7 @@ export const getAudioMsgContent = (item: TUploadItem, mxc: string): IContent =>
   const { file, encInfo } = item;
   const content: IContent = {
     msgtype: MsgType.Audio,
+    filename: file.name,
     body: file.name,
     info: {
       mimetype: file.type,

src/types/matrix/common.ts

@@ -43,6 +43,7 @@ export type IThumbnailContent = {
 export type IImageContent = {
   msgtype: MsgType.Image;
   body?: string;
+  filename?: string;
   url?: string;
   info?: IImageInfo & IThumbnailContent;
   file?: IEncryptedFile;
@@ -51,6 +52,7 @@ export type IImageContent = {
 export type IVideoContent = {
   msgtype: MsgType.Video;
   body?: string;
+  filename?: string;
   url?: string;
   info?: IVideoInfo & IThumbnailContent;
   file?: IEncryptedFile;
@@ -59,6 +61,7 @@ export type IVideoContent = {
 export type IAudioContent = {
   msgtype: MsgType.Audio;
   body?: string;
+  filename?: string;
   url?: string;
   info?: IAudioInfo;
   file?: IEncryptedFile;
@@ -67,6 +70,7 @@ export type IAudioContent = {
 export type IFileContent = {
   msgtype: MsgType.File;
   body?: string;
+  filename?: string;
   url?: string;
   info?: IFileInfo & IThumbnailContent;
   file?: IEncryptedFile;