Old Youtube Buttons

Changes various YouTube elements to resemble the old YouTube Design. (Green/Red Like/Dislike, Yellow Subscribe Button.)

当前为 2022-02-28 提交的版本,查看 最新版本

// ==UserScript==
// @name         Old Youtube Buttons
// @namespace    YellowSubButt
// @version      0.3.6
// @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
/* 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
// the "joined"(?) button when part of a channel's membership is probably not formatted correctly.

// 0.3.6 changes:
// shifted notification bell next to subscribe button
//   down a little to make it vertically center with the button
// made subscribe button even more accurate to 2008 youtube;
//   now changes colors slightly when hovering over it like it did back then,
//   and the text underlines on hover as well.
// as usual, liberties taken with "subscribed" button so it can look ok on dark theme
// (hopefully) fixed an issue where one of the reply buttons in the comments section could
//   gain the styling of the join button
// The script now functions a little better, running when loading onto a page now;
//   this means that the issue of the "join" buttons styling being lost when going
//   onto a channel shouldn't happen anymore;
//   this change also allowed for changing the "join" button contained in the
//   membership window that appears when clicking the "join" button on a channel/video

// 0.3.5 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

(function() {
    "use strict";
    window.addEventListener('yt-navigate-finish', evtListen, true);
    evtListen();
    // locationChange();
    function get_video_inf(){
        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');
                    // console.log(str)
                    // fixes css for removed dislike counts
                    // todo: make this check for the button better
                    // maybe by force allcapsing/lowercasing it or something
                    if (str.includes('Dislike this video')){
                        if (buttons[i].getAttribute('style') == null){
                            buttons[i].setAttribute('style', 'color: red !important');
                        } 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
                            if (buttons[i].getAttribute('style').includes('color: red !important') == false)
                            {
                                buttons[i].setAttribute('style', 'color: red !important');
                            }
                        }
                    } 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');
                        } 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
                            if (buttons[i].getAttribute('style').includes('color: green !important') == false)
                            {
                                buttons[i].setAttribute('style', 'color: green !important');
                            }
                        }
                    }
                }
            }
        }
        var join_info = document.getElementsByTagName('tp-yt-paper-button');
        if (join_info.length != 0){
            for(var j = 0; j < join_info.length; j++){
                var join_str = join_info[j].getAttribute('aria-label');
                if (join_info[j].className == 'style-scope ytd-button-renderer style-suggestive size-default'){
                    if (join_str.includes('Join this channel') == true){
                        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;' );
                    } else{
                        continue;
                    }
                } else if (join_info[j].className == 'style-scope yt-button-renderer style-primary'){
                    if (join_str.includes('Join') == true)
                    {
                        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;' );
                    } else{
                        continue;
                    }
                } else{
                    continue;
                }
            }
        }
    }
    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);
    }
    //sub button; unsubscribed ver
    addGlobalStyle('tp-yt-paper-button.ytd-subscribe-button-renderer { background: linear-gradient(180deg, #fff9c1 0%, #fed81c 100%) !important; border: 1px 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.ytd-subscribe-button-renderer:hover { background: linear-gradient(180deg, #fffffa 0%, #fed925 100%) !important; text-decoration: underline;}')
    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;}');
    //Likes-dislikes
    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;}');
    addGlobalStyle('.style-scope.ytd-subscription-notification-toggle-button-renderer{padding-top: 0.18em;}');
    addGlobalStyle('tp-yt-paper-button.ytd-subscribe-button-renderer[subscribed]:hover { background: linear-gradient(180deg, #fefefe 0%, #a8a6a6 100%) !important; }')
    //we ignore the event here beCAUSE WE DON'T CARE LMAOOOOO
    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://gf.qytechs.cn/en/scripts/404304-youtube-download-video
    function locationChange() {
        console.log('Switched page!');
        const observer = new MutationObserver(mutations => {
            mutations.forEach(() => {
                get_video_inf();
            });
        });
        const target = document.body;
        const config = { childList: true, subtree: true };
        observer.observe(target, config);
    }
})();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址