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

let downloadButton = document.createElement('div')
let ops = document.querySelector('#arc_toolbar_report .ops') || document.querySelector('#arc_toolbar_report .toolbar-left');
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 = `
<span class="my-percent"></span>
<span class="my-message"></span>
<div class="my-cancel">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" width="20" height="20">
        <path d="M12.566,8 L15.611,4.956 C16.031,4.535 16.031,3.853 15.611,3.434 L12.566,0.389 C12.146,-0.031 11.464,-0.031 11.043,0.389 L7.999,3.433 L4.955,0.389 C4.534,-0.031 3.852,-0.031 3.432,0.389 L0.388,3.434 C-0.034,3.854 -0.034,4.536 0.387,4.956 L3.431,8 L0.387,11.044 C-0.034,11.465 -0.034,12.147 0.388,12.567 L3.432,15.611 C3.852,16.032 4.534,16.032 4.955,15.611 L7.999,12.567 L11.043,15.611 C11.464,16.032 12.146,16.032 12.566,15.611 L15.611,12.567 C16.031,12.146 16.031,11.464 15.611,11.044 L12.566,8 L12.566,8 Z"></path>
    </svg>
</div>
<div class="my-tip">
    <div class="tip-trangle-top"></div>
    取消下载
</div>
<div class="progress-box">
    <div class="progress"></div>
</div>`
function Display(style) {
    if (style) {
        progres.style.display = 'block'
        downloadButton.style.display = 'none'
    } else {
        progres.style.display = 'none'
        downloadButton.style.display = 'inline-block'
    }
}
let download = null;
let my_box = document.querySelectorAll("#my-box span")
function Download(url, name) {
    download = 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
            my_box[1].innerHTML = percentage
            my_box[0].innerHTML = "下载中...请稍等！"
        },
        onload: () => {
            my_box[0].innerHTML = "下载完成，即将弹出'另存为'对话框！"
            setTimeout(() => {
                Display(false)
            }, 6000);
        },
        onerror: (e) => {
            if (e.error == "aborted") {
                my_box[0].innerHTML = "已取消下载！"
            } else {
                my_box[0].innerHTML = "下载未启动或失败！"
            }
        }
    })
}
let my_cancel = document.querySelector(".my-cancel")
my_cancel.addEventListener("click", () => {
    download.abort()
    setTimeout(() => {
        Display(false)
    }, 3000);
})
/*
* 以下app_id和app_secret为调用接口专门申请的，请勿滥用~！
*/
function Ajax(url) {
    return new Promise((resolve, reject) => {
        GM_xmlhttpRequest({
            method: "GET",
            responseType: "json",
            url: `https://www.mxnzp.com/api/bilibili/video?url=${btoa(url)}&app_id=lnr8vkootnrr9ch2&app_secret=clloM1doZFczeHBjRjRndEZoMWhrUT09`,
            onload: function (xhr) {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    if (xhr.response.code === 1) {
                        resolve(xhr.response.data)
                    } else {
                        reject("获取数据失败，请稍后重试！")
                    }
                } else {
                    reject("获取数据失败，请稍后重试！")
                }
            }
        })
    })
}
downloadButton.addEventListener('click', () => {
    let newAjax = new Ajax(location.href)
    newAjax.then(res => {
        if (res.list.length == 0) {
            alert("获取数据失败，请稍后重试！")
        } else {
            Display(true)
            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 {
                    Display(false)
                }
            } 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: 120px;
        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
        }
    }

    #my-box span {
        position: absolute;
        bottom: 10px;
        color: #1b53ec;
        font-size: 16px;
    }

    .my-percent {
        left: 30px;
    }

    .my-message {
        left: 220px;
    }

    .my-cancel {
        position: absolute;
        top: 15px;
        right: 30px;
        fill: #1b53ec;
        cursor: pointer;
    }

    .my-tip {
        position: relative;
        top: 50px;
        left: 375px;
        width: 80px;
        color: #1b53ec;
        font-size: 16px;
        background: #f97199;
        padding: 10px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        z-index: 9999999;
        display: none;
    }

    .tip-trangle-top {
        position: absolute;
        top: -10px;
        left: 20px;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid #f97199;
    }

    .my-cancel:hover + .my-tip {
        display: block;
    }

    .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 {
        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;
    }
`)