// ==UserScript==
// @name               Youtube 封面
// @name:en            Youtube Cover
// @name:zh-CN         youtube 封面
// @namespace          http://tampermonkey.net/
// @version            1.0.1
// @description        獲取影片封面！
// @description:en     Get the cover of youtube video！
// @description:zh-CN  获取视频封面！
// @author             Anong0u0
// @include            *//www.youtube.com/*
// @grant              none
// @downloadURL none
// ==/UserScript==

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


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

function getXY(element)
{
    var 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)
  {
      var img = new Image();
      img.src = imgUrl;
      img.onload = () => {resolve(img);}
  })
}


function load()
{
    var div = document.createElement("div");
    div.innerHTML =`

    <!-- css -->
    <style>
        #ytCover {
            text-decoration: none;
            font-size: 2em;
            font-weight: bolder;
            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: 999;
            max-height: 20em;
            font-size: 10px
        }

        .linkBtn {
            text-decoration: none;
        }

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

        .slide {
            cursor: default
        }

    </style>

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

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

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

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

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

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

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

        </div>
    </div>`

    document.querySelector("#start").append(div);
    console.log("done");

    var ytC = document.querySelector("#ytCover");
    var ytLH = document.querySelector("#ytListHead");

    document.querySelectorAll(".linkBtn").forEach((e)=>{e.target="_blank"});

    ytC.innerText = document.querySelector("html").lang.indexOf("zh")!=-1?"封面":"Cover";;

    window.onresize = () => {ytLH.style.left = (getXY(ytC).X/10-1)+"em";}

    document.querySelectorAll(".list > .slide").forEach((e)=>
    {
        let list = e.querySelector(".list");
        e.onmouseenter = () =>
        {
            list.style.top = (getXY(e).Y/10-1)+"em";
            list.style.left = parseFloat(ytLH.style.left) + 9.7 + "em";
            list.hidden = false;
        };
        e.onmouseleave = () =>
        {
            list.hidden = true;
        }
    })

    var hide;
    ytC.onmouseenter = () =>
    {
        //console.log("C in");
        hide = false;
        ytLH.hidden = false;
    };
    ytC.onmouseleave = async () =>
    {
        //console.log("C out");
        hide = true;
        await delay(500);
        ytLH.hidden = hide;
    };
    ytLH.onmouseenter = () =>
    {
        //console.log("L in");
        hide = false;
    };
    ytLH.onmouseleave = async () =>
    {
        //console.log("L out");
        hide = true;
        await delay(200);
        ytLH.hidden = hide;
    };


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

            var 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 > .slide").forEach(async (e)=>
            {
                if (e.getAttribute("tag")=="skip") return;
                let url = "https://i.ytimg.com/vi/" + video_id + "/" + e.getAttribute("tag") + "default.jpg";
                checkImg(url).then((img)=>{e.hidden=!(img.width>120 && img.height>90);});
            });
            document.querySelectorAll(".linkBtn").forEach((e)=>{e.href = "https://i.ytimg.com/vi/" + video_id + "/" + e.getAttribute("imgTag") + ".jpg";});
        }
    }).observe(document.body, {childList: true, subtree: true});
}