// ==UserScript==
// @name         Youtube Fix
// @namespace    http://tampermonkey.net/
// @version      0.1.3.1
// @description  Scrollbar + more videos on main page.
// @author       Bum
// @require      http://code.jquery.com/jquery-3.4.1.min.js
// @grant        GM_addStyle
// @match        https://www.youtube.com/*
// @downloadURL none
// ==/UserScript==
var itemsPerRow = 9;
var currentVideoId = "";

if ($(window).width() < 2000) {
   itemsPerRow = 6;
}
else {
   itemsPerRow = 9;
}

if (localStorage.getItem("itemsPerRow") != null) {
    itemsPerRow = localStorage.getItem("itemsPerRow");
}

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());
            }

        });
    /*
    var divComments = $("#comments").detach();
    var divSecondary = $("#secondary").detach();
    divSecondary.css("margin-left","-430px");
    divSecondary.css("width","500px");
    divSecondary.css("margin-right","107px");

    $("#columns").append(divComments);
    $("#columns").prepend(divSecondary);
	var config = { attributes: false, childList: true, subtree: true };
    var targetNodeRoot = $("#movie_player").get(0);
    var configRoot = { attributes: false, childList: true, subtree: true };
    var callbackRoot = function(mutationsList, observer) {
        var htmlPlayer = $("video");
        if (currentVideoId != htmlPlayer.attr("src")){
            currentVideoId = htmlPlayer.attr("src");
            var moviePlayer = $("#movie_player");
            htmlPlayer.attr("style","height: "+moviePlayer.height()+"px !important; width: " + moviePlayer.width() + "px !important");
            $(".ytp-chrome-bottom").attr("style","width: " + moviePlayer.width() + "px !important");
        };
    };

    // Create an observer instance linked to the callback function
    var observerroot = new MutationObserver(callbackRoot);

    // Start observing the target node for configured mutations
    observerroot.observe(targetNodeRoot, config);
    _addScrollBarComments();
    */
}

(function() {



    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);
    }

    var slider = '<div style="    margin-top: 11px;"> <p id="fixValueoutput" style="    color: white;">Items per row: '+itemsPerRow+'</p> <input id="fixSlider" type="range" min="6" max="15" value="'+itemsPerRow+'"> </div>';

    $("#chips").find("ytd-feed-filter-chip-bar-renderer").append(slider);
    $("#fixSlider").change(function() {
        $("#fixValueoutput").html("Items per row: " + this.value);
        itemsPerRow = this.value;
        localStorage.setItem("itemsPerRow", itemsPerRow);
        RemoveCssRule('ytd-rich-grid-renderer');
        GM_addStyle('ytd-rich-grid-renderer{--ytd-rich-grid-items-per-row: ' + itemsPerRow + ' !important;}');
    });
    GM_addStyle(`
ytd-rich-grid-renderer{
    --ytd-rich-grid-items-per-row: ` + itemsPerRow + ` !important;
}
`);
    GM_addStyle(`
.scrollbar
{
	margin-left: 30px;
    max-height: 800px;
	float: left;
	overflow-y: scroll;
	margin-bottom: 25px;
}
`);
    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;
}
`);
})();