forked from leftypol/leftypol
107 lines
3.3 KiB
JavaScript
107 lines
3.3 KiB
JavaScript
/*
|
|
* 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() {
|
|
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" referrerpolicy="strict-origin"/>`);
|
|
}
|
|
|
|
// Adds Options panel item.
|
|
if (typeof localStorage.youtube_embed_proxy === 'undefined') {
|
|
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 ')
|
|
+ '<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() {
|
|
localStorage.youtube_embed_proxy = $('#youtube-embed-proxy-url>input').val();
|
|
});
|
|
}
|
|
|
|
const proxy = localStorage.youtube_embed_proxy;
|
|
|
|
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) {
|
|
contents.css('display', '');
|
|
spanProxy.css('display', '');
|
|
|
|
if (iframeDefault !== null) {
|
|
iframeDefault.remove();
|
|
}
|
|
if (iframeProxy !== null) {
|
|
iframeProxy.remove();
|
|
}
|
|
|
|
span.text('[Embed]');
|
|
} else {
|
|
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);
|
|
}
|
|
});
|
|
|
|
node.append(span);
|
|
node.append(spanProxy);
|
|
}
|
|
|
|
$('div.video-container', document).each(addEmbedButton);
|
|
|
|
// Allow to work with auto-reload.js, etc.
|
|
$(document).on('new_post', function(e, post) {
|
|
$('div.video-container', post).each(addEmbedButton);
|
|
});
|
|
});
|