☰

Youtube New UI Fix

Fixes the new UI to one that resembles old one

当前为 2015-08-09 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Youtube New UI Fix
  3. // @namespace   YtNewUIFix
  4. // @description Fixes the new UI to one that resembles old one
  5. // @author      Roy Scheerens
  6. // @include     https://www.youtube.com/*
  7. // @version     1.4.5
  8. // @grant       none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. 	var addWatchLater = true;
  13. 	var watchLaterAdded = false;
  14. 	
  15. 	//mouse over the controls to update them (this seems to also work with 2000ms instead of 1000ms)
  16. 	var evObj = document.createEvent('Events');
  17. 	evObj.initEvent("mousemove", true, false);
  18. 	var moviePlayer = document.querySelector(".html5-video-player");
  19. 	setInterval(function() 
  20. 	{
  21. 		if (!moviePlayer)
  22. 		{
  23. 			moviePlayer = document.querySelector(".html5-video-player");
  24. 		}
  25. 		else if (!moviePlayer.classList.contains("seeking-mode"))
  26. 		{
  27. 			moviePlayer.dispatchEvent(evObj); 
  28. 		}
  29. 		
  30. 		if (addWatchLater && !watchLaterAdded && moviePlayer)
  31. 		{
  32. 			var watchLater = document.querySelector(".ytp-watch-later-button");
  33. 			if (watchLater)
  34. 			{
  35. 				var qaulitybutton = document.querySelector(".ytp-subtitles-button") || document.querySelector(".ytp-settings-button");
  36. 				if (qaulitybutton)
  37. 				{
  38. 					qaulitybutton.parentNode.insertBefore(watchLater, qaulitybutton.nextSibling);
  39. 					watchLaterAdded = true;
  40. 				}
  41. 			}
  42. 		}
  43. 	}, 1000);
  44.  
  45. 	//the css: 
  46. 	var css = document.createElement('style');
  47. 	css.type = "text/css";
  48. 	css.textContent = [
  49.  			/* fixing the colors */
  50. 		"	.ytp-chrome-bottom { background-color: #1B1B1B!important; }", 
  51. 		"	.ytp-svg-fill { fill: #8E8E8E!important; }", 
  52. 		"	#movie_player { height: calc(100% + 35px)!important; }", 
  53. 		"	.html5-video-content { background-color: black!important; }", 
  54. 		"	.ytp-panelpopup { background: rgb(28, 28, 28) none repeat scroll 0% 0%!important; }	", 
  55.  
  56. 			/* moving the content below down */
  57. 		"	#watch7-content, div.watch-stage-mode #watch7-sidebar { transform: translateY(35px)!important; }", 
  58.  
  59. 			/* controls always visible */
  60. 		"	.ytp-chrome-bottom { opacity: 1!important; }", 
  61.  
  62. 			/* move controls to the right place */
  63. 		"	#movie_player { height: calc(100% + 35px)!important; }", 
  64. 		"	.ytp-gradient-bottom, .ytp-gradient-top, .ytp-chrome-top { display: none!important; }", 
  65. 		"	.ytp-chrome-controls { width: calc(100% + 24px)!important; transform: translateX(-12px)!important; }", 
  66.  
  67. 			/* Fix the theater black bars */
  68. 		"	.watch-stage-mode #theater-background::after { content: ''; height: 35px; bottom: -35px; left: 0px; position: absolute; background-color: black; width: 100%; }", 
  69.  
  70. 			/* scale down the controls */
  71. 		"	.ytp-chrome-bottom { transform: translateY(5px)!important; }", 
  72. 		"	.ytp-chrome-bottom::before {content: ''; bottom: 0px; top: -1px; left: -12px; right: -12px; position: absolute; background-color: #1B1B1B; z-index: -1000; }", 
  73. 		"	.ytp-chrome-controls { height: 31px!important; line-height: 31px!important; font-size: 11px!important; }", 
  74. 		"	.ytp-chrome-controls .ytp-button:not(.ytp-play-button):not(.ytp-watch-later-button) { width: 32px!important; }", 
  75. 		"	.ytp-play-button { width: 41px!important; }", 
  76. 		"	.ytp-progress-bar-container:not(.ytp-pulling) { height: 5px!important; }", 
  77.  
  78. 			/* scale down the controls big mode */
  79. 		"	.ytp-big-mode .ytp-chrome-bottom { transform: translateY(24px)!important; }", 
  80. 		"	.html5-video-container { height: 100%!important; }", 
  81. 		"	.html5-main-video { max-height: calc(100% - 35px)!important; }", 
  82. 		"	.ytp-big-mode .ytp-progress-bar-container { transform: translateY(-1px)!important; }", 
  83.  
  84. 			/* Fix the quality badge (red HD rectangle) */
  85. 		"	.ytp-settings-button.ytp-hd-quality-badge::after,.ytp-settings-button.ytp-4k-quality-badge::after,.ytp-settings-button.ytp-5k-quality-badge::after,.ytp-settings-button.ytp-8k-quality-badge::after", 
  86. 		"	{", 
  87. 		"		content:''!important;", 
  88. 		"		position:absolute!important;", 
  89. 		"		top:6px!important;", 
  90. 		"		right:4px!important;", 
  91. 		"		height:9px!important;", 
  92. 		"		width:13px!important;", 
  93. 		"		background-color:#f12b24!important;", 
  94. 		"		border-radius:1px!important;", 
  95. 		"		line-height:normal!important;", 
  96. 		"		background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTMgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsLW9wYWNpdHk9IjAuNjQ3MSIgZmlsbD0iIzAwMDAwMCIgZD0iTTUsNyBMNiw3IEw2LDggTDUsOCBMNSw3IFogTTEwLDMgTDEwLDQgTDgsNCBMOCwzIEwxMCwzIFogTTMsNiBMMyw1IEw1LDUgTDUsNiBMMyw2IFogTTIsNyBMMyw3IEwzLDggTDIsOCBMMiw3IFogTTcsNyBMMTAsNyBMMTAsOCBMNyw4IEw3LDcgWiBNMTAsNiBMMTEsNiBMMTEsNyBMMTAsNyBMMTAsNiBaIj48L3BhdGg+DQogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTUsNyBMNSw2IEw1LDUgTDMsNSBMMyw2IEwzLDcgTDIsNyBMMiwyIEwzLDIgTDMsNCBMNSw0IEw1LDIgTDYsMiBMNiw3IEw1LDcgWiBNMTEsNiBMMTAsNiBMMTAsNyBMNyw3IEw3LDIgTDEwLDIgTDEwLDMgTDExLDMgTDExLDYgWiBNMTAsNCBMMTAsMyBMOCwzIEw4LDQgTDgsNiBMMTAsNiBMMTAsNCBaIj48L3BhdGg+DQo8L3N2Zz4NCg==')!important;", 
  97. 		"		padding: 0!important;", 
  98. 		"	}", 
  99.  
  100. 			/* Makes sure the captions/subtitles are at the correct height and don't move up and down */
  101. 		"	.ytp-player-content, .ytp-subtitles-player-content { bottom: 49px!important; } ",
  102. 	
  103. 		/* rules for the watch later button */
  104. 		"	.ytp-watch-later-button { width: 24px!important; float: right!important; }", 
  105. 		"	.ytp-tooltip-image-enabled { bottom: 49px!important; top: auto!important; }"
  106. 	].join("\n");
  107. 	document.head.appendChild(css);
  108. })();