Greasy Fork is available in English.

shumin-youtube

自用整合修改,部分代码和样式来自 https://greasyfork.org/zh-CN/scripts/420140 和 https://userstyles.org/styles/115362 ,版权属于原作者。

// ==UserScript==
// @name               shumin-youtube
// @namespace          http://tampermonkey.net/
// @version            1.2.0
// @description        自用整合修改,部分代码和样式来自 https://greasyfork.org/zh-CN/scripts/420140 和 https://userstyles.org/styles/115362 ,版权属于原作者。
// @author             qianjunlang
// @match              *://*.youtube.com/*
// @icon               https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @require            https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js
// @grant              GM_setValue
// @grant              GM_getValue
// @run-at             document-start
// @noframes
// @license            MIT License
// ==/UserScript==
'use strict';

//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-


var css = [
	".ytp-play-progress {",
	"	background: linear-gradient(left,#FF0000,#FF7F00,#FFFF00,#00FF00,#0000FF,#4B0082,#8F00FF);",
	"	background: -moz-linear-gradient(left,#FF0000,#FF7F00,#FFFF00,#00FF00,#0000FF,#4B0082,#8F00FF);",
	"	background: -o-linear-gradient(left,#FF0000,#FF7F00,#FFFF00,#00FF00,#0000FF,#4B0082,#8F00FF);",
	"	background: -webkit-linear-gradient(left,#FF0000,#FF7F00,#FFFF00,#00FF00,#0000FF,#4B0082,#8F00FF);",
	"}",
	".ytp-hover-progress-light {",
	" 	background: linear-gradient(left,#FF8080,#FFBF80,#FFFF80,#80FF80,#8080FF,#A580C0,#C780FF);",
	"	background: -moz-linear-gradient(left,#FF8080,#FFBF80,#FFFF80,#80FF80,#8080FF,#A580C0,#C780FF);",
	"	background: -o-linear-gradient(left,#FF8080,#FFBF80,#FFFF80,#80FF80,#8080FF,#A580C0,#C780FF);",
	"	background: -webkit-linear-gradient(left,#FF8080,#FFBF80,#FFFF80,#80FF80,#8080FF,#A580C0,#C780FF);",
	"}",
	".ytp-unloaded-progress {",
	"	background: linear-gradient(left ,#191919, #4d4d4d, #4C0000, #4c3200, #4c4c00, #002600, #00004c, #260026, #36264c, #4d4d4d, #191919);",
	"  	background: -moz-linear-gradient(left ,#191919, #4d4d4d, #4C0000, #4c3200, #4c4c00, #002600, #00004c, #260026, #36264c, #4d4d4d, #191919);",
	"  	background: -o-linear-gradient(left ,#191919, #4d4d4d, #4C0000, #4c3200, #4c4c00, #002600, #00004c, #260026, #36264c, #4d4d4d, #191919);",
	"  	background: -webkit-linear-gradient(left ,#191919, #4d4d4d, #4C0000, #4c3200, #4c4c00, #002600, #00004c, #260026, #36264c, #4d4d4d, #191919);",
	"}",
	".ytp-load-progress {",
	"  background: rgba(90, 90, 90, .5);",
	"}"
].join("\n");
if (typeof GM_addStyle != "undefined") {
	GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
	PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
	addStyle(css);
} else {
	var node = document.createElement("style");
	node.type = "text/css";
	node.appendChild(document.createTextNode(css));
	var heads = document.getElementsByTagName("head");
	if (heads.length > 0) {
		heads[0].appendChild(node);
	} else {
		// no head yet, stick it whereever
		document.documentElement.appendChild(node);
	}
}


//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-


if (
    window.location.href.indexOf( "watch?v=" ) >= 0 ||
    window.location.href.indexOf( "/v/" ) >= 0 ||
    false
){

//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

    let cycle_id = setInterval(() => {
        if(
            $(".ytp-endscreen-previous").is(":visible") ||
            $(".ytp-endscreen-next").is(":visible") ||
            $(".ytp-endscreen-content").is(":visible") ||
            false
        ) {
            document.webkitCancelFullScreen();
            document.exitFullscreen();
            document.cancelFullScreen();
        }
    }, 1000);

//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

    document.addEventListener('keydown',(e)=>{
        if( 81==e.keyCode ){
            $(".YtSegmentedLikeDislikeButtonViewModelSegmentedButtonsWrapper button").first().click()
        }
    });

//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

    console.log("youtube Cover is loading");
    (async () => // onStart
    {
        let tryTimes = 0;
        while(true)
        {
            console.log("try load");
            if(document.querySelector("#start")!=null)
            {
                load();
                return;
            }
            if(++tryTimes>10) return;
            await delay(300);
        }
    })();


    function delay(ms = 0){return new Promise((r)=>{setTimeout(r, ms)})}

    function getXY(element)
    {
        let x = 0, y = 0;
        while (element)
        {
            x += element.offsetLeft - element.scrollLeft + element.clientLeft;
            y += element.offsetTop - element.scrollLeft + element.clientTop;
            element = element.offsetParent;
        }
        return {X: x, Y: y}
    }

    function checkImg(imgUrl)
    {
      return new Promise(function(resolve)
      {
          let img = new Image();
          img.src = imgUrl;
          img.onload = () => {resolve(img);}
      })
    }


    function load()
    {
        var div = document.createElement("div");
        div.style.marginLeft = "3em";
        div.innerHTML =`

        <!-- css -->
        <style>
            #ytCover {
                text-decoration: none;
                font-size: 1.1em;
                font-weight: bold;
                font-family: Roboto, Arial, sans-serif;
                color: var(--yt-spec-text-primary);
            }

            div.list {
                background-color: var(--yt-spec-brand-background-primary);
                border: 1px solid var(--yt-spec-10-percent-layer);
                padding: 0.5em 0;
                position: fixed;
                z-index: 114514;
                max-height: 40em;
                font-size: 10px
            }

            .linkBtn {
                text-decoration: none;
            }

            .list-item {
                text-align: center;
                font-size: 1.5em;
                color: var(--yt-spec-text-primary);
                background-color: var(--yt-spec-brand-background-primary);
                height: 2.5em;
                line-height: 2.5em;
            }
            .list-item:hover {
                background: #AAA;
                box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
            }

            .slide {
                cursor: default
            }

            img#preview {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 2000;
                max-width: 100vw;
                max-height: 65vh;
                min-width: 40vw;
                border: 3px solid #FFF;
            }

            .list > button {
                border: none;
                padding: unset;
                width: inherit;
                cursor: pointer;
            }

        </style>

        <!-- html -->
        <div>
            <div class="slide" id="ytCover"></div>

            <div class="list" id="ytListHead" style="border-top: none; top: 4.8em; left: 19em;" hidden>

                <div class="list-item slide">1280x720+
                    <div class="list" style="border-left: none; width: 11.5em" hidden>
                        <a class="linkBtn" imgTag="maxresdefault"><div class="list-item">maxresdefault</div></a>
                        <a class="linkBtn" imgTag="maxres1"><div class="list-item">maxres1</div></a>
                        <a class="linkBtn" imgTag="maxres2"><div class="list-item">maxres2</div></a>
                        <a class="linkBtn" imgTag="maxres3"><div class="list-item">maxres3</div></a>
                    </div>
                </div>

                <div class="list-item slide">640x480
                    <div class="list" style="border-left: none; width: 8.5em" hidden>
                        <a class="linkBtn" imgTag="sddefault"><div class="list-item">sddefault</div></a>
                        <a class="linkBtn" imgTag="sd1"><div class="list-item">sd1</div></a>
                        <a class="linkBtn" imgTag="sd2"><div class="list-item">sd2</div></a>
                        <a class="linkBtn" imgTag="sd3"><div class="list-item">sd3</div></a>
                    </div>
                </div>

                <div class="list-item slide">480x360
                    <div class="list" style="border-left: none; width: 8.5em" hidden>
                        <a class="linkBtn" imgTag="hqdefault"><div class="list-item">hqdefault</div></a>
                        <a class="linkBtn" imgTag="hq1"><div class="list-item">hq1</div></a>
                        <a class="linkBtn" imgTag="hq2"><div class="list-item">hq2</div></a>
                        <a class="linkBtn" imgTag="hq3"><div class="list-item">hq3</div></a>
                    </div>
                </div>

                <div class="list-item slide">320x180
                    <div class="list" style="border-left: none; width: 8.5em" hidden>
                        <a class="linkBtn" imgTag="mqdefault"><div class="list-item">mqdefault</div></a>
                        <a class="linkBtn" imgTag="mq1"><div class="list-item">mq1</div></a>
                        <a class="linkBtn" imgTag="mq2"><div class="list-item">mq2</div></a>
                        <a class="linkBtn" imgTag="mq3"><div class="list-item">mq3</div></a>
                    </div>
                </div>

                <div class="list-item slide">120x90
                    <div class="list" style="border-left: none; width: 6.5em" hidden>
                        <a class="linkBtn" imgTag="default"><div class="list-item">default</div></a>
                        <a class="linkBtn" imgTag="1"><div class="list-item">1</div></a>
                        <a class="linkBtn" imgTag="2"><div class="list-item">2</div></a>
                        <a class="linkBtn" imgTag="3"><div class="list-item">3</div></a>
                    </div>
                </div>

                <button class="list-item">: <span id="previewSpan" style="font-weight: bold;">On</span></button>
            </div>
        </div>`

        document.querySelector("#start").append(div);
        var preview = document.createElement("img");
        preview.id = "preview";
        preview.hidden = true;
        document.body.append(preview);

        var ytC = document.querySelector("#ytCover");
        var ytLH = document.querySelector("#ytListHead");
        var Btns = document.querySelectorAll(".linkBtn");
        var previewBtn = document.querySelector(".list > button");
        var Lang = { cover: {en:"Cover", tc:"封面", sc:"封面"},
                   preview: {en:"Preview", tc:"圖片預覽", sc:"图片预览"},
                        on: {en:"On", tc:"開", sc:"开"},
                       off: {en:"Off", tc:"關", sc:"关"}};
        var usedLang;

        if (document.querySelector("html").lang.indexOf("zh")!=-1)
            {usedLang = document.querySelector("html").lang.indexOf("CN")!=-1?"sc":"tc";}
        else
            {usedLang = "en";}

        ytC.innerText = Lang.cover[usedLang];
        previewBtn.innerHTML = Lang.preview[usedLang] + previewBtn.innerHTML;
        ytLH.style.width = usedLang=="en"?"10em":"10.4em";

        window.onresize = () =>
        {
            ytLH.style.left = (getXY(ytC).X/10-1)+"em";
            if(window.innerWidth<1350)
            {
                if(window.innerWidth>850)div.style.marginLeft = 3*((window.innerWidth-500)/850) + "em";
                else div.style.marginLeft = "1em";
            }
            else
            {div.style.marginLeft = "3em";}
        }

        document.querySelectorAll(".list > .slide").forEach((e)=>
        {
            let list = e.querySelector(".list");
            e.onmouseenter = () =>
            {
                list.style.top = (getXY(e).Y/10-0.5)+"em";
                list.style.left = parseFloat(ytLH.style.left) + parseFloat(ytLH.style.width) + "em";
                list.hidden = false;
            };
            e.onmouseleave = () => {list.hidden = true;}
        });
        Btns.forEach((e)=>
        {
            e.onmouseenter = () =>
            {
                if(!GM_getValue("previewOn")) return;
                preview.hidden = false;
                preview.src = e.href;
            };
            e.onmouseleave = () => {preview.hidden = true;}
            e.target="_blank";
        });
        var previewSpan = document.querySelector("#previewSpan");

        var previewBtnChange = () =>
        {
            if (GM_getValue("previewOn"))
            {
                previewSpan.style.color = "green";
                previewSpan.innerText = Lang.on[usedLang];
            }
            else
            {
                previewSpan.style.color = "red";
                previewSpan.innerText = Lang.off[usedLang];
            }
        };
        previewBtnChange();
        previewBtn.onclick = () =>
        {
            GM_setValue("previewOn", !GM_getValue("previewOn"));
            previewBtnChange();
        };


        var hide;
        ytC.onmouseenter = () =>
        {
            hide = false;
            ytLH.hidden = false;
        };
        ytC.onmouseleave = async () =>
        {
            hide = true;
            await delay(500);
            ytLH.hidden = hide;
        };
        ytLH.onmouseenter = () =>
        {
            hide = false;
        };
        ytLH.onmouseleave = async () =>
        {
            hide = true;
            await delay(200);
            ytLH.hidden = hide;
        };


        var oldHref = null;
        new MutationObserver(() => // onUrlChange
        {
            if (oldHref != document.location.href)
            {
                oldHref = document.location.href

                let video_id = null;
                window.location.search.replace("?","").split('&').forEach((s)=>{if(s.startsWith("v=")){video_id=s.replace("v=","")};});
                ytC.hidden = (video_id == null);
                if (video_id == null) return;

                document.querySelectorAll(".list-item > .list").forEach((e)=>
                {
                    if (e.style.width=="6.5em") return;
                    let tempBtns = e.querySelectorAll(".linkBtn");
                    e.parentNode.hidden = true;
                    tempBtns.forEach((forEachBtn)=>
                    {
                        checkImg("https://i.ytimg.com/vi/" + video_id + "/" + forEachBtn.getAttribute("imgTag") + ".jpg").then((img)=>
                        {
                            let notHide = (img.width>120 && img.height>90);
                            forEachBtn.hidden = !notHide;
                            if(notHide) e.parentNode.hidden = false;
                        });
                    });
                });

                checkImg("https://i.ytimg.com/vi/" + video_id + "/mq1.jpg").then((img)=>
                {
                    document.querySelector("#ytListHead > div:nth-child(5)").querySelectorAll(".linkBtn").forEach((e)=>
                    {if(e.getAttribute("imgTag").indexOf("default")==-1) e.hidden=(img.width<=120 && img.height<=90);});
                });

                Btns.forEach((e)=>{e.href = "https://i.ytimg.com/vi/" + video_id + "/" + e.getAttribute("imgTag") + ".jpg";});
            }
        }).observe(document.body, {childList: true, subtree: true});

        console.log("done");
    }


//-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

}