☰

Youtube New UI Fix

Fixes the new UI to one that resembles old one

Versão de: 05/08/2015. Veja: a última versão.

// ==UserScript==
// @name        Youtube New UI Fix
// @namespace   YtNewUIFix
// @description Fixes the new UI to one that resembles old one
// @author      Roy Scheerens
// @include     https://www.youtube.com/*
// @version     1.2
// @grant       none
// ==/UserScript==

(function() {
	//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.getElementById("movie_player");
    setInterval(function() { moviePlayer.dispatchEvent(evObj); }, 1000);
	
	//the css: 
	var css = document.createElement('style');
    css.type = "text/css";
    css.textContent = [
		"	.ytp-chrome-bottom { opacity: 1!important; background: #1B1B1B none repeat scroll 0% 0%!important; width: 100%!important; left: 0!important; }", //have controls always visible, with old color, and take up the entire width
		"	.ytp-svg-fill { fill: #8E8E8E!important; }", //revert button colors; will do nothing if @namespace url(http://www.w3.org/1999/xhtml); is included for some reason
		"	.ytp-gradient-bottom { display: none !important; }", //some gradient just above the old controls that didn't seem necessary
		"	:not(.watch-stage-mode) #movie_player { height: calc(100% + 33px); }", //no idea why, but the videos were one pixel smaller in theater or non-theater mode
		"	.watch-stage-mode #movie_player { height: calc(100% + 34px); }", //this fixes that, in both modes the video was 720px high
		"	body:not(.ytwp-window-player) .watch-stage-mode #watch7-sidebar-contents, body:not(.ytwp-window-player) #watch7-content { transform: translateY(33px); }", //this is to push the sidebar down if in theater mode (in theater mode the sidebar is under the player and not to the right of it)
		(navigator.appVersion.indexOf("Chrome/") != -1) ? "	.ytp-big-mode video { height: calc(100% - 60px - 33px)!important; }" : "	.ytp-big-mode video { height: calc(100% - 60px)!important; }", //make the full-screen (=.ytp-big-mode) video 60px smaller to show the controls
		"	.html5-video-container { height: 100%!important; }", //needed for full-screen to not give a black screen.
		"	:not(.ytp-big-mode) .ytp-player-content, .ytp-subtitles-player-content { bottom: 49px!important; }", //fix to make the subtitles (and the channel's icon on the video) not go up and down when hovering over the video
		"	.ytp-big-mode .ytp-player-content, .ytp-subtitles-player-content { bottom: 76px!important; }", //fix to make the subtitles (and the channel's icon on the video) not go up and down when hovering over the video
		"	.watch-stage-mode #theater-background::after { content: \'\'; bottom: -34px; left: 0px; position: absolute; background-color: black; height: 34px; width: 100%; }", //when moving the controls down, they won't have any black background to the left and right. This creates an black bar under the controls to fill that gap
		"	#movie_player:not(.ytp-fullscreen) .ytp-chrome-bottom { height: 28px!important; }", //make the controls smaller (not in full-screen; which makes the buttons look wierd)
		"	#movie_player:not(.ytp-fullscreen) .ytp-progress-bar-container { bottom: 29px!important; }", //move the progressbar down a bit (or else it will float above the now smaller controls)
		"	#movie_player:not(.ytp-fullscreen) .ytp-chrome-controls { transform: translateY(-5px)!important; }", //move all the buttons and time display down a bit to make them centered again with the new height
		"	.ytp-panelpopup { background: rgb(28, 28, 28) none repeat scroll 0% 0%!important; }" //and lastly, this will make the pop-up settings non-transparent.
	].join("\n");
    document.head.appendChild(css);
})();