From 241ab51fa9f40075f996a081a5bbc172c4c132f5 Mon Sep 17 00:00:00 2001
From: Andy Burke <andy.burke@mailbox.earth>
Date: Thu, 24 Jul 2025 18:34:44 -0700
Subject: [PATCH] feature: embeds for Tidal fix: iframe sizing

---
 README.md                  | 10 ++++++++--
 public/tabs/talk/talk.css  | 31 +++++++++++++++++++++++++++++
 public/tabs/talk/talk.html |  6 ++----
 public/tabs/talk/talk.js   | 40 +++++++++++++++++++++++++++++++++-----
 4 files changed, 76 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index c4e2732..3758703 100644
--- a/README.md
+++ b/README.md
@@ -20,21 +20,27 @@ feature discussions.
 	- [ ] chat message processing
 		- [X] auto-link urls
 			- [X] use this 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!$&'()*+,-\.\/\:\;\=\?\@_~"]*?))?`
+		- [ ] :emoji: replacements
 		- [ ] preview cards for links
 		- [ ] embedded video for
-			- [ ] youtube
+			- [X] youtube
 			- [ ] vimeo
 			- [ ] tiktok
 		- [ ] embedded audio or audio cards for:
-			- [ ] tidal
+			- [X] tidal
 			- [ ] spotify
 			- [ ] youtube (any way to differentiate for yt music?)
+		- [ ] add action buttons to embeds
+			- [ ] copy original link (hopefully just a button with some onclick we can slap next to the iframe and style?)
+			- [ ] toggle embed (toggle between showing the embed and the original link)
 		- [X] punycode urls before url extraction? (see: https://stackoverflow.com/a/26618995)
 		- [ ] gif support
 			- [ ] start/stop gif control
 			- [ ] hide control
 		- [ ] inline image support
 			- [ ] hide control
+		- [ ] custom emoji support
+			- [ ] upload custom gif emoji
 	- [X] try to select immediate sibling messages from the same user and hide mulitple avatars
 - [X] user profile page
 	- [X] logout button
diff --git a/public/tabs/talk/talk.css b/public/tabs/talk/talk.css
index e3b54bc..e4cda0a 100644
--- a/public/tabs/talk/talk.css
+++ b/public/tabs/talk/talk.css
@@ -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;
+}
diff --git a/public/tabs/talk/talk.html b/public/tabs/talk/talk.html
index 132caf4..604fc4a 100644
--- a/public/tabs/talk/talk.html
+++ b/public/tabs/talk/talk.html
@@ -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
diff --git a/public/tabs/talk/talk.js b/public/tabs/talk/talk.js
index bd51bbe..9196053 100644
--- a/public/tabs/talk/talk.js
+++ b/public/tabs/talk/talk.js
@@ -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