tiktok.js: add tiktok embed client integration

inc/config.php

@@ -1231,6 +1231,12 @@
                 </a>
             </div>'
         ],
+        [
+            '/^https?:\/\/(\w+\.)?tiktok\.com\/@[a-z0-9\-_]+\/video\/([0-9]+)\?.*$/i',
+            '<div class="tiktok-embed">
+                <iframe sandbox="allow-popups allow-popups-to-escape-sandbox allow-scripts allow-top-navigation allow-same-origin" src="https://www.tiktok.com/embed/v2/$2"></iframe>
+            </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>'

js/tiktok.js

@@ -0,0 +1,80 @@
+/*
+ * 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 and privacy.
+ *
+ * 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'][0] = figure it out plz;
+ *	$config['additional_javascript'][] = 'js/tiktok.js';
+ */
+
+onReady(function() {
+	const REMOVE = '[Remove]';
+	const EMBED = '[Embed]';
+
+	function makeEmbedNode(videoId, width, height) {
+		const iframe = document.createElement('iframe');
+		iframe.setAttribute('type', 'text/html');
+		iframe.width = width;
+		iframe.height = height;
+		iframe.referrerPolicy = 'no-referrer';
+		iframe.src = `https://www.tiktok.com/embed/v2/${videoId}`;
+		iframe.sandbox.add('allow-popups', 'allow-popups-to-escape-sandbox', 'allow-scripts', 'allow-top-navigation', 'allow-same-origin')
+		iframe.classList.add('full-image');
+		return iframe;
+	}
+
+	function addEmbedButton(node) {
+		const contents    = node.firstElementChild;
+		const embedUrl    = node.dataset.videoId;
+		const embedWidth  = node.dataset.iframeWidth;
+		const embedHeight = node.dataset.iframeHeight;
+
+		const span = document.createElement('span');
+		span.textContent = EMBED;
+
+		let iframeDefault = null;
+
+		node.addEventListener('click', function(e) {
+			e.preventDefault();
+
+			if (span.textContent == REMOVE) {
+				contents.style.display = '';
+
+				if (iframeDefault !== null) {
+					iframeDefault.remove();
+				}
+
+				span.textContent = EMBED;
+			} else {
+				if (iframeDefault === null) {
+					iframeDefault = makeEmbedNode(embedUrl, embedWidth, embedHeight);
+				}
+				node.insertBefore(iframeDefault, node.firstElementChild);
+
+				contents.style.display = 'none';
+				span.text(REMOVE);
+			}
+		});
+
+		node.appendChild(span);
+	}
+
+	const embeds = document.getElementsByClassName('tiktok-embed');
+	for (let i = 0; i < embeds.length; i++) {
+		addEmbedButton(embeds[i]);
+	}
+
+	// Allow to work with auto-reload.js, etc.
+	document.addEventListener('new_post', function(e)) {
+		const post = e.detail;
+		const embeds = post.getElementsByClassName('tiktok-embed');
+		for (let i = 0; i < embeds.length; i++) {
+			addEmbedButton(embeds[i]);
+		}
+	}
+});

stylesheets/style.css

@@ -2081,3 +2081,24 @@ span.orangeQuote {
   float:   right;
   margin:  0em 1em;
 }
+
+/* Included embeds */
+
+.tiktok-embed {
+  float: left;
+  margin: 0.6em 1em 0.2em 0.2em;
+  border-radius: 8px;
+  overflow: hidden;
+  max-width: min-content;
+  min-width: 325px;
+}
+
+.tiktok-embed > iframe {
+  display: block;
+  visibility: unset;
+  border: none;
+  overflow: hidden;
+  width: 325px;
+  height: 739px;
+  max-height: 739px;
+}