// ==UserScript==
// @name Old Youtube Buttons
// @namespace YellowSubButt
// @version 0.3.5
// @description Changes various YouTube elements to resemble the old YouTube Design. (Green/Red Like/Dislike, Yellow Subscribe Button.)
// @author SomeSchmuck
// @include https://www.youtube.com/*
// @include https://youtube.com/*
// @icon https://th.bing.com/th/id/R.a12178dd72afd2470f0d2285602f2374?rik=%2fZTUzR2M%2fWKHUA&riu=http%3a%2f%2fsguru.org%2fwp-content%2fuploads%2f2018%2f02%2fYouTube_logo.png&ehk=kk7ZapiqeyJwuqO64Byiid8PbemJtRLsbmphetcvtcE%3d&risl=&pid=ImgRaw&r=0
// @grant none
// @license MIT
// ==/UserScript==
//known issues:
//sub button has a very thin (like 1px) white line at the very bottom;
// seems to be a browser issue, though adjusting css padding can hide it
// a little
//join button in membership window will be normal youtube sytle
// related, the join button will lose it's styling when going to a youtube
// channel from a video and vice-versa; which ever was loaded first will
// keep the styling.
// 0.3.41 changes:
// changed subscribeD button colors slighty;
// generally brighter for a less overly-dark look on light theme,
// and made text a bit darker, also fixing a mistake where
// it was transparent lol
// subscribe and join button padding changed to be more accurate to 2008 youtube;
// helps with the "white line" issue present on the buttons a little
// it seems to be more of a browser issue rather than an issue with the css though;
// not much I can do besides make it less likely to be seen if that's the case
// 0.3.4 changes:
// dislike text is not ALL CAPS like old youtube;
// the way this change was done could change other parts of youtube
// if they use the same css code
// subscribe button changes to gray themed variant when subscribed to a channel
// 0.3.2 changes:
// changed join button background/text colors to resemble 2008 youtube;
// currently doesn't affect the join button in the "membership" menu
// that opens when you click the video's join button
//0.2.0 changes:
//made subscribe colors/sizes much more accurate to old youtube's look
var butts_done = false;
var join_done = false;
(function() {
'use strict';
console.log('join',join_done);
function get_video_inf(){
if (butts_done != true){
var like = false;
var dislike = false;
var join = false;
var videoinfo = document.getElementsByTagName('ytd-video-primary-info-renderer');
//console.log(butts_done);
if (videoinfo.length == 1){
var buttons = videoinfo[0].getElementsByTagName('button');
for(var i = 0; i < buttons.length; i++){
//console.log(buttons[i])
if (buttons[i].className == 'style-scope yt-icon-button'){
var str = buttons[i].getAttribute('aria-label');
// console.log(str)
// fixes css for removed dislike counts
// todo: make this check for the button better
// maybe by force allcapsing it or something
if (str.includes('Dislike this video')){
// console.log('ITS GOT THE DISLIKE TEXT INNIT')
// console.log(buttons[i].getAttribute('style'))
if (buttons[i].getAttribute('style') == null){
buttons[i].setAttribute('style', 'color: red !important');
dislike = true;
} else if (buttons[i].getAttribute('style') != null){
//sets dislike to true if the "style" attribute is present;
//should prevent setting when it's not needed
//todo: make this actually check if the right properties are set
dislike = true;
}
} else if (str.includes('like this video')){
// console.log('ITS GOT THE LIKE TEXT INNIT')
if (buttons[i].getAttribute('style') == null){
buttons[i].setAttribute('style', 'color: green !important');
like = true;
} else if (buttons[i].getAttribute('style') != null){
//sets dislike to true if the "style" attribute is present;
//should prevent setting when it's not needed
//todo: make this actually check if the right properties are set
like = true;
}
}
}
}
}
if (like == true){
if (dislike == true){
butts_done = true;
}
}
}
if(join_done != true){
var join_1 = false;
//var join_2 = false
var join_info = document.getElementsByTagName('tp-yt-paper-button');
if (join_info.length != 0){
for(var j = 0; j < join_info.length; j++){
if (join_info[j].className == 'style-scope ytd-button-renderer style-suggestive size-default'){
var join_str = join_info[j].getAttribute('aria-label');
if (join_str.includes('Join this channel')){
join_info[j].setAttribute('style', 'background-image: linear-gradient(180deg, rgb(254, 245, 206) 0%, rgb(187, 199, 230) 100%) !important; color: #1c1b16 !important; font-size: 16px !important; text-transform: capitalize !important; font-weight: bold !important; padding: 0.25em 0.8333em !important; border-radius: 3px !important;' );
join_1 = true;
//join_2 = true
//break
} else{
continue;
}
//attempt at getting the "membership" tab join button
//} else if(join_info[i].className == 'style-scope yt-button-renderer style-primary'){
// var join_str_2 = join_info[i].getAttribute('aria-label')
// if (join_str_2.includes('Join this channel')){
// join_info[i].setAttribute('style', 'background-image: linear-gradient(180deg, rgb(254, 245, 206) 0%, rgb(187, 199, 230) 100%);color: #1c1b16;font-size: 16px;text-transform: capitalize !important;font-weight: bold !important;padding: 0.27em 0.8333em !important;border-radius: 3px !important;' )
// //join_1 = true
// //join_2 = true
// //break
// } else{
// continue
// }
} else{
continue;
}
}
}
if (join_1 == true){
//if (join_2 == true){
join_done = true;
//}
}
}
}
if (butts_done == false){
var observer = new MutationObserver(get_video_inf);
observer.observe(document.documentElement, {childList: true, subtree: true});
}
//else if (join_done == false){
// var observer_j = new MutationObserver(get_video_inf);
// observer_j.observe(document.documentElement, {childList: true, subtree: true});
//}
function addGlobalStyle(css) {
var head, style;
//console.log(document.getElementsByTagName('head'))
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
addGlobalStyle('tp-yt-paper-button.ytd-subscribe-button-renderer { background: linear-gradient(180deg, rgba(254,245,206,1) 0%, rgba(254,216,28,1) 100%) !important; border: 2px solid #ecc101 !important; border-radius: 3px !important; color: #994800 !important; text-transform: capitalize !important; font-weight: bold !important; padding: 0 0.8333em !important; height: 2.0833em !important; }');
addGlobalStyle('tp-yt-paper-button.keyboard-focus.ytd-subscribe-button-renderer,ytd-subscribe-button-renderer[use-keyboard-focus][keyboard-focused] tp-yt-paper-button.ytd-subscribe-button-renderer { border: 2px solid #ecc101 !important; font-weight: bold !important; padding: 0.33em 0.8333em !important;}');
addGlobalStyle('#vote-count-left.ytd-comment-action-buttons-renderer[hidden] + #like-button.ytd-comment-action-buttons-renderer{color: green !important;}');
addGlobalStyle('#like-button.ytd-comment-action-buttons-renderer, #dislike-button.ytd-comment-action-buttons-renderer{color: red !important;}');
addGlobalStyle('ytd-badge-supported-renderer[system-icons] .badge-style-type-verified.ytd-badge-supported-renderer yt-icon.ytd-badge-supported-renderer, ytd-badge-supported-renderer[system-icons] .badge-style-type-verified-artist.ytd-badge-supported-renderer yt-icon.ytd-badge-supported-renderer, ytd-badge-supported-renderer[system-icons] .badge-style-type-collection.ytd-badge-supported-renderer yt-icon.ytd-badge-supported-renderer, ytd-badge-supported-renderer[system-icons] .badge-style-type-ypc-transparent.ytd-badge-supported-renderer yt-icon.ytd-badge-supported-renderer{color: #44c9ff !important;}');
addGlobalStyle('ytd-toggle-button-renderer.style-text[is-icon-button] #text.ytd-toggle-button-renderer{text-transform: capitalize !important;}');
addGlobalStyle('tp-yt-paper-button.ytd-subscribe-button-renderer[subscribed]{background: linear-gradient(180deg, #fefefe 0%, #c2c2c2 100%) !important; color: #333 !important; border: 1px solid #ccc !important;}');
})();