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] 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);
 	});
 });
-