// ==UserScript==
// @id             BilibiliWatchlaterButton@Laster2800
// @name           B站“稍后再看”按钮
// @version        1.0
// @namespace      laster2800
// @author         Laster2800
// @description    B站新版顶栏中加回“稍后再看”的按钮
// @include        *://www.bilibili.com/*
// @include        *://t.bilibili.com/
// @include        *://t.bilibili.com/?spm_id_from*
// @run-at         document-end
// @downloadURL none
// ==/UserScript==

(function() {
    executeUntilLoaded('.user-con.signin', null, 100, 5000, addWatchlater)
})();

/**
 * 在 selector 对应元素加载完成后执行操作
 *
 * @param {string} selector 该选择器指定一个元素 element，当这个元素加载成功时执行 callback(element)
 * @param {string} stopSelector 该选择器指定一个元素 stopElement，当这个元素加载成功时终止检测
 * @param {number} interval 检测 element 和 stopElement 是否加载成功的时间间隔（单位：ms）
 * @param {number} timeout 当检测时间超出该时间后，终止检测（单位：ms）
 * @param {Function} callback 当 element 加载成功时执行 callback(element)
 */
function executeUntilLoaded(selector, stopSelector, interval, timeout, callback) {
    var cnt = 0
    var maxCnt = timeout / interval
    var tid = setInterval(() => {
        var element = document.querySelector(selector)
        var stopElement = stopSelector ? document.querySelector(stopSelector) : null
        if (element || stopElement || ++cnt >= maxCnt) {
            clearInterval(tid)
        }
        element && callback(element)
    }, interval)
}

function addWatchlater(header) {
    if (header) {
        var collect = header.children[4]
        var watchlater = header.children[6].cloneNode(true)
        var link = watchlater.firstChild
        link.href = 'https://www.bilibili.com/watchlater/#/list'
        var text = link.firstChild
        text.innerText = '稍后再看'
        header.insertBefore(watchlater, collect)

        // 鼠标移动到“稍后再看”按钮上时，以 Tooltip 形式显示“稍后再看”列表
        watchlater.onmouseover = () => {
            var dispVue = collect.firstChild.__vue__
            dispVue.showPopper = true
            executeUntilLoaded('[role=tooltip][aria-hidden=false] .tabs-panel [title=稍后再看]', null, 50, 1500, watchlaterPanel => {
                watchlaterPanel.parentNode.click()
            })
        }
    }
}