// ==UserScript==
// @name         B站视频封面查看
// @namespace    limgmk/bilibili-cover
// @version      0.0.10
// @description  在播放窗口下方添加查看封面的按钮
// @author       Ezekiel Lee
// @license      MIT
// @include      http*://www.bilibili.com/video/av*
// @include      http*://www.bilibili.com/video/BV*
// @run-at       document-end
// @downloadURL none
// ==/UserScript==

/** 使用 XPath 获取 document */
function getElementByXpath(xpath) {
    return document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

/** 等待一段时间 */
async function wait(delay) {
    return new Promise(resolve => {
        setTimeout(resolve, delay);
    });
}

(async function () {
    /** 引入需要的资源 */
    const iconLink = document.createElement("link");
    iconLink.setAttribute("rel", "stylesheet");
    iconLink.setAttribute("type", "text/css");
    iconLink.setAttribute("href", "https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
    getElementByXpath("//head").appendChild(iconLink);

    /** 循环等待 player 加载完成 */
    while (true) {
        if (unsafeWindow?.player?.isInitialized()) {
            /** 获取最后一个元素 */
            const lastItem = getElementByXpath('//div[@class="ops"]/child::node()[last()]');

            /** 构造 "查看封面" Element */
            const showCover = document.createElement("span");
            showCover.setAttribute("title", "查看封面");
            showCover.setAttribute("style", "color: #505050;");
            showCover.innerHTML = `<i class="fa fa-picture-o" style="font-size: 24px; padding-top: 1px"></i>封面`;

            /** 为 "查看封面" Element 添加事件监听 */
            showCover.addEventListener('click', function (e) {
                var cover = getElementByXpath('//meta[@itemprop="image" and @data-vue-meta="true"]');
                if (cover) {
                    var coverURL = cover.getAttribute("content");
                    coverURL = coverURL.replace(/http[s]?\:/, '');
                    window.open(coverURL, '_blank');
                } else {
                    alert("不好意思, 找不到封面链接 (ﾟ´Д｀ﾟ)ﾟ");
                }
            });
            showCover.addEventListener('mouseover', function (e) {
                showCover.setAttribute("style", "color: #00A1D6;");
            });
            showCover.addEventListener('mouseout', function (e) {
                showCover.setAttribute("style", "color: #505050;");
            });

            /** 修饰最后一个元素的样式 */
            lastItem.setAttribute("style", "width: 92px;");
            /** 插入 "查看封面" Element */
            lastItem.parentElement.appendChild(showCover);
            /** 退出循环 */
            break;
        }
        /** 等待 100ms 再重试 */
        await wait(100);
    }
})();