feature: embeds for Tidal

fix: iframe sizing

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

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;
+}

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 src="/js/external/punycode.js" type="text/javascript"></script>
-		<script>
+		<script src="/tabs/talk/talk.js" type="text/javascript"></script>
-			<!-- #include file="./talk.js" -->
-		</script>
 		<div class="sidebar resizable">
 			<div id="room-creation-container" data-requires-permission="rooms.create">
 				<button

public/tabs/talk/talk.js

@@ -3,8 +3,28 @@ const URL_MATCHING_REGEX =
 
 const URL_MATCH_HANDLERS = [
 	(match) => {
-		// console.dir(match);
+		const original_url = match[0];
-		return;
+		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