From 7a906b4bcecad62bd84e4a5d443a517a4a71b19d Mon Sep 17 00:00:00 2001
From: Andy Burke <andy.burke@mailbox.earth>
Date: Fri, 25 Jul 2025 20:56:30 -0700
Subject: [PATCH] feature: improve youtube short embeds

---
 public/tabs/talk/talk.css | 11 +++++++++--
 public/tabs/talk/talk.js  |  8 ++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/public/tabs/talk/talk.css b/public/tabs/talk/talk.css
index b0c56f8..7b587a4 100644
--- a/public/tabs/talk/talk.css
+++ b/public/tabs/talk/talk.css
@@ -213,11 +213,18 @@
 	padding-bottom: 7.5%;
 }
 
+#talk .embed-container.vertical {
+	max-width: 320px;
+	overflow: hidden;
+	aspect-ratio: 9 / 16 !important;
+}
+
 #talk .embed-container.letterbox {
-	height: 0;
+	/*	height: 0; */
 	overflow: hidden;
 	overflow-y: auto;
-	padding-bottom: 33%;
+	/* padding-bottom: 33%; */
+	aspect-ratio: 16 / 9 !important;
 }
 
 #talk .embed-container.square {
diff --git a/public/tabs/talk/talk.js b/public/tabs/talk/talk.js
index f3134b9..b1dde07 100644
--- a/public/tabs/talk/talk.js
+++ b/public/tabs/talk/talk.js
@@ -5,7 +5,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@:%_{}\[\]<>\(\)\+.~&\/="]*?(?<extension>\.[^\.?/#"]+)?)(?:\?(?<query>[a-zA-Z0-9!$%&<>()*+,-\.\/\:\;\=\?\@_~"]+))?(?:#(?<hash>[a-zA-Z0-9!$&'()*+,-\.\/\:\;\=\?\@_~"]*?))?(?:$|\s)/gim;
 
 const VIDEO_ID_EXTRACTOR =
-	/(?<video_domain>vimeo\.com|youtu(?:be\.com|\.be|be\.googleapis\.com))(?:\/(?<action>video|embed|watch|v))?.*(?:(?:\/|v=)(?<video_id>[A-Za-z0-9._%-]*))\S*/gi;
+	/(?<video_domain>vimeo\.com|youtu(?:be\.com|\.be|be\.googleapis\.com))(?:\/(?<action>video|embed|watch|shorts|v))?.*(?:(?:\/|v=)(?<video_id>[A-Za-z0-9._%-]*))\S*/gi;
 const SPOTIFY_EXTRACTOR =
 	/^\/(?<item_type>(?:album|artist|episode|playlist|tracks?))\/?(?<item_id>[a-zA-Z0-9]{22})/gi;
 const TIDAL_EXTRACTOR =
@@ -98,8 +98,12 @@ const URL_MATCH_HANDLERS = [
 			return;
 		}
 
+		console.dir({
+			action,
+			video_id,
+		});
 		return `
-		<div class="embed-container iframe letterbox youtube">
+		<div class="embed-container iframe ${action === "shorts" ? "vertical" : "letterbox"} youtube">
 			<div class="embed-actions-container">
 				<button class="icon plus" onclick="console.log(\"close\");"/>
 				<button class="icon talk" onclick="console.log(\"stop\");"/>