feat: follows only media loading

src/Element/DM.tsx

@@ -24,6 +24,7 @@ export default function DM(props: DMProps) {
     const [decrypted, setDecrypted] = useState(false);
     const { ref, inView } = useInView();
     const isMe = props.data.pubkey === pubKey;
+    const otherPubkey = isMe ? pubKey : props.data.tags.find(a => a[0] === "p")![1];
 
     async function decrypt() {
         let e = new Event(props.data);
@@ -46,7 +47,7 @@ export default function DM(props: DMProps) {
         <div className={`flex dm f-col${isMe ? " me" : ""}`} ref={ref}>
             <div><NoteTime from={props.data.created_at * 1000} fallback={'Just now'} /></div>
             <div className="w-max">
-                <Text content={content} tags={[]} users={new Map()} />
+                <Text content={content} tags={[]} users={new Map()} creator={otherPubkey} />
             </div>
         </div>
     )

src/Element/HyperText.tsx

@@ -0,0 +1,106 @@
+import { useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import { TwitterTweetEmbed } from "react-twitter-embed";
+
+import {
+    FileExtensionRegex,
+    YoutubeUrlRegex,
+    TweetUrlRegex,
+    TidalRegex,
+    SoundCloudRegex,
+    MixCloudRegex,
+    SpotifyRegex
+} from "Const";
+import { RootState } from 'State/Store';
+import SoundCloudEmbed from 'Element/SoundCloudEmded'
+import MixCloudEmbed from 'Element/MixCloudEmbed';
+import SpotifyEmbed from "Element/SpotifyEmbed";
+import TidalEmbed from "Element/TidalEmbed";
+import { ProxyImg } from 'Element/ProxyImg';
+import { HexKey } from 'Nostr';
+
+export default function HyperText({ link, creator }: { link: string, creator: HexKey }) {
+    const pref = useSelector((s: RootState) => s.login.preferences);
+    const follows = useSelector((s: RootState) => s.login.follows);
+
+    const render = useCallback(() => {
+        const a = link;
+        try {
+            const hideNonFollows = pref.autoLoadMedia === "follows-only" && !follows.includes(creator);
+            if (pref.autoLoadMedia === "none" || hideNonFollows) {
+                return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
+            }
+            const url = new URL(a);
+            const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
+            const tweetId = TweetUrlRegex.test(a) && RegExp.$2;
+            const tidalId = TidalRegex.test(a) && RegExp.$1;
+            const soundcloundId = SoundCloudRegex.test(a) && RegExp.$1;
+            const mixcloudId = MixCloudRegex.test(a) && RegExp.$1;
+            const spotifyId = SpotifyRegex.test(a);
+            const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
+            if (extension) {
+                switch (extension) {
+                    case "gif":
+                    case "jpg":
+                    case "jpeg":
+                    case "png":
+                    case "bmp":
+                    case "webp": {
+                        return <ProxyImg key={url.toString()} src={url.toString()} />;
+                    }
+                    case "wav":
+                    case "mp3":
+                    case "ogg": {
+                        return <audio key={url.toString()} src={url.toString()} controls />
+                    }
+                    case "mp4":
+                    case "mov":
+                    case "mkv":
+                    case "avi":
+                    case "m4v": {
+                        return <video key={url.toString()} src={url.toString()} controls />
+                    }
+                    default:
+                        return <a key={url.toString()} href={url.toString()} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{url.toString()}</a>
+                }
+            } else if (tweetId) {
+                return (
+                    <div className="tweet" key={tweetId}>
+                        <TwitterTweetEmbed tweetId={tweetId} />
+                    </div>
+                )
+            } else if (youtubeId) {
+                return (
+                    <>
+                        <br />
+                        <iframe
+                            className="w-max"
+                            src={`https://www.youtube.com/embed/${youtubeId}`}
+                            title="YouTube video player"
+                            key={youtubeId}
+                            frameBorder="0"
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                            allowFullScreen={true}
+                        />
+                        <br />
+                    </>
+                )
+            } else if (tidalId) {
+                return <TidalEmbed link={a} />
+            } else if (soundcloundId) {
+                return <SoundCloudEmbed link={a} />
+            } else if (mixcloudId) {
+                return <MixCloudEmbed link={a} />
+            } else if (spotifyId) {
+                return <SpotifyEmbed link={a} />
+            } else {
+                return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
+            }
+        } catch (error) {
+        }
+        return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
+
+    }, [link]);
+
+    return render();
+}

src/Element/Note.tsx

@@ -72,7 +72,7 @@ export default function Note(props: NoteProps) {
     if (deletions?.length > 0) {
       return (<b className="error">Deleted</b>);
     }
-    return <Text content={body} tags={ev.Tags} users={users || new Map()} />;
+    return <Text content={body} tags={ev.Tags} users={users || new Map()} creator={ev.PubKey}/>;
   }, [ev]);
 
   useLayoutEffect(() => {

src/Element/Text.tsx

@@ -3,9 +3,8 @@ import { useMemo, useCallback } from "react";
 import { Link } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
 import { visit, SKIP } from "unist-util-visit";
-import { TwitterTweetEmbed } from "react-twitter-embed";
 
-import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, TweetUrlRegex, HashtagRegex, TidalRegex, SoundCloudRegex, MixCloudRegex, SpotifyRegex } from "Const";
+import { UrlRegex, MentionRegex, InvoiceRegex, HashtagRegex } from "Const";
 import { eventLink, hexToBech32 } from "Util";
 import Invoice from "Element/Invoice";
 import Hashtag from "Element/Hashtag";
@@ -13,215 +12,134 @@ import Hashtag from "Element/Hashtag";
 import Tag from "Nostr/Tag";
 import { MetadataCache } from "State/Users";
 import Mention from "Element/Mention";
-import TidalEmbed from "Element/TidalEmbed";
-import { useSelector } from 'react-redux';
-import { RootState } from 'State/Store';
-import { UserPreferences } from 'State/Login';
-import SoundCloudEmbed from 'Element/SoundCloudEmded'
-import MixCloudEmbed from 'Element/MixCloudEmbed';
-import SpotifyEmbed from "./SpotifyEmbed";
-import { ProxyImg } from 'Element/ProxyImg';
-
-function transformHttpLink(a: string, pref: UserPreferences) {
-    try {
-        if (!pref.autoLoadMedia) {
-            return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
-        }
-        const url = new URL(a);
-        const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
-        const tweetId = TweetUrlRegex.test(a) && RegExp.$2;
-        const tidalId = TidalRegex.test(a) && RegExp.$1;
-        const soundcloundId = SoundCloudRegex.test(a) && RegExp.$1;
-        const mixcloudId = MixCloudRegex.test(a) && RegExp.$1;
-        const spotifyId = SpotifyRegex.test(a);
-        const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
-        if (extension) {
-            switch (extension) {
-                case "gif":
-                case "jpg":
-                case "jpeg":
-                case "png":
-                case "bmp":
-                case "webp": {
-                    return <ProxyImg key={url.toString()} src={url.toString()} />;
-                }
-                case "wav":
-                case "mp3":
-                case "ogg": {
-                    return <audio key={url.toString()} src={url.toString()} controls />
-                }
-                case "mp4":
-                case "mov":
-                case "mkv":
-                case "avi":
-                case "m4v": {
-                    return <video key={url.toString()} src={url.toString()} controls />
-                }
-                default:
-                    return <a key={url.toString()} href={url.toString()} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{url.toString()}</a>
-            }
-        } else if (tweetId) {
-            return (
-                <div className="tweet" key={tweetId}>
-                    <TwitterTweetEmbed tweetId={tweetId} />
-                </div>
-            )
-        } else if (youtubeId) {
-            return (
-                <>
-                    <br />
-                    <iframe
-                        className="w-max"
-                        src={`https://www.youtube.com/embed/${youtubeId}`}
-                        title="YouTube video player"
-                        key={youtubeId}
-                        frameBorder="0"
-                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                        allowFullScreen={true}
-                    />
-                    <br />
-                </>
-            )
-        } else if (tidalId) {
-            return <TidalEmbed link={a} />
-        } else if (soundcloundId) {
-            return <SoundCloudEmbed link={a} />
-        } else if (mixcloudId) {
-            return <MixCloudEmbed link={a} />
-        } else if (spotifyId) {
-            return <SpotifyEmbed link={a} />
-        } else {
-            return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
-        }
-    } catch (error) {
-    }
-    return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
-}
-
-function extractLinks(fragments: Fragment[], pref: UserPreferences) {
-    return fragments.map(f => {
-        if (typeof f === "string") {
-            return f.split(UrlRegex).map(a => {
-                if (a.startsWith("http")) {
-                    return transformHttpLink(a, pref)
-                }
-                return a;
-            });
-        }
-        return f;
-    }).flat();
-}
-
-function extractMentions(frag: TextFragment) {
-    return frag.body.map(f => {
-        if (typeof f === "string") {
-            return f.split(MentionRegex).map((match) => {
-                let matchTag = match.match(/#\[(\d+)\]/);
-                if (matchTag && matchTag.length === 2) {
-                    let idx = parseInt(matchTag[1]);
-                    let ref = frag.tags?.find(a => a.Index === idx);
-                    if (ref) {
-                        switch (ref.Key) {
-                            case "p": {
-                                return <Mention pubkey={ref.PubKey!} />
-                            }
-                            case "e": {
-                                let eText = hexToBech32("note", ref.Event!).substring(0, 12);
-                                return <Link key={ref.Event} to={eventLink(ref.Event!)} onClick={(e) => e.stopPropagation()}>#{eText}</Link>;
-                            }
-                            case "t": {
-                                return <Hashtag tag={ref.Hashtag!} />
-                            }
-                        }
-                    }
-                    return <b style={{ color: "var(--error)" }}>{matchTag[0]}?</b>;
-                } else {
-                    return match;
-                }
-            });
-        }
-        return f;
-    }).flat();
-}
-
-function extractInvoices(fragments: Fragment[]) {
-    return fragments.map(f => {
-        if (typeof f === "string") {
-            return f.split(InvoiceRegex).map(i => {
-                if (i.toLowerCase().startsWith("lnbc")) {
-                    return <Invoice key={i} invoice={i} />
-                } else {
-                    return i;
-                }
-            });
-        }
-        return f;
-    }).flat();
-}
-
-function extractHashtags(fragments: Fragment[]) {
-    return fragments.map(f => {
-        if (typeof f === "string") {
-            return f.split(HashtagRegex).map(i => {
-                if (i.toLowerCase().startsWith("#")) {
-                    return <Hashtag tag={i.substring(1)} />
-                } else {
-                    return i;
-                }
-            });
-        }
-        return f;
-    }).flat();
-}
-
-function transformLi(frag: TextFragment) {
-    let fragments = transformText(frag)
-    return <li>{fragments}</li>
-}
-
-function transformParagraph(frag: TextFragment) {
-    const fragments = transformText(frag)
-    if (fragments.every(f => typeof f === 'string')) {
-        return <p>{fragments}</p>
-    }
-    return <>{fragments}</>
-}
-
-function transformText(frag: TextFragment) {
-    if (frag.body === undefined) {
-        debugger;
-    }
-    let fragments = extractMentions(frag);
-    fragments = extractLinks(fragments, frag.pref);
-    fragments = extractInvoices(fragments);
-    fragments = extractHashtags(fragments);
-    return fragments;
-}
+import HyperText from 'Element/HyperText';
+import { HexKey } from 'Nostr';
 
 export type Fragment = string | JSX.Element;
 
 export interface TextFragment {
     body: Fragment[],
     tags: Tag[],
-    users: Map<string, MetadataCache>,
-    pref: UserPreferences
+    users: Map<string, MetadataCache>
 }
 
 export interface TextProps {
     content: string,
+    creator: HexKey,
     tags: Tag[],
     users: Map<string, MetadataCache>
 }
 
-export default function Text({ content, tags, users }: TextProps) {
-    const pref = useSelector<RootState, UserPreferences>(s => s.login.preferences);
+export default function Text({ content, tags, creator, users }: TextProps) {
+
+    function extractLinks(fragments: Fragment[]) {
+        return fragments.map(f => {
+            if (typeof f === "string") {
+                return f.split(UrlRegex).map(a => {
+                    if (a.startsWith("http")) {
+                        return <HyperText link={a} creator={creator} />
+                    }
+                    return a;
+                });
+            }
+            return f;
+        }).flat();
+    }
+
+    function extractMentions(frag: TextFragment) {
+        return frag.body.map(f => {
+            if (typeof f === "string") {
+                return f.split(MentionRegex).map((match) => {
+                    let matchTag = match.match(/#\[(\d+)\]/);
+                    if (matchTag && matchTag.length === 2) {
+                        let idx = parseInt(matchTag[1]);
+                        let ref = frag.tags?.find(a => a.Index === idx);
+                        if (ref) {
+                            switch (ref.Key) {
+                                case "p": {
+                                    return <Mention pubkey={ref.PubKey!} />
+                                }
+                                case "e": {
+                                    let eText = hexToBech32("note", ref.Event!).substring(0, 12);
+                                    return <Link key={ref.Event} to={eventLink(ref.Event!)} onClick={(e) => e.stopPropagation()}>#{eText}</Link>;
+                                }
+                                case "t": {
+                                    return <Hashtag tag={ref.Hashtag!} />
+                                }
+                            }
+                        }
+                        return <b style={{ color: "var(--error)" }}>{matchTag[0]}?</b>;
+                    } else {
+                        return match;
+                    }
+                });
+            }
+            return f;
+        }).flat();
+    }
+
+    function extractInvoices(fragments: Fragment[]) {
+        return fragments.map(f => {
+            if (typeof f === "string") {
+                return f.split(InvoiceRegex).map(i => {
+                    if (i.toLowerCase().startsWith("lnbc")) {
+                        return <Invoice key={i} invoice={i} />
+                    } else {
+                        return i;
+                    }
+                });
+            }
+            return f;
+        }).flat();
+    }
+
+    function extractHashtags(fragments: Fragment[]) {
+        return fragments.map(f => {
+            if (typeof f === "string") {
+                return f.split(HashtagRegex).map(i => {
+                    if (i.toLowerCase().startsWith("#")) {
+                        return <Hashtag tag={i.substring(1)} />
+                    } else {
+                        return i;
+                    }
+                });
+            }
+            return f;
+        }).flat();
+    }
+
+    function transformLi(frag: TextFragment) {
+        let fragments = transformText(frag)
+        return <li>{fragments}</li>
+    }
+
+    function transformParagraph(frag: TextFragment) {
+        const fragments = transformText(frag)
+        if (fragments.every(f => typeof f === 'string')) {
+            return <p>{fragments}</p>
+        }
+        return <>{fragments}</>
+    }
+
+    function transformText(frag: TextFragment) {
+        if (frag.body === undefined) {
+            debugger;
+        }
+        let fragments = extractMentions(frag);
+        fragments = extractLinks(fragments);
+        fragments = extractInvoices(fragments);
+        fragments = extractHashtags(fragments);
+        return fragments;
+    }
+
     const components = useMemo(() => {
         return {
-            p: (x: any) => transformParagraph({ body: x.children ?? [], tags, users, pref }),
-            a: (x: any) => transformHttpLink(x.href, pref),
-            li: (x: any) => transformLi({ body: x.children ?? [], tags, users, pref }),
+            p: (x: any) => transformParagraph({ body: x.children ?? [], tags, users }),
+            a: (x: any) => <HyperText link={x.href} creator={creator} />,
+            li: (x: any) => transformLi({ body: x.children ?? [], tags, users }),
         };
     }, [content]);
+
     const disableMarkdownLinks = useCallback(() => (tree: any) => {
         visit(tree, (node, index, parent) => {
             if (

src/Pages/ProfilePage.tsx

@@ -53,7 +53,7 @@ export default function ProfilePage() {
   const [tab, setTab] = useState(ProfileTab.Notes);
   const [showProfileQr, setShowProfileQr] = useState<boolean>(false);
   const aboutText = user?.about || ''
-  const about = Text({ content: aboutText, tags: [], users: new Map() })
+  const about = Text({ content: aboutText, tags: [], users: new Map(), creator: "" })
   const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || "");
   const website_url = (user?.website && !user.website.startsWith("http"))
   ? "https://" + user.website

src/Pages/settings/Preferences.tsx

@@ -26,10 +26,14 @@ const PreferencesPage = () => {
             <div className="card flex">
                 <div className="flex f-col f-grow">
                     <div>Automatically load media</div>
-                    <small>Media in posts will automatically be shown, if disabled only the link will show</small>
+                    <small>Media in posts will automatically be shown for selected people, otherwise only the link will show</small>
                 </div>
                 <div>
-                    <input type="checkbox" checked={perf.autoLoadMedia} onChange={e => dispatch(setPreferences({ ...perf, autoLoadMedia: e.target.checked }))} />
+                    <select value={perf.autoLoadMedia} onChange={e => dispatch(setPreferences({ ...perf, autoLoadMedia: e.target.value } as UserPreferences))}>
+                        <option value="none">None</option>
+                        <option value="follows-only">Follows only</option>
+                        <option value="all">All</option>
+                    </select>
                 </div>
             </div>
             <div className="card flex f-col">

src/State/Login.ts

@@ -29,7 +29,7 @@ export interface UserPreferences {
     /**
      * Automatically load media (show link only) (bandwidth/privacy)
      */
-    autoLoadMedia: boolean,
+    autoLoadMedia: "none" | "follows-only" | "all",
 
     /**
      * Select between light/dark theme
@@ -61,6 +61,7 @@ export interface UserPreferences {
      */
     imgProxyConfig: ImgProxySettings | null
 }
+
 export type DbType = "indexdDb" | "redux";
 
 export interface LoginStore {
@@ -169,7 +170,7 @@ export const InitState = {
     dmInteraction: 0,
     preferences: {
         enableReactions: false,
-        autoLoadMedia: true,
+        autoLoadMedia: "follows-only",
         theme: "system",
         confirmReposts: false,
         showDebugMenus: false,