From 4787e98c02cb972411f90d624ede31e60b8044d8 Mon Sep 17 00:00:00 2001
From: Zankaria <zankaria.auxa@mailu.io>
Date: Wed, 12 Feb 2025 20:05:55 +0100
Subject: [PATCH 1/4] youtube.js: rework

---
 js/youtube.js | 140 ++++++++++++++++++++++++++++----------------------
 1 file changed, 79 insertions(+), 61 deletions(-)

diff --git a/js/youtube.js b/js/youtube.js
index 608b5dba..5a7b6a42 100644
--- a/js/youtube.js
+++ b/js/youtube.js
@@ -1,41 +1,45 @@
 /*
-* youtube
-* https://github.com/savetheinternet/Tinyboard/blob/master/js/youtube.js
-*
-* Don't load the YouTube player unless the video image is clicked.
-* This increases performance issues when many videos are embedded on the same page.
-* Currently only compatiable with YouTube.
-*
-* Proof of concept.
-*
-* Released under the MIT license
-* Copyright (c) 2013 Michael Save <savetheinternet@tinyboard.org>
-* Copyright (c) 2013-2014 Marcin Łabanowski <marcin@6irc.net> 
-*
-* Usage:
-*	$config['embedding'] = array();
-*	$config['embedding'][0] = array(
-*		'/^https?:\/\/(\w+\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9\-_]{10,11})(&.+)?$/i',
-*		$config['youtube_js_html']);
-*   $config['additional_javascript'][] = 'js/jquery.min.js';
-*   $config['additional_javascript'][] = 'js/youtube.js';
-*
-*/
+ * Don't load the 3rd party embedded content player unless the image is clicked.
+ * This increases performance issues when many videos are embedded on the same page.
+ *
+ * Released under the MIT license
+ * Copyright (c) 2013 Michael Save <savetheinternet@tinyboard.org>
+ * Copyright (c) 2013-2014 Marcin Łabanowski <marcin@6irc.net>
+ * Copyright (c) 2025 Zankaria Auxa <zankaria.auxa@mailu.io>
+ *
+ * Usage:
+ *	$config['embedding'] = array();
+ *	$config['embedding'][0] = array(
+ *		'/^https?:\/\/(\w+\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9\-_]{10,11})(&.+)?$/i',
+ *		$config['youtube_js_html']);
+ *	$config['additional_javascript'][] = 'js/jquery.min.js';
+ *	$config['additional_javascript'][] = 'js/youtube.js';
+ */
 
-$(document).ready(function(){
-	// Adds Options panel item
+$(document).ready(function() {
+	const ON = '[Remove]';
+	const YOUTUBE = 'www.youtube.com';
+
+	function makeEmbedNode(embedHost, videoId, width, height) {
+		return $(`<iframe type="text/html" width="${width}" height="${height}" class="full-image"
+			src="https://${embedHost}/embed/${videoId}?autoplay=1" allow="fullscreen" frameborder="0"/>`);
+	}
+
+	// Adds Options panel item.
 	if (typeof localStorage.youtube_embed_proxy === 'undefined') {
-		if (location.hostname.includes(".onion")){
+		if (location.hostname.includes('.onion')){
 			localStorage.youtube_embed_proxy = 'tuberyps2pn6dor6h47brof3w2asmauahhk4ei42krugybzzzo55klad.onion';
 		} else {
-			localStorage.youtube_embed_proxy = 'incogtube.com'; //default value
+			localStorage.youtube_embed_proxy = 'incogtube.com'; // Default value.
 		}
 	}
 
 	if (window.Options && Options.get_tab('general')) {
-		Options.extend_tab("general", "<fieldset id='media-proxy-fs'><legend>"+_("Media Proxy (requires refresh)")+"</legend>"
-		+ ('<label id="youtube-embed-proxy-url">' + _('YouTube embed proxy url&nbsp;&nbsp;')+'<input type="text" size=30></label>')
-		+ '</fieldset>');
+		Options.extend_tab("general",
+			"<fieldset id='media-proxy-fs'><legend>" + _("Media Proxy (requires refresh)") + "</legend>"
+			+ '<label id="youtube-embed-proxy-url">' + _('YouTube embed proxy url&nbsp;&nbsp;')
+			+ '<input type="text" size=30></label>'
+			+ '</fieldset>');
 
 		$('#youtube-embed-proxy-url>input').val(localStorage.youtube_embed_proxy);
 		$('#youtube-embed-proxy-url>input').on('input', function() {
@@ -43,51 +47,65 @@ $(document).ready(function(){
 		});
 	}
 
-	const ON  = "[Remove]";
-	const OFF = "[Embed]";
-	const YOUTUBE = 'www.youtube.com';
-	const PROXY   = localStorage.youtube_embed_proxy;
-	function addEmbedButton(index, videoNode) {
-		videoNode = $(videoNode);
-		var contents  = videoNode.contents();
-		var videoId   = videoNode.data('video');
-		var span      = $("<span>[Embed]</span>");
-		var spanProxy = $("<span>[Proxy]</span>");
+	const proxy = localStorage.youtube_embed_proxy;
 
-		var makeEmbedNode = function(embedHost) {
-			return $('<iframe style="float:left;padding: 0 20px 0 0;margin: 0.2em 0.2em 0.8em 0.2em" type="text/html" '+
-				'width="360" height="270" src="//' + embedHost + '/embed/' + videoId +
-				'?autoplay=1&html5=1" allowfullscreen frameborder="0"/>');
-		}
-		var defaultEmbed = makeEmbedNode(location.hostname.includes(".onion") ? PROXY : YOUTUBE);
-		var proxyEmbed   = makeEmbedNode(PROXY);
-		videoNode.click(function(e) {
+	function addEmbedButton(_i, node) {
+		node = $(node);
+		const contents    = node.contents();
+		const embedUrl    = node.data('video-id');
+		const embedWidth  = node.data('iframe-width');
+		const embedHeight = node.data('iframe-height');
+		const span        = $('<span>[Embed]</span>');
+		const spanProxy   = $("<span>[Proxy]</span>");
+
+		let iframeDefault = null;
+		let iframeProxy = null;
+
+		node.click(function(e) {
 			e.preventDefault();
 
-			if (span.text() == ON){
-				videoNode.append(spanProxy);
-				videoNode.append(contents);
-				defaultEmbed.remove();
-				proxyEmbed.remove();
-				span.text(OFF);
+			if (span.text() == ON) {
+				contents.css('display', '');
+				spanProxy.css('display', '');
+
+				if (iframeDefault !== null) {
+					iframeDefault.remove();
+				}
+				if (iframeProxy !== null) {
+					iframeProxy.remove();
+				}
+
+				span.text('[Embed]');
 			} else {
-				contents.detach();
+				let useProxy = e.target == spanProxy[0];
+
+				// Lazily create the iframes.
+				if (useProxy) {
+					if (iframeProxy === null) {
+						iframeProxy = makeEmbedNode(proxy, embedUrl, embedWidth, embedHeight);
+					}
+					node.prepend(iframeProxy);
+				} else {
+					if (iframeDefault === null) {
+						iframeDefault = makeEmbedNode(YOUTUBE, embedUrl, embedWidth, embedHeight);
+					}
+					node.prepend(iframeDefault);
+				}
+
+				contents.css('display', 'none');
+				spanProxy.css('display', 'none');
 				span.text(ON);
-				spanProxy.remove();
-				videoNode.append(e.target == spanProxy[0] ? proxyEmbed : defaultEmbed);
 			}
 		});
 
-		videoNode.append(span);
-		videoNode.append(spanProxy);
+		node.append(span);
+		node.append(spanProxy);
 	}
 
 	$('div.video-container', document).each(addEmbedButton);
-	
 
-	// allow to work with auto-reload.js, etc.
+	// Allow to work with auto-reload.js, etc.
 	$(document).on('new_post', function(e, post) {
 		$('div.video-container', post).each(addEmbedButton);
 	});
 });
-

From 3c282852a3fc6db81e50a9682efab862ea3a1a25 Mon Sep 17 00:00:00 2001
From: Zankaria <zankaria.auxa@mailu.io>
Date: Wed, 12 Feb 2025 20:07:36 +0100
Subject: [PATCH 2/4] config.php: adjust youtube embedding for youtube.js

---
 inc/config.php | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/inc/config.php b/inc/config.php
index e53a5aa7..62a02c45 100644
--- a/inc/config.php
+++ b/inc/config.php
@@ -1196,13 +1196,21 @@
     // It's very important that you match the entire input (with ^ and $) or things will not work correctly.
     $config['embedding'] = array(
         [
-            '/^https?:\/\/(\w+\.)?youtube\.com\/shorts\/([a-zA-Z0-9\-_]{10,11})$/i',
-            '<iframe style="float: left; padding: 0.6em 1em 0.2em 0.2em;" width="240" height="426" frameborder="0" id="ytplayer" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/$2"></iframe>'
-        ],
-        array(
             '/^https?:\/\/(\w+\.)?youtube\.com\/watch\?v=([a-zA-Z0-9\-_]{10,11})(&.+)?$/i',
-            '<iframe style="float: left;margin: 10px 20px;" width="%%tb_width%%" height="%%tb_height%%" frameborder="0" id="ytplayer" src="http://www.youtube.com/embed/$2"></iframe>'
-        ),
+            '<div class="video-container" data-video-id="$2" data-iframe-width="360" data-iframe-height="202">
+                <a href="https://youtu.be/$2" target="_blank" class="file">
+                    <img style="width:360px;height:202px;object-fit:cover" src="https://img.youtube.com/vi/$2/0.jpg" class="post-image"/>
+                </a>
+            </div>'
+        ],
+        [
+            '/^https?:\/\/(\w+\.)?youtube\.com\/shorts\/([a-zA-Z0-9\-_]{10,11})(\?.*)?$/i',
+            '<div class="video-container" data-video-id="$2" data-iframe-width="202" data-iframe-height="360">
+                <a href="https://youtu.be/$2" target="_blank" class="file">
+                    <img style="width:202px;height:360px;object-fit:cover" src="https://img.youtube.com/vi/$2/0.jpg" class="post-image"/>
+                </a>
+            </div>'
+        ],
         array(
             '/^https?:\/\/(\w+\.)?vimeo\.com\/(\d{2,10})(\?.+)?$/i',
             '<iframe src="https://player.vimeo.com/video/$2" style="float: left;margin: 10px 20px;" width="%%tb_width%%" height="%%tb_height%%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'
@@ -2015,12 +2023,6 @@
     // is the absolute maximum, because MySQL cannot handle table names greater than 64 characters.
     $config['board_regex'] = '[0-9a-zA-Z$_\x{0080}-\x{FFFF}]{1,58}';
 
-    // Youtube.js embed HTML code
-    $config['youtube_js_html'] = '<div class="video-container" data-video="$2">'.
-        '<a href="https://youtu.be/$2" target="_blank" class="file">'.
-        '<img style="width:360px;height:270px;" src="//img.youtube.com/vi/$2/0.jpg" class="post-image"/>'.
-        '</a></div>';
-
         // Slack Report Notification
         $config['slack'] = false;
         $config['slack_channel'] = "";

From d8cafc8fd86f6345a54f4a2c371df952c3945b4e Mon Sep 17 00:00:00 2001
From: Zankaria <zankaria.auxa@mailu.io>
Date: Wed, 12 Feb 2025 20:13:41 +0100
Subject: [PATCH 3/4] config.php: better youtube embedding regex

---
 inc/config.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/inc/config.php b/inc/config.php
index 62a02c45..def2cd27 100644
--- a/inc/config.php
+++ b/inc/config.php
@@ -1196,7 +1196,7 @@
     // It's very important that you match the entire input (with ^ and $) or things will not work correctly.
     $config['embedding'] = array(
         [
-            '/^https?:\/\/(\w+\.)?youtube\.com\/watch\?v=([a-zA-Z0-9\-_]{10,11})(&.+)?$/i',
+            '/^(?:(?:https?:)?\/\/)?((?:www|m)\.)?(?:(?:youtube(?:-nocookie)?\.com|youtu\.be))(?:\/(?:[\w\-]+\?v=|embed\/|live\/|v\/)?)([\w\-]{11})((?:\?|\&)\S+)?$/i',
             '<div class="video-container" data-video-id="$2" data-iframe-width="360" data-iframe-height="202">
                 <a href="https://youtu.be/$2" target="_blank" class="file">
                     <img style="width:360px;height:202px;object-fit:cover" src="https://img.youtube.com/vi/$2/0.jpg" class="post-image"/>

From 89d79a5278ef9c7f1dd873e597c4a8800d0a1cda Mon Sep 17 00:00:00 2001
From: Zankaria <zankaria.auxa@mailu.io>
Date: Wed, 12 Feb 2025 21:36:18 +0100
Subject: [PATCH 4/4] youtube.js: remove broken onion proxy

---
 js/youtube.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/js/youtube.js b/js/youtube.js
index 5a7b6a42..4c87b0aa 100644
--- a/js/youtube.js
+++ b/js/youtube.js
@@ -27,11 +27,7 @@ $(document).ready(function() {
 
 	// Adds Options panel item.
 	if (typeof localStorage.youtube_embed_proxy === 'undefined') {
-		if (location.hostname.includes('.onion')){
-			localStorage.youtube_embed_proxy = 'tuberyps2pn6dor6h47brof3w2asmauahhk4ei42krugybzzzo55klad.onion';
-		} else {
-			localStorage.youtube_embed_proxy = 'incogtube.com'; // Default value.
-		}
+		localStorage.youtube_embed_proxy = 'incogtube.com'; // Default value.
 	}
 
 	if (window.Options && Options.get_tab('general')) {