diff --git a/src/Element/TidalEmbed.tsx b/src/Element/TidalEmbed.tsx index 49be6820..b97ddf2b 100644 --- a/src/Element/TidalEmbed.tsx +++ b/src/Element/TidalEmbed.tsx @@ -1,27 +1,50 @@ -import { useEffect, useMemo } from "react"; +import { CSSProperties, useEffect, useState } 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]); +// Re-use dom parser across instances of TidalEmbed +const domParser = new DOMParser(); - 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); - }, []); +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 (!data) return e.stopPropagation()} className="ext">{link}; - return
; + if (!regexResult) { + return Promise.reject('Not a TIDAL link.'); + } + + const [, productType, productId] = regexResult; + const oembedApi = `https://oembed.tidal.com/?url=https://tidal.com/browse/${productType}/${productId}`; + + const apiResponse = await fetch(oembedApi); + const json = await apiResponse.json(); + + const doc = domParser.parseFromString(json.html, 'text/html'); + const iframe = doc.querySelector('iframe'); + + if (!iframe) { + return Promise.reject('No iframe delivered.'); + } + + return { + source: iframe.getAttribute('src'), + height: json.height + }; } -export default TidalEmbed; \ No newline at end of file +const TidalEmbed = ({ link }: { link: string }) => { + const [source, setSource] = useState(); + const [height, setHeight] = useState(); + const extraStyles = link.includes('video') ? { aspectRatio: "16 / 9" } : { height }; + + useEffect(() => { + oembedLookup(link).then(data => { + setSource(data.source || undefined); + setHeight(data.height); + }).catch(console.error); + }, [link]); + + if (!source) return e.stopPropagation()} className="ext">{link}; + return