Add rendering image captions

cinnyapp · Nov 17, 2024 · dccf87d · dccf87d
1 parent a142630
commit dccf87d
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 13 deletions.
diff --git 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;
@@ -157,19 +158,48 @@ export function RenderMessageContent({
   }
 
   if (msgType === MsgType.Image) {
+    const content: IImageContent = getContent();
+    const renderCaption = content.filename && content.filename !== content.body;
     return (
-      <MImage
-        content={getContent()}
-        renderImageContent={(props) => (
-          <ImageContent
-            {...props}
-            autoPlay={mediaAutoLoad}
-            renderImage={(p) => <Image {...p} loading="lazy" />}
-            renderViewer={(p) => <ImageViewer {...p} />}
-          />
-        )}
-        outlined={outlineAttachment}
-      />
+      <>
+        <MImage
+            content={getContent()}
+            renderBody={(props) => (
+                <RenderBody
+                    {...props}
+                    highlightRegex={highlightRegex}
+                    htmlReactParserOptions={htmlReactParserOptions}
+                    linkifyOpts={linkifyOpts}
+                />
+            )}
+            renderImageContent={(props) => (
+                <ImageContent
+                    {...props}
+                    autoPlay={mediaAutoLoad}
+                    renderImage={(p) => <Image {...p} loading="lazy" />}
+                    renderViewer={(p) => <ImageViewer {...p} />}
+                />
+            )}
+            outlined={outlineAttachment}
+        />
+        {
+          renderCaption && (
+                <MNotice
+                    edited={edited}
+                    content={getContent()}
+                    renderBody={(props) => (
+                        <RenderBody
+                            {...props}
+                            highlightRegex={highlightRegex}
+                            htmlReactParserOptions={htmlReactParserOptions}
+                            linkifyOpts={linkifyOpts}
+                        />
+                    )}
+                    renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
+                />
+            )
+        }
+      </>
     );
   }
 

diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx
@@ -172,17 +172,19 @@ export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNot
 
 type RenderImageContentProps = {
   body: string;
+  filename?: string;
   info?: IImageInfo & IThumbnailContent;
   mimeType?: string;
   url: string;
   encInfo?: IEncryptedFile;
 };
 type MImageProps = {
   content: IImageContent;
+  renderBody: (props: RenderBodyProps) => ReactNode;
   renderImageContent: (props: RenderImageContentProps) => ReactNode;
   outlined?: boolean;
 };
-export function MImage({ content, renderImageContent, outlined }: MImageProps) {
+export function MImage({ content, renderBody, renderImageContent, outlined }: MImageProps) {
   const imgInfo = content?.info;
   const mxcUrl = content.file?.url ?? content.url;
   if (typeof mxcUrl !== 'string') {

diff --git a/src/types/matrix/common.ts b/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;