forked from Kieran/snort
feat: reveal content with click
This commit is contained in:
parent
10e96bddb5
commit
d43ff2646d
@ -1,4 +1,4 @@
|
|||||||
import { useCallback } from "react";
|
import { useCallback, useState } from "react";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import { TwitterTweetEmbed } from "react-twitter-embed";
|
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 pref = useSelector((s: RootState) => s.login.preferences);
|
||||||
const follows = useSelector((s: RootState) => s.login.follows);
|
const follows = useSelector((s: RootState) => s.login.follows);
|
||||||
const publicKey = useSelector((s: RootState) => s.login.publicKey);
|
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 render = useCallback(() => {
|
||||||
const a = link;
|
const a = link;
|
||||||
try {
|
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 url = new URL(a);
|
||||||
const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
|
const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
|
||||||
const tweetId = TweetUrlRegex.test(a) && RegExp.$2;
|
const tweetId = TweetUrlRegex.test(a) && RegExp.$2;
|
||||||
@ -93,19 +110,15 @@ export default function HyperText({ link, creator }: { link: string; creator: He
|
|||||||
);
|
);
|
||||||
} else if (youtubeId) {
|
} else if (youtubeId) {
|
||||||
return (
|
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) {
|
} else if (tidalId) {
|
||||||
return <TidalEmbed link={a} />;
|
return <TidalEmbed link={a} />;
|
||||||
@ -134,7 +147,11 @@ export default function HyperText({ link, creator }: { link: string; creator: He
|
|||||||
{a}
|
{a}
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
}, [link]);
|
}, [link, reveal]);
|
||||||
|
|
||||||
return render();
|
const elm = render();
|
||||||
|
if (elm.type !== "a") {
|
||||||
|
return wrapReveal(elm, link);
|
||||||
|
}
|
||||||
|
return elm;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user