feat: reveal content with click

packages/app/src/Element/HyperText.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { useSelector } from "react-redux";
 import { TwitterTweetEmbed } from "react-twitter-embed";
 
@@ -27,19 +27,36 @@ export default function HyperText({ link, creator }: { link: string; creator: He
   const pref = useSelector((s: RootState) => s.login.preferences);
   const follows = useSelector((s: RootState) => s.login.follows);
   const publicKey = useSelector((s: RootState) => s.login.publicKey);
+  const [reveal, setReveal] = useState(false);
+
+  const wrapReveal = useCallback(
+    (e: JSX.Element, a: string): JSX.Element => {
+      const hideNonFollows = pref.autoLoadMedia === "follows-only" && !follows.includes(creator);
+      const isMine = creator === publicKey;
+      const hideMedia = pref.autoLoadMedia === "none" || (!isMine && hideNonFollows);
+      const hostname = new URL(a).host;
+
+      if (hideMedia && !reveal) {
+        return (
+          <div
+            onClick={e => {
+              e.stopPropagation();
+              setReveal(true);
+            }}
+            className="note-invoice">
+            Click to load content from {hostname}
+          </div>
+        );
+      } else {
+        return e;
+      }
+    },
+    [reveal, pref, follows, publicKey]
+  );
 
   const render = useCallback(() => {
     const a = link;
     try {
-      const hideNonFollows = pref.autoLoadMedia === "follows-only" && !follows.includes(creator);
-      const isMine = creator === publicKey;
-      if (pref.autoLoadMedia === "none" || (!isMine && 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;
@@ -93,19 +110,15 @@ export default function HyperText({ link, creator }: { link: string; creator: He
         );
       } else if (youtubeId) {
         return (
-          <>
+          <iframe
-            <br />
+            className="w-max"
-            <iframe
+            src={`https://www.youtube.com/embed/${youtubeId}`}
-              className="w-max"
+            title="YouTube video player"
-              src={`https://www.youtube.com/embed/${youtubeId}`}
+            key={youtubeId}
-              title="YouTube video player"
+            frameBorder="0"
-              key={youtubeId}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-              frameBorder="0"
+            allowFullScreen={true}
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          />
-              allowFullScreen={true}
-            />
-            <br />
-          </>
         );
       } else if (tidalId) {
         return <TidalEmbed link={a} />;
@@ -134,7 +147,11 @@ export default function HyperText({ link, creator }: { link: string; creator: He
         {a}
       </a>
     );
-  }, [link]);
+  }, [link, reveal]);
 
-  return render();
+  const elm = render();
+  if (elm.type !== "a") {
+    return wrapReveal(elm, link);
+  }
+  return elm;
 }