// ==UserScript==
// @name         Bilibili Live Cover
// @name:zh-CN   哔哩哔哩(bilibili.com)直播封面
// @namespace    hoothin
// @version      0.2
// @description        Show Bilibili Live Cover
// @description:zh-CN  在哔哩哔哩直播页面中显示封面
// @grant        GM_xmlhttpRequest
// @author       hoothin
// @include      http*://live.bilibili.com/*
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    var uid,anchorAvatar=document.querySelector("a.anchor-avatar-image");
    var bigImg=document.createElement("img");
    bigImg.style.cssText="pointer-events: none;position:fixed;z-index:999";
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    var observer = new MutationObserver(function(records){
        uid=anchorAvatar.href.replace(/https?:\/\/space\.bilibili\.com\//,"");
        GM_xmlhttpRequest({
            method: 'GET',
            url: location.protocol+"//live.bilibili.com/bili/getRoomInfo/"+uid,
            onload: function(result) {
                let infoJson;
                try{
                    infoJson=JSON.parse(result.responseText.replace(/^\(|\);$/g,""));
                }catch(e){
                    console.log(e);
                    return;
                }
                var coverA=document.createElement("a");
                coverA.href=infoJson.data.cover;
                coverA.target="_blank";
                coverA.innerHTML='<div class="live-tag v-bottom" title="封面">封面</div>';
                document.querySelector(".anchor-info-row").appendChild(coverA);
                coverA.onmouseover=function(e){
                    bigImg.src=coverA.href;
                    document.body.appendChild(bigImg);
                };
                coverA.onmouseout=function(e){
                    document.body.removeChild(bigImg);
                };
                coverA.onmousemove=function(e){
                    bigImg.style.left=e.clientX+"px";
                    bigImg.style.top=e.clientY+"px";
                };
            }
        });
    });
    var option = {
        'attributes': true
    };
    observer.observe(anchorAvatar, option);
})();