Youtube Fix

Helps removing garbage from your recommended videos, adds a scrollbar for videos while watching

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name         Youtube Fix
// @namespace    http://tampermonkey.net/
// @version      1.1.1
// @description  Helps removing garbage from your recommended videos, adds a scrollbar for videos while watching
// @author       Bum
// @require      http://code.jquery.com/jquery-3.4.1.min.js
// @grant        GM_addStyle
// @match        https://www.youtube.com/*
// ==/UserScript==
var currentVideoId = "";

var exclusionListFix = null;
var betterBackgroundColour = "#212121";
var removeVideoBackground = true;


if (localStorage.getItem("excludeVideosFromYoutube") != null) {
    exclusionListFix = localStorage.getItem("excludeVideosFromYoutube").toUpperCase().split(";");
}

if (localStorage.getItem("backgroundColourFix") != null) {
    betterBackgroundColour = localStorage.getItem("backgroundColourFix");
    document.querySelector(':root').style.setProperty('--yt-spec-base-background', betterBackgroundColour);
}

if (localStorage.getItem("removeVideoBackground") != null) {
    betterBackgroundColour = localStorage.getItem("removeVideoBackground");
    removeCinematics('none');
}
else{
    removeVideoBackground = false;
}
function removeCinematics(display){
    GM_addStyle(`
#cinematics{
display:` + display +` !important;
}
`);
}

jQuery(document).ready(_main);
function _addScrollBarComments() {
    var isReady = $("ytd-comment-thread-renderer").length > 0;
    if (!isReady) {
        setTimeout(_addScrollBarComments, 500);
        return;
    }
    jQuery("#comments").wrap("<div id='commentsWrapper' class='scrollbar style-3'></div>");
    $('div.scrollbar').bind('mousewheel DOMMouseScroll', function(e) {
        var scrollTo = null;
        if (e.type == 'mousewheel') {
            scrollTo = (e.originalEvent.wheelDelta * -1);
        } else if (e.type == 'DOMMouseScroll') {
            scrollTo = 40 * e.originalEvent.detail;
        }

        if (scrollTo) {
            $("#items").trigger( "mouseover" );
            $("ytd-compact-video-renderer").trigger( "mouseover" );
            $("ytd-thumbnail").trigger( "mouseover" );
            $(".yt-simple-endpoint").trigger( "mouseover" );
            $(".ytd-compact-video-renderer").trigger( "mouseover" );
            $(".secondary-metadata").trigger( "mouseover" );
            $(this).scrollTop(scrollTo + $(this).scrollTop());
        }

    });
}
function _main() {
        var isReady = jQuery("ytd-compact-video-renderer").length > 0;
        if (!isReady) {
            setTimeout(_main, 500);
            return;
        }
        $("#related").find("div#items").wrap("<div class='scrollbar style-3'></div>");
        $('div.scrollbar').bind('mousewheel DOMMouseScroll', function(e) {
            var scrollTo = null;
            if (e.type == 'mousewheel') {
                scrollTo = (e.originalEvent.wheelDelta * -1);
            } else if (e.type == 'DOMMouseScroll') {
                scrollTo = 40 * e.originalEvent.detail;
            }

            if (scrollTo) {
                e.preventDefault();
                $(this).scrollTop(scrollTo + $(this).scrollTop());
            }

        });

}

function getMenuItem(id, display, checked){

    var res = "";
    if (checked == "true" || checked == true)
        res ='<div><input type="checkbox" checked class="enhancCheck" id="fix'+id+'" name="'+id+'" value="'+display+'">  <label for="fix'+id+'">'+display+'</label> </div>';
    else
        res ='<div><input type="checkbox" class="enhancCheck" id="fix'+id+'" name="'+id+'" value="'+display+'">  <label for="fix'+id+'">'+display+'</label> </div>';
    return res;
}

function AddCleaner(){
    var theButtonsMenu = $("#contents");
    let isReady = theButtonsMenu.length > 0;
        if (!isReady) {
            setTimeout(AddCleaner, 2000);
            return;
        }

    var targetNodeVideos = $("#contents").first().get(0);
    var configRoot = { attributes: false, childList: true, subtree: true };
    var callbackVideos = function(mutationsList, observer) {
        for(var mutation of mutationsList) {
            mutation.addedNodes.forEach(function(node) {
                if ($(node).hasClass("ytd-rich-item-renderer")){
                    if (exclusionListFix != null){
                        var currentTitle = $(node).find("#video-title").text();
                        for (var i = 0; i < exclusionListFix.length; i++) {
                            if (currentTitle.trim().toUpperCase().indexOf(exclusionListFix[i].trim()) > -1) {
                                $(node).closest("ytd-rich-item-renderer").css("display","none");
                            }
                        }
                    }
                }
            });
        }
    };
    var observerVideos = new MutationObserver(callbackVideos);
    observerVideos.observe(targetNodeVideos, configRoot);

    $("#masthead-container").find("#end").prepend(`<div class="enhanceButton" style="
    background: url(https://i.imgur.com/kWu713g.png);
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: center; width: 25px;
    height: 25px;
    cursor: pointer;"></div>`);

      var enhanceSettings = `
    <div class="enhancecontainer" style="display:none;">

    </div>
    `;

    $("body").append(enhanceSettings);

    $(".enhancecontainer").append(`<div class="excludeThisPlease" '="" style="
    flex: 1;
"><label for="excluding" style="
    display: flex;
">Exclude these keywords, separate by ; example: Tik Tok;Zendaya;Fortnite</label><textarea id="exclusionListFix" name="excluding" rows="5" cols="33" style="
    display: flex;
    width: 100%;
">
</textarea></div>`);

$(".enhancecontainer").append(`<div>
<label> Custom background: </label><input type="text" id="custombgvalue" name="custombgval" value="#212121"></div`);

    if (localStorage.getItem("backgroundColourFix") != null) {
        betterBackgroundColour = localStorage.getItem("backgroundColourFix");
        $("#custombgvalue").val(betterBackgroundColour);
    }


    $(".enhancecontainer").append(getMenuItem('removeVideoBg','Remove background video effects',removeVideoBackground));

    $("#fixremoveVideoBg").change(function() {
        removeVideoBackground =$(this).prop('checked');
    });

    $(".enhancecontainer").append('<button id="enhanceSaveExclude" type="button">Save</button>');

    $(".enhanceButton").click(function(){
        $(".enhancecontainer").toggle();
        $("#exclusionListFix").val(localStorage.getItem("excludeVideosFromYoutube"));
    });

    $("#enhanceSaveExclude").click(function(){
        $(".enhancecontainer").toggle();
        localStorage.setItem("excludeVideosFromYoutube", $("#exclusionListFix").val());
        exclusionListFix = $("#exclusionListFix").val().toUpperCase().split(";");
        //######## custom background
        if ($("#custombgvalue").val() != ""){
            localStorage.setItem("backgroundColourFix", $("#custombgvalue").val());
             document.querySelector(':root').style.setProperty('--yt-spec-base-background', $("#custombgvalue").val());
        }
        else{
            localStorage.removeItem("backgroundColourFix");
             document.querySelector(':root').style.setProperty('--yt-spec-base-background', '#0f0f0f');
        }

        //########## remove retarded cinematics
        if (removeVideoBackground == true ||removeVideoBackground == "true"){
            removeCinematics("none");
            localStorage.setItem("removeVideoBackground", $(this).prop('checked'));
        }
        else{
            removeCinematics("block");
            localStorage.removeItem("removeVideoBackground");
        }

    });


}

(function() {

    AddCleaner();

    GM_addStyle(`
.scrollbar
{
	margin-left: 30px;
    max-height: `+ ($( document ).height() - 300)+`px;
	float: left;
	overflow-y: scroll;
	margin-bottom: 25px;
}
`);

        GM_addStyle(`
    .enhancecontainer {
display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: rgb(40, 40, 40);
    padding: 10px;
    width: 200px;
    position: fixed;
    right: 100px;
    z-index: 99999;
    margin-top: 66px;
    width: 500px;
    height: auto;
    flex-direction: column;
    color: white;
font-size: small;
}
    `);

    GM_addStyle(`
    .enhancecontainer div{
 padding-bottom: 5px;
}
    `);


    function GM_addStyle(css) {
        const style = document.getElementById("GM_addStyle") || (function() {
            const style = document.createElement('style');
            style.type = 'text/css';
            style.id = "GM_addStyle";
            document.head.appendChild(style);
            return style;
        })();
        const sheet = style.sheet;
        sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
    }
    function RemoveCssRule(css) {
        const style = document.getElementById("GM_addStyle") || (function() {
            const style = document.createElement('style');
            style.type = 'text/css';
            style.id = "GM_addStyle";
            document.head.appendChild(style);
            return style;
        })();
        const sheet = style.sheet;
        for (var i=0; i<sheet.cssRules.length; i++) {
            if (sheet.cssRules[i].selectorText == css) {
                sheet.deleteRule (i);
            }
        }
        console.log(style.sheet);
    }


    GM_addStyle(`

div#hover-overlays {
    display: none !important;
}
`);
    GM_addStyle(`
   .style-3::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}
`);
    GM_addStyle(`
.style-3::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}
`);
    GM_addStyle(`
.style-3::-webkit-scrollbar-thumb
{
	background-color: #000000;
}
`);
    GM_addStyle(`
#commentsWrapper
{
    padding-right:10px;
    position:absolute;
    right:0;
    margin-right:200px;
    margin-top:25px;
    max-width:600px;
}
`);
})();