feat: view all images of a memo (#393)

* feat: view all images of a memo

* fix: function arguments

* refactor: unified image preview

* refactor: image preview for resource dialog

Co-authored-by: XQ <qiaobingxue1998@163.com>

web/src/components/Image.tsx

@@ -1,4 +1,4 @@
-import showPreviewImageCarouselDialog from "./PreviewImageCarouselDialog";
+import showPreviewImageDialog from "./PreviewImageDialog";
 import "../less/image.less";
 
 interface Props {
@@ -11,7 +11,7 @@ const Image: React.FC<Props> = (props: Props) => {
   const { className, imgUrls, index } = props;
 
   const handleImageClick = () => {
-    showPreviewImageCarouselDialog(imgUrls, index);
+    showPreviewImageDialog(imgUrls, index);
   };
 
   return (

web/src/components/Memo.tsx

@@ -161,9 +161,15 @@ const Memo: React.FC<Props> = (props: Props) => {
         }
       }
     } else if (targetEl.tagName === "IMG") {
-      const imgUrl = targetEl.getAttribute("src");
-      if (imgUrl) {
-        showPreviewImageDialog(imgUrl);
+      const currImgUrl = targetEl.getAttribute("src");
+
+      if (currImgUrl) {
+        // use regex to get all image urls from memo content
+        const imageUrls = memo.content.match(/!\[.*?\]\((.*?)\)/g)?.map((item) => item.match(/\((.*?)\)/)?.[1] ?? "") ?? [];
+        showPreviewImageDialog(
+          imageUrls,
+          imageUrls.findIndex((item) => item === currImgUrl)
+        );
       }
     }
   };

web/src/components/PreviewImageCarouselDialog.tsx

@@ -1,76 +0,0 @@
-import * as utils from "../helpers/utils";
-import Icon from "./Icon";
-import { generateDialog } from "./Dialog";
-import "../less/preview-image-carousel-dialog.less";
-
-interface Props extends DialogProps {
-  imgUrls: string[];
-  index: number;
-}
-
-const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, index }: Props) => {
-  const handleCloseBtnClick = () => {
-    destroy();
-  };
-
-  const handleDownloadBtnClick = () => {
-    const a = document.createElement("a");
-    a.href = imgUrls[index];
-    a.download = `memos-${utils.getDateTimeString(Date.now())}.png`;
-    a.click();
-  };
-
-  const handleImgContainerClick = () => {
-    destroy();
-  };
-
-  const handlePrevBtnClick = () => {
-    destroy();
-    if (index > 0) {
-      showPreviewImageCarouselDialog(imgUrls, index - 1);
-    } else {
-      showPreviewImageCarouselDialog(imgUrls, imgUrls.length - 1);
-    }
-  };
-
-  const handleNextBtnClick = () => {
-    destroy();
-    if (index < imgUrls.length - 1) {
-      showPreviewImageCarouselDialog(imgUrls, index + 1);
-    } else {
-      showPreviewImageCarouselDialog(imgUrls, 0);
-    }
-  };
-
-  return (
-    <>
-      <div className="btns-container">
-        <button className="btn" onClick={handleCloseBtnClick}>
-          <Icon.X className="icon-img" />
-        </button>
-        <button className="btn" onClick={handleDownloadBtnClick}>
-          <Icon.Download className="icon-img" />
-        </button>
-        <button className="btn" onClick={handlePrevBtnClick}>
-          <Icon.ArrowLeft className="icon-img" />
-        </button>
-        <button className="btn" onClick={handleNextBtnClick}>
-          <Icon.ArrowRight className="icon-img" />
-        </button>
-      </div>
-      <div className="img-container" onClick={handleImgContainerClick}>
-        <img onClick={(e) => e.stopPropagation()} src={imgUrls[index]} />
-      </div>
-    </>
-  );
-};
-
-export default function showPreviewImageCarouselDialog(imgUrls: string[], index: number): void {
-  generateDialog(
-    {
-      className: "preview-image-carousel-dialog",
-    },
-    PreviewImageDialog,
-    { imgUrls, index }
-  );
-}

web/src/components/PreviewImageDialog.tsx

@@ -1,26 +1,42 @@
+import { useState } from "react";
 import * as utils from "../helpers/utils";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import "../less/preview-image-dialog.less";
 
 interface Props extends DialogProps {
-  imgUrl: string;
+  imgUrls: string[];
+  initialIndex: number;
 }
 
-const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
+const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }: Props) => {
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+
   const handleCloseBtnClick = () => {
     destroy();
   };
 
   const handleDownloadBtnClick = () => {
     const a = document.createElement("a");
-    a.href = imgUrl;
+    a.href = imgUrls[currentIndex];
     a.download = `memos-${utils.getDateTimeString(Date.now())}.png`;
     a.click();
   };
 
-  const handleImgContainerClick = () => {
-    destroy();
+  const handleImgContainerClick = (event: React.MouseEvent) => {
+    if (event.clientX < window.innerWidth / 2) {
+      if (currentIndex > 0) {
+        setCurrentIndex(currentIndex - 1);
+      } else {
+        destroy();
+      }
+    } else {
+      if (currentIndex < imgUrls.length - 1) {
+        setCurrentIndex(currentIndex + 1);
+      } else {
+        destroy();
+      }
+    }
   };
 
   return (
@@ -34,18 +50,21 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
         </button>
       </div>
       <div className="img-container" onClick={handleImgContainerClick}>
-        <img onClick={(e) => e.stopPropagation()} src={imgUrl} />
+        <img onClick={(e) => e.stopPropagation()} src={imgUrls[currentIndex]} />
       </div>
     </>
   );
 };
 
-export default function showPreviewImageDialog(imgUrl: string): void {
+export default function showPreviewImageDialog(imgUrls: string[] | string, initialIndex?: number): void {
   generateDialog(
     {
       className: "preview-image-dialog",
     },
     PreviewImageDialog,
-    { imgUrl }
+    {
+      imgUrls: Array.isArray(imgUrls) ? imgUrls : [imgUrls],
+      initialIndex: initialIndex || 0,
+    }
   );
 }

web/src/components/ResourcesDialog.tsx

@@ -83,10 +83,17 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
     inputEl.click();
   };
 
+  const getResouceUrl = useCallback((resource: Resource) => {
+    return `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
+  }, []);
+
   const handlePreviewBtnClick = (resource: Resource) => {
-    const resourceUrl = `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
+    const resourceUrl = getResouceUrl(resource);
     if (resource.type.startsWith("image")) {
-      showPreviewImageDialog(resourceUrl);
+      showPreviewImageDialog(
+        resources.filter((r) => r.type.startsWith("image")).map((r) => getResouceUrl(r)),
+        resources.findIndex((r) => r.id === resource.id)
+      );
     } else {
       window.open(resourceUrl);
     }

web/src/less/preview-image-carousel-dialog.less

@@ -1,34 +0,0 @@
-@import "./mixin.less";
-
-.preview-image-carousel-dialog {
-  @apply p-0;
-  z-index: 101;
-  background-color: rgba(0, 0, 0, 0.6);
-
-  > .dialog-container {
-    @apply flex flex-col justify-center items-center relative w-full h-full p-0;
-    background-color: unset;
-
-    > .btns-container {
-      @apply fixed top-8 right-8 flex flex-col justify-start items-center;
-
-      > .btn {
-        @apply mb-3 last:mb-0 w-8 h-8 p-1 cursor-pointer rounded opacity-90 bg-gray-300 z-10 shadow-md hover:opacity-70;
-
-        > .icon-img {
-          @apply w-6 h-auto;
-        }
-      }
-    }
-
-    > .img-container {
-      @apply w-full h-full p-4 flex flex-col justify-center items-center;
-      background-color: unset;
-      .hide-scroll-bar();
-
-      > img {
-        @apply h-auto w-auto max-w-full max-h-full shadow;
-      }
-    }
-  }
-}