snort/packages/app/src/Components/Embed/HyperText.tsx

100 lines
3.3 KiB
TypeScript
Raw Normal View History

2023-02-03 16:43:21 +00:00
import {
YoutubeUrlRegex,
TidalRegex,
SoundCloudRegex,
MixCloudRegex,
SpotifyRegex,
2023-02-13 11:19:50 +00:00
TwitchRegex,
2023-02-14 03:12:15 +00:00
AppleMusicRegex,
NostrNestsRegex,
WavlakeRegex,
} from "@/Utils/Const";
import { magnetURIDecode } from "@/Utils";
import SoundCloudEmbed from "@/Components/Embed/SoundCloudEmded";
import MixCloudEmbed from "@/Components/Embed/MixCloudEmbed";
import SpotifyEmbed from "@/Components/Embed/SpotifyEmbed";
import TidalEmbed from "@/Components/Embed/TidalEmbed";
import TwitchEmbed from "@/Components/Embed/TwitchEmbed";
import AppleMusicEmbed from "@/Components/Embed/AppleMusicEmbed";
import WavlakeEmbed from "@/Components/Embed/WavlakeEmbed";
import LinkPreview from "@/Components/Embed/LinkPreview";
import NostrLink from "@/Components/Embed/NostrLink";
import MagnetLink from "@/Components/Embed/MagnetLink";
2023-10-11 10:44:53 +00:00
import { ReactNode } from "react";
2023-02-03 16:43:21 +00:00
interface HypeTextProps {
link: string;
2023-10-11 10:44:53 +00:00
children?: ReactNode | Array<ReactNode> | null;
depth?: number;
2023-08-30 09:03:04 +00:00
showLinkPreview?: boolean;
}
2023-10-11 10:44:53 +00:00
export default function HyperText({ link, depth, showLinkPreview, children }: HypeTextProps) {
2023-04-08 21:29:38 +00:00
const a = link;
try {
const url = new URL(a);
const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
const tidalId = TidalRegex.test(a) && RegExp.$1;
const soundcloundId = SoundCloudRegex.test(a) && RegExp.$1;
const mixcloudId = MixCloudRegex.test(a) && RegExp.$1;
const isSpotifyLink = SpotifyRegex.test(a);
const isTwitchLink = TwitchRegex.test(a);
const isAppleMusicLink = AppleMusicRegex.test(a);
const isNostrNestsLink = NostrNestsRegex.test(a);
const isWavlakeLink = WavlakeRegex.test(a);
2023-11-24 17:04:04 +00:00
if (youtubeId) {
2023-04-08 21:29:38 +00:00
return (
<iframe
2023-12-07 21:53:43 +00:00
className="-mx-4 md:mx-0 w-max my-2"
2023-04-08 21:29:38 +00:00
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}
/>
);
} else if (tidalId) {
return <TidalEmbed link={a} />;
} else if (soundcloundId) {
return <SoundCloudEmbed link={a} />;
} else if (mixcloudId) {
return <MixCloudEmbed link={a} />;
} else if (isSpotifyLink) {
return <SpotifyEmbed link={a} />;
} else if (isTwitchLink) {
return <TwitchEmbed link={a} />;
} else if (isAppleMusicLink) {
return <AppleMusicEmbed link={a} />;
} else if (isNostrNestsLink) {
return (
<>
<a href={a} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
2023-10-11 10:44:53 +00:00
{children ?? a}
2023-04-08 21:29:38 +00:00
</a>
{/*<NostrNestsEmbed link={a} />,*/}
</>
);
} else if (isWavlakeLink) {
return <WavlakeEmbed link={a} />;
} else if (url.protocol === "nostr:" || url.protocol === "web+nostr:") {
2023-04-18 21:20:13 +00:00
return <NostrLink link={a} depth={depth} />;
2023-04-08 21:29:38 +00:00
} else if (url.protocol === "magnet:") {
const parsed = magnetURIDecode(a);
if (parsed) {
return <MagnetLink magnet={parsed} />;
}
2023-08-30 09:03:04 +00:00
} else if (showLinkPreview ?? true) {
2023-04-18 11:47:01 +00:00
return <LinkPreview url={a} />;
2023-02-07 19:47:57 +00:00
}
2023-04-08 21:29:38 +00:00
} catch {
// Ignore the error.
}
return (
<a href={a} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
2023-10-11 10:44:53 +00:00
{children ?? a}
2023-04-08 21:29:38 +00:00
</a>
);
2023-02-03 21:38:14 +00:00
}