marumaru 更換影片與歌詞播放延遲

可更換 marumaru 片源為你指定的 youtube 影片，並且提供更精確的校時
换行
// ==UserScript==
// @name           marumaru 更換影片 與 歌詞播放延遲
// @namespace      Anong0u0
// @version        0.3.4
// @description    可更換 marumaru 片源為你指定的 youtube 影片，並且提供更精確的校時
// @author         Anong0u0
// @match          https://www.marumaru-x.com/*-song/play-*
// @icon           https://www.google.com/s2/favicons?sz=64&domain=marumaru-x.com
// @grant          GM_setValue
// @grant          GM_getValue
// @run-at         document-start
// @license        Beerware
// ==/UserScript==

const delay = (ms = 0) => new Promise((r)=>{setTimeout(r, ms)})
const waitElementLoad = (elementSelector, selectCount = 1, tryTimes = 1, interval = 0) =>
{
    return new Promise(async (resolve, reject)=>
    {
        let t = 1, result;
        while(true)
        {
            if(selectCount != 1) {if((result = document.querySelectorAll(elementSelector)).length >= selectCount) break;}
            else {if(result = document.querySelector(elementSelector)) break;}

            if(tryTimes>0 && ++t>tryTimes) return reject(new Error("Wait Timeout"));
            await delay(interval);
        }
        resolve(result);
    })
}

const id = GM_getValue("id", {})
const songID = document.URL.split("/").pop()

// ===== 更改片源 ======

if (songID in id) document.querySelectorAll("[data-video-id]").forEach((e)=>e.setAttribute("data-video-id", id[songID]))
const oldLink = document.createElement("div")
const newLink = document.createElement("div")
const linkArea = document.querySelector(".alert")

oldLink.innerHTML = linkArea.innerHTML
oldLink.style.width = "max-content"
newLink.style.width = "max-content"
linkArea.innerHTML=""
linkArea.append(oldLink)
if (songID in id)
{
    oldLink.style["text-decoration"] = "line-through"
    newLink.innerHTML = `替換影片：<a href="https://youtu.be/${id[songID]}" target="_blank">https://youtu.be/${id[songID]}</a>`
    linkArea.append(newLink)
}

const button = document.createElement("div")
button.style = "position: absolute;top: 0;width: 100%;height: 100%;display: flex;align-items: center;margin-left: 8px"
button.innerHTML = `<button type="button" class="btn btn-dark ml-4"><i class="bi bi-arrow-repeat"></i>更換影片</button>`
new ResizeObserver(() => {
    const width = Math.max(getComputedStyle(oldLink).width.match(/[\d.]+/), getComputedStyle(newLink).width.match(/[\d.]+/)) + "px"
    button.style.left = width
    button.style.width = `calc(100% - ${width})`
}).observe(oldLink);
linkArea.append(button)

const origVid = oldLink.querySelector("a").href.split("/").pop()
button.querySelector("button").onclick = ()=>
{
    const res = prompt(`請輸入欲替換的 Youtube影片 的 網址 或 ID\n此歌曲原始ID為: ${origVid}`, origVid)
    if(!res) return;
    const vid = res.length==11 ? res : res.match(/(?<=\/|v=)[A-Za-z0-9_\-]{11}/)?.[0]
    if(!vid)
    {
        alert("youtube網址或ID錯誤，未替換")
        return
    }
    id[songID] = vid
    if (vid == origVid) delete id[songID]
    GM_setValue("id", id)
    location.reload()
}

// ===== 更改延遲 ======

const delayNum = GM_getValue("delayNum", {})
const delayDiv = document.createElement("div")
delayDiv.hidden = true
delayDiv.innerHTML = `
<div class="dropdown-menu delayInput">
  <span class="minus x10"><<</span>
  <span class="minus x1"><</span>
  <div class="s"><input id="delayInput" type="number" value="${delayNum[songID] || 0}" step="0.1"></div>
  <span class="plus x1">></span>
  <span class="plus x10">>></span>
</div>
<style>
.delayInput * {box-sizing: border-box;}
.delayInput {
    display:block;
    overflow:unset;
    min-width: unset;
    width: max-content;
    left: -90% !important;
    top: 100% !important;
    position: absolute;
    z-index: 114514;
    transform: unset !important;
}

.delayInput input {
	font-size: 1rem;
	height: 34px;
	background-color: #fff;
    border: none;
	float: left;
	width: 60px;
	line-height: 32px;
	text-align: center;
	font-family: "helveticaneuecyrbold";
    padding: 0;
}
.delayInput input::-webkit-outer-spin-button,
.delayInput input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.delayInput .s {display:inline}
.delayInput .s::after {
    content: "s";
    font-size: 0.8rem;
    float: left;
    text-align: center;
    line-height: 37px;
    color: #888;
    background-color: #fff;
    right: 34%;
    position: absolute;
    height: 0;
}

.delayInput span {
    line-height: 33px;
    font-size: 16px;
    font-weight: bolder;
    letter-spacing: -5px;
    text-align: center;
    display: block;
    width: 32px;
    float: left;
    height: 34px;
    cursor: pointer;
    transition: all 0.3s;
    padding-right: 4px;
}
.delayInput span:hover {
	background-color: #d5d5d5;
}
</style>
`

const delayInput = delayDiv.querySelector("#delayInput")

for(const np of ["minus", "plus"])
{
    const npNum = np=="plus" ? 1 : -1
    for(const multiple of ["x1", "x10"])
    {
        const multipleNum = multiple=="x10" ? 1 : 0.1
        delayDiv.querySelector(`span.${np}.${multiple}`).onclick = () =>
        {
            delayInput.value = (Number(delayInput.value) + npNum*multipleNum).toFixed(1)
            delayInput.oninput()
        }
    }
}

const timeStore = []
delayInput.oninput = () =>
{
    const value = Number(delayInput.value)
    if (Number.isInteger(value)) delayInput.value = String(value)
    if (songID in id)
    {
        $player.lyrics.forEach((e, i)=>
        {
            e.st = timeStore[i].st-value
            e.et = timeStore[i].et-value
        })
    }
    else
    {
        $player.lyricsEarlyTime = value
    }
    $player.stopLyrics()
    $player.playLyrics()
    const t = GM_getValue("delayNum", {})
    t[songID] = value
    GM_setValue("delayNum", t)
}

(async ()=>
{
    const timeBtns = [...await waitElementLoad("button.dropdown-toggle[data-original-title=歌詞提早設定]", 2, 0, 100)]
    let lastBtn = null;
    timeBtns.forEach((btn)=>btn.addEventListener("click", ()=>
    {
        btn.parentElement.append(delayDiv)
        delayDiv.hidden = !delayDiv.hidden
        if (lastBtn == btn) return
        delayDiv.hidden = false
        lastBtn = btn
    }))
    document.addEventListener("click", (e) =>
    {
        if (!(delayDiv.contains(e.target) || timeBtns.some((btn)=>btn.contains(e.target))))
        {
            delayDiv.hidden = true
        }
    });
    document.querySelectorAll("button.dropdown-toggle[data-original-title=歌詞提早設定] ~ .dropdown-menu").forEach((e)=>e.remove());


    while(typeof $player == 'undefined') await delay(100)
    while($player?.lyrics?.length === 0) await delay(100);
    $player.lyrics.forEach((e, i)=>{timeStore[i] = {st: e.st, et: e.et}})
    delayInput.oninput()
})()