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/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,