Old Youtube Buttons

Changes various YouTube elements to resemble the old YouTube Design. (Green/Red Like/Dislike, Yellow Subscribe Button.)
As of 2022-06-22. See the latest version.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Old Youtube Buttons
// @namespace    YellowSubButt
// @version      0.3.10
// @description  Changes various YouTube elements to resemble the old YouTube Design. (Green/Red Like/Dislike, Yellow Subscribe Button.)
// @author       SomeSchmuck
// @match        *://*.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        GM.xmlHttpRequest
// @run-at       document-end
// @connect      youtube.com
// @license      MIT
// ==/UserScript==

// TODOs:
//    make the above section a little cleaner and see if certain parts are actually needed or not
//    maybe make this not use esversion 6? technically better browser support that way, although
//        that might not even be an issue... Too bad!
/* jshint esversion: 6 */

//known issues:
//sub button sometimes has a thin white/really bright line at the very bottom;
//  this might be a browser issue, though adjusting css padding can hide it a little bit

// 0.3.10 changes:
// only calls "set_video_inf" function once PER 'mutations' from mutationobserver;
//   before it would call the foreach function, which would itirate through all the
//   data in the mutations (basically an array) which could go into the hundreds at times,
//   while there could be more than dozens of mutations when going page to page
//   only calling it once gives a BIG performance jump, with basically no change to functionality
//   due to how the mutationobserver is used in the first place.

// 0.3.9 changes:
// fixed a typo which would cause the like/dislike buttons to
// not have the correct styling applied

// 0.3.8 changes:
// quick release to add some support for youtube's newest desktop ui
// made subscribe button more accurate to 2008 youtube
//    the join button was also adjusted to make it fit in
//    better visually (in terms of size, anyway)
// fixed the subscribe button not having styling when signed out
// made the "customize channel" and "manage videos" buttons on your channel share the join button's look
// stopped the script from adding the custom stylesheet more than once
// stopped the script from calling "console.log" just to say that the page changed

// 0.3.7 changes:
// hopefully finally fixed the reply button formatting bug (for real this time)
// channged text for elements in comments to be coloured like 2008-2012 youtube
//   (adjusted slightly for readability)
// tweaked join button colours to ensure a good balance of accuracy to old yt
//   and readability/ease on the eyes for modern youtube (esp dark mode)
// cleaned up code a little

(function() {
    "use strict";
    window.addEventListener('yt-navigate-finish', evtListen, true);
    evtListen();
    // locationChange();
    function set_video_buttons(){
        var new_video_info = document.getElementsByClassName('item style-scope ytd-watch-metadata');
        if (new_video_info.length >= 1){
            // console.warn("new youtube layout detected!")
            // console.log(new_video_info);
            if (new_video_info[1] != undefined){
                var new_buttons = new_video_info[1].getElementsByClassName('style-scope yt-icon-button');
                for(var nb = 0; nb < new_buttons.length; nb++){
                    if (new_buttons[nb].hasAttribute('aria-label') === true){
                        var new_str = new_buttons[nb].getAttribute('aria-label').toLowerCase();
                        if (new_str != null){
                            if (new_str === 'dislike this video'){
                                new_buttons[nb].setAttribute('style', 'color: red !important;');
                            } else if (new_str.includes('like this video')){
                                new_buttons[nb].setAttribute('style', 'color: green !important;');
                            }
                        }
                    }
                }
                return;
            }
        }
        var videoinfo = document.getElementsByTagName('ytd-video-primary-info-renderer');
        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').toLowerCase();
                    // console.log(str)
                    if (str != null){
                        if (str === 'dislike this video'){
                            buttons[i].setAttribute('style', 'color: red !important');
                        } else if (str.includes('like this video')){
                            buttons[i].setAttribute('style', 'color: green !important');
                        }
                    }
                }
            }
        }
    }
    function set_join_buttons(){
        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].hasAttribute('aria-label') === false){
                    continue;
                }
                var join_str = join_info[j].getAttribute('aria-label').toLowerCase();
                const join_style = 'background-image: linear-gradient(180deg, #fbfcff 0%, #93b2ff 100%) !important; color: #1c1b16 !important; font-size: 14px; text-transform: capitalize !important; font-weight: bold; font-family: Arial, sans-serif; padding: 2px 9px 0 10px !important; height: 25px !important; border-radius: 4px !important; border-color: #8aa1d5 !important;';
                const edit_style = 'background-image: linear-gradient(180deg, #fbfcff 0%, #93b2ff 100%) !important; color: #1c1b16 !important; font-size: 14px; text-transform: capitalize !important; font-weight: bold; font-family: Arial, sans-serif; padding: 0.55em 0.8333em !important; border: 1px solid !important; border-radius: 4px !important; border-color: #8aa1d5 !important;';
                if (join_str != null){
                    if (join_str === 'join this channel' || join_str === 'join'){
                        join_info[j].setAttribute('style', join_style );
                    } else if (join_str === 'customize channel' || join_str === 'manage videos'){
                        join_info[j].setAttribute('style', edit_style);
                    } else if (join_str === 'reply'){
                        //overwrite style formatting if it's present in a reply button;
                        //we do want styling on the "reply" text, but not on the entire button itself
                        if (join_info[j].hasAttribute('style') === true){
                            join_info[j].removeAttribute('style');
                        }
                        //continue;
                    }
                }
            }
        }
    }
    function set_buttons_text(){
        var reply_info = document.getElementsByTagName('yt-formatted-string');
        //console.log(reply_info.length);
        if (reply_info.length != 0){
            for(var r = 0; r < reply_info.length; r++){
                var reply_str = reply_info[r].innerText.toLowerCase();
                const reply_style = 'border-bottom: 1px dotted #0140FF; color: #0140FF; text-transform: capitalize; font-weight: normal;';
                const join_text_style = 'color: #039';
                if (reply_str != null){
                    if (reply_str === 'reply'){
                        reply_info[r].setAttribute('style', reply_style);
                    } else if (reply_str === 'join' || reply_str === 'customize channel' || reply_str === 'manage videos'){
                        reply_info[r].setAttribute('style', join_text_style);
                    }
                }
            }
        }
    }
    function set_video_inf(){
        set_video_buttons();
        set_join_buttons();
        set_buttons_text();
    }
    function addGlobalStyle(css) {
        var head, style, styles;
        //console.log(document.getElementsByTagName('head'))
        head = document.getElementsByTagName('head')[0];
        if (!head) { return; }
        styles = head.getElementsByClassName('yt_style');
        if (styles.length >= 1){ return; }
        style = document.createElement('style');
        style.type = 'text/css';
        style.setAttribute('class', "yt_style");
        style.innerHTML = css;
        head.appendChild(style);
        // console.log(head);
    }
    var style = '';
    //sub button; unsubscribed ver
    style += 'tp-yt-paper-button.ytd-subscribe-button-renderer { background: linear-gradient(180deg, #fff9c1 0%, #fed81c 100%) !important; border: 1px solid #ecc101 !important; border-radius: 4px !important; color: #994800 !important; text-transform: capitalize !important; font-weight: bold !important; padding: 2px 9px 0 10px; height: 25px; font-family: Arial, sans-serif; font-size: 12px;}';
    style += 'tp-yt-paper-button.ytd-subscribe-button-renderer:hover { background: linear-gradient(180deg, #fffffa 0%, #fed925 100%) !important; text-decoration: underline;}';
    style += '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: 2px 9px 0 10px; font-size: 12px; font-family: Arial, sans-serif;}';
    style += '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;}';
    style += '.style-scope.ytd-subscription-notification-toggle-button-renderer{padding-top: 0.18em;}';
    style += 'tp-yt-paper-button.ytd-subscribe-button-renderer[subscribed]:hover { background: linear-gradient(180deg, #fefefe 0%, #a8a6a6 100%) !important; }';
       //signed-out fix
    style += 'tp-yt-paper-button.ytd-button-renderer[aria-label="Subscribe"]{background: linear-gradient(180deg, #fff9c1 0%, #fed81c 100%); border: 1px solid #ecc101; border-radius: 4px; color: #994800 !important; font-weight: bold; text-transform: capitalize !important; padding: 2px 9px 0 10px !important; height: 25px !important; font-size: 12px; font-family: Arial, sans-serif;}';
    style += 'tp-yt-paper-button.ytd-button-renderer[aria-label="Subscribe"]:hover{background: linear-gradient(180deg, #fffffa 0%, #fed925 100%) !important; text-decoration: underline;}';
    style += 'ytd-button-renderer.style-destructive[is-paper-button]:not([use-keyboard-focused]) tp-yt-paper-button.keyboard-focus.ytd-button-renderer,ytd-button-renderer.style-destructive[is-paper-button][use-keyboard-focused][keyboard-focused] tp-yt-paper-button.ytd-button-renderer[aria-label="Subscribe"]{ border: 2px solid #ecc101 !important;}';
    //Likes-dislikes
    style += '#vote-count-left.ytd-comment-action-buttons-renderer[hidden] + #like-button.ytd-comment-action-buttons-renderer{color: green !important;}';
    style += '#like-button.ytd-comment-action-buttons-renderer, #dislike-button.ytd-comment-action-buttons-renderer{color: red !important;}';
    style += '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;}';
    style += 'ytd-toggle-button-renderer.style-text[is-icon-button] #text.ytd-toggle-button-renderer{text-transform: capitalize !important;}';
    style += '#vote-count-middle.ytd-comment-action-buttons-renderer{color:green;}';
    //trick to make buttons that don't originally have hover css have hover css part 2 :)
    //addGlobalStyle('ytd-button-renderer #button.ytd-button-renderer[join]:hover { border-color: green !important;}')
    addGlobalStyle(style);
    //we don't use the event that gets passed here since we don't need it for this script
    function evtListen(event){
        locationChange();
    }
    //this bit of script was taken and modified from the script "Youtube: Download Video" by HayaoGai
    //link to that script: https://greasyfork.org/en/scripts/404304-youtube-download-video
    function locationChange() {
        //console.log('Switched page!');
        const observer = new MutationObserver(mutations => {
            set_video_inf();
            // mutations.forEach(() => {
            //     set_video_inf();
            // });
        });
        const target = document.body;
        const config = { childList: true, subtree: true };
        observer.observe(target, config);
    }
})();