From 727bb07f184c0dad2eec031418f692477c9e5e3e Mon Sep 17 00:00:00 2001 From: Kieran Date: Thu, 19 Jan 2023 19:51:36 +0000 Subject: [PATCH 1/4] feat: tidal embeds --- public/index.html | 2 +- src/Const.ts | 5 +++++ src/Element/Text.tsx | 6 +++++- src/Element/TidalEmbed.tsx | 39 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 50 insertions(+), 2 deletions(-) create mode 100644 src/Element/TidalEmbed.tsx 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..51e1228 --- /dev/null +++ b/src/Element/TidalEmbed.tsx @@ -0,0 +1,39 @@ +import { useEffect, useMemo } from "react"; +import { TidalRegex } from "../Const"; + +const TidalEmbed = ({ link }: { link: string }) => { + // https://tidal.com/browse/mix/0029457ec7eed3b340ee2b907fc4d8 + // https://tidal.com/browse/track/168295350 + // https://tidal.com/browse/album/168295347 + // https://tidal.com/browse/playlist/4261748a-4287-4758-aaab-6d5be3e99e52 + + 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 head = document.head.querySelector(`script[src="${ScriptSrc}"]`); + console.debug(head); + if (!head) { + let sTag = document.createElement("script"); + sTag.src = ScriptSrc; + sTag.async = true; + document.head.appendChild(sTag); + } + }, []); + + return ( + <> +
+ + ) +} + +export default TidalEmbed; \ No newline at end of file From 3db6d0c0241abf7d7969d072fc493d8cdc146af6 Mon Sep 17 00:00:00 2001 From: Kieran Date: Thu, 19 Jan 2023 19:59:37 +0000 Subject: [PATCH 2/4] bug: always inject script --- src/Element/TidalEmbed.tsx | 24 ++++++------------------ 1 file changed, 6 insertions(+), 18 deletions(-) diff --git a/src/Element/TidalEmbed.tsx b/src/Element/TidalEmbed.tsx index 51e1228..197d703 100644 --- a/src/Element/TidalEmbed.tsx +++ b/src/Element/TidalEmbed.tsx @@ -2,11 +2,6 @@ import { useEffect, useMemo } from "react"; import { TidalRegex } from "../Const"; const TidalEmbed = ({ link }: { link: string }) => { - // https://tidal.com/browse/mix/0029457ec7eed3b340ee2b907fc4d8 - // https://tidal.com/browse/track/168295350 - // https://tidal.com/browse/album/168295347 - // https://tidal.com/browse/playlist/4261748a-4287-4758-aaab-6d5be3e99e52 - const data = useMemo(() => { const match = link.match(TidalRegex); if (match?.length != 3) { @@ -19,21 +14,14 @@ const TidalEmbed = ({ link }: { link: string }) => { const ScriptSrc = "https://embed.tidal.com/tidal-embed.js"; useEffect(() => { - let head = document.head.querySelector(`script[src="${ScriptSrc}"]`); - console.debug(head); - if (!head) { - let sTag = document.createElement("script"); - sTag.src = ScriptSrc; - sTag.async = true; - document.head.appendChild(sTag); - } + let sTag = document.createElement("script"); + sTag.src = ScriptSrc; + sTag.async = true; + document.head.appendChild(sTag); }, []); - return ( - <> -
- - ) + if (!data) return null; + return
; } export default TidalEmbed; \ No newline at end of file From 980292246b008530e9761bd8074115b54d8b652b Mon Sep 17 00:00:00 2001 From: Kieran Date: Fri, 20 Jan 2023 10:20:26 +0000 Subject: [PATCH 3/4] fallback to regular link --- src/Element/TidalEmbed.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Element/TidalEmbed.tsx b/src/Element/TidalEmbed.tsx index 197d703..6a84205 100644 --- a/src/Element/TidalEmbed.tsx +++ b/src/Element/TidalEmbed.tsx @@ -20,7 +20,7 @@ const TidalEmbed = ({ link }: { link: string }) => { document.head.appendChild(sTag); }, []); - if (!data) return null; + if (!data) return e.stopPropagation()} className="ext">{link}; return
; } From d2bb5bac5454a6abb77751ef96b601ea64d2414f Mon Sep 17 00:00:00 2001 From: Kieran Date: Fri, 20 Jan 2023 12:03:39 +0000 Subject: [PATCH 4/4] fix: rebase --- src/Element/TidalEmbed.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Element/TidalEmbed.tsx b/src/Element/TidalEmbed.tsx index 6a84205..49be682 100644 --- a/src/Element/TidalEmbed.tsx +++ b/src/Element/TidalEmbed.tsx @@ -1,5 +1,5 @@ import { useEffect, useMemo } from "react"; -import { TidalRegex } from "../Const"; +import { TidalRegex } from "Const"; const TidalEmbed = ({ link }: { link: string }) => { const data = useMemo(() => {