hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix Boken Image & Sticker (#1455)

Browse source 
* fix image without info rendered as broken

* fix enc msg appear as decrypting after deletion
This commit is contained in:
Ajay Bura 2023-10-19 17:41:49 +11:00 committed by GitHub
parent c980fddfa1
commit b92b281050
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 50 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/app/organisms/room/RoomTimeline.tsx
View file

@ -1034,13 +1034,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
const content = mEvent.getContent<IImageContent>();
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 (
<Attachment>
@ -1052,7 +1049,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
<ImageContent
body={content.body || 'Image'}
info={imgInfo}
mimeType={imgInfo.mimetype}
mimeType={imgInfo?.mimetype}
url={mxcUrl}
encInfo={content.file}
autoPlay={mediaAutoLoad}
@ -1309,6 +1306,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
>
<EncryptedContent mEvent={mEvent}>
{() => {
if (mEvent.isRedacted()) return <MessageDeletedContent />;
if (mEvent.getType() === MessageEvent.Sticker)
return <StickerContent mEvent={mEvent} autoPlay={mediaAutoLoad} />;
if (mEvent.getType() === MessageEvent.RoomMessage)

7
src/app/organisms/room/message/EncryptedContent.tsx
View file

@ -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);

11
src/app/organisms/room/message/ImageContent.tsx
View file

@ -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>(
</TooltipProvider>
</Box>
)}
{!load && typeof info.size === 'number' && (
{!load && typeof info?.size === 'number' && (
<Box className={css.AbsoluteFooter} justifyContent="End" alignContent="Center" gap="200">
<Badge variant="Secondary" fill="Soft">
<Text size="L400">{bytesToSize(info.size)}</Text>

19
src/app/organisms/room/message/StickerContent.tsx
View file

@ -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,14 +14,16 @@ type StickerContentProps = {
mEvent: MatrixEvent;
autoPlay: boolean;
};
export const StickerContent = as<'div', StickerContentProps>(({ mEvent, autoPlay, ...props }, ref) => {
export const StickerContent = as<'div', StickerContentProps>(
({ mEvent, autoPlay, ...props }, ref) => {
if (mEvent.isRedacted()) return <MessageDeletedContent />;
const content = mEvent.getContent<IImageContent>();
const imgInfo = content?.info;
const mxcUrl = content.file?.url ?? content.url;
if (!imgInfo || typeof imgInfo.mimetype !== 'string' || typeof mxcUrl !== 'string') {
if (typeof mxcUrl !== 'string') {
return <MessageBrokenContent />;
}
const height = scaleYDimension(imgInfo.w || 152, 152, imgInfo.h || 152);
const height = scaleYDimension(imgInfo?.w || 152, 152, imgInfo?.h || 152);
return (
<AttachmentBox
@ -32,10 +38,11 @@ export const StickerContent = as<'div', StickerContentProps>(({ mEvent, autoPlay
autoPlay={autoPlay}
body={content.body || 'Image'}
info={imgInfo}
mimeType={imgInfo.mimetype}
mimeType={imgInfo?.mimetype}
url={mxcUrl}
encInfo={content.file}
/>
</AttachmentBox>
);
});
}
);