forked from leftypol/leftypol
Merge branch 'embeds' into 'config'
Rework youtube.js for better youtube shorts support See merge request leftypol/leftypol!29
This commit is contained in:
commit
f7b33678a4
2 changed files with 92 additions and 76 deletions
|
|
@ -1196,13 +1196,21 @@
|
||||||
// It's very important that you match the entire input (with ^ and $) or things will not work correctly.
|
// It's very important that you match the entire input (with ^ and $) or things will not work correctly.
|
||||||
$config['embedding'] = array(
|
$config['embedding'] = array(
|
||||||
[
|
[
|
||||||
'/^https?:\/\/(\w+\.)?youtube\.com\/shorts\/([a-zA-Z0-9\-_]{10,11})$/i',
|
'/^(?:(?:https?:)?\/\/)?((?:www|m)\.)?(?:(?:youtube(?:-nocookie)?\.com|youtu\.be))(?:\/(?:[\w\-]+\?v=|embed\/|live\/|v\/)?)([\w\-]{11})((?:\?|\&)\S+)?$/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>'
|
'<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(
|
array(
|
||||||
'/^https?:\/\/(\w+\.)?vimeo\.com\/(\d{2,10})(\?.+)?$/i',
|
'/^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>'
|
'<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.
|
// 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}';
|
$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
|
// Slack Report Notification
|
||||||
$config['slack'] = false;
|
$config['slack'] = false;
|
||||||
$config['slack_channel'] = "";
|
$config['slack_channel'] = "";
|
||||||
|
|
|
||||||
140
js/youtube.js
140
js/youtube.js
|
|
@ -1,40 +1,40 @@
|
||||||
/*
|
/*
|
||||||
* 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]';
|
||||||
if (typeof localStorage.youtube_embed_proxy === 'undefined') {
|
const YOUTUBE = 'www.youtube.com';
|
||||||
if (location.hostname.includes(".onion")){
|
|
||||||
localStorage.youtube_embed_proxy = 'tuberyps2pn6dor6h47brof3w2asmauahhk4ei42krugybzzzo55klad.onion';
|
function makeEmbedNode(embedHost, videoId, width, height) {
|
||||||
} else {
|
return $(`<iframe type="text/html" width="${width}" height="${height}" class="full-image"
|
||||||
localStorage.youtube_embed_proxy = 'incogtube.com'; //default value
|
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')) {
|
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 ')+'<input type="text" size=30></label>')
|
"<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>');
|
+ '</fieldset>');
|
||||||
|
|
||||||
$('#youtube-embed-proxy-url>input').val(localStorage.youtube_embed_proxy);
|
$('#youtube-embed-proxy-url>input').val(localStorage.youtube_embed_proxy);
|
||||||
|
|
@ -43,51 +43,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);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue