From b92b2810505dba9d6a185e43c7a944d941ac0c22 Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Thu, 19 Oct 2023 17:41:49 +1100 Subject: [PATCH] Fix Boken Image & Sticker (#1455) * fix image without info rendered as broken * fix enc msg appear as decrypting after deletion --- src/app/organisms/room/RoomTimeline.tsx | 10 ++- .../room/message/EncryptedContent.tsx | 7 +- .../organisms/room/message/ImageContent.tsx | 11 ++-- .../organisms/room/message/StickerContent.tsx | 65 ++++++++++--------- 4 files changed, 50 insertions(+), 43 deletions(-) diff --git a/src/app/organisms/room/RoomTimeline.tsx b/src/app/organisms/room/RoomTimeline.tsx index 2d7214c..bc81081 100644 --- a/src/app/organisms/room/RoomTimeline.tsx +++ b/src/app/organisms/room/RoomTimeline.tsx @@ -1034,13 +1034,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli const content = mEvent.getContent(); const imgInfo = content?.info; const mxcUrl = content.file?.url ?? content.url; - if (!imgInfo || typeof imgInfo.mimetype !== 'string' || typeof mxcUrl !== 'string') { - if (mxcUrl) { - return fileRenderer(mEventId, mEvent); - } + if (typeof mxcUrl !== 'string') { return null; } - const height = scaleYDimension(imgInfo.w || 400, 400, imgInfo.h || 400); + const height = scaleYDimension(imgInfo?.w || 400, 400, imgInfo?.h || 400); return ( @@ -1052,7 +1049,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli {() => { + if (mEvent.isRedacted()) return ; if (mEvent.getType() === MessageEvent.Sticker) return ; if (mEvent.getType() === MessageEvent.RoomMessage) diff --git a/src/app/organisms/room/message/EncryptedContent.tsx b/src/app/organisms/room/message/EncryptedContent.tsx index 97aa9cc..bf0fd19 100644 --- a/src/app/organisms/room/message/EncryptedContent.tsx +++ b/src/app/organisms/room/message/EncryptedContent.tsx @@ -7,11 +7,12 @@ type EncryptedContentProps = { }; export function EncryptedContent({ mEvent, children }: EncryptedContentProps) { - const [, setDecrypted] = useState(mEvent.isBeingDecrypted()); + const [, toggleDecrypted] = useState(!mEvent.isBeingDecrypted()); useEffect(() => { - const handleDecrypted: MatrixEventHandlerMap[MatrixEventEvent.Decrypted] = () => - setDecrypted(true); + const handleDecrypted: MatrixEventHandlerMap[MatrixEventEvent.Decrypted] = () => { + toggleDecrypted((s) => !s); + }; mEvent.on(MatrixEventEvent.Decrypted, handleDecrypted); return () => { mEvent.removeListener(MatrixEventEvent.Decrypted, handleDecrypted); diff --git a/src/app/organisms/room/message/ImageContent.tsx b/src/app/organisms/room/message/ImageContent.tsx index 9df360b..c8b32cc 100644 --- a/src/app/organisms/room/message/ImageContent.tsx +++ b/src/app/organisms/room/message/ImageContent.tsx @@ -27,19 +27,20 @@ import { Image } from '../../../components/media'; import * as css from './styles.css'; import { bytesToSize } from '../../../utils/common'; import { ImageViewer } from '../../../components/image-viewer'; +import { FALLBACK_MIMETYPE } from '../../../utils/mimeTypes'; export type ImageContentProps = { body: string; - mimeType: string; + mimeType?: string; url: string; - info: IImageInfo; + info?: IImageInfo; encInfo?: EncryptedAttachmentInfo; autoPlay?: boolean; }; export const ImageContent = as<'div', ImageContentProps>( ({ className, body, mimeType, url, info, encInfo, autoPlay, ...props }, ref) => { const mx = useMatrixClient(); - const blurHash = info[MATRIX_BLUR_HASH_PROPERTY_NAME]; + const blurHash = info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]; const [load, setLoad] = useState(false); const [error, setError] = useState(false); @@ -47,7 +48,7 @@ export const ImageContent = as<'div', ImageContentProps>( const [srcState, loadSrc] = useAsyncCallback( useCallback( - () => getFileSrcUrl(mx.mxcUrlToHttp(url) ?? '', mimeType, encInfo), + () => getFileSrcUrl(mx.mxcUrlToHttp(url) ?? '', mimeType || FALLBACK_MIMETYPE, encInfo), [mx, url, mimeType, encInfo] ) ); @@ -161,7 +162,7 @@ export const ImageContent = as<'div', ImageContentProps>( )} - {!load && typeof info.size === 'number' && ( + {!load && typeof info?.size === 'number' && ( {bytesToSize(info.size)} diff --git a/src/app/organisms/room/message/StickerContent.tsx b/src/app/organisms/room/message/StickerContent.tsx index b6dcc61..49b8b8d 100644 --- a/src/app/organisms/room/message/StickerContent.tsx +++ b/src/app/organisms/room/message/StickerContent.tsx @@ -1,7 +1,11 @@ import React from 'react'; import { as, toRem } from 'folds'; import { MatrixEvent } from 'matrix-js-sdk'; -import { AttachmentBox, MessageBrokenContent } from '../../../components/message'; +import { + AttachmentBox, + MessageBrokenContent, + MessageDeletedContent, +} from '../../../components/message'; import { ImageContent } from './ImageContent'; import { scaleYDimension } from '../../../utils/common'; import { IImageContent } from '../../../../types/matrix/common'; @@ -10,32 +14,35 @@ type StickerContentProps = { mEvent: MatrixEvent; autoPlay: boolean; }; -export const StickerContent = as<'div', StickerContentProps>(({ mEvent, autoPlay, ...props }, ref) => { - const content = mEvent.getContent(); - const imgInfo = content?.info; - const mxcUrl = content.file?.url ?? content.url; - if (!imgInfo || typeof imgInfo.mimetype !== 'string' || typeof mxcUrl !== 'string') { - return ; - } - const height = scaleYDimension(imgInfo.w || 152, 152, imgInfo.h || 152); +export const StickerContent = as<'div', StickerContentProps>( + ({ mEvent, autoPlay, ...props }, ref) => { + if (mEvent.isRedacted()) return ; + const content = mEvent.getContent(); + const imgInfo = content?.info; + const mxcUrl = content.file?.url ?? content.url; + if (typeof mxcUrl !== 'string') { + return ; + } + const height = scaleYDimension(imgInfo?.w || 152, 152, imgInfo?.h || 152); - return ( - - - - ); -}); + return ( + + + + ); + } +);