Add caption rendering for generic files

+ Fix video and audio not properly sending captions
cinnyapp · Nov 17, 2024 · 78ffa88 · 78ffa88
1 parent 3d92efd
commit 78ffa88
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 87 deletions.
diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx
@@ -68,38 +68,62 @@ export function RenderMessageContent({
       </UrlPreviewHolder>
     );
   };
+  const content: IImageContent = getContent();
+  const renderCaption = content.filename && content.filename !== content.body;
+  let renderedCaption: React.ReactNode = null;
+  if(renderCaption) {
+    renderedCaption = (
+      <MNotice
+        edited={edited}
+        content={getContent()}
+        renderBody={(props) => (
+          <RenderBody
+            {...props}
+            highlightRegex={highlightRegex}
+            htmlReactParserOptions={htmlReactParserOptions}
+            linkifyOpts={linkifyOpts}
+          />
+        )}
+        renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
+      />
+    )
+  }
 
   const renderFile = () => (
-    <MFile
-      content={getContent()}
-      renderFileContent={({ body, mimeType, info, encInfo, url }) => (
-        <FileContent
-          body={body}
-          mimeType={mimeType}
-          renderAsPdfFile={() => (
-            <ReadPdfFile
-              body={body}
-              mimeType={mimeType}
-              url={url}
-              encInfo={encInfo}
-              renderViewer={(p) => <PdfViewer {...p} />}
-            />
-          )}
-          renderAsTextFile={() => (
-            <ReadTextFile
+    <>
+      <MFile
+        content={getContent()}
+        renderFileContent={({ body, mimeType, info, encInfo, url }) => (
+            <FileContent
               body={body}
               mimeType={mimeType}
-              url={url}
-              encInfo={encInfo}
-              renderViewer={(p) => <TextViewer {...p} />}
-            />
-          )}
-        >
-          <DownloadFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} info={info} />
-        </FileContent>
-      )}
-      outlined={outlineAttachment}
-    />
+              renderAsPdfFile={() => (
+                <ReadPdfFile
+                  body={body}
+                  mimeType={mimeType}
+                  url={url}
+                  encInfo={encInfo}
+                  renderViewer={(p) => <PdfViewer {...p} />}
+                />
+              )}
+              renderAsTextFile={() => (
+                <ReadTextFile
+                  body={body}
+                  mimeType={mimeType}
+                  url={url}
+                  encInfo={encInfo}
+                  renderViewer={(p) => <TextViewer {...p} />}
+                />
+              )}
+            >
+              <DownloadFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} info={info} />
+            </FileContent>
+
+        )}
+        outlined={outlineAttachment}
+      />
+      {renderedCaption}
+    </>
   );
 
   if (msgType === MsgType.Text) {
@@ -156,8 +180,6 @@ export function RenderMessageContent({
       />
     );
   }
-  const content: IImageContent = getContent();
-  const renderCaption = content.filename && content.filename !== content.body;
 
   if (msgType === MsgType.Image) {
     return (
@@ -174,23 +196,7 @@ export function RenderMessageContent({
           )}
           outlined={outlineAttachment}
         />
-        {
-          renderCaption && (
-            <MNotice
-              edited={edited}
-              content={getContent()}
-              renderBody={(props) => (
-                <RenderBody
-                  {...props}
-                  highlightRegex={highlightRegex}
-                  htmlReactParserOptions={htmlReactParserOptions}
-                  linkifyOpts={linkifyOpts}
-                />
-              )}
-              renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
-            />
-          )
-        }
+        {renderedCaption}
       </>
     );
   }
@@ -225,23 +231,7 @@ export function RenderMessageContent({
           )}
           outlined={outlineAttachment}
         />
-        {
-          renderCaption && (
-            <MNotice
-              edited={edited}
-              content={getContent()}
-              renderBody={(props) => (
-                <RenderBody
-                  {...props}
-                  highlightRegex={highlightRegex}
-                  htmlReactParserOptions={htmlReactParserOptions}
-                  linkifyOpts={linkifyOpts}
-                />
-              )}
-              renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
-            />
-          )
-        }
+        {renderedCaption}
       </>
 
     );
@@ -258,23 +248,7 @@ export function RenderMessageContent({
           )}
           outlined={outlineAttachment}
         />
-        {
-          renderCaption && (
-            <MNotice
-              edited={edited}
-              content={getContent()}
-              renderBody={(props) => (
-                <RenderBody
-                  {...props}
-                  highlightRegex={highlightRegex}
-                  htmlReactParserOptions={htmlReactParserOptions}
-                  linkifyOpts={linkifyOpts}
-                />
-              )}
-              renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
-            />
-          )
-        }
+        {renderedCaption}
       </>
 
     );

diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
@@ -227,18 +227,18 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       const contentsPromises = uploads.map(async (upload) => {
         const fileItem = selectedFiles.find((f) => f.file === upload.file);
         if (!fileItem) throw new Error('Broken upload');
-        const caption = toPlainText(editor.children).trim() || null;
+        const caption = toPlainText(editor.children).trim() || undefined;
 
         if (fileItem.file.type.startsWith('image')) {
           return getImageMsgContent(mx, fileItem, upload.mxc, caption);
         }
         if (fileItem.file.type.startsWith('video')) {
-          return getVideoMsgContent(mx, fileItem, upload.mxc);
+          return getVideoMsgContent(mx, fileItem, upload.mxc, caption);
         }
         if (fileItem.file.type.startsWith('audio')) {
-          return getAudioMsgContent(fileItem, upload.mxc);
+          return getAudioMsgContent(fileItem, upload.mxc, caption);
         }
-        return getFileMsgContent(fileItem, upload.mxc);
+        return getFileMsgContent(fileItem, upload.mxc, caption);
       });
       handleCancelUpload(uploads);
       const contents = fulfilledPromiseSettledResult(await Promise.allSettled(contentsPromises));

diff --git a/src/app/features/room/msgContent.ts b/src/app/features/room/msgContent.ts
@@ -144,11 +144,11 @@ export const getAudioMsgContent = (item: TUploadItem, mxc: string, caption?: str
   return content;
 };
 
-export const getFileMsgContent = (item: TUploadItem, mxc: string): IContent => {
+export const getFileMsgContent = (item: TUploadItem, mxc: string, caption?: string): IContent => {
   const { file, encInfo } = item;
   const content: IContent = {
     msgtype: MsgType.File,
-    body: file.name,
+    body: caption ?? file.name,
     filename: file.name,
     info: {
       mimetype: file.type,