verbiricha/snort
1
0
Fork 0
forked from Kieran/snort
Code Pull Requests Activity

feat: reveal content with click

Browse Source
This commit is contained in:
Kieran 2023-02-28 15:42:25 +00:00
parent 10e96bddb5
commit d43ff2646d
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
1 changed files with 42 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/app/src/Element/HyperText.tsx
View File

@ -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,8 +110,6 @@ export default function HyperText({ link, creator }: { link: string; creator: He
);
} else if (youtubeId) {
return (
<>
<br />
<iframe
className="w-max"
src={`https://www.youtube.com/embed/${youtubeId}`}
@ -104,8 +119,6 @@ export default function HyperText({ link, creator }: { link: string; creator: He
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;
}