Fix Boken Image & Sticker (#1455)

* fix image without info rendered as broken

* fix enc msg appear as decrypting after deletion

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