image popups

tgxn · Nov 1, 2023 · 9c7a207 · 9c7a207
1 parent 53ba714
commit 9c7a207
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 56 deletions.
diff --git a/src/components/Content/Image.jsx b/src/components/Content/Image.jsx
@@ -62,7 +62,7 @@ const ContentError = React.memo(function ({ message = false, bgcolor = "#ff55551
   );
 });
 
-export const Image = React.memo(({ imageSrc, nsfw }) => {
+export const Image = React.memo(({ imageSrc, nsfw, onClick }) => {
   const { src, isLoading, error } = useImage({
     srcList: imageSrc,
     useSuspense: false,
@@ -82,7 +82,7 @@ export const Image = React.memo(({ imageSrc, nsfw }) => {
         width: "200px",
         cursor: "pointer",
       }}
-      onClick={() => setOpen(true)}
+      onClick={onClick}
     >
       {!imageSrc && <ContentError message={"No Banner"} bgcolor={"#ff55fc21"} />}
       {imageSrc && (
@@ -97,43 +97,13 @@ export const Image = React.memo(({ imageSrc, nsfw }) => {
             // alt={"Banner"}
             //scaling
             style={{
-              filter: nsfw ? "blur(8px)" : null,
+              filter: nsfw ? "blur(8px)" : null, // TODO this should use user setting
               // consdytr
               objectFit: "contain",
               objectPosition: "center center",
               // aligh
             }}
           />
-          {/* Image Popup Modal */}
-          <Modal
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              // "&:hover": {
-              //   backgroundcolor: "red",
-              // },
-            }}
-            open={open}
-            onClose={handleClose}
-            hideBackdrop
-            // closeAfterTransition
-            // BackdropComponent={Backdrop}
-            // BackdropProps={{
-            //   timeout: 500,
-            // }}
-            // disablePortal
-          >
-            {/* <Fade
-            in={open}
-            timeout={500}
-            sx={{
-              outline: "none",
-            }}
-          > */}
-            <img src={src} style={{ maxHeight: "90%", maxWidth: "90%" }} />
-            {/* </Fade> */}
-          </Modal>
         </React.Fragment>
       )}
     </Box>

diff --git a/src/components/Content/PostThumb.jsx b/src/components/Content/PostThumb.jsx
@@ -1,35 +1,32 @@
-import React from "react";
+import React, { useState, useEffect, useRef } from "react";
 
 import Tooltip from "@mui/joy/Tooltip";
 import AspectRatio from "@mui/joy/AspectRatio";
 import Typography from "@mui/joy/Typography";
 
+import Box from "@mui/joy/Box";
+import Modal from "@mui/joy/Modal";
+import CircularProgress from "@mui/joy/CircularProgress";
+
 import LaunchIcon from "@mui/icons-material/Launch";
 
 import { SanitizedLink } from "../Display.jsx";
 import { Image } from "./Image.jsx";
 
-function ThumbWrapper({ width = 200, tooltip, children }) {
-  if (!tooltip)
-    return (
-      <AspectRatio
-        // objectFit="contain"
-        sx={{ width: width, cursor: "hand", ml: 2 }}
-        ratio="1/1"
-      >
-        {children}
-      </AspectRatio>
-    );
+function ThumbWrapper({ width = 200, tooltip, modal = null, children }) {
   return (
-    <Tooltip disableInteractive arrow title={tooltip} placement="top" variant="outlined">
-      <AspectRatio
-        // objectFit="contain"
-        sx={{ width: width, cursor: "hand", ml: 2 }}
-        ratio="1/1"
-      >
-        {children}
-      </AspectRatio>
-    </Tooltip>
+    <>
+      <Tooltip disableInteractive arrow title={tooltip} placement="top" variant="outlined">
+        <AspectRatio
+          // objectFit="contain"
+          sx={{ width: width, cursor: "hand", ml: 2 }}
+          ratio="1/1"
+        >
+          {children}
+        </AspectRatio>
+      </Tooltip>
+      {modal}
+    </>
   );
 }
 
@@ -49,11 +46,57 @@ export default function PostThumb({ width = 200, post }) {
   const isImage = url.match(/\.(jpeg|jpg|gif|png)$/) != null;
   const isPlayableMedia = url.match(/\.(mp4|vp9)$/) != null;
 
+  const [open, setOpen] = useState(false);
+  // const [image, setImage] = useState("false");
+
+  const handleClose = () => {
+    setOpen(false);
+  };
   // return image content thumb
   if (isImage) {
     return (
-      <ThumbWrapper tooltip="Expand Image">
-        <Image imageSrc={url} nsfw={nsfw} />
+      <ThumbWrapper
+        // tooltip="Expand Image"
+        modal={
+          <Modal
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              // "&:hover": {
+              //   backgroundcolor: "red",
+              // },
+            }}
+            open={open}
+            onClose={handleClose}
+            // hideBackdrop
+            // closeAfterTransition
+            // BackdropComponent={Backdrop}
+            // BackdropProps={{
+            //   timeout: 500,
+            // }}
+            // disablePortal
+          >
+            <Box
+              sx={{
+                outline: "none",
+              }}
+              // TODO should clicking the popup open new tab?
+              // onClick={() => window.open(url, "_new")}
+              onClick={() => setOpen(false)}
+            >
+              <img src={url} style={{ maxHeight: "90%", maxWidth: "90%" }} />
+            </Box>
+          </Modal>
+        }
+      >
+        <Image
+          imageSrc={url}
+          nsfw={nsfw}
+          onClick={() => {
+            setOpen(true);
+          }}
+        />
       </ThumbWrapper>
     );
   }