// ==UserScript==
// @name         YouTube Normal Thumbnails
// @namespace    http://greasyfork.org
// @version      0.4
// @description  Restores normal thumbnails size
// @author       NeoCortex
// @match        https://www.youtube.com/
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    var storage = {
        target: document.querySelector('ytd-rich-grid-renderer'),
        detectTarget: function () {
            storage.target = document.querySelector('ytd-rich-grid-renderer');
            return storage.target;
        },
        observerConfig: {
            attributes: true,
            childList: false,
            subtree: false
        },
        styleFixer: function () {
            storage.target.style.cssText =
                storage.target.style.cssText.replace(
                    /\-\-ytd\-rich\-grid\-items\-per\-row\:\s*\d{1,3}\;/,
                    '--ytd-rich-grid-items-per-row: 5;'
                );
        },
        observerCallback: function (mutationsList, observer) {
            for (let mutation of mutationsList) {
                if (mutation.attributeName == 'style') {
                    storage.observer.disconnect();
                    storage.styleFixer();
                    storage.observer.observe(storage.target, storage.observerConfig);
                }
            }
        },
        installObserver: function () {
            storage.observer = new MutationObserver(storage.observerCallback);
            storage.observer.observe(storage.target, storage.observerConfig);
        
            var s = document.createElement('style');
            s.innerHTML = 'ytd-rich-grid-video-renderer[mini-mode] #video-title.ytd-rich-grid-video-renderer {font-size: 1.3rem;}';
            document.body.appendChild(s);
        }
    };

    if (storage.target === null) {
        let insertObserver = new MutationObserver(function () {
            if (storage.detectTarget() !== null) {
                storage.styleFixer();
                storage.installObserver();
                insertObserver.disconnect();
            }
        });
        insertObserver.observe(document.getElementById('content'), {
            attributes: false,
            childList: true,
            subtree: true
        });
    } else {
        storage.styleFixer();
        storage.installObserver();
    }
})();