leftypol/js/youtube.js

/*
* 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';
*
*/

$(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
		}
	}

	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>')
		+ '</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 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>");

		var makeEmbedNode = function(embedHost) {
			return $('<iframe style="float:left;margin: 10px 20px" 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) {
			e.preventDefault();

			if (span.text() == ON){
				videoNode.append(spanProxy);
				videoNode.append(contents);
				defaultEmbed.remove();
				proxyEmbed.remove();
				span.text(OFF);
			} else {
				contents.detach();
				span.text(ON);
				spanProxy.remove();
				videoNode.append(e.target == spanProxy[0] ? proxyEmbed : defaultEmbed);
			}
		});

		videoNode.append(span);
		videoNode.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);
	});
});