From 5e858265cf64cb10aed21dd991682c0cb0a29f3b Mon Sep 17 00:00:00 2001
From: Domenic Horner <domenic@tgxn.net>
Date: Wed, 1 Nov 2023 23:20:42 +0800
Subject: [PATCH] more render content

---
 package-lock.json                    |  4 +-
 package.json                         |  2 +-
 src/components/Content/Image.jsx     | 43 +++++++++++++++++++
 src/components/Content/PostThumb.jsx | 64 ++++++++++++++++++++++------
 4 files changed, 97 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4d60a92..f131df0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "lemmy-modder",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lemmy-modder",
-      "version": "1.3.3",
+      "version": "1.3.4",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.23.2",
diff --git a/package.json b/package.json
index 5d4bb3a..63a5f67 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lemmy-modder",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "Lemmy Moderation App",
   "author": "tgxn",
   "license": "MIT",
diff --git a/src/components/Content/Image.jsx b/src/components/Content/Image.jsx
index 34743ff..dedbdd1 100644
--- a/src/components/Content/Image.jsx
+++ b/src/components/Content/Image.jsx
@@ -109,3 +109,46 @@ export const Image = React.memo(({ imageSrc, nsfw, onClick }) => {
     </Box>
   );
 });
+
+export const Video = React.memo(({ imageSrc, nsfw, onClick }) => {
+  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 Content"} bgcolor={"#ff55fc21"} />}
+      {imageSrc && (
+        <React.Fragment>
+          {/* {isLoading && <ContentSkeleton />} */}
+          {/* {error && <ContentError />} */}
+          <video
+            src={imageSrc}
+            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>
+  );
+});
diff --git a/src/components/Content/PostThumb.jsx b/src/components/Content/PostThumb.jsx
index 7d6dca6..518fd89 100644
--- a/src/components/Content/PostThumb.jsx
+++ b/src/components/Content/PostThumb.jsx
@@ -11,7 +11,7 @@ import CircularProgress from "@mui/joy/CircularProgress";
 import LaunchIcon from "@mui/icons-material/Launch";
 
 import { SanitizedLink } from "../Display.jsx";
-import { Image } from "./Image.jsx";
+import { Image, Video } from "./Image.jsx";
 
 function ThumbWrapper({ width = 200, tooltip, modal = null, children }) {
   return (
@@ -43,8 +43,8 @@ export default function PostThumb({ width = 200, post }) {
 
   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 isImage = url.match(/\.(jpeg|jpg|gif|png|webp)$/) != null;
+  const isVideo = url.match(/\.(mp4|vppppp)$/) != null;
 
   const [open, setOpen] = useState(false);
   // const [image, setImage] = useState("false");
@@ -56,6 +56,7 @@ export default function PostThumb({ width = 200, post }) {
   if (isImage) {
     return (
       <ThumbWrapper
+        tooltip={url}
         // tooltip="Expand Image"
         modal={
           <Modal
@@ -63,23 +64,18 @@ export default function PostThumb({ width = 200, post }) {
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              // "&:hover": {
-              //   backgroundcolor: "red",
-              // },
             }}
             open={open}
             onClose={handleClose}
-            // hideBackdrop
-            // closeAfterTransition
-            // BackdropComponent={Backdrop}
-            // BackdropProps={{
-            //   timeout: 500,
-            // }}
-            // disablePortal
           >
             <Box
               sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
                 outline: "none",
+                width: "100%",
+                height: "90%",
               }}
               // TODO should clicking the popup open new tab?
               // onClick={() => window.open(url, "_new")}
@@ -100,6 +96,48 @@ export default function PostThumb({ width = 200, post }) {
       </ThumbWrapper>
     );
   }
+  if (isVideo) {
+    return (
+      <ThumbWrapper
+        tooltip={url}
+        modal={
+          <Modal
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+            open={open}
+            onClose={handleClose}
+          >
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                outline: "none",
+                width: "100%",
+                height: "90%",
+              }}
+              // TODO should clicking the popup open new tab?
+              // onClick={() => window.open(url, "_new")}
+              onClick={() => setOpen(false)}
+            >
+              <video autoplay="false" src={url} style={{ maxHeight: "90%", maxWidth: "90%" }} controls />
+            </Box>
+          </Modal>
+        }
+      >
+        <Video
+          imageSrc={url}
+          nsfw={nsfw}
+          onClick={() => {
+            setOpen(true);
+          }}
+        />
+      </ThumbWrapper>
+    );
+  }
 
   // return unknown content thumbnail
   return (