mirror of
https://github.com/smolgrrr/TAO.git
synced 2024-09-20 09:21:25 +00:00
add content blur
This commit is contained in:
parent
7bf95d8e12
commit
b73e29a949
@ -1,3 +1,11 @@
|
|||||||
|
.blur {
|
||||||
|
filter: blur(12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-blur {
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
.App {
|
.App {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -55,9 +55,17 @@ export const renderMedia = (files: string[]) => {
|
|||||||
const gridTemplateColumns = files.length > 1 ? 'repeat(2, 1fr)' : 'repeat(1, 1fr)';
|
const gridTemplateColumns = files.length > 1 ? 'repeat(2, 1fr)' : 'repeat(1, 1fr)';
|
||||||
const gridTemplateRows = files.length > 2 ? '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 (
|
return (
|
||||||
<div style={{ display: 'grid', gridTemplateColumns, gridTemplateRows, gap: '2px' }}>
|
<div style={{ display: 'grid', gridTemplateColumns, gridTemplateRows, gap: '2px' }}>
|
||||||
{files.map((file, index) => {
|
{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"))) {
|
if (file && (file.endsWith(".mp4") || file.endsWith(".webm"))) {
|
||||||
return (
|
return (
|
||||||
<video
|
<video
|
||||||
@ -79,8 +87,9 @@ export const renderMedia = (files: string[]) => {
|
|||||||
key={index}
|
key={index}
|
||||||
alt="Invalid thread"
|
alt="Invalid thread"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
className="thumb mt-2 rounded-md w-full"
|
className={`thumb mt-2 rounded-md w-full ${!isFromAllowedDomain ? "blur" : ""}`}
|
||||||
src={file}
|
src={file}
|
||||||
|
onClick={isFromAllowedDomain ? undefined : toggleBlur} // Only add onClick if blur is applied
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user