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

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;
        tryTimes++;
        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.innerHTML =`

    <!-- css -->
    <style>
        #ytCover {
            text-decoration: none;
            font-size: 2em;
            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: 70vh;
            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" tag="maxres">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" tag="sd">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" tag="hq">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" tag="mq">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" tag="skip">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="previewColor" style="font-weight: bold;">On</span></button>
        </div>
    </div>`

    document.querySelector("#start").append(div);
    var preview = document.createElement("img");
    preview.className = "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";}

    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 previewColor = document.querySelector("#previewColor");

    var previewBtnChange = () =>
    {
        if (GM_getValue("previewOn"))
        {
            previewColor.style.color = "green";
            previewColor.innerText = Lang.on[usedLang];
        }
        else
        {
            previewColor.style.color = "red";
            previewColor.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 > .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);});
            });

            Btns.forEach((e)=>{e.href = "https://i.ytimg.com/vi/" + video_id + "/" + e.getAttribute("imgTag") + ".jpg";});
            checkImg("https://i.ytimg.com/vi/" + video_id + "/mq1.jpg").then((img)=>
            {
                if(img.width<=120 && img.height<=90)
                    {Btns.forEach((e)=>{e.hidden=(e.getAttribute("imgTag").indexOf("default")==-1);});}
                else
                    {Btns.forEach((e)=>{e.hidden=false});}
            });
        }
    }).observe(document.body, {childList: true, subtree: true});

    console.log("done");
}