Raw Source Toggle Dropdown

• Minified Source

  Alternate update check target.

  Alternate download source target.

look997 / Youtube SuBar

// ==UserScript==
// @name           Youtube SuBar
// @namespace      https://gist.github.com/look997/9ad33fc1ee4fa18d7e06#file-readme-md
// @description    Puts the action buttons in one line with the 'Subscribe' button. Reveals the number of subscriptions. Turns Theater mode on player.
// @version        5.05.111 beta
// @author         look997
// @resource       metadata https://gist.github.com/look997/9ad33fc1ee4fa18d7e06/raw/youtube.subar.user.js
// @include        *youtube.com/*
// @date           2015-05-02
// @downloadURL    https://gist.github.com/look997/9ad33fc1ee4fa18d7e06/raw/youtube.subar.user.js
// @updateURL      https://gist.github.com/look997/9ad33fc1ee4fa18d7e06/raw/youtube.subar.user.js
// @grant          none
// ==/UserScript==
 
"use strict";
 
function addStyle (idStyle,styles) {
        if(document.getElementById(idStyle)){ document.getElementsByTagName("head")[0].removeChild(document.getElementById(idStyle)); }
        let css = document.createElement('style'); css.type = 'text/css'; css.id = idStyle;
        css.styleSheet ? css.styleSheet.cssText = styles : css.appendChild( document.createTextNode(styles) );
        document.getElementsByTagName("head")[0].appendChild(css);
}
 
function suBar () {
	
	if ( !( document.querySelector("#watch7-user-header #watch8-sentiment-actions") && document.querySelector("#watch7-user-header #watch8-action-buttons") && document.querySelector("#watch7-user-header #watch7-views-info") ) && document.querySelector("#watch7-user-header") && document.querySelector("#watch8-action-buttons") && document.querySelector("#watch8-sentiment-actions") && document.querySelector("#watch7-views-info") ) {
		/* Move action buttons. */
		document.querySelector("#watch7-user-header").appendChild(document.querySelector("#watch8-action-buttons"));
		document.querySelector("#watch7-user-header").appendChild(document.querySelector("#watch8-sentiment-actions"));
		document.querySelector("#watch7-user-header").appendChild(document.querySelector("#watch7-views-info"));
 
		/* Add title tooltip to buttons without labels */
		var addBut = document.querySelector("#watch8-secondary-actions .addto-button .yt-uix-button-content").textContent;
		var shareBut = document.querySelector('#watch8-secondary-actions [data-trigger-for="action-panel-share"] .yt-uix-button-content').textContent;
		var moreBut = document.querySelector('#action-panel-overflow-button .yt-uix-button-content').textContent;
 
		document.querySelector("#watch8-secondary-actions .addto-button").title = addBut;
		document.querySelector('#watch8-secondary-actions [data-trigger-for="action-panel-share"]').title = shareBut;
		document.querySelector('#action-panel-overflow-button').title = moreBut;
		
		addStyle('subar-styles',
		 `
		/* Puts the action buttons in one line with the 'Subscribe' button. */
		#watch8-secondary-actions .yt-uix-button-content { display: none; } // hide buttons labels

		/* Uncover long string - video views counts - Update 5.03.090. */
		#watch-headline-title { margin-bottom: 0px !important; }
		#watch7-user-header { padding-top: 10px !important; }

		.concurrent-viewers.watch-view-count { /* Count live stream views. */
			font-size: 11px;
		}

		#watch8-secondary-actions { position: relative; } /* Wyrównanie 3-przycisków z przyciskiem subskrybcji. */
		/*+"#watch7-views-info { top: -8px !important; bottom: auto !important; right: 0px !important; }*/
		#watch7-views-info { bottom: 31px !important; width: 192px !important; } /* Obniżenie i wyrównanie prawej strony panelu. */
		#watch7-user-header { padding-bottom: 3px !important; } /* Margines dolny panelu i między niebieksim paskiem. */
		#watch8-action-buttons { display: inline; padding-top: 0px; border-top: none; } /* Umieszczenie paska akcji w jednej linii. */
		#watch8-action-buttons:after,
		#watch8-action-buttons:before { content: none !important; } /* Umieszczenie paska akcji w jednej linii. */
		#watch8-secondary-actions .yt-uix-button { padding: 0px 0px !important; } /* Zmniejszenie odstępów między przyciskami. */
		#watch8-secondary-actions { left: 5px !important; } /* Odstęp przycisku subskrybcji od przycisków akcji. */
		#watch-header { min-height: auto; } /* Height panel. */

		`
		);
	}
	
	addStyle('subar-subscribe-button-styles',
	 `
	/* Reveals the number of subscriptions. */
	.yt-subscription-button-subscriber-count-branded-horizontal, .html5-text-button, .yt-subscription-button-subscriber-count-unbranded { display: inline-block !important; }
	
	`
	);
}
 
 
function theaterMode () {
	document.cookie = "wide=1; domain=.youtube.com";
	
	if (document.querySelector("#page") && document.querySelector("#player") && document.querySelector("#placeholder-player") && document.querySelector("#watch7-container")) {
		document.querySelector("#page").classList.remove("watch-non-stage-mode");
		document.querySelector("#page").classList.add("watch-stage-mode");
		document.querySelector("#player").classList.remove("watch-small");
		document.querySelector("#player").classList.add("watch-medium");
		document.querySelector("#placeholder-player").classList.remove("watch-small");
		document.querySelector("#placeholder-player").classList.add("watch-medium");
 
		document.querySelector("#watch7-container").classList.add("watch-wide");
	}
 
}
 
document.addEventListener("DOMContentLoaded", function () {
	suBar(); // without youtube spf loads support
	theaterMode(); // without youtube spf loads support
	
	var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
	var observer = new MutationObserver(function(mutations) {
			//console.log((mutations[0].attributeName ), mutations[0].attributeName === 'class', mutations[0].target.classList.contains("page-loaded"),  mutations);
		if (mutations[0].attributeName === 'class' && mutations[0].target.classList.contains("page-loaded")) {
			suBar();
			theaterMode();
		}
	});
 
	observer.observe(document.querySelector('body'), {attributes: true} );
	
});