fix: regex issues in ECMAscript

public/tabs/talk/talk.js

@@ -1,17 +1,30 @@
 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 VIDEO_ID_EXTRACTOR =
+	/(?<protocol>https?)?(?::\/\/)?(?<host>(?:(?<subdomain>.*?)\.)?(?<domain>vimeo\.com|youtu(?:be\.com|\.be|be\.googleapis\.com)))\/(?<item_type>video|embed|watch|v)?\/?.*?\??(?:(?:v=)?(?<video_id>[A-Za-z0-9._%-]*))\S+?/gi;
+const SPOTIFY_EXTRACTOR =
+	/(?<protocol>(?:spotify:.*|https?))?(?:\:(?:\/\/)?)?(?<host>(?:(?<subdomain>.+)\.)?(?<domain>spotify\.com))?.*?\/?(?<item_type>(?:album|artist|episode|playlist|tracks?))?\/?(?<item_id>[a-zA-Z0-9]{22})/gi;
+const TIDAL_EXTRACTOR =
+	/(?<protocol>(?:tidal:track:|https?))?(?::\/\/)?(?<host>(?:(?<subdomain>.+)\.)?(?<domain>tidal\.com|tidalhi\.fi)).*?\/(?<item_type>(?:album|artist|tracks?))\/(?<item_id>[0-9]+)/gi;
+
 const URL_MATCH_HANDLERS = [
 	// Tidal
 	(match) => {
 		const original_url = match[0];
+
+		// wow https://stackoverflow.com/questions/3891641/regex-test-only-works-every-other-time
+		TIDAL_EXTRACTOR.lastIndex = 0;
+
 		const {
 			groups: { item_type, item_id },
-		} =
+		} = TIDAL_EXTRACTOR.exec(original_url) ?? { groups: {} };
-			/(?<protocol>(?:tidal:track:|https?))?(?::\/\/)?(?<host>(?:(?<subdomain>.+)\.)?(?<domain>tidal\.com|tidalhi\.fi)).*?\/(?<item_type>(?:album|artist|track))\/(?<item_id>[0-9]+)/gi.exec(
-				original_url,
-			) ?? { groups: {} };
 
+		console.dir({
+			original_url,
+			item_type,
+			item_id,
+		});
 		if (!(item_type && item_id)) {
 			return;
 		}
@@ -35,20 +48,13 @@ const URL_MATCH_HANDLERS = [
 	// Spotify
 	(match) => {
 		const original_url = match[0];
+
+		SPOTIFY_EXTRACTOR.lastIndex = 0;
+
 		const {
 			groups: { host, subdomain, item_type, item_id },
-		} =
+		} = SPOTIFY_EXTRACTOR.exec(original_url) ?? { groups: {} };
-			/^(?: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;
 		}
@@ -70,14 +76,14 @@ const URL_MATCH_HANDLERS = [
 	// YouTube
 	(match) => {
 		const original_url = match[0];
-		const {
-			groups: { video_id },
-		} =
-			/(?: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) {
+		VIDEO_ID_EXTRACTOR.lastIndex = 0;
+
+		const {
+			groups: { domain, video_id },
+		} = VIDEO_ID_EXTRACTOR.exec(original_url) ?? { groups: {} };
+
+		if (domain?.toLowerCase().indexOf("youtu") === -1 || !video_id) {
 			return;
 		}
 
@@ -98,6 +104,36 @@ const URL_MATCH_HANDLERS = [
 		</div>`;
 	},
 
+	// Vimeo
+	(match) => {
+		const original_url = match[0];
+
+		VIDEO_ID_EXTRACTOR.lastIndex = 0;
+
+		const {
+			groups: { domain, video_id },
+		} = VIDEO_ID_EXTRACTOR.exec(original_url) ?? { groups: {} };
+
+		if (domain?.toLowerCase().indexOf("vimeo") === -1 || !video_id) {
+			return;
+		}
+
+		return `
+		<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://player.vimeo.com/video/${video_id}"
+			frameborder="0"
+			allow="fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
+			referrerpolicy="strict-origin-when-cross-origin"
+			title="Star Trek: Legacy"
+			loading="lazy"></iframe>
+		</div>`;
+	},
+
 	// linkify generic url
 	(match) => {
 		// TODO: punycoding if something has unicode?