senka33 / Youtube Old Player 2015

// ==UserScript==
// @name        Youtube Old Player 2015
// @namespace   YoutubeOldPlayer
// @description Fixes the new UI to one that resembles old one
// @author      Senka & Roy Scheerens
// @include     https://www.youtube.com/*
// @version     1.4
// @grant       none
// ==/UserScript==
(function() {
	var addWatchLater = true;
	var watchLaterAdded = false;
	
	//mouse over the controls to update them (this seems to also work with 2000ms instead of 1000ms)
	var evObj = document.createEvent('Events');
	evObj.initEvent("mousemove", true, false);
	var moviePlayer = document.querySelector(".html5-video-player");
	setInterval(function() 
	{
		if (!moviePlayer)
		{	moviePlayer = document.querySelector(".html5-video-player");  }
		else if (!moviePlayer.classList.contains("seeking-mode"))
		{	moviePlayer.dispatchEvent(evObj);  }
		
		if (addWatchLater && !watchLaterAdded && moviePlayer)
		{
			var watchLater = document.querySelector(".ytp-watch-later-button");
			if (watchLater)
			{
				var qaulitybutton = document.querySelector(".ytp-subtitles-button") || document.querySelector(".ytp-settings-button");
				if (qaulitybutton)
				{
					qaulitybutton.parentNode.insertBefore(watchLater, qaulitybutton.nextSibling);
					watchLaterAdded = true;
				}
			}
		}
	}, 1000);

    //the css: 
	var css = document.createElement('style');
	css.type = "text/css";
	css.textContent = [
        
        // PLAYER EMBED ------------------------------------------------------------------------------------------------
        "	.html5-video-player .ytp-chrome-bottom { opacity:1!important;position:absolute!important;bottom:0px!important; height:25px!important;padding:0px!important;background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)!important;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)))!important;background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)!important;background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)!important;background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)!important;background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)!important;}",
        "	.html5-video-player .ytp-chrome-controls { height:25px!important;opacity:0.7!important;width:calc(100% + 24px)!important;left:0px!important;position:absolute!important;margin-left:-12px!important;background: #000000; /* Old browsers */ background: -moz-linear-gradient(top,  #000000 0%, #303030 10%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(10%,#303030), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,  #000000 0%,#303030 10%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,  #000000 0%,#303030 10%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,  #000000 0%,#303030 10%,#000000 100%); /* IE10+ */ background: linear-gradient(to bottom,  #000000 0%,#303030 10%,#000000 100%); /* W3C */}",
        "	.html5-video-player .ytp-chrome-controls:hover { opacity:1!important;}",
        "	.html5-video-player .ytp-time-display { display:block!important;line-height:25px!important;}",
        "	.html5-video-player .ytp-progress-bar-container {bottom:24px!important;width:calc(100% + 24px)!important;margin-left:-12px!important;transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;}",
        "	.html5-video-player:hover .ytp-progress-bar-container {width:100%!important;margin-left:0px!important;transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;}",
        "	.html5-video-player .ytp-title { font-size:99%!important;text-shadow: 0px 0px 5px rgba(0, 0, 0, 1),0px 0px 5px rgba(0, 0, 0, 1),0px 0px 5px rgba(0, 0, 0, 1);}",
        "	.html5-video-player .ytp-chrome-top { opacity:0!important;}",
        "	.html5-video-player .ytp-chrome-top:hover { opacity:1!important;}",
        
        
        // PLAYER FULLSCREEN -------------------------------------------------------------------------------------------
        "	#movie_player.ytp-fullscreen .ytp-chrome-bottom { opacity:1!important;position:absolute!important;bottom:4px!important; height:38px!important;padding:0px!important;background:none;}",        
        "	#movie_player.ytp-fullscreen .ytp-chrome-controls { height:30px!important;opacity:0.3!important;background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */;}",
        "	#movie_player.ytp-fullscreen .ytp-chrome-controls:hover { opacity:1!important;}",
        "	#movie_player.ytp-fullscreen .ytp-time-display { display:block!important;line-height:30px!important;}",
        "	#movie_player.ytp-fullscreen .ytp-button { height:30px!important;line-height:25px!important;}",
        "	#movie_player.ytp-fullscreen .ytp-chrome-bottom .ytp-progress-bar-container { position:absolute!important;bottom:0px!important;width:calc(100% + 48px)!important;margin-left:-24px!important;transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;}",
        "	#movie_player.ytp-fullscreen .ytp-chrome-bottom .ytp-progress-bar-container:hover { position:absolute!important;bottom:0px!important;width:100%!important;margin-left:0!important;transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;}",
        "	#movie_player.ytp-fullscreen .ytp-progress-bar { height:4px!important;}",
        "	#movie_player.ytp-fullscreen .ytp-progress-list { background:none!important;height:2px!important;}",
        //  fullscreen by embed
        "	.html5-video-player.ytp-fullscreen .ytp-chrome-bottom { opacity:1!important;position:absolute!important;bottom:4px!important; height:38px!important;padding:0px!important;background:none;}",        
        "	.html5-video-player.ytp-fullscreen .ytp-chrome-controls { height:30px!important;opacity:0.3!important;background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */;}",
        "	.html5-video-player.ytp-fullscreen .ytp-chrome-controls:hover { opacity:1!important;}",
        "	.html5-video-player.ytp-fullscreen .ytp-time-display { display:block!important;line-height:30px!important;}",
        "	.html5-video-player.ytp-fullscreen .ytp-button { height:30px!important;line-height:25px!important;}",
        "	.html5-video-player.ytp-fullscreen .ytp-chrome-bottom .ytp-progress-bar-container { position:absolute!important;bottom:0px!important;width:calc(100% + 48px)!important;margin-left:-24px!important;transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;}",
        "	.html5-video-player.ytp-fullscreen .ytp-chrome-bottom .ytp-progress-bar-container:hover { position:absolute!important;bottom:0px!important;width:100%!important;margin-left:0!important;transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;}",
        "	.html5-video-player.ytp-fullscreen .ytp-progress-bar { height:4px!important;}",
        "	.html5-video-player.ytp-fullscreen .ytp-progress-list { background:none!important;height:2px!important;}",
        
        
        //  PLAYER YOUTUBE ---------------------------------------------------------------------------------------------
        "	#movie_player .ytp-chrome-bottom { opacity:1!important;position:absolute!important;bottom:0px!important;height:30px!important;padding:0px!important;background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)!important;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)))!important;background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)!important;background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)!important;background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)!important;background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)!important; }",
        "	#movie_player .ytp-chrome-controls { height:30px!important;opacity:0.7!important;width:calc(100% + 24px)!important;left:0px!important;position:absolute!important;margin-left:-12px!important;background: #000000; /* Old browsers */ background: -moz-linear-gradient(top,  #000000 0%, #303030 10%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(10%,#303030), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,  #000000 0%,#303030 10%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,  #000000 0%,#303030 10%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,  #000000 0%,#303030 10%,#000000 100%); /* IE10+ */ background: linear-gradient(to bottom,  #000000 0%,#303030 10%,#000000 100%); /* W3C */}",
        "	#movie_player .ytp-chrome-controls:hover { opacity:1!important;}",
        "	#movie_player .ytp-time-display { display:block!important;line-height:30px!important;}",
        "	#movie_player .ytp-progress-bar-container {bottom:29px!important;width:calc(100% + 24px)!important;margin-left:-12px!important;transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;}",
        "	#movie_player:hover .ytp-progress-bar-container {width:100%!important;margin-left:0px!important;transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;) !important;}",
        "	#movie_player .ytp-progress-list { background:none!important;}",
        

        
        //  Décalage pour la barre de controle sur youtube
        "	#player #movie_player { height:calc(100% + 33px);}",
        //  Video full size
        "	#player .ytp-fullscreen {height:100%!important;}",
        "	.html5-video-container {height:100%!important;}", 
        //  Positionnement du bouton "regarder plus tard" à droite
        "	.ytp-watch-later-button { float:right!important;}",
        
        //  Design du bouton de la progressbar
        "	.ytp-scrubber-button {background:#f00000!important;border-radius: 9px;border:2px solid #dddddd;width:9px!important;height:9px!important;top:-4px!important;margin-left:-5px!important;  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1);-moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1);box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1);     -moz-transform: translateY(0px) scale(1,1)!important;-ms-transform: translateY(0px) scale(1,1)!important;-webkit-transform: translateY(0px) scale(1,1)!important;transform: translateY(0px) scale(1,1)!important;    -moz-transition: -moz-transform .1s ease-out!important;-webkit-transition: -webkit-transform .1s ease-out!important;-ms-transition: -ms-transform .1s ease-out!important;transition: transform .1s ease-out!important;}",
        "	#movie_player.ytp-fullscreen .ytp-scrubber-button, #movie_player .ytp-scrubber-button {background:#f00000!important;border-radius: 9px;border:2px solid #dddddd;width:10px!important;height:10px!important;top:-5px!important;margin-left:-4px!important;  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1);-moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1);box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1);}",
        
        //  Placement de la video en hauteur + réduction de la taille pour le player embed
        "	#player .html5-video-player .html5-video-container .html5-main-video {important;position:absolute!important;top:0%!important;transform:none!important;max-height: calc(100% - 25px)!important;}",
        //  Recentrage vertical de la video pour la lecture en plein écran.
        "	#player .ytp-fullscreen .html5-video-container .html5-main-video {position:absolute!important;top:50%!important;transform:translateY(-50%)!important;}",
              
        //  Supression des dégradés noir du nouveau lecteur
        "   .ytp-gradient-top, .ytp-gradient-bottom {display:none;} ",
        
        //  Ajustement du bloc Description de la video sur youtube
        "	#watch-header { margin-top:30px!important; }", 
  
	].join("\n");
	document.head.appendChild(css);
})();