doot/TAO
1
0
Fork 0
mirror of https://github.com/smolgrrr/TAO.git synced 2024-09-20 01:11:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

add content blur

Browse Source
This commit is contained in:
smolgrrr 2024-07-17 23:01:30 +10:00
parent 7bf95d8e12
commit b73e29a949
2 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/App.css
View File

@ -1,3 +1,11 @@
.blur {
filter: blur(12px);
}
.no-blur {
filter: none;
}
.App {
text-align: center;
}

11
client/src/utils/FileUpload.tsx
View File

@ -55,9 +55,17 @@ export const renderMedia = (files: string[]) => {
const gridTemplateColumns = files.length > 1 ? 'repeat(2, 1fr)' : 'repeat(1, 1fr)';
const gridTemplateRows = files.length > 2 ? 'repeat(2, 1fr)' : 'repeat(1, 1fr)';
// Function to toggle blur on click
const toggleBlur = (event: React.MouseEvent<HTMLImageElement>) => {
event.currentTarget.classList.toggle('no-blur');
};
return (
<div style={{ display: 'grid', gridTemplateColumns, gridTemplateRows, gap: '2px' }}>
{files.map((file, index) => {
// Check if the file is from allowed domains
const isFromAllowedDomain = file.includes("i.nostr.build") || file.includes("void.cat");
if (file && (file.endsWith(".mp4") || file.endsWith(".webm"))) {
return (
<video
@ -79,8 +87,9 @@ export const renderMedia = (files: string[]) => {
key={index}
alt="Invalid thread"
loading="lazy"
className="thumb mt-2 rounded-md w-full"
className={`thumb mt-2 rounded-md w-full ${!isFromAllowedDomain ? "blur" : ""}`}
src={file}
onClick={isFromAllowedDomain ? undefined : toggleBlur} // Only add onClick if blur is applied
/>
);
}