feature: embeds for Tidal

fix: iframe sizing
This commit is contained in:
Andy Burke 2025-07-24 18:34:44 -07:00
parent 0764bf6155
commit 241ab51fa9
4 changed files with 76 additions and 11 deletions

View file

@ -3,8 +3,28 @@ const URL_MATCHING_REGEX =
const URL_MATCH_HANDLERS = [
(match) => {
// console.dir(match);
return;
const original_url = match[0];
const {
groups: { item_type, item_id },
} =
/(?:https?:)?(?:\/\/)?(?:[0-9A-Z-]+\.)?(?:tidalhi.fi\/|tidal.com\/|tidal(?:-nocookie)?\.com\S*?[^\w\s-]).*?(?<item_type>(?:track|album)).*?(?<item_id>[\d]{9,})/gi.exec(
original_url,
) ?? { groups: {} };
if (!(item_type && item_id)) {
return;
}
return `
<div class="embed-container ${item_type === "album" ? "square" : "short"}">
<iframe
src="https://embed.tidal.com/${item_type.at(-1) === "s" ? item_type : `${item_type}s`}/${item_id}"
allow="encrypted-media"
sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
title="TIDAL Embed Player"
onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';"
/>
</div>`;
},
(match) => {
@ -12,15 +32,25 @@ const URL_MATCH_HANDLERS = [
const {
groups: { video_id },
} =
/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)(?<video_id>[^"&?\/\s]{11})/gi.exec(
/(?:https?:)?(?:\/\/)?(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\S*?[^\w\s-])(?<video_id>[\w-]{11})(?=[^\w-]|$)(?![?=&+%\w.-]*(?:['"][^<>]*>|<\/a>))[?=&+%\w.-]*/gi.exec(
original_url,
);
) ?? { groups: {} };
if (!video_id) {
return;
}
return `<iframe width="560" height="315" src="https://www.youtube.com/embed/${video_id}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`;
return `
<div class="embed-container letterbox">
<iframe
src="https://www.youtube.com/embed/${video_id}"
title="YouTube video player"
allow="clipboard-write; encrypted-media; picture-in-picture; web-share;"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen />
<button class="icon plus" onclick="console.log('hi');" />
<button class="icon talk" onclick="console.log('hello');" />
</div>`;
},
// url