From 1790977744da8834a16300402926a1d5e291684e Mon Sep 17 00:00:00 2001
From: Andy Burke <andy.burke@mailbox.earth>
Date: Thu, 24 Jul 2025 20:46:35 -0700
Subject: [PATCH] feature: spotify embeds working feature: rounded embed
 containers

---
 public/tabs/talk/talk.css | 18 ++++++++++++
 public/tabs/talk/talk.js  | 61 ++++++++++++++++++++++++++++++++++-----
 2 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/public/tabs/talk/talk.css b/public/tabs/talk/talk.css
index e4cda0a..e758753 100644
--- a/public/tabs/talk/talk.css
+++ b/public/tabs/talk/talk.css
@@ -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%;
 }
diff --git a/public/tabs/talk/talk.js b/public/tabs/talk/talk.js
index 9196053..66bd251 100644
--- a/public/tabs/talk/talk.js
+++ b/public/tabs/talk/talk.js
@@ -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();