feat: lots updates

src/common/component/Message/index.js

@@ -1,8 +1,9 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import dayjs from "dayjs";
 import { useDispatch, useSelector } from "react-redux";
 import { useInViewRef } from "rooks";
 import Tippy from "@tippyjs/react";
+
 import Profile from "../Profile";
 import Avatar from "../Avatar";
 import { setChannelMsgRead } from "../../../app/slices/message.channel";
@@ -12,7 +13,7 @@ import Commands from "./Commands";
 import { emojis } from "./EmojiPicker";
 import EditMessage from "./EditMessage";
 import renderContent from "./renderContent";
-export default function Message({
+function Message({
   reply = null,
   gid = "",
   mid = "",
@@ -68,7 +69,10 @@ export default function Message({
   return removed ? (
     "removed"
   ) : (
-    <StyledWrapper ref={myRef} className={`${menuVisible ? "menu" : ""}`}>
+    <StyledWrapper
+      ref={myRef}
+      className={`${menuVisible ? "menu" : ""} ${inView ? "in_view" : ""}`}
+    >
       <Tippy
         interactive
         placement="left"
@@ -143,3 +147,6 @@ export default function Message({
     </StyledWrapper>
   );
 }
+export default React.memo(Message, (prevs, nexts) => {
+  return prevs.mid == nexts.mid;
+});

src/common/component/Message/renderContent.js

@@ -27,11 +27,16 @@ const renderContent = (type, content, edited = false) => {
         </>
       );
       break;
+    case "image/png":
     case "image/jpeg":
       ctn = (
         <img
-          className="img"
-          src={`${BASE_URL}/resource/image?id=${encodeURIComponent(content)}`}
+          className="img preview"
+          src={
+            content.startsWith("blob")
+              ? content
+              : `${BASE_URL}/resource/image?id=${encodeURIComponent(content)}`
+          }
         />
       );
       break;

src/common/component/Message/styled.js

@@ -7,6 +7,11 @@ const StyledMsg = styled.div`
   padding: 4px;
   margin: 8px 0;
   border-radius: 8px;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 150px;
+  &.in_view {
+    content-visibility: visible;
+  }
   &:hover,
   &.preview {
     background: #f5f6f7;
@@ -95,6 +100,7 @@ const StyledMsg = styled.div`
       }
       .img {
         max-width: 400px;
+        cursor: pointer;
       }
       a {
         border-radius: 2px;