diff --git a/packages/app/src/Element/HyperText.tsx b/packages/app/src/Element/HyperText.tsx
index c959bfdd..14118116 100644
--- a/packages/app/src/Element/HyperText.tsx
+++ b/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 (
+
{
+ e.stopPropagation();
+ setReveal(true);
+ }}
+ className="note-invoice">
+ Click to load content from {hostname}
+
+ );
+ } 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 (
- e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
- {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 (
- <>
-
-
-
- >
+
);
} else if (tidalId) {
return ;
@@ -134,7 +147,11 @@ export default function HyperText({ link, creator }: { link: string; creator: He
{a}
);
- }, [link]);
+ }, [link, reveal]);
- return render();
+ const elm = render();
+ if (elm.type !== "a") {
+ return wrapReveal(elm, link);
+ }
+ return elm;
}