// ==UserScript==
// @name         B站视频下载
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      0.1.2
// @description  视频下方添加下载按钮，点击下载后上方会出现下载进度条！注意：不保证所有视频都能下载！！！
// @author       张仨
// @noframes
// @match        https://www.bilibili.com/video/*
// @grant        unsafeWindow
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @grant        GM_download
// @connect      www.mxnzp.com
// @require      https://cdn.jsdelivr.net/npm/ajax-zhangsan/ajax.min.js
// ==/UserScript==

let downloadButton = document.createElement('div')
let ops = document.querySelector('#arc_toolbar_report .ops');
ops.addEventListener("DOMNodeInserted", () => {
    ops.parentElement.appendChild(downloadButton);
})
downloadButton.id = "downloadButton"
downloadButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="25" height="25">
<path d="M877.49 381.468H668.638V68.191H355.36v313.277H146.51l365.489 365.49 365.49-365.49zM146.51 851.383v104.425h730.98V851.383H146.51z"/>
</svg>
<span>视频下载</span>`
let progres = document.createElement('div')
document.body.appendChild(progres)
progres.id = 'my-box'
progres.innerHTML = `
<div class="progress-box">
    <div class="progress"></div>
    <span></span>&emsp;
    <span></span>
</div>`
function Download(url, name) {
    let progress_box = document.querySelectorAll(".progress-box span")
    GM_download({
        url: url,
        name: name + ".mp4",
        saveAs: true,
        onprogress: (pro) => {
            let progress = document.querySelector(".progress")
            let percentage = Math.round(pro.loaded / pro.totalSize * 10000) / 100.00 + "%"
            progress.style.width = percentage
            progress_box[1].innerHTML = percentage
            progress_box[0].innerHTML = "下载中...请稍等！"
        },
        onload: () => {
            progress_box[0].innerHTML = "下载完成，即将弹出'另存为'对话框"
            setTimeout(() => {
                progres.style.display = 'none'
                downloadButton.style.display = 'inline-block'
            }, 6000);
        },
        onerror: () => {
            alert("下载错误，请稍后重试！")
        }
    })
}
downloadButton.addEventListener('click', () => {
    let newAjax = new Ajax(location.href)
    newAjax.then(res => {
        if (res.list.length == 0) {
            alert("获取数据失败，请稍后重试！")
        } else {
            progres.style.display = 'block'
            downloadButton.style.display = 'none'
            if (res.list.length > 1) {
                let num = prompt("请输入需要下载的那一集")
                if (num != null && num != "") {
                    num = Number(num) - 1
                    Download(res.list[num].url, res.list[num].title)
                } else {
                    progres.style.display = 'none'
                    downloadButton.style.display = 'inline-block'
                }
            } else {
                Download(res.list[0].url, res.title)
            }
        }
    }).catch(err => {
        alert(err)
    })
})
GM_addStyle(`
    #my-box{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 450px;
        height: 100px;
        z-index: 9999999;
        border-radius: 10px;
        background: rgba(243, 247, 247, 0.9);
        animation: topDown 0.3s;
        display: none;
    }

    @keyframes topDown {
        from {
            top: -200px;
            opacity: 0
        }

        to {
            top: 0;
            opacity: 1
        }
    }

    .progress-box {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        height: 20px;
        width: 400px;
        border-radius: 10px;
        background-color: gainsboro;
    }

    .progress-box span {
        color: #1b53ec;
    }

    .progress {
        width: 0;
        height: 100%;
        border-radius: 10px;
        background-color: #1b53ec;
        transition: width .3s;
        background-image: linear-gradient(90deg,
                rgba(255, 255, 255, 0),
                rgba(255, 255, 255, 1),
                rgba(255, 255, 255, 0));
        background-size: 40px 100%;
        background-repeat: no-repeat;
        background-position: left -40px top 0;
        animation: shine 2s ease infinite;
    }

    @keyframes shine {
        to {
            background-position: right -40px top 0;
        }
    }

    #downloadButton {
        position: relative;
        left: 30px;
        width: 120px;
        height: 25px;
        display: inline-block;
        fill: #757575;
        color: #757575;
        cursor: pointer;
        z-index: 9999999;
    }

    #downloadButton svg {
        vertical-align: middle;
        line-height: initial;
    }

    #downloadButton:hover {
        fill: #17a2d4;
        color: #17a2d4;
    }
`)