// ==UserScript==
// @name         仰晨-B站功能优化
// @description  1、《不用长按就可以3倍速啦   支持 2.5    3   3.5    4 倍速(2022.11.15》    2、《给出每集剩下的时间-----《只有教程集合才有效》 鬼畜集合的标签是不同的所以无效的，有时候集合也会加载太快导致失败，第二次有了缓存基本就行了，暂时就不改了，我要学习java 55555 js我就是个小白，算是想要优化一下看教程  又觉得自己应该可以 就百度 来完成了(2023.1.18》3、《添加按钮控制《看进度》是否打开2023.1.20》4、《增加显示总时长2023.1.20 02:15》5、《改变总时长位置，增加按钮滚到当前视频集到屏幕 样式分离开来 2023.1.25》6、《优化不是集合就不执行,添加一个提前加载按钮，修复之前倍数添加变蓝bug》
// @license      AGPL License
// @namespace    https://mp.weixin.qq.com/s/zsVmSmd63OIxuoDbKGA-xg
// @version      2023.1.30
// @author       仰晨
// @match        *://www.bilibili.com/video/*
// @icon         https://bilibili.com/favicon.ico
// @grant        none
// @downloadURL none
// ==/UserScript==

//创建一个尝试按钮
let try_button = document.createElement("div");
//设置id
try_button.setAttribute('id','setText'); //设置标签属性
try_button.setAttribute('title','只能点一次，确定加载好了再点'); //设置鼠标放置提醒文字
//设置标签内容
try_button.innerText="尝试提前加载";
//插入父标签下
document.getElementsByTagName("body")[0].appendChild(try_button);
var flag = true;
try_button.onclick=function () {
    document.getElementById("setText").remove();//成功加载把“尝试”先删了
    show ();
    倍速();
}


window.onload=function() {
    //可能点按钮的时候视频还没加载好所以要再判断一下
    if (document.getElementsByClassName("bpx-player-ctrl-playbackrate-menu-item").length===6) {
        倍速();
    }
    if (flag){
        document.getElementById("setText").remove();//成功加载把“尝试”先删了
        show ();
    }

}//加载完成执行—收括号----------------------------------


function 倍速 () {
    function 插入倍速 (速度){
        //创建一个p元素
        let para = document.createElement("li");
        para.setAttribute('class','bpx-player-ctrl-playbackrate-menu-item'); //设置标签属性
        para.setAttribute('data-value',速度); //设置标签属性
        para.innerText=速度+"x";
        //获取父标签
        let div=document.getElementsByClassName("bpx-player-ctrl-playbackrate-menu")[0];
        //添加标签
        let one=div.firstChild;// 获取父标签的第一个子元素
        div.insertBefore(para,one); // 在父标签的第一个子元素，前插入div标签
    }
    插入倍速(2.5);
    插入倍速(3);
    插入倍速(3.5);
    插入倍速(4);
}

//看进度方法
//------------给出每集剩下的时间-----《只有教程集合才有效》 鬼畜集合的标签是不同的所以无效的-------------------------=======================================================
function lookJinDu(){
    const element = document.getElementById("multi_page").getElementsByClassName("duration");	//每一集是时间标签

    const allElement = document.getElementsByClassName("list-box")[0].children;		//视频集合下的全部标签

    console.log("视频列表共有"+element.length);
    if(element.length===allElement.length){				//如果还没有进度就加进度
        //定义一个数组放每个视频的秒数
        let arr = [];
        let s_all = 0;
        //收集总时长-----//单纯是秒更好处理---------------------------------
        for(let i=0;i<element.length;i++){
            let timeStr = element[i].innerHTML;
            let s =0;//记录本次秒
            //console.log(timeStr);
            let times=timeStr.split(":");
            //console.log(times);
            if(times.length===2){
                s=parseInt(times[0])*60 + parseInt(times[1]);
            }else if(times.length===3){
                s = parseInt(times[0]) * 60 * 60 + parseInt(times[1]) * 60 + parseInt(times[2]);
            }else{
                s=parseInt(times[0]);
            }
            s_all+=s;
            arr.push(s);//将一个或多个元素添加到数组的末尾，并返回数组的新长度。
        }
        console.log("全部变成秒为"+s_all);


        //显示总时长在最前面2023.1.20  02:04 begin
        do {//放在循环里面防止变量冲突
            let para = document.createElement("div");//创建一个li标签
            para.innerText=`总时长:${parseInt(s_all / 60 / 60)}小时${parseInt((s_all / 60) % 60)}分${parseInt(s_all % 60)}秒  加油ヾ(◍°∇°◍)ﾉﾞ"`;
            para.style = "position: absolute;top: -1px;left: 22%;" ;//设置标签颜色和位置
            para.setAttribute('class','jindu'); //设置标签属性

            let list=document.getElementsByClassName("list-box")[0];//获取父标签---列表
            let listIndex=list.getElementsByTagName("li")[0];// 获取父标签的第1个子元素
            list.insertBefore(para,listIndex); // 在父标签的第一个子元素，前插入div标签
        }while (false);


        let s_front = 0;		//遍历到的时间总和
        //对每个 进行处理------------------------------------------------------------------------------------
        for(let i=0;i<arr.length;i++){
            s_front+=arr[i];
            //console.log("进度："+(s_front/s_all*100).toFixed(2)+"%")

            //转换为时分秒---------输出才用  内部用秒就好
            let H=0;
            let m=0;
            let s=0;

            //剩下时间
            s=s_all-s_front;

            m=parseInt(s/60);
            s=s%60;

            H=parseInt(m/60);
            m=m%60;
            //console.log("剩下时间:"+H+"小时"+m+"分"+s+"秒")

            //展示阶段-------------------------------------------------------------------
            //创建一个li标签
            let para = document.createElement("div");
            //设置标签内容
            para.innerText=`看完${i + 1}集后  剩下时间:${H}小时${m}分${s}秒  进度：${(s_front / s_all * 100).toFixed(2)}%`;
            //设置字体颜色
            //para.style.color = '#d3d3d3';
            para.setAttribute('class','jindu'); //设置标签属性

            //获取父标签---列表
            let list=document.getElementsByClassName("list-box")[0];
            //添加标签
            let listIndex=list.getElementsByTagName("li")[i+1];// 获取父标签的第x个子元素
            list.insertBefore(para,listIndex); // 在父标签的第一个子元素，前插入div标签
        }
        document.getElementById("setText").innerText="已打开已看进度";
    }else{//删除存在的进度标签
        let jindu = document.getElementsByClassName("jindu");
        for (let i = jindu.length-1; i>=0;i--){
            jindu[i].remove();
        }
        document.getElementById("setText").innerText="已关闭已看进度";
    }
}//看进度方法结束------------------------------------------------------------------------------------------------



//页面添加元素方法+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++2023.1.30抽取出来+++++++
function show (){
    //————————————————看进度按钮开关——————————————————————————————
    if (flag) {//这个按钮不存在？？？？？？？？？？？？？？？？
        console.log("---开始创建按钮---");
        flag=false;
        if (document.querySelector(".head-left h3") != null) {//视频选集存在？？？？？？？？？？？？？？？？？？？？？？
            //创建一个按钮
            let bt = document.createElement("div");//不用button了2023.1.30
            //设置id 方便改内容
            bt.setAttribute('id', 'setText'); //设置标签属性
            //设置标签内容
            bt.innerText = "已打开已看进度";
            //设置样式和位置放下面了2023.1.25
            //bt.style = "position: fixed; right: 0px;bottom: 20px;color:red;";
            //插入父标签下
            document.getElementById("app").appendChild(bt);

            bt.onclick = function () {
                lookJinDu();
            };//开关按钮

            lookJinDu();//默认打开

            //——————————————————————————————————————————————————————
            //——————————————集合中《当前在看的》 滚到屏幕可见位置——————————————————————

            //创建一个按钮
            let see = document.createElement("div");
            //设置id 方便改内容
            see.setAttribute('id', 'see'); //设置标签属性
            see.setAttribute('title','如果正在播放的在屏幕可见处。是不会有效果的'); //设置鼠标放置提醒文字2023.1.30
            //设置标签内容
            see.innerText = "当前播放集";
            //设置样式(分离了)

            //插入父标签下
            document.getElementsByClassName("head-con")[0].appendChild(see);

            see.onclick = function () {
                //有时class会变...
                let on = document.getElementsByClassName("on");
                if (on < 2) {
                    document.getElementsByClassName("watched")[0].scrollIntoView({
                        block: "nearest",
                        behavior: "smooth"
                    });
                } else {
                    on[on.length - 1].scrollIntoView({block: "nearest", behavior: "smooth"});
                }//平滑滚到到屏幕可见
            }
        } else {//视频选集不存在？？？？？？？？？？？？？？？？？？？？？？2023.1.30
            //创建一个按钮
            let tis = document.createElement("div");
            //设置id
            tis.setAttribute('id', 'setText'); //设置标签属性
            //设置标签内容
            tis.innerText = "记得好好学习";
            //插入父标签下
            document.getElementById("app").appendChild(tis);
        }
    }else {
        console.log("按钮已存在");}
}//页面添加元素方法结束+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++






//——————————————添加样式（分离操作）——————————————————————————————2023.1.25 begin
do{
    let style=`
    .jindu{
       color:#d3d3d3;
    }
    #setText{
        position: fixed;
        right: 0px;
        bottom: 20px;
    }
    #see{
        position: absolute;
        top: 200px;
        left: 100%;
        width: 20px;

    }

    #see,
    #setText{
        border: 2px #fdbaba solid;
        background-color: #ffffff00;
        color: #f47676;
        text-align: center;
        cursor: pointer;
        font-weight: 555;
        border-radius: 5px;
    }

    #setText:hover,
    #see:hover{
        color: #ffffff;
        background-color: #0000008a;}
    `;

//cursor:pointer;变小手   :hover碰到触发


    let ele=document.createElement("style");
    ele.innerHTML=style;
    document.getElementsByTagName('head')[0].appendChild(ele)
}while(false);
//——————————————————————————————————————————————————————————