diff --git a/src/Element/TidalEmbed.tsx b/src/Element/TidalEmbed.tsx index aa08f53a..b1e7685e 100644 --- a/src/Element/TidalEmbed.tsx +++ b/src/Element/TidalEmbed.tsx @@ -1,32 +1,49 @@ import { useEffect, useState } from "react"; import { TidalRegex } from "Const"; +// Re-use dom parser across instances of TidalEmbed +const domParser = new DOMParser(); + 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; + return Promise.reject('Not a TIDAL link.'); } const [, productType, productId] = regexResult; - const oembedApi = `https://oembed.stage.tidal.com/?url=https://tidal.com/browse/${productType}/${productId}`; + const oembedApi = `https://oembed.tidal.com/?url=https://tidal.com/browse/${productType}/${productId}`; const apiResponse = await fetch(oembedApi); const json = await apiResponse.json(); - return json.html; + 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 + }; } const TidalEmbed = ({ link }: { link: string }) => { - const [embed, setEmbed] = useState(); + const [source, setSource] = useState(); + const [height, setHeight] = useState(); useEffect(() => { - oembedLookup(link).then(setEmbed); + oembedLookup(link).then(data => { + setSource(data.source || undefined); + setHeight(data.height); + }).catch(console.error); }, [link]); - if (!embed) return e.stopPropagation()} className="ext">{link}; - return
; + if (!source) return e.stopPropagation()} className="ext">{link}; + return