From dccf87d884eab7ab62a301ddc4642b26ff8b6449 Mon Sep 17 00:00:00 2001 From: nexy7574 Date: Sun, 17 Nov 2024 17:55:03 +0000 Subject: [PATCH 1/8] Add rendering image captions --- src/app/components/RenderMessageContent.tsx | 54 ++++++++++++++----- .../components/message/MsgTypeRenderers.tsx | 4 +- src/types/matrix/common.ts | 1 + 3 files changed, 46 insertions(+), 13 deletions(-) diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx index 1ce37e5ca..3e6dcc0ae 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; @@ -157,19 +158,48 @@ export function RenderMessageContent({ } if (msgType === MsgType.Image) { + const content: IImageContent = getContent(); + const renderCaption = content.filename && content.filename !== content.body; return ( - ( - } - renderViewer={(p) => } - /> - )} - outlined={outlineAttachment} - /> + <> + ( + + )} + renderImageContent={(props) => ( + } + renderViewer={(p) => } + /> + )} + outlined={outlineAttachment} + /> + { + renderCaption && ( + ( + + )} + renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined} + /> + ) + } + ); } diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx index f7cbc4811..748b7fc6a 100644 --- a/src/app/components/message/MsgTypeRenderers.tsx +++ b/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; @@ -179,10 +180,11 @@ type RenderImageContentProps = { }; 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 index cc20d453c..d5f2f08cd 100644 --- 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; From 9a3cfd019c074f0827672e074bcc37dc60ce3ea3 Mon Sep 17 00:00:00 2001 From: nexy7574 Date: Sun, 17 Nov 2024 18:25:26 +0000 Subject: [PATCH 2/8] Handle sending captions for images --- src/app/features/room/RoomInput.tsx | 7 +++++-- src/app/features/room/msgContent.ts | 6 ++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx index 8fcfbc972..7a5fce42f 100644 --- a/src/app/features/room/RoomInput.tsx +++ b/src/app/features/room/RoomInput.tsx @@ -227,9 +227,10 @@ export const RoomInput = forwardRef( 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; if (fileItem.file.type.startsWith('image')) { - return getImageMsgContent(mx, fileItem, upload.mxc); + return getImageMsgContent(mx, fileItem, upload.mxc, caption); } if (fileItem.file.type.startsWith('video')) { return getVideoMsgContent(mx, fileItem, upload.mxc); @@ -318,7 +319,9 @@ export const RoomInput = forwardRef( content['m.relates_to'].is_falling_back = false; } } - mx.sendMessage(roomId, content); + if (!uploadBoardHandlers.current) { + mx.sendMessage(roomId, content); + } resetEditor(editor); resetEditorHistory(editor); setReplyDraft(undefined); diff --git a/src/app/features/room/msgContent.ts b/src/app/features/room/msgContent.ts index 103e8dcdf..812a293b3 100644 --- a/src/app/features/room/msgContent.ts +++ b/src/app/features/room/msgContent.ts @@ -42,7 +42,8 @@ const generateThumbnailContent = async ( export const getImageMsgContent = async ( mx: MatrixClient, item: TUploadItem, - mxc: string + mxc: string, + caption?: string ): Promise => { const { file, originalFile, encInfo } = item; const [imgError, imgEl] = await to(loadImageElement(getImageFileUrl(originalFile))); @@ -50,7 +51,8 @@ export const getImageMsgContent = async ( const content: IContent = { msgtype: MsgType.Image, - body: file.name, + filename: file.name, + body: caption || file.name, }; if (imgEl) { const blurHash = encodeBlurHash(imgEl, 512, scaleYDimension(imgEl.width, 512, imgEl.height)); From 905d796ca0a18cd322d73bda25de56164d4bd787 Mon Sep 17 00:00:00 2001 From: nexy7574 Date: Sun, 17 Nov 2024 21:20:24 +0000 Subject: [PATCH 3/8] Fix caption rendering on m.video and m.audio too --- src/app/components/RenderMessageContent.tsx | 162 +++++++++++------- .../components/message/MsgTypeRenderers.tsx | 2 +- src/app/features/room/msgContent.ts | 11 +- src/types/matrix/common.ts | 2 + 4 files changed, 111 insertions(+), 66 deletions(-) diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx index 3e6dcc0ae..f7640a483 100644 --- a/src/app/components/RenderMessageContent.tsx +++ b/src/app/components/RenderMessageContent.tsx @@ -156,48 +156,48 @@ export function RenderMessageContent({ /> ); } + const content: IImageContent = getContent(); + const renderCaption = content.filename && content.filename !== content.body; if (msgType === MsgType.Image) { - const content: IImageContent = getContent(); - const renderCaption = content.filename && content.filename !== content.body; return ( <> ( - - )} - renderImageContent={(props) => ( - } - renderViewer={(p) => } - /> - )} - outlined={outlineAttachment} + content={getContent()} + renderBody={(props) => ( + + )} + renderImageContent={(props) => ( + } + renderViewer={(p) => } + /> + )} + outlined={outlineAttachment} /> { renderCaption && ( - ( - - )} - renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined} + ( + - ) + )} + renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined} + /> + ) } ); @@ -205,19 +205,20 @@ export function RenderMessageContent({ if (msgType === MsgType.Video) { return ( - ( - ( + <> + ( + ( ( @@ -225,26 +226,65 @@ export function RenderMessageContent({ )} /> ) - : undefined - } - renderVideo={(p) =>