add setting for blurring images

README.md

@@ -60,6 +60,8 @@
 - setup deploy to s3
 - make app a valid web share target https://developer.chrome.com/articles/web-share-target/
   - make app handle image files
+- block notes based on content
+- implement NIP-56 and blocking
 
 ## Setup
 

src/components/note/note-contents.tsx

@@ -6,6 +6,7 @@ import { UserLink } from "../user-link";
 import { normalizeToHex } from "../../helpers/nip-19";
 import { NostrEvent } from "../../types/nostr-event";
 import { NoteLink } from "../note-link";
+import settings from "../../services/settings";
 
 const BlurredImage = (props: ImageProps) => {
   const { isOpen, onToggle } = useDisclosure();
@@ -103,8 +104,8 @@ const embeds: {
   // Image
   {
     regexp: /(https?:\/\/)([\da-z\.-]+\.[a-z\.]{2,6})([\/\w\.-]+\.(svg|gif|png|jpg|jpeg|webp|avif))[^\s]*/im,
-    render: (match, trusted) => {
-      const ImageComponent = trusted ? Image : BlurredImage;
+    render: (match, event, trusted) => {
+      const ImageComponent = trusted || !settings.blurImages.value ? Image : BlurredImage;
       return <ImageComponent src={match[0]} width="100%" maxWidth="30rem" />;
     },
   },
@@ -174,7 +175,7 @@ function embedContent(content: string, event?: NostrEvent, trusted: boolean = fa
       const after = content.slice(match.index + match[0].length, content.length);
       return [
         ...embedContent(before, event, trusted),
-        render(match, event, trusted ?? false),
+        render(match, event, trusted),
         ...embedContent(after, event, trusted),
       ];
     }

src/services/settings.ts

@@ -2,36 +2,29 @@ import { BehaviorSubject } from "rxjs";
 import db from "./db";
 import { SavedIdentity } from "./identity";
 
-function log(message: string) {
-  console.log(`Settings: ${message}`);
-}
-
 const settings = {
   relays: new BehaviorSubject<string[]>([]),
   identity: new BehaviorSubject<SavedIdentity | null>(null),
+  blurImages: new BehaviorSubject(true),
 };
 
 async function loadSettings() {
   let loading = true;
 
   // load
-  const relays = await db.get("settings", "relays");
-  if (relays) settings.relays.next(relays);
-  const identity = await db.get("settings", "identity");
-  if (identity) settings.identity.next(identity);
+  for (const [key, subject] of Object.entries(settings)) {
+    const value = await db.get("settings", key);
+    if (value !== undefined) subject.next(value);
 
-  // save
-  settings.relays.subscribe((newUrls) => {
-    if (loading) return;
-    db.put("settings", newUrls, "relays");
-  });
-  settings.identity.subscribe((newIdentity) => {
-    if (loading) return;
-    db.put("settings", newIdentity, "identity");
-  });
+    // save
+    // @ts-ignore
+    subject.subscribe((newValue) => {
+      if (loading) return;
+      db.put("settings", newValue, key);
+    });
+  }
 
   loading = false;
-  log("loaded");
 }
 await loadSettings();
 

src/views/settings/index.tsx

@@ -33,6 +33,7 @@ import { useNavigate } from "react-router-dom";
 export const SettingsView = () => {
   const navigate = useNavigate();
   const relays = useSubject(settings.relays);
+  const blurImages = useSubject(settings.blurImages);
   const [relayInputValue, setRelayInputValue] = useState("");
 
   const { colorMode, setColorMode } = useColorMode();
@@ -144,6 +145,16 @@ export const SettingsView = () => {
                   onChange={(v) => setColorMode(v.target.checked ? "dark" : "light")}
                 />
               </FormControl>
+              <FormControl display="flex" alignItems="center">
+                <FormLabel htmlFor="blur-images" mb="0">
+                  Blur images from strangers
+                </FormLabel>
+                <Switch
+                  id="blur-images"
+                  isChecked={blurImages}
+                  onChange={(v) => settings.blurImages.next(v.target.checked)}
+                />
+              </FormControl>
               <FormControl display="flex" alignItems="center">
                 <FormLabel htmlFor="show-ads" mb="0">
                   Show Ads