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

138
js/youtube.js
View file

@ -1,40 +1,44 @@
/*
* 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>')
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);
@ -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);
});
});