mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-04 22:40:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add margin top on media caption (#2283)

Browse source
This commit is contained in:
Ajay Bura 2025-03-22 19:21:49 +11:00 • committed by GitHub
parent ea48092270
commit 1361c1d5de
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 47 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

87
src/app/components/RenderMessageContent.tsx
View file

@ -2,6 +2,7 @@ import React from 'react';
import { MsgType } from 'matrix-js-sdk'; import { MsgType } from 'matrix-js-sdk';
import { HTMLReactParserOptions } from 'html-react-parser'; import { HTMLReactParserOptions } from 'html-react-parser';
import { Opts } from 'linkifyjs'; import { Opts } from 'linkifyjs';
import { config } from 'folds';
import { import {
AudioContent, AudioContent,
DownloadFile, DownloadFile,
@ -29,7 +30,7 @@ import { ImageViewer } from './image-viewer';
import { PdfViewer } from './Pdf-viewer'; import { PdfViewer } from './Pdf-viewer';
import { TextViewer } from './text-viewer'; import { TextViewer } from './text-viewer';
import { testMatrixTo } from '../plugins/matrix-to'; import { testMatrixTo } from '../plugins/matrix-to';
import {IImageContent} from "../../types/matrix/common"; import { IImageContent } from '../../types/matrix/common';
type RenderMessageContentProps = { type RenderMessageContentProps = {
displayName: string; displayName: string;
@ -70,9 +71,10 @@ export function RenderMessageContent({
}; };
const renderCaption = () => { const renderCaption = () => {
const content: IImageContent = getContent(); const content: IImageContent = getContent();
if(content.filename && content.filename !== content.body) { if (content.filename && content.filename !== content.body) {
return ( return (
<MText <MText
style={{ marginTop: config.space.S200 }}
edited={edited} edited={edited}
content={content} content={content}
renderBody={(props) => ( renderBody={(props) => (
@ -85,41 +87,40 @@ export function RenderMessageContent({
)} )}
renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined} renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
/> />
) );
} }
return null; return null;
} };
const renderFile = () => ( const renderFile = () => (
<> <>
<MFile <MFile
content={getContent()} content={getContent()}
renderFileContent={({ body, mimeType, info, encInfo, url }) => ( renderFileContent={({ body, mimeType, info, encInfo, url }) => (
<FileContent <FileContent
body={body} body={body}
mimeType={mimeType} mimeType={mimeType}
renderAsPdfFile={() => ( renderAsPdfFile={() => (
<ReadPdfFile <ReadPdfFile
body={body} body={body}
mimeType={mimeType} mimeType={mimeType}
url={url} url={url}
encInfo={encInfo} encInfo={encInfo}
renderViewer={(p) => <PdfViewer {...p} />} renderViewer={(p) => <PdfViewer {...p} />}
/> />
)} )}
renderAsTextFile={() => ( renderAsTextFile={() => (
<ReadTextFile <ReadTextFile
body={body} body={body}
mimeType={mimeType} mimeType={mimeType}
url={url} url={url}
encInfo={encInfo} encInfo={encInfo}
renderViewer={(p) => <TextViewer {...p} />} renderViewer={(p) => <TextViewer {...p} />}
/> />
)} )}
> >
<DownloadFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} info={info} /> <DownloadFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} info={info} />
</FileContent> </FileContent>
)} )}
outlined={outlineAttachment} outlined={outlineAttachment}
/> />
@ -188,12 +189,12 @@ export function RenderMessageContent({
<MImage <MImage
content={getContent()} content={getContent()}
renderImageContent={(props) => ( renderImageContent={(props) => (
<ImageContent <ImageContent
{...props} {...props}
autoPlay={mediaAutoLoad} autoPlay={mediaAutoLoad}
renderImage={(p) => <Image {...p} loading="lazy" />} renderImage={(p) => <Image {...p} loading="lazy" />}
renderViewer={(p) => <ImageViewer {...p} />} renderViewer={(p) => <ImageViewer {...p} />}
/> />
)} )}
outlined={outlineAttachment} outlined={outlineAttachment}
/> />
@ -218,13 +219,13 @@ export function RenderMessageContent({
renderThumbnail={ renderThumbnail={
mediaAutoLoad mediaAutoLoad
? () => ( ? () => (
<ThumbnailContent <ThumbnailContent
info={info} info={info}
renderImage={(src) => ( renderImage={(src) => (
<Image alt={body} title={body} src={src} loading="lazy" /> <Image alt={body} title={body} src={src} loading="lazy" />
)} )}
/> />
) )
: undefined : undefined
} }
renderVideo={(p) => <Video {...p} />} renderVideo={(p) => <Video {...p} />}
@ -234,7 +235,6 @@ export function RenderMessageContent({
/> />
{renderCaption()} {renderCaption()}
</> </>
); );
} }
@ -251,7 +251,6 @@ export function RenderMessageContent({
/> />
{renderCaption()} {renderCaption()}
</> </>
); );
} }

6
src/app/components/message/MsgTypeRenderers.tsx
View file

@ -1,4 +1,4 @@
import React, { ReactNode } from 'react'; import React, { CSSProperties, ReactNode } from 'react';
import { Box, Chip, Icon, Icons, Text, toRem } from 'folds'; import { Box, Chip, Icon, Icons, Text, toRem } from 'folds';
import { IContent } from 'matrix-js-sdk'; import { IContent } from 'matrix-js-sdk';
import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex'; import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex';
@ -74,8 +74,9 @@ type MTextProps = {
content: Record<string, unknown>; content: Record<string, unknown>;
renderBody: (props: RenderBodyProps) => ReactNode; renderBody: (props: RenderBodyProps) => ReactNode;
renderUrlsPreview?: (urls: string[]) => ReactNode; renderUrlsPreview?: (urls: string[]) => ReactNode;
style?: CSSProperties;
}; };
export function MText({ edited, content, renderBody, renderUrlsPreview }: MTextProps) { export function MText({ edited, content, renderBody, renderUrlsPreview, style }: MTextProps) {
const { body, formatted_body: customBody } = content; const { body, formatted_body: customBody } = content;
if (typeof body !== 'string') return <BrokenContent />; if (typeof body !== 'string') return <BrokenContent />;
@ -88,6 +89,7 @@ export function MText({ edited, content, renderBody, renderUrlsPreview }: MTextP
<MessageTextBody <MessageTextBody
preWrap={typeof customBody !== 'string'} preWrap={typeof customBody !== 'string'}
jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)} jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
style={style}
> >
{renderBody({ {renderBody({
body: trimmedBody, body: trimmedBody,