2023-02-07 20:04:50 +00:00
|
|
|
import { useCallback } from "react";
|
|
|
|
import { useSelector } from "react-redux";
|
2023-02-03 16:43:21 +00:00
|
|
|
import { TwitterTweetEmbed } from "react-twitter-embed";
|
|
|
|
|
|
|
|
import {
|
2023-02-07 20:04:50 +00:00
|
|
|
FileExtensionRegex,
|
|
|
|
YoutubeUrlRegex,
|
|
|
|
TweetUrlRegex,
|
|
|
|
TidalRegex,
|
|
|
|
SoundCloudRegex,
|
|
|
|
MixCloudRegex,
|
|
|
|
SpotifyRegex,
|
2023-02-13 11:19:50 +00:00
|
|
|
TwitchRegex,
|
2023-02-03 16:43:21 +00:00
|
|
|
} from "Const";
|
2023-02-07 20:04:50 +00:00
|
|
|
import { RootState } from "State/Store";
|
|
|
|
import SoundCloudEmbed from "Element/SoundCloudEmded";
|
|
|
|
import MixCloudEmbed from "Element/MixCloudEmbed";
|
2023-02-03 16:43:21 +00:00
|
|
|
import SpotifyEmbed from "Element/SpotifyEmbed";
|
|
|
|
import TidalEmbed from "Element/TidalEmbed";
|
2023-02-07 20:04:50 +00:00
|
|
|
import { ProxyImg } from "Element/ProxyImg";
|
|
|
|
import { HexKey } from "Nostr";
|
2023-02-13 11:19:50 +00:00
|
|
|
import TwitchEmbed from "./TwitchEmbed";
|
2023-02-03 16:43:21 +00:00
|
|
|
|
2023-02-09 12:26:54 +00:00
|
|
|
export default function HyperText({ link, creator }: { link: string; creator: HexKey }) {
|
2023-02-07 20:04:50 +00:00
|
|
|
const pref = useSelector((s: RootState) => s.login.preferences);
|
|
|
|
const follows = useSelector((s: RootState) => s.login.follows);
|
2023-02-10 03:21:19 +00:00
|
|
|
const publicKey = useSelector((s: RootState) => s.login.publicKey);
|
2023-02-03 16:43:21 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
const render = useCallback(() => {
|
|
|
|
const a = link;
|
|
|
|
try {
|
2023-02-10 12:40:08 +00:00
|
|
|
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>
|
|
|
|
);
|
2023-02-07 20:04:50 +00:00
|
|
|
}
|
|
|
|
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);
|
2023-02-13 11:19:50 +00:00
|
|
|
const twitchId = TwitchRegex.test(a);
|
2023-02-09 12:26:54 +00:00
|
|
|
const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
|
2023-02-07 20:04:50 +00:00
|
|
|
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()}
|
2023-02-09 12:26:54 +00:00
|
|
|
onClick={e => e.stopPropagation()}
|
2023-02-07 20:04:50 +00:00
|
|
|
target="_blank"
|
|
|
|
rel="noreferrer"
|
2023-02-09 12:26:54 +00:00
|
|
|
className="ext">
|
2023-02-07 20:04:50 +00:00
|
|
|
{url.toString()}
|
|
|
|
</a>
|
|
|
|
);
|
2023-02-03 16:43:21 +00:00
|
|
|
}
|
2023-02-07 20:04:50 +00:00
|
|
|
} 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} />;
|
2023-02-13 11:19:50 +00:00
|
|
|
} else if (twitchId) {
|
|
|
|
return <TwitchEmbed link={a} />;
|
2023-02-07 20:04:50 +00:00
|
|
|
} else {
|
|
|
|
return (
|
2023-02-09 12:26:54 +00:00
|
|
|
<a href={a} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
|
2023-02-07 20:04:50 +00:00
|
|
|
{a}
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
2023-02-07 19:47:57 +00:00
|
|
|
} catch (error) {
|
|
|
|
// Ignore the error.
|
|
|
|
}
|
2023-02-07 20:04:50 +00:00
|
|
|
return (
|
2023-02-09 12:26:54 +00:00
|
|
|
<a href={a} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
|
2023-02-07 20:04:50 +00:00
|
|
|
{a}
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}, [link]);
|
2023-02-03 16:43:21 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
return render();
|
2023-02-03 21:38:14 +00:00
|
|
|
}
|