Merge pull request #33 from handong-app/feat/junglesub/better-image

Feat/junglesub/better image

src/main/front/package.json

@@ -18,6 +18,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-infinite-scroller": "^1.2.6",
+    "react-photoswipe-gallery": "^3.0.2",
     "react-router-dom": "^6.26.2",
     "react-show-more-text": "github:junglesub/react-show-more-text",
     "recoil": "^0.7.7"

src/main/front/src/components/FeedCardGallery.jsx

@@ -1,33 +1,69 @@
 import "./FeedCardGallery.css";
+import { Gallery, useGallery } from "react-photoswipe-gallery";
 import { getExtensionFromUrl, isImage, isVideo } from "../tools/tools";
 
+import "photoswipe/dist/photoswipe.css";
+import FeedCardImageItem from "./FeedCardImageItem";
+
 const FeedCardGallery = ({ images = [] }) => {
   const filteredImages = images.filter((url) => isImage(url) || isVideo(url));
   if (filteredImages.length === 0) return <></>;
   return (
     <div className="FeedCardGallery">
-      <div className={`post-images images-${filteredImages.length}`}>
-        {filteredImages.slice(0, 3).map((url, index) =>
-          isImage(url) ? (
-            <img key={index} src={url} alt={`${index + 1}`} loading="lazy" />
-          ) : isVideo(url) ? (
-            <video key={index} controls>
-              <source src={url} type={`video/${getExtensionFromUrl(url)}`} />
-              Your browser does not support the video tag.
-            </video>
-          ) : (
-            <>Unknown Data</>
-          )
-        )}
-        {filteredImages.length >= 4 && (
-          <div className="more-images-overlay">
-            {filteredImages.length > 5 && <span>+{images.length - 4}</span>}
-            <img key={1} src={images[3]} alt={`4`} loading="lazy" />
-          </div>
-        )}
-      </div>
+      <Gallery withDownloadButton>
+        <FeedCardGalleryContent
+          images={images}
+          filteredImages={filteredImages}
+        />
+      </Gallery>
     </div>
   );
 };
 
 export default FeedCardGallery;
+
+const FeedCardGalleryContent = ({ filteredImages, images }) => {
+  const { open } = useGallery();
+
+  return (
+    <div className={`post-images images-${filteredImages.length}`}>
+      {filteredImages.slice(0, 3).map((url, index) =>
+        isImage(url) ? (
+          <FeedCardImageItem key={index} url={url} index={index} />
+        ) : // <img key={index} src={url} alt={`${index + 1}`} loading="lazy" />
+        isVideo(url) ? (
+          <video key={index} controls>
+            <source src={url} type={`video/${getExtensionFromUrl(url)}`} />
+            Your browser does not support the video tag.
+          </video>
+        ) : (
+          <>Unknown Data</>
+        )
+      )}
+      {filteredImages.length >= 4 && (
+        <div className="more-images-overlay">
+          {filteredImages.length > 5 && (
+            <span
+              onClick={() => {
+                open(3);
+              }}
+            >
+              +{images.length - 4}
+            </span>
+          )}
+          <FeedCardImageItem url={images[3]} index={3} />
+          {filteredImages.slice(4).map((url, index) => (
+            <FeedCardImageItem
+              key={index + 4}
+              url={url}
+              index={index + 4}
+              hidden={true}
+            />
+          ))}
+
+          {/* <img key={1} src={images[3]} alt={`4`} loading="lazy" /> */}
+        </div>
+      )}
+    </div>
+  );
+};

src/main/front/src/components/FeedCardImageItem.jsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import { Item } from "react-photoswipe-gallery";
+
+function FeedCardImageItem({ url, index, hidden }) {
+  const [dimensions, setDimensions] = useState({ width: 300, height: 300 });
+
+  useEffect(() => {
+    const loadDimensions = async () => {
+      try {
+        const { width, height } = await preloadImage(url);
+        setDimensions({ width, height });
+      } catch (error) {
+        console.error("Failed to load image dimensions", error);
+      }
+    };
+
+    loadDimensions();
+  }, [url]);
+
+  return (
+    <Item
+      original={url}
+      thumbnail={url}
+      width={dimensions.width}
+      height={dimensions.height}
+    >
+      {({ ref, open }) => (
+        <img
+          ref={ref}
+          onClick={open}
+          src={url}
+          alt={`image-${index}`}
+          className="thumbnail"
+          loading="lazy"
+          style={
+            { display: hidden ? "none" : "block" }
+            // { display: "block" }
+          }
+        />
+      )}
+    </Item>
+  );
+}
+
+export default FeedCardImageItem;
+
+const preloadImage = (src) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = src;
+    img.onload = () => resolve({ width: img.width, height: img.height });
+    img.onerror = reject;
+  });
+};

src/main/front/src/components/modals/PWAInstallModal.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Modal, Box, Typography, Button } from "@mui/material";
 import useDownloadPWA from "../../hooks/useDownloadPWA";
 import { getDateString } from "../../tools/tools";