動畫瘋-動畫封面顯示

一個簡單的腳本,讓你可以欣賞巴哈為你精心挑選的封面

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください。
// ==UserScript==
// @name         動畫瘋-動畫封面顯示
// @namespace    Anong0u0
// @version      0.1.2
// @description  一個簡單的腳本,讓你可以欣賞巴哈為你精心挑選的封面
// @author       Anong0u0
// @match        https://ani.gamer.com.tw/animeVideo.php?*
// @icon         https://i.imgur.com/2aijUa9.png
// @grant        none
// @license      Beerware
// ==/UserScript==

const video = document.querySelector("video");
let previewImgUrl = video.poster;

let lastClick = 0;
video.addEventListener("contextmenu", (e)=>
{
    if(Date.now()-lastClick < 400) open(previewImgUrl)
    lastClick = Date.now();
});

const previewImg = document.createElement("img");
previewImg.id = "previewImg";
previewImg.hidden = true;
previewImg.src = previewImgUrl;
document.body.append(previewImg);

const previewLink = document.createElement("a")
previewLink.href = previewImgUrl
previewLink.target = "_blank"
previewLink.innerText = "預覽封面"
previewLink.id = "previewLink"
document.querySelector(".anime_name > button").insertAdjacentElement("afterend", previewLink);

previewLink.onmouseenter = ()=>{previewImg.hidden = false;}
previewLink.onmouseleave = ()=>{previewImg.hidden = true;}
previewLink.addEventListener("mousemove", (e)=>
{
    previewImg.style.left = `${e.clientX+20}px`
    previewImg.style.top = `${e.clientY+30-Number(getComputedStyle(previewImg).height.slice(0,-2))}px`
})

new MutationObserver(()=>
{
    previewImgUrl = video.poster
    previewImg.src = previewImgUrl
    previewLink.href = previewImgUrl
}).observe(video, {attributes:true})

const css = document.createElement("style")
css.innerHTML = `

.loading {
    opacity: 0.6;
    width: 200px;
    height: 120px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
}
.video-google-AD{background:unset}

.R18 {
    display: none;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 200px;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background-color: #0005;
}
video-js:hover .R18 {display: block;}

img#previewImg {
    position: fixed;
    z-index: 2000;
    max-width: 100vw;
    max-height: 65vh;
    min-width: 40vw;
    border: 3px solid #FFF;
}

#previewLink {
    position: relative;
    left: 10px;
    top: 3px;
    font-size: 1.5em;
    cursor: pointer;
    color: var(--videoplayer-anime-title);
}

#previewLink:hover {color: var(--anime-primary-hover);}
`
document.body.append(css)