perdedora/leftypol
1
0
Fork 0
forked from leftypol/leftypol
Code Pull requests Activity

youtube.js: rework

Browse source
This commit is contained in:
Zankaria 2025-02-12 20:05:55 +01:00
parent 6df32997bf
commit 4787e98c02
1 changed files with 79 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

140
js/youtube.js
View file

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