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

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

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

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>(
             </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>

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<IImageContent>();
-  const imgInfo = content?.info;
-  const mxcUrl = content.file?.url ?? content.url;
-  if (!imgInfo || typeof imgInfo.mimetype !== 'string' || typeof mxcUrl !== 'string') {
-    return <MessageBrokenContent />;
-  }
-  const height = scaleYDimension(imgInfo.w || 152, 152, imgInfo.h || 152);
+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 (typeof mxcUrl !== 'string') {
+      return <MessageBrokenContent />;
+    }
+    const height = scaleYDimension(imgInfo?.w || 152, 152, imgInfo?.h || 152);
 
-  return (
-    <AttachmentBox
-      style={{
-        height: toRem(height < 48 ? 48 : height),
-        width: toRem(152),
-      }}
-      {...props}
-      ref={ref}
-    >
-      <ImageContent
-        autoPlay={autoPlay}
-        body={content.body || 'Image'}
-        info={imgInfo}
-        mimeType={imgInfo.mimetype}
-        url={mxcUrl}
-        encInfo={content.file}
-      />
-    </AttachmentBox>
-  );
-});
+    return (
+      <AttachmentBox
+        style={{
+          height: toRem(height < 48 ? 48 : height),
+          width: toRem(152),
+        }}
+        {...props}
+        ref={ref}
+      >
+        <ImageContent
+          autoPlay={autoPlay}
+          body={content.body || 'Image'}
+          info={imgInfo}
+          mimeType={imgInfo?.mimetype}
+          url={mxcUrl}
+          encInfo={content.file}
+        />
+      </AttachmentBox>
+    );
+  }
+);