☰

Youtube Centered

Center aligns the Youtube page

  1. // ==UserScript==
  2. // @name         Youtube Centered
  3. // @namespace    http://userscripts.org/users/zackton
  4. // @description  Center aligns the Youtube page
  5. // @include      *.youtube.com/*
  6. // @include      *.youtube.com/
  7. // @run-at       document-start
  8. // @grant        none
  9. // @version      2.5
  10. // ==/UserScript==
  11.  
  12. // My precious...
  13. var YC = {};
  14.  
  15. /**
  16.  * Show two columns for subscriptions, history, social {true, false}
  17.  * Will make those pages wider.
  18.  **/
  19. YC.doublecolumn = false;
  20. YC.doublecolumn_pages = ['watchlater', 'history', 'subscriptions', 'social', 'whattowatch'];
  21.  
  22. /** 
  23.  * Shift the video page if it doesn't look centered to you {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11}
  24.  *   watchshift =  1: 100px left shifted
  25.  *   watchshift =  2:  80px left shifted
  26.  *   watchshift =  3:  60px left shifted
  27.  *   watchshift =  4:  40px left shifted
  28.  *   watchshift =  5:  20px left shifted
  29.  *   watchshift =  6: Standard
  30.  *   watchshift =  7:  20px right shifted
  31.  *   watchshift =  8:  40px right shifted
  32.  *   watchshift =  9:  60px right shifted
  33.  *   watchshift = 10:  80px right shifted
  34.  *   watchshift = 11: 100px right shifted
  35.  **/
  36. YC.watchshift = 6;
  37.  
  38. /** 
  39.  * Watch page size {1, 2, 3, 4} 
  40.  *   watchsize = 1: 1003px, same as homepage.
  41.  *   watchsize = 2: 1203px, test size.
  42.  *   watchsize = 3: 1403px, test size.
  43.  *   watchsize = 4: 1485px, default size when left aligned on 1920x1280 resolution. 
  44.  * Note: Even if you pick options 1 or 2, the video page elements will still push the content width to around 1305px.
  45.  **/
  46. YC.watchsize = 4;
  47.  
  48. /**
  49.  * Flex-width page size {1, 2, 3, 4, 5}
  50.  *   flexsize = 1: Page width fixed to 1003px, default Youtube homepage size
  51.  *   flexsize = 2: Page width fixed to 1203px, test size
  52.  *   flexsize = 3: Page width fixed to 1403px, test size
  53.  *   flexsize = 4: Page width fixed to 1485px, default size when left aligned on 1920x1280 resolution. 
  54.  *   flexsize = 5: Page width allowed to expand based on browser width
  55.  **/
  56. YC.flexsize = 5;
  57.  
  58. /** 
  59.  * Default page size {1, 2, 3, 4}
  60.  *   defaultsize = 1: 1003px, default homepage.
  61.  *   defaultsize = 2: 1203px, test size.
  62.  *   defaultsize = 3: 1403px, test size.
  63.  *   defaultsize = 4: 1485px, video watch page size when left aligned on 1920x1280 resolution. 
  64.  * If YC.doublecolumn is set to TRUE, this will default to 3.
  65.  **/
  66. YC.defaultsize = 1;
  67.  
  68. /**
  69.  * Parameters for monitoring content width change after page load for flex-width pages
  70.  * Checks once every YC.cmonitor_delay, YC.cmonitor_max times.  
  71.  **/
  72. YC.cmonitor_max = 30;
  73. YC.cmonitor_delay = 100;
  74. YC.cmonitor_count = 0;
  75. YC.cmonitor_width = 0;
  76.  
  77. /** 
  78.  * Makes the dislike bar red like it used to be.
  79.  * Why? Because red bars are easier to see.
  80.  **/
  81. YC.showdislikebar = true;
  82.  
  83. // Player width used for monitoring player size changes
  84. YC.playerwidth = 0;
  85.  
  86. // Size options (0 is just a placeholder to allow human-friendly option choices)
  87. YC.sizeoptions = [0, 1003, 1203, 1403, 1485];
  88.  
  89. // Shift options for video watch pages
  90. YC.shiftoptions = [0, -100, -80, -60, -40, -20, 0, 20, 40, 60, 80, 100];
  91.  
  92. // Initialize
  93. YC.init = function() {
  94. 	// Make sure we're not embedded
  95. 	if (window.top !== window.self) {
  96. 		return false;
  97. 	}
  98. 	// Determine page type
  99. 	if (window.location.pathname == '/watch') {
  100. 		this.pagetype = 'watch';
  101. 	}
  102. 	else if (window.location.pathname == '/feed/watch_later') {
  103. 		this.pagetype = 'watchlater';
  104. 	}
  105. 	else if (window.location.pathname == '/feed/history') {
  106. 		this.pagetype = 'history';
  107. 	}
  108. 	else if (window.location.pathname == '/feed/subscriptions') {
  109. 		this.pagetype = 'subscriptions';
  110. 	}
  111. 	else if (window.location.pathname == '/feed/what_to_watch') {
  112. 		this.pagetype = 'whattowatch';
  113. 	}
  114. 	else if (window.location.pathname == '/feed/social') {
  115. 		this.pagetype = 'social';
  116. 	}
  117. 	else if (window.location.pathname == '/my_subscriptions') {
  118. 		this.pagetype = 'mysubscriptions';
  119. 	}
  120. 	else {
  121. 		this.pagetype = 'default';
  122. 	}
  123. 	
  124. 	// Check for main elements
  125. 	this.params = {}
  126. 	this.params.flexwidth = document.body.className.indexOf('flex-width-enabled') > -1 ? true : false;
  127. 	this.params.guideenabled = document.body.className.indexOf('guide-enabled') > -1 ? true : false;
  128. 	this.params.guideexpanded = document.body.className.indexOf('guide-expanded') > -1 ? true : false;
  129. 	this.params.sidebarexpanded = document.body.className.indexOf('sidebar-expanded') > -1 ? true : false;   // Video pages (exclusive?)
  130.  
  131. 	this.params.pagecontainer = document.getElementById('page-container') ? true : false;
  132. 	this.params.page = document.getElementById('page') ? true : false;
  133. 	this.params.guide = document.getElementById('guide') ? true : false;
  134. 	this.params.content = document.getElementById('content') ? true : false;
  135. 	this.params.masthead = document.getElementById('yt-masthead') ? true : false;
  136. 	this.params.subnav = document.getElementById('masthead-subnav') ? true : false;   // Inbox
  137. 	this.params.alerts = document.getElementById('alerts') ? true : false;
  138. 	this.params.footer = document.getElementById('footer') ? true : false;
  139. 	
  140. 	//console.log(this.pagetype);
  141. 	//console.log(this.params);
  142. 	return true;
  143. }
  144.  
  145. // Center page elements
  146. YC.centerPage = function() {
  147. 	// Guide
  148. 	if (this.params.guide) {
  149. 		document.getElementById('guide').style.width = '175px';
  150. 	}
  151. 	// Footer
  152. 	if (this.params.footer) {
  153. 		document.getElementById('footer').style.textAlign = 'center';
  154. 	}
  155. 	// Add styles to head
  156. 	var styles = [{'elem': '#yt-masthead',         'css': '{margin-left:auto !important; margin-right:auto !important; position:relative;}'},
  157. 	              {'elem': '#yt-masthead-content', 'css': '{max-width:none;}'},
  158. 	              {'elem': '#masthead-subnav',     'css': '{margin-left:auto !important; margin-right:auto !important;}'},
  159. 	              {'elem': '#alerts',              'css': '{margin-left:auto !important; margin-right:auto !important;}'},
  160. 	              {'elem': '#page',                'css': '{margin-left:auto !important; margin-right:auto !important; position:relative;}'},
  161. 	              {'elem': '#baseDiv',             'css': '{margin-left:auto !important; margin-right:auto !important;}'}
  162. 	             ];
  163. 	var selectors = ['', '.guide-enabled', '.guide-expanded', '.guide-collapsed', '.sidebar-expanded', '.flex-width-enabled'];
  164. 	for (var i = 0; i < styles.length; i++) {
  165. 		for (var j = 0; j < selectors.length; j++) {
  166. 			this.addNewStyle('.site-left-aligned' + selectors[j] + ' ' + styles[i].elem + styles[i].css);
  167. 		}
  168. 	}
  169. }
  170.  
  171. // Set widths for page elements
  172. YC.setWidths = function() {
  173. 	// If flex-width, wait for page to settle on a size
  174. 	if (this.params.flexwidth && this.flexsize == 5) {
  175. 		var content_width = parseInt(window.getComputedStyle(document.getElementById('content')).getPropertyValue('width'));
  176. 		if ( (this.cmonitor_width !== content_width) && (this.cmonitor_count++ < this.cmonitor_max) ) {
  177. 			this.cmonitor_width = content_width;
  178. 			setTimeout(function() {
  179. 				YC.setWidths();
  180. 			}, YC.cmonitor_delay);
  181. 			return true;
  182. 		}
  183. 	}
  184. 	
  185. 	// Set content width
  186. 	if (this.params.flexwidth) {
  187. 		if (this.flexsize < 5) {
  188. 			// Fixed flex-width
  189. 			var content_width = this.params.guide ? this.sizeoptions[this.flexsize] - 180 : this.sizeoptions[this.flexsize];
  190. 			document.getElementById('content').style.width = content_width + 'px';
  191. 		}
  192. 		else {
  193. 			// Variable flex-width, do nothing
  194. 		}
  195. 	}
  196. 	else if (this.params.content) {
  197. 		if (this.params.sidebarexpanded) {
  198. 			// Watch page content width
  199. 			var content_width = this.params.guide ? this.sizeoptions[this.watchsize] - 180 : this.sizeoptions[this.watchsize];
  200. 		}
  201. 		else {
  202. 			if (this.doublecolumn && this.doublecolumn_pages.indexOf(this.pagetype) > -1) {
  203. 				// Double column width
  204. 				var content_width = this.params.guide ? this.sizeoptions[3] - 180 : this.sizeoptions[3];
  205. 			}
  206. 			else {
  207. 				// Standard page content width
  208. 				var content_width = this.params.guide ? this.sizeoptions[this.defaultsize] - 180 : this.sizeoptions[this.defaultsize];
  209. 			}
  210. 		}
  211. 		document.getElementById('content').style.width = content_width + 'px';
  212. 	}
  213. 	
  214.  
  215. 	// Set page and masthead width based on content and guide widths
  216. 	var pagewidth = 0;
  217. 	pagewidth = this.params.guide ? parseInt(window.getComputedStyle(document.getElementById('guide')).getPropertyValue('width')) : 0;
  218. 	pagewidth += this.params.content ? parseInt(window.getComputedStyle(document.getElementById('content')).getPropertyValue('width')) : 0;
  219. 	pagewidth += this.pagetype == 'mysubscriptions' ? 1003 : '';
  220. 	this.params.page ? document.getElementById('page').style.width = pagewidth + 'px' : '';
  221. 	this.params.masthead ? document.getElementById('yt-masthead').style.width = pagewidth + 'px' : '';
  222.  
  223. 	// Fix minor offsets based on page type
  224. 	this.fixOffsets();
  225. }
  226.  
  227. // Fix minor offsets based on page type
  228. YC.fixOffsets = function() {
  229. 	switch (this.pagetype) {
  230. 		case 'watch':
  231. 			// User defined offset
  232. 			var usershift = this.shiftoptions[this.watchshift];
  233. 			// Page required offset, corresponding to video watch size
  234. 			var offsets = [0, -152, -52, 48, 89];
  235. 			// Page offset
  236. 			document.getElementById('page').style.left = (usershift + offsets[this.watchsize]) + 'px';
  237. 			
  238. 			// Masthead size and offset (specifically for video pages)
  239. 			document.getElementById('yt-masthead').style.width = '1185px';
  240. 			document.getElementById('yt-masthead').style.left = (usershift - 13) + 'px';
  241. 			
  242. 			break;
  243. 		case 'subscriptions':
  244. 		case 'history':
  245. 		case 'watchlater':
  246. 			if (this.doublecolumn) {
  247. 				// Double column
  248. 				this.addNewStyle('.feed-list li.feed-list-item {float:left; display:block; width:475px; padding-top:10px;}');
  249. 				this.addNewStyle('.feed-list li.feed-list-item:first-child {padding-top:10px !important;}');
  250. 				this.addNewStyle('.feed-list li.feed-list-item:hover {background-color:#f8f8f8;}');
  251. 				this.addNewStyle('.feed-list .feed-item-content {height:116px;}');
  252. 				this.addNewStyle('.feed-load-more-container {clear:both;}');
  253. 			}
  254. 			break;
  255. 		case 'social':
  256. 			if (this.doublecolumn) {
  257. 				// Double column
  258. 				this.addNewStyle('.feed-list li.feed-list-item {float:left; display:block; width:475px; padding-top:10px;}');
  259. 				this.addNewStyle('.feed-list li.feed-list-item:first-child {padding-top:10px !important;}');
  260. 				this.addNewStyle('.feed-list li.feed-list-item:hover {background-color:#f8f8f8;}');
  261. 				this.addNewStyle('.feed-list .feed-item-main-content {height:84px;}');
  262. 				this.addNewStyle('.feed-load-more-container {clear:both;}');
  263. 			}
  264. 			break;
  265. 		case 'whattowatch':
  266. 			if (this.doublecolumn) {
  267. 				// Double column
  268. 				this.addNewStyle('.feed-list li.feed-list-item {float:left; display:block; width:475px; padding-top:10px;}');
  269. 				this.addNewStyle('.feed-list li.feed-list-item:first-child {padding-top:10px !important;}');
  270. 				this.addNewStyle('.feed-list li.feed-list-item:hover {background-color:#f8f8f8;}');
  271. 				this.addNewStyle('.feed-list .feed-item-main {height:155px;}');
  272. 				this.addNewStyle('.feed-load-more-container {clear:both;}');
  273. 			}
  274. 			var els = document.getElementsByClassName('feed-list-item');
  275. 			//console.log(els.length);
  276. 			for (var i = 0; i < els.length; i++) {
  277. 				if (els[i].getElementsByClassName('shelf-wrapper').length) {
  278. 					els[i].style.width = '950px';
  279. 					els[i].getElementsByClassName('feed-item-main') ? els[i].getElementsByClassName('feed-item-main')[0].style.height = 'auto' : '';
  280. 				}
  281. 			}
  282. 			break;
  283. 		case 'default':
  284. 			// Nothing for now
  285. 			break;
  286. 	}
  287. }
  288.  
  289. // Make the dislike bar red like it used to be
  290. YC.showDislikes = function() {
  291. 	var els = document.getElementsByClassName('video-extras-sparkbar-dislikes');
  292. 	for (var i = 0; i < els.length; i++) {
  293. 		els[i].style.backgroundColor = '#bc281c';
  294. 	}
  295. }
  296.  
  297. // Add css style to head
  298. YC.addNewStyle = function(newStyle) {
  299. 	var styleElement = document.getElementById('styles_js');
  300. 	if (!styleElement) {
  301. 		styleElement = document.createElement('style');
  302. 		styleElement.type = 'text/css';
  303. 		styleElement.id = 'styles_js';
  304. 		document.getElementsByTagName('head')[0].appendChild(styleElement);
  305. 	}
  306. 	styleElement.appendChild(document.createTextNode(newStyle));
  307. }
  308.  
  309. // Main
  310. function main() {
  311. 	if (YC.init()) {
  312. 		YC.centerPage();
  313. 		YC.setWidths();
  314. 		if (YC.pagetype == 'watch' && YC.showdislikebar) {
  315. 			YC.showDislikes();
  316. 		}
  317. 	}
  318. }
  319.  
  320. if (window.opera) {
  321. 	// Opera's greasemonkey version of addEventListener() breaks try-catch on error, so it must be called first.
  322. 	try {
  323. 		document.addEventListener('DOMContentLoaded', main(), false)
  324. 	}
  325. 	catch(err) {
  326. 		document.addEventListener('DOMContentLoaded', main, false)
  327. 	}
  328. }
  329. else {
  330. 	// FF, Chrome
  331. 	document.addEventListener('DOMContentLoaded', main, false);
  332. }