Skip to content

Commit

Permalink
blue nsfw
Browse files Browse the repository at this point in the history
  • Loading branch information
@tgxn
tgxn committed Nov 1, 2023
1 parent 416981e commit 5b77cfe
Show file tree
Hide file tree
Showing 4 changed files with 156 additions and 307 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
141 changes: 141 additions & 0 deletions src/components/Content/Image.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
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 }) => {
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={() => setOpen(true)}
>
{!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,
// 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>
);
});
220 changes: 14 additions & 206 deletions src/components/Content/PostThumb.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,218 +1,25 @@
import React, { useState, useEffect, useRef } from "react";
import React from "react";

import { useImage } from "react-image";

import Box from "@mui/joy/Box";
import Tooltip from "@mui/joy/Tooltip";
import AspectRatio from "@mui/joy/AspectRatio";
import Typography from "@mui/joy/Typography";
import Modal from "@mui/joy/Modal";
import CircularProgress from "@mui/joy/CircularProgress";

import LaunchIcon from "@mui/icons-material/Launch";

import { SanitizedLink } from "../Display.jsx";

export 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>
);
});

export 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 BannerImage = React.memo(({ imageSrc }) => {
const { src, isLoading, error } = useImage({
srcList: imageSrc,
useSuspense: false,
});

return (
<Box
sx={{
height: "200px",
width: "200px",
cursor: "pointer",
}}
onClick={() => setOpen(true)}
>
{!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={{
// consdytr
objectFit: "contain",
objectPosition: "center center",
// aligh
}}
/>
</React.Fragment>
)}
</Box>
);
});

// image thumbnail renderer
function Image({ src, alt = "" }) {
const [imageLoaded, setImageLoaded] = useState(false);
const [imageError, setImageError] = useState(false);

const [open, setOpen] = useState(false);
// const [image, setImage] = useState("false");

const handleClose = () => {
setOpen(false);
};

// const handleImage = (value) => {
// setImage(value);
// setOpen(true);
// console.log(image);
// };

// if (imageError) {
// return (
// <Typography level="h2" component="div">
// 😿
// </Typography>
// );
// }

return (
<Box
sx={{
cursor: "pointer",
}}
onClick={() => setOpen(true)}
>
<img
src={src}
srcSet={src}
alt={alt}
// height={"200px"}
height={"200px"}
loading="lazy"
style={{
visible: imageLoaded ? "visible" : "hidden",
}}
onLoad={() => setImageLoaded(true)}
onError={() => setImageError(true)}
/>

{!imageError ? null : (
<Box
sx={{
cursor: "pointer",
}}
>
<Typography level="h2" component="div">
😿
</Typography>
</Box>
)}
{imageLoaded ? null : (
<Box
sx={{
cursor: "pointer",
}}
>
<Typography level="h2" component="div">
LOAD
</Typography>{" "}
</Box>
)}

{/* Image Popup Modal */}
<Modal
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
"&:hover": {
backgroundcolor: "red",
},
}}
open={open}
onClose={handleClose}
// closeAfterTransition
// BackdropComponent={Backdrop}
// BackdropProps={{
// timeout: 500,
// }}
// disablePortal
>
{/* <Fade
in={open}
timeout={500}
sx={{
outline: "none",
}}
> */}
<img src={src} alt={alt} style={{ maxHeight: "90%", maxWidth: "90%" }} />
{/* </Fade> */}
</Modal>
{/* </SanitizedLink> */}
</Box>
);
}
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>
);
return (
<Tooltip disableInteractive arrow title={tooltip} placement="top" variant="outlined">
<AspectRatio
Expand Down Expand Up @@ -240,12 +47,13 @@ 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;

// return image content thumb
if (isImage) {
return (
<ThumbWrapper tooltip="Expand Image">
<BannerImage imageSrc={url} />
<Image imageSrc={url} nsfw={nsfw} />
</ThumbWrapper>
);
}
Expand Down
Loading

0 comments on commit 5b77cfe

Please sign in to comment.