forked from leftypol/leftypol
tiktok.js: add tiktok embed client integration
This commit is contained in:
parent
91e54fb6bf
commit
d72cd82257
1 changed files with 80 additions and 0 deletions
80
js/tiktok.js
Normal file
80
js/tiktok.js
Normal file
|
@ -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]);
|
||||
}
|
||||
}
|
||||
});
|
Loading…
Add table
Add a link
Reference in a new issue