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

Merge branch 'embeds' into 'config'

Browse source 
Rework youtube.js for better youtube shorts support

See merge request leftypol/leftypol!29
This commit is contained in:
Zankaria Auxa 2025-02-12 20:39:27 +00:00
commit f7b33678a4
2 changed files with 92 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

26
inc/config.php
View file

@ -1196,13 +1196,21 @@
// It's very important that you match the entire input (with ^ and $) or things will not work correctly.
$config['embedding'] = array(
[
'/^https?:\/\/(\w+\.)?youtube\.com\/shorts\/([a-zA-Z0-9\-_]{10,11})$/i',
'<iframe style="float: left; padding: 0.6em 1em 0.2em 0.2em;" width="240" height="426" frameborder="0" id="ytplayer" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/$2"></iframe>'
'/^(?:(?:https?:)?\/\/)?((?:www|m)\.)?(?:(?:youtube(?:-nocookie)?\.com|youtu\.be))(?:\/(?:[\w\-]+\?v=|embed\/|live\/|v\/)?)([\w\-]{11})((?:\?|\&)\S+)?$/i',
'<div class="video-container" data-video-id="$2" data-iframe-width="360" data-iframe-height="202">
<a href="https://youtu.be/$2" target="_blank" class="file">
<img style="width:360px;height:202px;object-fit:cover" src="https://img.youtube.com/vi/$2/0.jpg" class="post-image"/>
</a>
</div>'
],
[
'/^https?:\/\/(\w+\.)?youtube\.com\/shorts\/([a-zA-Z0-9\-_]{10,11})(\?.*)?$/i',
'<div class="video-container" data-video-id="$2" data-iframe-width="202" data-iframe-height="360">
<a href="https://youtu.be/$2" target="_blank" class="file">
<img style="width:202px;height:360px;object-fit:cover" src="https://img.youtube.com/vi/$2/0.jpg" class="post-image"/>
</a>
</div>'
],
array(
'/^https?:\/\/(\w+\.)?youtube\.com\/watch\?v=([a-zA-Z0-9\-_]{10,11})(&.+)?$/i',
'<iframe style="float: left;margin: 10px 20px;" width="%%tb_width%%" height="%%tb_height%%" frameborder="0" id="ytplayer" src="http://www.youtube.com/embed/$2"></iframe>'
),
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>'
@ -2015,12 +2023,6 @@
// is the absolute maximum, because MySQL cannot handle table names greater than 64 characters.
$config['board_regex'] = '[0-9a-zA-Z$_\x{0080}-\x{FFFF}]{1,58}';
// Youtube.js embed HTML code
$config['youtube_js_html'] = '<div class="video-container" data-video="$2">'.
'<a href="https://youtu.be/$2" target="_blank" class="file">'.
'<img style="width:360px;height:270px;" src="//img.youtube.com/vi/$2/0.jpg" class="post-image"/>'.
'</a></div>';
// Slack Report Notification
$config['slack'] = false;
$config['slack_channel'] = "";

108
js/youtube.js
View file

@ -1,16 +1,11 @@
/*
* youtube
* https://github.com/savetheinternet/Tinyboard/blob/master/js/youtube.js
*
* Don't load the YouTube player unless the video image is clicked.
* 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.
* 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>
* Copyright (c) 2025 Zankaria Auxa <zankaria.auxa@mailu.io>
*
* Usage:
* $config['embedding'] = array();
@ -19,22 +14,27 @@
* $config['youtube_js_html']);
* $config['additional_javascript'][] = 'js/jquery.min.js';
* $config['additional_javascript'][] = 'js/youtube.js';
*
*/
$(document).ready(function() {
// Adds Options panel item
if (typeof localStorage.youtube_embed_proxy === 'undefined') {
if (location.hostname.includes(".onion")){
localStorage.youtube_embed_proxy = 'tuberyps2pn6dor6h47brof3w2asmauahhk4ei42krugybzzzo55klad.onion';
} else {
localStorage.youtube_embed_proxy = 'incogtube.com'; //default value
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') {
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 +43,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);
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);
});
});