RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

blur nsfw attachments

Browse Source
This commit is contained in:
SrGooglo 2025-03-21 18:46:48 +00:00
parent f63d3a3ba1
commit 2741ccdb4d
2 changed files with 92 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/app/src/components/PostCard/components/attachments/index.jsx
View File

@ -14,7 +14,7 @@ const renderDebug = localStorage.getItem("render_debug") === "true"
const Attachment = React.memo((props) => { const Attachment = React.memo((props) => {
const [loaded, setLoaded] = React.useState(false) const [loaded, setLoaded] = React.useState(false)
const [nsfwAccepted, setNsfwAccepted] = React.useState(false)
const [mimeType, setMimeType] = React.useState(null) const [mimeType, setMimeType] = React.useState(null)
try { try {
@ -111,6 +111,17 @@ const Attachment = React.memo((props) => {
className="attachment" className="attachment"
onDoubleClick={onDoubleClickAttachment} onDoubleClick={onDoubleClickAttachment}
> >
{props.attachment.flags &&
props.attachment.flags.includes("nsfw") &&
!nsfwAccepted && (
<div className="nsfw_alert">
<h2>This media may contain sensitive content</h2>
<Button onClick={() => setNsfwAccepted(true)}>
Show anyways
</Button>
</div>
)}
{renderMedia()} {renderMedia()}
</div> </div>
) )

156
packages/app/src/components/PostCard/index.less
View File

@ -1,115 +1,117 @@
.post_card { .post_card {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
//max-height: 500px; //max-height: 500px;
//height: fit-content; //height: fit-content;
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
margin: auto; margin: auto;
gap: 15px; gap: 15px;
padding: 17px 17px 10px 17px; padding: 17px 17px 10px 17px;
background-color: var(--background-color-accent); background-color: var(--background-color-accent);
//border-bottom: 2px solid var(--border-color); //border-bottom: 2px solid var(--border-color);
border-radius: 8px; border-radius: 8px;
color: rgba(var(--background-color-contrast)); color: rgba(var(--background-color-contrast));
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6, h6,
p, p,
span { span {
color: var(--text-color); color: var(--text-color);
} }
.post_card_content { .post_card_content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: 15px;
} }
.post_content { .post_content {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
gap: 10px; gap: 10px;
color: var(--text-color); color: var(--text-color);
.message { .message {
white-space: break-spaces; white-space: break-spaces;
user-select: text; user-select: text;
text-wrap: balance; text-wrap: balance;
word-break: break-word; word-break: break-word;
overflow: hidden; overflow: hidden;
} }
.nsfw_alert { .nsfw_alert {
position: absolute; position: absolute;
z-index: 200; z-index: 200;
padding: 10px 0; padding: 40px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 8px; border-radius: 8px;
backdrop-filter: blur(25px); gap: 10px;
-webkit-backdrop-filter: blur(25px);
background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
h2 { background-color: rgba(0, 0, 0, 0.5);
color: #fff;
}
}
}
.post-card-has_replies { h2 {
display: flex; color: #fff;
flex-direction: column; }
}
}
align-items: center; .post-card-has_replies {
display: flex;
flex-direction: column;
width: 100%; align-items: center;
padding: 10px;
gap: 10px; width: 100%;
padding: 10px;
transition: all 150ms ease-in-out; gap: 10px;
cursor: pointer;
border-radius: 8px; transition: all 150ms ease-in-out;
background-color: rgba(var(--layoutBackgroundColor), 0.7); cursor: pointer;
&:hover { border-radius: 8px;
background-color: rgba(var(--layoutBackgroundColor), 1); background-color: rgba(var(--layoutBackgroundColor), 0.7);
}
} &:hover {
background-color: rgba(var(--layoutBackgroundColor), 1);
}
}
} }