Merge pull request #91 from tgxn/develop

Develop

package.json

@@ -38,6 +38,7 @@
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-image": "^4.1.0",
     "react-intersection-observer": "^9.5.2",
     "react-moment": "^1.1.3",
     "react-number-format": "^5.3.1",

src/components/Content/Image.jsx

@@ -0,0 +1,111 @@
+import React, { useState, useEffect, useRef } from "react";
+
+import { useImage } from "react-image";
+
+import Box from "@mui/joy/Box";
+import Modal from "@mui/joy/Modal";
+import CircularProgress from "@mui/joy/CircularProgress";
+
+const ContentSkeleton = React.memo(function ({ radius = "4px" }) {
+  return (
+    <Box
+      sx={(theme) => ({
+        ...theme.typography.body2,
+        color: theme.palette.text.secondary,
+
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+
+        height: "100%",
+        textAlign: "center",
+      })}
+    >
+      <CircularProgress
+        variant={"soft"}
+        color="neutral"
+        sx={{
+          marginBottom: "5px",
+        }}
+      />
+    </Box>
+  );
+});
+
+const ContentError = React.memo(function ({ message = false, bgcolor = "#ff55551c" }) {
+  return (
+    <Box
+      component="div"
+      sx={(theme) => ({
+        ...theme.typography.body2,
+
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+
+        background: bgcolor,
+        // color: "white",
+
+        // flexGrow: 1,
+
+        height: "100%",
+        textAlign: "center",
+      })}
+    >
+      <>
+        😭
+        <br /> {message ? message : "Content Error"}
+      </>
+    </Box>
+  );
+});
+
+export const Image = React.memo(({ imageSrc, nsfw, onClick }) => {
+  const { src, isLoading, error } = useImage({
+    srcList: imageSrc,
+    useSuspense: false,
+  });
+
+  const [open, setOpen] = useState(false);
+  // const [image, setImage] = useState("false");
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <Box
+      sx={{
+        height: "200px",
+        width: "200px",
+        cursor: "pointer",
+      }}
+      onClick={onClick}
+    >
+      {!imageSrc && <ContentError message={"No Banner"} bgcolor={"#ff55fc21"} />}
+      {imageSrc && (
+        <React.Fragment>
+          {isLoading && <ContentSkeleton />}
+          {error && <ContentError />}
+          <img
+            src={src}
+            loading="lazy"
+            width={"100%"}
+            height={"100%"}
+            // alt={"Banner"}
+            //scaling
+            style={{
+              filter: nsfw ? "blur(8px)" : null, // TODO this should use user setting
+              // consdytr
+              objectFit: "contain",
+              objectPosition: "center center",
+              // aligh
+            }}
+          />
+        </React.Fragment>
+      )}
+    </Box>
+  );
+});

src/components/Content/PostThumb.jsx

@@ -0,0 +1,114 @@
+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, 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>
+      {modal}
+    </>
+  );
+}
+
+export default function PostThumb({ width = 200, post }) {
+  /**
+   * look for these in `post`
+   *
+   * - url
+   * - thumbnail_url
+   * - nsfw
+   * - embed_title
+   * - embed_description
+   */
+
+  const { url, thumbnail_url, nsfw, embed_title, embed_description } = 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"
+        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>
+    );
+  }
+
+  // return unknown content thumbnail
+  return (
+    <ThumbWrapper tooltip={url}>
+      <SanitizedLink underline={"none"} href={url} target="_new">
+        <Typography component="div" sx={{ fontSize: "25px" }}>
+          <LaunchIcon color="neutral" />
+        </Typography>
+      </SanitizedLink>
+    </ThumbWrapper>
+  );
+}

src/components/Display.jsx

@@ -87,7 +87,7 @@ export const SanitizedLink = ({ children, href, ...props }) => {
 export const UpvoteDownvoteChip = ({ counts, ...props }) => {
   return (
     <SquareChip
-      color={"neutral"}
+      color={counts.score < 0 ? "danger" : counts.score == 0 ? "neutral" : "success"}
       tooltip={
         <>
           <Typography color="success" sx={{ pr: 1 }}>

src/components/ListItem/Comment.jsx

@@ -3,13 +3,11 @@ import React from "react";
 import Box from "@mui/joy/Box";
 import Typography from "@mui/joy/Typography";
 import Alert from "@mui/joy/Alert";
+import Divider from "@mui/joy/Divider";
 
-import ThumbsUpDownIcon from "@mui/icons-material/ThumbsUpDown";
-import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 import DoneAllIcon from "@mui/icons-material/DoneAll";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import ForumIcon from "@mui/icons-material/Forum";
-import DraftsIcon from "@mui/icons-material/Drafts";
 import FormatQuoteIcon from "@mui/icons-material/FormatQuote";
 
 import { SquareChip } from "../Display.jsx";
@@ -159,6 +157,8 @@ export default function CommentListItem({ report }) {
           {/* <DeletePostButton report={report} /> */}
           <RemoveCommentButton report={report} />
 
+          <Divider orientation="vertical" flexItem />
+
           <BanUserCommunityButton person={report.comment_creator} community={report.community} />
           <BanUserSiteButton person={report.comment_creator} />
           <PurgeUserSiteButton person={report.comment_creator} />