diff --git a/public/index.html b/public/index.html index 7ecdff2..566dc58 100644 --- a/public/index.html +++ b/public/index.html @@ -8,7 +8,7 @@ + content="default-src 'self'; child-src 'none'; worker-src 'self'; frame-src youtube.com www.youtube.com https://platform.twitter.com https://embed.tidal.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; connect-src wss://* 'self' https://*; img-src * data:; font-src https://fonts.gstatic.com; media-src *; script-src 'self' https://static.cloudflareinsights.com https://platform.twitter.com https://embed.tidal.com;" /> diff --git a/src/Const.ts b/src/Const.ts index 0ccfbbe..1464459 100644 --- a/src/Const.ts +++ b/src/Const.ts @@ -84,3 +84,8 @@ export const TweetUrlRegex = /https?:\/\/twitter\.com\/(?:#!\/)?(\w+)\/status(?: * Hashtag regex */ export const HashtagRegex = /(#[^\s!@#$%^&*()=+.\/,\[{\]};:'"?><]+)/; + +/** + * Tidal share link regex + */ +export const TidalRegex = /tidal\.com\/browse\/(\w+)\/([a-z0-9-]+)/i; \ No newline at end of file diff --git a/src/Element/Text.tsx b/src/Element/Text.tsx index 9f56e3b..367922d 100644 --- a/src/Element/Text.tsx +++ b/src/Element/Text.tsx @@ -4,7 +4,7 @@ import { Link } from "react-router-dom"; import ReactMarkdown from "react-markdown"; import { TwitterTweetEmbed } from "react-twitter-embed"; -import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, TweetUrlRegex, HashtagRegex } from "Const"; +import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, TweetUrlRegex, HashtagRegex, TidalRegex } from "Const"; import { eventLink, hexToBech32 } from "Util"; import Invoice from "Element/Invoice"; import Hashtag from "Element/Hashtag"; @@ -12,12 +12,14 @@ import Hashtag from "Element/Hashtag"; import Tag from "Nostr/Tag"; import { MetadataCache } from "Db/User"; import Mention from "Element/Mention"; +import TidalEmbed from "Element/TidalEmbed"; function transformHttpLink(a: string) { try { 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 extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1; if (extension) { switch (extension) { @@ -61,6 +63,8 @@ function transformHttpLink(a: string) {
) + } else if (tidalId) { + return } else { return e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a} } diff --git a/src/Element/TidalEmbed.tsx b/src/Element/TidalEmbed.tsx new file mode 100644 index 0000000..49be682 --- /dev/null +++ b/src/Element/TidalEmbed.tsx @@ -0,0 +1,27 @@ +import { useEffect, useMemo } from "react"; +import { TidalRegex } from "Const"; + +const TidalEmbed = ({ link }: { link: string }) => { + const data = useMemo(() => { + const match = link.match(TidalRegex); + if (match?.length != 3) { + return null; + } + let type = match[1][0]; + let id = match[2]; + return { type, id }; + }, [link]); + + const ScriptSrc = "https://embed.tidal.com/tidal-embed.js"; + useEffect(() => { + let sTag = document.createElement("script"); + sTag.src = ScriptSrc; + sTag.async = true; + document.head.appendChild(sTag); + }, []); + + if (!data) return e.stopPropagation()} className="ext">{link}; + return
; +} + +export default TidalEmbed; \ No newline at end of file