refactor: image preview modal

src/common/component/ImagePreviewModal.js

@@ -40,7 +40,11 @@ const StyledWrapper = styled.div`
     }
   }
 `;
-export default function ImagePreviewModal({ image = null, closeModal }) {
+export default function ImagePreviewModal({
+  download = true,
+  data = null,
+  closeModal,
+}) {
   const wrapperRef = useRef();
   useOutsideClick(wrapperRef, closeModal);
   useKey(
@@ -51,19 +55,42 @@ export default function ImagePreviewModal({ image = null, closeModal }) {
     },
     { eventTypes: ["keyup"] }
   );
-  if (!image) return null;
+  // const handleMetaDataLoaded = (wtf) => {
+  //   console.log("meta data", wtf);
+  // };
+  // const handleDownload = (evt) => {
+  //   evt.preventDefault();
+  //   fetch(evt.target.href)
+  //     .then((response) => response.blob())
+  //     .then((blob) => {
+  //       console.log(blob);
+  //     });
+  // };
+  if (!data) return null;
+  const { originUrl, name, type } = data;
   return (
     <Modal>
       <StyledWrapper>
         <div className="box" ref={wrapperRef}>
           <img
-            src={image}
+            // onLoadedMetadata={handleMetaDataLoaded}
+            src={originUrl}
             alt="preview image"
             className="animate__animated animate__fadeIn animate__faster"
           />
-          <a className="origin" href={image} target="_blank" rel="noreferrer">
-            Download original
-          </a>
+          {download && (
+            <a
+              // onClick={handleDownload}
+              className="origin"
+              download={name}
+              type={type}
+              href={originUrl}
+              // target="_blank"
+              // rel="noreferrer"
+            >
+              Download original
+            </a>
+          )}
         </div>
       </StyledWrapper>
     </Modal>

src/common/component/Message/renderContent.js

@@ -50,11 +50,13 @@ const renderContent = ({
     case "image/png":
     case "image/jpeg":
       {
+        const { name, size, type } = properties;
         const { width, height } = getDefaultSize(properties);
         ctn = (
           <img
             className="img preview"
             style={{ width: `${width}px`, height: `${height}px` }}
+            data-meta={JSON.stringify({ width, height, name, type, size })}
             data-origin={content}
             src={thumbnail || content}
           />

src/common/component/MrakdownRender.js

@@ -33,7 +33,8 @@ export default function MrakdownRender({ content }) {
           const { target } = evt;
           // 图片
           if (target.nodeType == 1) {
-            setPreviewImage(target.dataset.origin || target.src);
+            const data = { originUrl: target.dataset.origin || target.src };
+            setPreviewImage(data);
           }
         },
         true
@@ -47,7 +48,8 @@ export default function MrakdownRender({ content }) {
     <>
       {previewImage && (
         <ImagePreviewModal
-          image={previewImage}
+          download={false}
+          data={previewImage}
           closeModal={closePreviewModal}
         />
       )}

src/routes/chat/Layout.js

@@ -118,7 +118,9 @@ export default function Layout({
           console.log(evt);
           const { target } = evt;
           if (target.nodeType == 1 && target.classList.contains("preview")) {
-            setPreviewImage(target.dataset.origin || target.src);
+            const originUrl = target.dataset.origin || target.src;
+            const meta = JSON.parse(target.dataset.meta || "{}");
+            setPreviewImage({ originUrl, ...meta });
           }
         },
         true
@@ -129,10 +131,7 @@ export default function Layout({
   return (
     <>
       {previewImage && (
-        <ImagePreviewModal
-          image={previewImage}
-          closeModal={closePreviewModal}
-        />
+        <ImagePreviewModal data={previewImage} closeModal={closePreviewModal} />
       )}
       <StyledWrapper ref={drop}>
         <header className="head">{header}</header>