andyburke/autonomous.contact
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feature: embeds for Tidal

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

31
public/tabs/talk/talk.css
View file

@ -180,3 +180,34 @@
#talk .message-container .message-content-container {
padding-left: 8rem;
}
#talk .embed-container {
position: relative;
width: 100%;
max-width: 640px;
height: 0;
padding-bottom: 20%;
}
#talk .embed-container.short {
padding-bottom: 7.5%;
}
#talk .embed-container.letterbox {
padding-bottom: 33%;
}
#talk .embed-container.square {
padding-bottom: 50%;
}
#talk .embed-container iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border-style: none;
}

6
public/tabs/talk/talk.html
View file

@ -14,10 +14,8 @@
<style>
<!-- #include file="./talk.css" -->
</style>
<script src="./js/external/punycode.js" type="text/javascript"></script>
<script>
<!-- #include file="./talk.js" -->
</script>
<script src="/js/external/punycode.js" type="text/javascript"></script>
<script src="/tabs/talk/talk.js" type="text/javascript"></script>
<div class="sidebar resizable">
<div id="room-creation-container" data-requires-permission="rooms.create">
<button

40
public/tabs/talk/talk.js
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