From b73e29a949bbdbb72c54b42f9b4caec94d8bdc41 Mon Sep 17 00:00:00 2001
From: smolgrrr <smolgrrr@protonmail.com>
Date: Wed, 17 Jul 2024 23:01:30 +1000
Subject: [PATCH] add content blur

---
 client/src/App.css              |  8 ++++++++
 client/src/utils/FileUpload.tsx | 11 ++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/client/src/App.css b/client/src/App.css
index 74b5e05..4f0f31b 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -1,3 +1,11 @@
+.blur {
+  filter: blur(12px);
+}
+
+.no-blur {
+  filter: none;
+}
+
 .App {
   text-align: center;
 }
diff --git a/client/src/utils/FileUpload.tsx b/client/src/utils/FileUpload.tsx
index b8ca9f8..256ffce 100644
--- a/client/src/utils/FileUpload.tsx
+++ b/client/src/utils/FileUpload.tsx
@@ -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
             />
           );
         }