Youtube restore slim tubnails

Restore slim tubnails on home and subs pages

当前为 2020-08-07 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Youtube restore slim tubnails
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Restore slim tubnails on home and subs pages
// @author       me
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    //https://stackoverflow.com/a/52809105----
    /* These are the modifications: */
    history.pushState = ( f => function pushState(){
        var ret = f.apply(this, arguments);
        window.dispatchEvent(new Event('pushstate'));
        window.dispatchEvent(new Event('locationchange'));
        return ret;
    })(history.pushState);

    history.replaceState = ( f => function replaceState(){
        var ret = f.apply(this, arguments);
        window.dispatchEvent(new Event('replacestate'));
        window.dispatchEvent(new Event('locationchange'));
        return ret;
    })(history.replaceState);

    window.addEventListener('popstate',()=>{
        window.dispatchEvent(new Event('locationchange'))
    });

    //should made portable my settings
    const getRelative = () => {
        var p = document.createElement("p");
        p.innerHTML = "test";
        p.style.fontSize = "16px";
        document.body.appendChild(p);
        var relative = 19/p.offsetHeight;
        p.innerHTML = "";
        return relative;
    }
    
    const run = () => {
        var relative = getRelative();
        var itemWidth = 240*relative;
        var postWidth = 350*relative;
        var subsWidth = 214;
        var padding = 48;
        var fontSize = 1.4*relative;
        var lineHeight = 1.8*relative;

        let parentSize = document.createElement("style");
        var parent = document.getElementById("page-manager");
        if(parent == null) return; 
            
        const updateParentSize = () => {
            parentSize.innerHTML = ":root{--how-many-items:"+parseInt(parent.offsetWidth/itemWidth)+";"+
                                "--how-many-posts:"+parseInt(parent.offsetWidth/postWidth)+";"+
                                "--variable-columns-width:"+parseInt((parent.offsetWidth-padding)/subsWidth)*subsWidth+"px}";
        }

        updateParentSize();

        let style = document.createElement("style");
        style.innerHTML = "ytd-rich-grid-renderer.ytd-two-column-browse-results-renderer{"+
                        "--ytd-rich-grid-items-per-row:var(--how-many-items) !important;"+
                        "--ytd-rich-grid-posts-per-row:var(--how-many-posts) !important;"+
                        "--ytd-rich-grid-movies-per-row:11 !important;}"+

                        "#metadata-line.ytd-video-meta-block,ytd-channel-name{"+
                        "max-height: 7.1rem !important;"+
                        "font-size:"+fontSize+"rem !important;"+
                        "line-height:"+lineHeight+"rem !important}"+

                        "ytd-two-column-browse-results-renderer[page-subtype='subscriptions']{"+
                        "width:var(--variable-columns-width) !important;"+
                        "max-width:var(--variable-columns-width) !important}";
        document.body.appendChild(parentSize);
        document.body.appendChild(style);

        new ResizeObserver(updateParentSize).observe(parent); 
    }

    run();

    window.addEventListener('locationchange', run);
})();