Greasy Fork is available in English.
Center aligns the Youtube page
// ==UserScript==
// @name Youtube Centered
// @namespace http://userscripts.org/users/zackton
// @description Center aligns the Youtube page
// @include *.youtube.com/*
// @include *.youtube.com/
// @run-at document-start
// @grant none
// @version 2.5
// ==/UserScript==
// My precious...
var YC = {};
/**
* Show two columns for subscriptions, history, social {true, false}
* Will make those pages wider.
**/
YC.doublecolumn = false;
YC.doublecolumn_pages = ['watchlater', 'history', 'subscriptions', 'social', 'whattowatch'];
/**
* Shift the video page if it doesn't look centered to you {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11}
* watchshift = 1: 100px left shifted
* watchshift = 2: 80px left shifted
* watchshift = 3: 60px left shifted
* watchshift = 4: 40px left shifted
* watchshift = 5: 20px left shifted
* watchshift = 6: Standard
* watchshift = 7: 20px right shifted
* watchshift = 8: 40px right shifted
* watchshift = 9: 60px right shifted
* watchshift = 10: 80px right shifted
* watchshift = 11: 100px right shifted
**/
YC.watchshift = 6;
/**
* Watch page size {1, 2, 3, 4}
* watchsize = 1: 1003px, same as homepage.
* watchsize = 2: 1203px, test size.
* watchsize = 3: 1403px, test size.
* watchsize = 4: 1485px, default size when left aligned on 1920x1280 resolution.
* Note: Even if you pick options 1 or 2, the video page elements will still push the content width to around 1305px.
**/
YC.watchsize = 4;
/**
* Flex-width page size {1, 2, 3, 4, 5}
* flexsize = 1: Page width fixed to 1003px, default Youtube homepage size
* flexsize = 2: Page width fixed to 1203px, test size
* flexsize = 3: Page width fixed to 1403px, test size
* flexsize = 4: Page width fixed to 1485px, default size when left aligned on 1920x1280 resolution.
* flexsize = 5: Page width allowed to expand based on browser width
**/
YC.flexsize = 5;
/**
* Default page size {1, 2, 3, 4}
* defaultsize = 1: 1003px, default homepage.
* defaultsize = 2: 1203px, test size.
* defaultsize = 3: 1403px, test size.
* defaultsize = 4: 1485px, video watch page size when left aligned on 1920x1280 resolution.
* If YC.doublecolumn is set to TRUE, this will default to 3.
**/
YC.defaultsize = 1;
/**
* Parameters for monitoring content width change after page load for flex-width pages
* Checks once every YC.cmonitor_delay, YC.cmonitor_max times.
**/
YC.cmonitor_max = 30;
YC.cmonitor_delay = 100;
YC.cmonitor_count = 0;
YC.cmonitor_width = 0;
/**
* Makes the dislike bar red like it used to be.
* Why? Because red bars are easier to see.
**/
YC.showdislikebar = true;
// Player width used for monitoring player size changes
YC.playerwidth = 0;
// Size options (0 is just a placeholder to allow human-friendly option choices)
YC.sizeoptions = [0, 1003, 1203, 1403, 1485];
// Shift options for video watch pages
YC.shiftoptions = [0, -100, -80, -60, -40, -20, 0, 20, 40, 60, 80, 100];
// Initialize
YC.init = function() {
// Make sure we're not embedded
if (window.top !== window.self) {
return false;
}
// Determine page type
if (window.location.pathname == '/watch') {
this.pagetype = 'watch';
}
else if (window.location.pathname == '/feed/watch_later') {
this.pagetype = 'watchlater';
}
else if (window.location.pathname == '/feed/history') {
this.pagetype = 'history';
}
else if (window.location.pathname == '/feed/subscriptions') {
this.pagetype = 'subscriptions';
}
else if (window.location.pathname == '/feed/what_to_watch') {
this.pagetype = 'whattowatch';
}
else if (window.location.pathname == '/feed/social') {
this.pagetype = 'social';
}
else if (window.location.pathname == '/my_subscriptions') {
this.pagetype = 'mysubscriptions';
}
else {
this.pagetype = 'default';
}
// Check for main elements
this.params = {}
this.params.flexwidth = document.body.className.indexOf('flex-width-enabled') > -1 ? true : false;
this.params.guideenabled = document.body.className.indexOf('guide-enabled') > -1 ? true : false;
this.params.guideexpanded = document.body.className.indexOf('guide-expanded') > -1 ? true : false;
this.params.sidebarexpanded = document.body.className.indexOf('sidebar-expanded') > -1 ? true : false; // Video pages (exclusive?)
this.params.pagecontainer = document.getElementById('page-container') ? true : false;
this.params.page = document.getElementById('page') ? true : false;
this.params.guide = document.getElementById('guide') ? true : false;
this.params.content = document.getElementById('content') ? true : false;
this.params.masthead = document.getElementById('yt-masthead') ? true : false;
this.params.subnav = document.getElementById('masthead-subnav') ? true : false; // Inbox
this.params.alerts = document.getElementById('alerts') ? true : false;
this.params.footer = document.getElementById('footer') ? true : false;
//console.log(this.pagetype);
//console.log(this.params);
return true;
}
// Center page elements
YC.centerPage = function() {
// Guide
if (this.params.guide) {
document.getElementById('guide').style.width = '175px';
}
// Footer
if (this.params.footer) {
document.getElementById('footer').style.textAlign = 'center';
}
// Add styles to head
var styles = [{'elem': '#yt-masthead', 'css': '{margin-left:auto !important; margin-right:auto !important; position:relative;}'},
{'elem': '#yt-masthead-content', 'css': '{max-width:none;}'},
{'elem': '#masthead-subnav', 'css': '{margin-left:auto !important; margin-right:auto !important;}'},
{'elem': '#alerts', 'css': '{margin-left:auto !important; margin-right:auto !important;}'},
{'elem': '#page', 'css': '{margin-left:auto !important; margin-right:auto !important; position:relative;}'},
{'elem': '#baseDiv', 'css': '{margin-left:auto !important; margin-right:auto !important;}'}
];
var selectors = ['', '.guide-enabled', '.guide-expanded', '.guide-collapsed', '.sidebar-expanded', '.flex-width-enabled'];
for (var i = 0; i < styles.length; i++) {
for (var j = 0; j < selectors.length; j++) {
this.addNewStyle('.site-left-aligned' + selectors[j] + ' ' + styles[i].elem + styles[i].css);
}
}
}
// Set widths for page elements
YC.setWidths = function() {
// If flex-width, wait for page to settle on a size
if (this.params.flexwidth && this.flexsize == 5) {
var content_width = parseInt(window.getComputedStyle(document.getElementById('content')).getPropertyValue('width'));
if ( (this.cmonitor_width !== content_width) && (this.cmonitor_count++ < this.cmonitor_max) ) {
this.cmonitor_width = content_width;
setTimeout(function() {
YC.setWidths();
}, YC.cmonitor_delay);
return true;
}
}
// Set content width
if (this.params.flexwidth) {
if (this.flexsize < 5) {
// Fixed flex-width
var content_width = this.params.guide ? this.sizeoptions[this.flexsize] - 180 : this.sizeoptions[this.flexsize];
document.getElementById('content').style.width = content_width + 'px';
}
else {
// Variable flex-width, do nothing
}
}
else if (this.params.content) {
if (this.params.sidebarexpanded) {
// Watch page content width
var content_width = this.params.guide ? this.sizeoptions[this.watchsize] - 180 : this.sizeoptions[this.watchsize];
}
else {
if (this.doublecolumn && this.doublecolumn_pages.indexOf(this.pagetype) > -1) {
// Double column width
var content_width = this.params.guide ? this.sizeoptions[3] - 180 : this.sizeoptions[3];
}
else {
// Standard page content width
var content_width = this.params.guide ? this.sizeoptions[this.defaultsize] - 180 : this.sizeoptions[this.defaultsize];
}
}
document.getElementById('content').style.width = content_width + 'px';
}
// Set page and masthead width based on content and guide widths
var pagewidth = 0;
pagewidth = this.params.guide ? parseInt(window.getComputedStyle(document.getElementById('guide')).getPropertyValue('width')) : 0;
pagewidth += this.params.content ? parseInt(window.getComputedStyle(document.getElementById('content')).getPropertyValue('width')) : 0;
pagewidth += this.pagetype == 'mysubscriptions' ? 1003 : '';
this.params.page ? document.getElementById('page').style.width = pagewidth + 'px' : '';
this.params.masthead ? document.getElementById('yt-masthead').style.width = pagewidth + 'px' : '';
// Fix minor offsets based on page type
this.fixOffsets();
}
// Fix minor offsets based on page type
YC.fixOffsets = function() {
switch (this.pagetype) {
case 'watch':
// User defined offset
var usershift = this.shiftoptions[this.watchshift];
// Page required offset, corresponding to video watch size
var offsets = [0, -152, -52, 48, 89];
// Page offset
document.getElementById('page').style.left = (usershift + offsets[this.watchsize]) + 'px';
// Masthead size and offset (specifically for video pages)
document.getElementById('yt-masthead').style.width = '1185px';
document.getElementById('yt-masthead').style.left = (usershift - 13) + 'px';
break;
case 'subscriptions':
case 'history':
case 'watchlater':
if (this.doublecolumn) {
// Double column
this.addNewStyle('.feed-list li.feed-list-item {float:left; display:block; width:475px; padding-top:10px;}');
this.addNewStyle('.feed-list li.feed-list-item:first-child {padding-top:10px !important;}');
this.addNewStyle('.feed-list li.feed-list-item:hover {background-color:#f8f8f8;}');
this.addNewStyle('.feed-list .feed-item-content {height:116px;}');
this.addNewStyle('.feed-load-more-container {clear:both;}');
}
break;
case 'social':
if (this.doublecolumn) {
// Double column
this.addNewStyle('.feed-list li.feed-list-item {float:left; display:block; width:475px; padding-top:10px;}');
this.addNewStyle('.feed-list li.feed-list-item:first-child {padding-top:10px !important;}');
this.addNewStyle('.feed-list li.feed-list-item:hover {background-color:#f8f8f8;}');
this.addNewStyle('.feed-list .feed-item-main-content {height:84px;}');
this.addNewStyle('.feed-load-more-container {clear:both;}');
}
break;
case 'whattowatch':
if (this.doublecolumn) {
// Double column
this.addNewStyle('.feed-list li.feed-list-item {float:left; display:block; width:475px; padding-top:10px;}');
this.addNewStyle('.feed-list li.feed-list-item:first-child {padding-top:10px !important;}');
this.addNewStyle('.feed-list li.feed-list-item:hover {background-color:#f8f8f8;}');
this.addNewStyle('.feed-list .feed-item-main {height:155px;}');
this.addNewStyle('.feed-load-more-container {clear:both;}');
}
var els = document.getElementsByClassName('feed-list-item');
//console.log(els.length);
for (var i = 0; i < els.length; i++) {
if (els[i].getElementsByClassName('shelf-wrapper').length) {
els[i].style.width = '950px';
els[i].getElementsByClassName('feed-item-main') ? els[i].getElementsByClassName('feed-item-main')[0].style.height = 'auto' : '';
}
}
break;
case 'default':
// Nothing for now
break;
}
}
// Make the dislike bar red like it used to be
YC.showDislikes = function() {
var els = document.getElementsByClassName('video-extras-sparkbar-dislikes');
for (var i = 0; i < els.length; i++) {
els[i].style.backgroundColor = '#bc281c';
}
}
// Add css style to head
YC.addNewStyle = function(newStyle) {
var styleElement = document.getElementById('styles_js');
if (!styleElement) {
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = 'styles_js';
document.getElementsByTagName('head')[0].appendChild(styleElement);
}
styleElement.appendChild(document.createTextNode(newStyle));
}
// Main
function main() {
if (YC.init()) {
YC.centerPage();
YC.setWidths();
if (YC.pagetype == 'watch' && YC.showdislikebar) {
YC.showDislikes();
}
}
}
if (window.opera) {
// Opera's greasemonkey version of addEventListener() breaks try-catch on error, so it must be called first.
try {
document.addEventListener('DOMContentLoaded', main(), false)
}
catch(err) {
document.addEventListener('DOMContentLoaded', main, false)
}
}
else {
// FF, Chrome
document.addEventListener('DOMContentLoaded', main, false);
}