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

feature: spotify embeds working

Browse source 
feature: rounded embed containers
This commit is contained in:
Andy Burke 2025-07-24 20:46:35 -07:00
parent 241ab51fa9
commit 1790977744
2 changed files with 71 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -186,9 +186,27 @@
width: 100%;
max-width: 640px;
height: 0;
overflow: hidden;
overflow-y: auto;
padding-bottom: 20%;
}
#talk .embed-container .embed-actions-container {
position: absolute;
z-index: 100;
top: 0.25rem;
right: 0.25rem;
height: 2rem;
display: none;
visibility: hidden;
opacity: 0;
}
#talk .embed-container.rounded {
border-radius: 6px;
}
#talk .embed-container.short {
padding-bottom: 7.5%;
}

61
public/tabs/talk/talk.js
View file

@ -2,6 +2,7 @@ const URL_MATCHING_REGEX =
/(?:(?<protocol>[a-zA-Z]+):\/\/)?(?:(?<auth>(?<username>\S.+)\:(?<password>.+))\@)?(?<host>(?:(?<hostname>[-a-zA-Z0-9\.]+)\.)?(?<domain>[-a-zA-Z0-9]+?\.(?<tld>[-a-zA-Z0-9]{2,64}))(?:\:(?<port>[0-9]{1,6}))?)\b(?<path>[-a-zA-Z0-9@:%_{}\[\]<>\(\)\+.~&\/="]*)(?:\?(?<query>[a-zA-Z0-9!$%&<>()*+,-\.\/\:\;\=\?\@_~"]+))?(?:#(?<hash>[a-zA-Z0-9!$&'()*+,-\.\/\:\;\=\?\@_~"]*?))?/gm;
const URL_MATCH_HANDLERS = [
// Tidal
(match) => {
const original_url = match[0];
const {
@ -16,17 +17,57 @@ const URL_MATCH_HANDLERS = [
}
return `
<div class="embed-container ${item_type === "album" ? "square" : "short"}">
<div class="embed-container ${item_type === "album" ? "square" : "short"} tidal rounded">
<div class="embed-actions-container">
<button class="icon plus" onclick="console.log(\"close\");"/>
<button class="icon talk" onclick="console.log(\"stop\");"/>
</div>
<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';"
/>
loading="lazy"
></iframe>
</div>`;
},
// Spotify
(match) => {
const original_url = match[0];
const {
groups: { host, subdomain, item_type, item_id },
} =
/^(?:spotify:track:|(?:https?:\/\/(?<host>(?:(?<subdomain>.+)\.)?spotify\.com)\/(?<item_type>.+)\/))(?<item_id>[a-zA-Z0-9]{22})/gi.exec(
original_url,
) ?? { groups: {} };
console.dir({
original_url,
host,
subdomain,
item_type,
item_id,
});
if (!item_id) {
return;
}
return `
<div class="embed-container ${["album", "artist"].includes(item_type) ? "square" : "short"} spotify rounded">
<div class="embed-actions-container">
<button class="icon plus" onclick="console.log(\"close\");"/>
<button class="icon talk" onclick="console.log(\"stop\");"/>
</div>
<iframe
src="https://open.spotify.com/embed/${item_type ?? "track"}/${item_id}"
allowfullscreen
allow="clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy"></iframe>
</div>`;
},
// YouTube
(match) => {
const original_url = match[0];
const {
@ -41,19 +82,23 @@ const URL_MATCH_HANDLERS = [
}
return `
<div class="embed-container letterbox">
<div class="embed-container letterbox youtube">
<div class="embed-actions-container">
<button class="icon plus" onclick="console.log(\"close\");"/>
<button class="icon talk" onclick="console.log(\"stop\");"/>
</div>
<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');" />
allowfullscreen
loading="lazy"
></iframe>
</div>`;
},
// url
// linkify generic url
(match) => {
// TODO: punycoding if something has unicode?
// const punycode = get_punycode();