// ==UserScript==
// @name          Fast Youtube embedded player
// @description   Fast HTML5 direct playback at 720p is used when selected and available. The script also hugely improves load speed of pages with lots of embedded Youtube videos by instantly showing clickable and immediately accessible placeholders, then the thumbnails are loaded in background.
// @version       1.5.1
// @include       *
// @exclude       https://www.youtube.com/*
// @author        wOxxOm
// @namespace     wOxxOm.scripts
// @license       MIT License
// @grant         GM_getValue
// @grant         GM_setValue
// @grant         GM_addStyle
// @grant         GM_xmlhttpRequest
// @connect-src   www.youtube.com
// @connect       www.youtube.com
// @run-at        document-start
// @require       https://greasyfork.org/scripts/12228/code/setMutationHandler.js
// ==/UserScript==

/* jshint lastsemic:true, multistr:true, laxbreak:true, -W030, -W041, -W084 */

var resizeToFit = GM_getValue('resize', true);
var playHTML5 = GM_getValue('playHTML5', false);
var embedSelector = 'iframe[src*="youtube.com/embed"], embed[src*="youtube.com/v"]';

processNodes(document.querySelectorAll(embedSelector));

document.addEventListener('DOMContentLoaded', function() {
	if (resizeToFit)
		adjustNodes();
	processNodes(document.querySelectorAll(embedSelector));
	setMutationHandler(document, embedSelector, processNodes);
	injectStylesIfNeeded();
});

window.addEventListener('resize', function() {
	if (resizeToFit)
		adjustNodes();
});

function processNodes(nodes) {
	for (var i=0, nl=nodes.length, n; i<nl && (n=nodes[i]); i++) {
		if (!n.parentNode ||
			n.className.indexOf('instant-youtube-') >= 0 ||
			n.src.indexOf('autoplay=1') > 0 ||
			n.onload && getComputedStyle(n.parentNode).display == 'none' // skip some retarded loaders
		)
			continue;

		var id = n.src.match(/(?:embed\/|v[=\/])([^\s,.()\[\]?]+?)(?:[&?\/].*|$)/);
		if (!id)
			continue;
		id = id[1];

		for (var np=n.parentNode, npw; np && !(npw=np.clientWidth); np=np.parentNode) {}

		var containerWidth = resizeToFit ? npw : n.clientWidth;
		var containerHeight = resizeToFit ? npw / 16 * 9 : n.clientHeight;

		var div = document.createElement('div');
		div.className = 'instant-youtube-container';
		div.srcEmbed = n.src;
		div.style.maxWidth = containerWidth + 'px';
		div.style.height = containerHeight + 'px';
		div.originalWidth = n.width;
		div.originalHeight = n.height;
		div.videoID = id;

		var img = div.appendChild(document.createElement('img'));
		img.className = 'instant-youtube-thumbnail';
		img.src = 'https://i.ytimg.com/vi/' + id + '/maxresdefault.jpg';
		if (n.clientHeight) {
			img.style.maxWidth = 'auto';
			img.style.width = (containerHeight / 9 * 16) + 'px';
			img.style.marginLeft = Math.round((containerWidth - containerHeight / 9 * 16) / 2) + 'px';
		}
		img.title = 'Shift-click to use alternative player';
		img.onload = function(e) {
			var img = e.target;
			if (img.naturalWidth <= 120)
				img.onerror(e);
			else {
				img.style.marginTop = ((img.parentNode.clientHeight - img.clientHeight) / 2).toFixed(1) + 'px';
				img.style.setProperty('opacity', '1');
			}
			if (img.parentNode.iframeHasLoader)
				img.parentNode.parentNode.style.display = '';
		};
		img.onerror = function(e) {
			var img = e.target;
			if (img.src.indexOf('maxresdefault') > 0)
				img.src = img.src.replace('maxresdefault','hqdefault');
		};

		GM_xmlhttpRequest({
			method: 'GET',
			url: div.srcEmbed.replace(/\/(embed\/|v[=\/])/, '/watch?v='),
			context: div,
			onload: parseWatchPage
		});

		var rnd = Math.random().toString().substr(3);
		div.insertAdjacentHTML('beforeend', '\
				<svg class="instant-youtube-play-button"><path fill-rule="evenodd" clip-rule="evenodd" fill="#1F1F1F" class="ytp-large-play-button-svg" d="M84.15,26.4v6.35c0,2.833-0.15,5.967-0.45,9.4c-0.133,1.7-0.267,3.117-0.4,4.25l-0.15,0.95c-0.167,0.767-0.367,1.517-0.6,2.25c-0.667,2.367-1.533,4.083-2.6,5.15c-1.367,1.4-2.967,2.383-4.8,2.95c-0.633,0.2-1.316,0.333-2.05,0.4c-0.767,0.1-1.3,0.167-1.6,0.2c-4.9,0.367-11.283,0.617-19.15,0.75c-2.434,0.034-4.883,0.067-7.35,0.1h-2.95C38.417,59.117,34.5,59.067,30.3,59c-8.433-0.167-14.05-0.383-16.85-0.65c-0.067-0.033-0.667-0.117-1.8-0.25c-0.9-0.133-1.683-0.283-2.35-0.45c-2.066-0.533-3.783-1.5-5.15-2.9c-1.033-1.067-1.9-2.783-2.6-5.15C1.317,48.867,1.133,48.117,1,47.35L0.8,46.4c-0.133-1.133-0.267-2.55-0.4-4.25C0.133,38.717,0,35.583,0,32.75V26.4c0-2.833,0.133-5.95,0.4-9.35l0.4-4.25c0.167-0.966,0.417-2.05,0.75-3.25c0.7-2.333,1.567-4.033,2.6-5.1c1.367-1.434,2.967-2.434,4.8-3c0.633-0.167,1.333-0.3,2.1-0.4c0.4-0.066,0.917-0.133,1.55-0.2c4.9-0.333,11.283-0.567,19.15-0.7C35.65,0.05,39.083,0,42.05,0L45,0.05c2.467,0,4.933,0.034,7.4,0.1c7.833,0.133,14.2,0.367,19.1,0.7c0.3,0.033,0.833,0.1,1.6,0.2c0.733,0.1,1.417,0.233,2.05,0.4c1.833,0.566,3.434,1.566,4.8,3c1.066,1.066,1.933,2.767,2.6,5.1c0.367,1.2,0.617,2.284,0.75,3.25l0.4,4.25C84,20.45,84.15,23.567,84.15,26.4z M33.3,41.4L56,29.6L33.3,17.75V41.4z"></path><polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="33.3,41.4 33.3,17.75 56,29.6"></polygon></svg>\
				<span class="instant-youtube-link">' + (playHTML5 ? 'Play with Youtube player' : 'Play directly (up to 720p)') + '</span>\
				<div class="instant-youtube-options">\
					<label for="instant-youtube-options-resize-' + rnd + '">Resize to fit</label>\
					<input type="checkbox" id="instant-youtube-options-resize-' + rnd + '"' + (resizeToFit ? ' checked' : '') + '>\
					<label for="instant-youtube-options-html5-' + rnd + '" title="Tip: shift-clicking thumbnails will use alternative player">Play directly</label>\
					<input type="checkbox" id="instant-youtube-options-html5-' + rnd + '"' + (playHTML5 ? ' checked' : '') + '>\
				</div>\
		');

		if (n.parentNode.localName == 'object')
			n = n.parentNode;
		n.parentNode.insertBefore(div, n);
		n.remove();

		div.addEventListener('click', clickHandler);
	}

	injectStylesIfNeeded();
	return true;
}

function adjustNodes() {
	var nearest = null, minDistance = window.innerHeight;
	var vids = [].slice.call(document.getElementsByClassName('instant-youtube-container'));
	vids.forEach(function(n) {
		var bounds = n.getBoundingClientRect();
		var distance = Math.abs((bounds.bottom + bounds.top)/2 - window.innerHeight/2);
		if (distance < minDistance) {
			minDistance = distance;
			nearest = n;
		}
	});
	var resized = false;
	vids.forEach(function(n) {
		if (Math.abs(n.parentNode.clientWidth - parseFloat(n.style.maxWidth)) > 2) {
			var img = n.getElementsByClassName('instant-youtube-thumbnail')[0];
			var npw = n.parentNode.clientWidth;
			var nph = npw / 16 * 9;
			n.style.maxWidth = img.style.width = npw + 'px';
			n.style.height = nph + 'px';
			img.style.marginLeft = Math.round((npw - nph / 9 * 16) / 2) + 'px';
			img.style.marginTop = ((nph - img.clientHeight) / 2).toFixed(1) + 'px';
			resized = true;
		}
	});
	if (resized && nearest)
		setTimeout(function() {
			nearest.scrollIntoView();
		}, 100);
}

function parseWatchPage(response) {
	var div = response.context;
	var m = response.responseText.match(/ytplayer\.config\s*=\s*(\{.+?\});\s*ytplayer\.load/);
	var videoInfo = [];
	if (m) {
		var cfg = JSON.parse(m[1]), streams = {};
		cfg.args.url_encoded_fmt_stream_map.split(',').forEach(function(stream) {
			var params = {};
			stream.split('&').forEach(function(kv) {
				params[kv.split('=')[0]] = decodeURIComponent(kv.split('=')[1]);
			});
			streams[params.itag] = params;
		});
		cfg.args.fmt_list.split(',').forEach(function(fmt) {
			var itag = fmt.split('/')[0];
			var dimensions = fmt.split('/')[1];
			var stream = streams[itag];
			if (stream) {
				videoInfo.push({
					src: stream.url,
					title: stream.quality + ', ' + dimensions + ', ' + stream.type
				});
			}
		});
	} else {
		var rx = /url=([^=]+?mime%3Dvideo%252F(?:mp4|webm)[^=]+?)(?:,quality|,itag|.u0026)/g;
		var text = response.responseText.split('url_encoded_fmt_stream_map')[1];
		while (m = rx.exec(text)) {
			videoInfo.push({
				src: decodeURIComponent(decodeURIComponent(m[1]))
			});
		}
	}

	var title = response.responseText.match(/<title>(.+?)(?:\s*-\s*YouTube)?<\/title>/);
	if (title) {
		var duration = response.responseText.match(/<meta itemprop="duration" content="\D*(\d+.*?)S?">/);
		var a = div.appendChild(document.createElement('a'));
		a.className = 'instant-youtube-persistent-title';
		a.innerHTML = '<strong>' + title[1] + '</strong>' +
			(duration ? '<span>' + duration[1].replace(/[HM]/, ':0').replace(/\b0(\d\d)/, '$1') + '</span>' : '');
		a.href = 'https://www.youtube.com/watch?v=' + div.videoID;
		a.target = '_blank';
		['animation', 'webkitAnimation', 'mozAnimation'].some(function(prop) {
			if (prop in a.style) {
				a.style[prop] = 'instant-youtube-fadein 1s ease-in';
				setTimeout(function() { a.style[prop] = '' }, 1000);
				return true;
			}
		});
	}

	if (videoInfo.length)
		div.videoInfo = videoInfo;

	injectStylesIfNeeded();
}

function clickHandler(e) {
	if (e.target.href)
		return;
	if (e.target.parentNode.className == 'instant-youtube-options')
		return options(e);
	div = e.target.closest('.instant-youtube-container');
	div.removeEventListener('click', clickHandler);
	div.querySelector('svg').outerHTML = '<span class="instant-youtube-loading-button"></span>';

	var alternateMode = e.shiftKey || e.target.className == 'instant-youtube-link';
	if (div.videoInfo && (!!playHTML5 + !!alternateMode == 1))
		playDirectly(div);
	else
		switchToIFrame.call(div);
}

function playDirectly(div) {
	div.querySelector('.instant-youtube-options').style.display = 'none';
	div.querySelector('.instant-youtube-link').style.display = 'none';

	var video = document.createElement('video');
	video.controls = true;
	video.autoplay = true;
	video.width = div.clientWidth;
	video.height = div.clientHeight;
	video.className = 'instant-youtube-embed';
	video.volume = GM_getValue('volume', 0.5);

	div.videoInfo.forEach(function(src) {
		var srcdom = video.appendChild(document.createElement('source'));
		Object.keys(src).forEach(function(k) { srcdom[k] = src[k] });
		srcdom.onerror = switchToIFrame.bind(div);
	});


	if (window.chrome) {
		video.addEventListener('click', function(e) {
			this.paused ? this.play() : this.pause();
		});
	}
	video.interval = (function() {
		return setInterval(function() {
			if (video.volume != GM_setValue('volume', 0.5))
				GM_setValue('volume', video.volume);
		}, 1000);
	})();
	var title = div.querySelector('.instant-youtube-persistent-title');
	if (title) {
		video.onpause = function() { title.removeAttribute('hidden') };
		video.onplay = function() { title.setAttribute('hidden', true) };
	}
	video.onloadeddata = function(e) {
		pauseOtherVideos(this);
		div.appendChild(this);
		this.style.opacity = 1;
		var img = div.querySelector('img');
		img.style.transition = 'opacity 1s';
		img.style.opacity = 0;
	};
}

function switchToIFrame(e) {
	var div = this;
	if (e) console.log('Direct linking failed on %s, switching to IFRAME player', div.srcEmbed);
	var iframeHTML = '<iframe class="instant-youtube-embed" allowtransparency="true" src="' +
		div.srcEmbed.replace('/v/', '/embed/') +
		(div.srcEmbed.indexOf('?') > 0 ? '&' : '?') +
		'html5=1' +
		'&autoplay=1' +
		'&autohide=2' +
		'&border=0' +
		'&controls=1' +
		'&fs=1' +
		'&showinfo=1' +
		'&ssl=1' +
		'&theme=dark' +
		'&enablejsapi=1' +
		'" frameborder="0" allowfullscreen width="' + div.clientWidth + '" height="' + div.clientHeight + '"></iframe>';
	div.insertAdjacentHTML('beforeend', iframeHTML);

	div.lastElementChild.onload = function() {
		pauseOtherVideos(this);
		this.style.opacity = 1;

		var div = this.closest('.instant-youtube-container');
		div.setAttribute('iframe', '');
		setTimeout(function() {
			div.querySelector('img').style.display = 'none';
			var title = div.querySelector('.instant-youtube-persistent-title');
			if (title)
				title.remove();
		}, 2000);
	};
	if (e && e.target) {
		var video = e.target.parentNode;
		while (video.lastElementChild)
			video.lastElementChild.remove();
	}
}

function pauseOtherVideos(activePlayer) {
	[].forEach.call(activePlayer.ownerDocument.getElementsByClassName('instant-youtube-embed'), function(v) {
		if (v == activePlayer)
			return;
		switch (v.localName) {
			case 'video':
				if (!v.paused)
					v.pause();
				break;
			case 'iframe':
				(function() { try { v.contentWindow.postMessage('{"event":"command", "func":"pauseVideo", "args":""}', '*') } catch(e) {} })();
				break;
		}
	});
}

function options(e) {
	if (e.target.id.indexOf('instant-youtube-options-resize') == 0) {
		resizeToFit = e.target.checked;
		GM_setValue('resize', resizeToFit);
		[].forEach.call(document.querySelectorAll('div.instant-youtube-container'), function(n) {
			var w = n.originalWidth, h = n.originalHeight, img = n.querySelector('img');
			if (resizeToFit) {
				for (var np=n.parentNode, npw; np && !(npw=np.clientWidth); np=np.parentNode) {}
				w = npw;
				h = npw / 16 * 9;
			}
			n.style.maxWidth = w + 'px!important';
			n.style.height = h + 'px!important';
			img.style.width = (h / 9 * 16) + 'px!important';
			img.style.marginLeft = Math.round((w - h / 9 * 16) / 2) + 'px!important';
			img.style.marginTop = ((h - img.clientHeight) / 2).toFixed(1) + 'px!important';
			n.querySelector('input').checked = resizeToFit;
			var video = n.querySelector('video');
			if (video) {
				video.width = w;
				video.height = h;
			}
		});
	} else if (e.target.id.indexOf('instant-youtube-options-html5') == 0) {
		playHTML5 = e.target.checked;
		GM_setValue('playHTML5', playHTML5);
		[].forEach.call(document.querySelectorAll('div.instant-youtube-container'), function(div) {
			div.querySelector('span.instant-youtube-link').textContent = playHTML5 ? 'Play with Youtube player' : 'Play directly (up to 720p)';
			div.querySelector('[id^="instant-youtube-options-html5"]').checked = playHTML5;
		});
	}
}

function injectStylesIfNeeded() {
	if (document.head.innerHTML.indexOf('.instant-youtube-container') > 0)
		return;
	GM_addStyle('\
			.instant-youtube-container {position:relative; overflow:hidden; cursor:pointer; background-color:black; padding:0; margin:0; font:normal 14px/1.0 sans-serif,Arial,Helvetica,Verdana;}\
			.instant-youtube-container .instant-youtube-thumbnail {transition:opacity 0.1s ease-out; opacity:0; padding:0; margin:0}\
			.instant-youtube-container .instant-youtube-play-button {position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:85px; height:60px}\
			.instant-youtube-container .instant-youtube-loading-button {position:absolute; left:0; right:0; top:0; bottom:0; padding:0; margin:auto; display:block; width:20px; height:20px; background: url("data:image/gif;base64,R0lGODlhFAAUAJEDAMzMzLOzs39/f////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgADACwAAAAAFAAUAAACPJyPqcuNItyCUJoQBo0ANIxpXOctYHaQpYkiHfM2cUrCNT0nqr4uudsz/IC5na/2Mh4Hu+HR6YBaplRDAQAh+QQFCgADACwEAAIADAAGAAACFpwdcYupC8BwSogR46xWZHl0l8ZYQwEAIfkEBQoAAwAsCAACAAoACgAAAhccMKl2uHxGCCvO+eTNmishcCCYjWEZFgAh+QQFCgADACwMAAQABgAMAAACFxwweaebhl4K4VE6r61DiOd5SfiN5VAAACH5BAUKAAMALAgACAAKAAoAAAIYnD8AeKqcHIwwhGntEWLkO3CcB4biNEIFACH5BAUKAAMALAQADAAMAAYAAAIWnDSpAHa4GHgohCHbGdbipnBdSHphAQAh+QQFCgADACwCAAgACgAKAAACF5w0qXa4fF6KUoVQ75UaA7Bs3yeNYAkWACH5BAUKAAMALAIABAAGAAwAAAIXnCU2iMfaRghqTmMp1moAoHyfIYIkWAAAOw==")}\
			.instant-youtube-container:hover .ytp-large-play-button-svg {fill:#CC181E}\
			.instant-youtube-container .instant-youtube-link, .instant-youtube-container .instant-youtube-link:link, .instant-youtube-container .instant-youtube-link:visited, .instant-youtube-container .instant-youtube-link:active, .instant-youtube-container .instant-youtube-link:focus {\
				position:absolute; top:50%; left:0; right:0; width:20em; height:1.7em; margin:60px auto; padding:0; border:none; \
				display:block; text-align:center; text-decoration:none; color:white; text-shadow:1px 1px 3px black; font-weight:bold;\
			}\
			.instant-youtube-container span.instant-youtube-link {font-weight:normal; font-size:12px}\
			.instant-youtube-container .instant-youtube-link:hover {color:white; text-decoration:underline; background:transparent}\
			.instant-youtube-container .instant-youtube-embed {position:absolute; left:0; top:0; padding:0; margin:0; height:inherit!important; opacity:0; transition:opacity 2s!important}\
			.instant-youtube-container iframe {z-index:10}\
			.instant-youtube-container .instant-youtube-persistent-title {\
				display:block; z-index:9; background-color:rgba(0,0,0,0.5); color:white;\
				width:100%; height: 1.9em; top:0; left:0; right:0; position:absolute; z-index: 9;\
				color:white; text-shadow:1px 1px 2px black; text-align:center; text-decoration:none;\
				margin:0; padding:0.5em 0.5em 0.2em; border:none;\
			}\
			.instant-youtube-container .instant-youtube-persistent-title strong:after {content:" - watch on Youtube"; font-weight:normal; margin-right:1ex}\
			.instant-youtube-container .instant-youtube-persistent-title span {color:inherit}\
			.instant-youtube-container .instant-youtube-persistent-title span:before {content:"("}\
			.instant-youtube-container .instant-youtube-persistent-title span:after {content:")"}\
			@-webkit-keyframes instant-youtube-fadein { from {opacity:0} to {opacity:1}	}\
			@-moz-keyframes instant-youtube-fadein { from {opacity:0} to {opacity:1}	}\
			@keyframes instant-youtube-fadein { from {opacity:0} to {opacity:1}	}\
			.instant-youtube-container:not(:hover) .instant-youtube-persistent-title[hidden] {display:none; margin:0}\
			.instant-youtube-container .instant-youtube-persistent-title:hover {text-decoration:underline}\
			.instant-youtube-container .instant-youtube-persistent-title strong {color:white}\
			.instant-youtube-container .instant-youtube-options {position:absolute; right:2px; bottom:0; color:white; text-shadow:1px 1px 2px black; padding:0; margin:0 }\
			.instant-youtube-container .instant-youtube-options * {display:inline; color:white; font-size:13px; vertical-align:middle; padding:0; margin:0}\
	');
}