diff --git a/src/Element/TidalEmbed.tsx b/src/Element/TidalEmbed.tsx index 49be6820..aa08f53a 100644 --- a/src/Element/TidalEmbed.tsx +++ b/src/Element/TidalEmbed.tsx @@ -1,27 +1,32 @@ -import { useEffect, useMemo } from "react"; +import { useEffect, useState } from "react"; import { TidalRegex } from "Const"; +async function oembedLookup (link: string) { + // Regex + re-construct to handle both tidal.com/type/id and tidal.com/browse/type/id links. + const regexResult = TidalRegex.exec(link); + + if (!regexResult) { + return undefined; + } + + const [, productType, productId] = regexResult; + const oembedApi = `https://oembed.stage.tidal.com/?url=https://tidal.com/browse/${productType}/${productId}`; + + const apiResponse = await fetch(oembedApi); + const json = await apiResponse.json(); + + return json.html; +} + 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 }; + const [embed, setEmbed] = useState(); + + useEffect(() => { + oembedLookup(link).then(setEmbed); }, [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
; + if (!embed) return e.stopPropagation()} className="ext">{link}; + return
; } export default TidalEmbed; \ No newline at end of file