// ==UserScript==
// @name         [Via]H5视频调速器
// @namespace    http://tampermonkey.net/
// @version      0.1.1
// @description  H5视频调速器
// @author       Mr.NullNull
// @match        *://*/*
// @grant        none
// @downloadURL none
// ==/UserScript==

/*H5视频调速器*/
(function () {
    'use strict';

    var IntPbr = 1;

    const IntPbrMax = 32;
    const IntPbrMin = 0.25;
    const IntPbrStep = 0.25;

    function Main() {
        if (document.querySelector("myPbrMain")) return;

        var myCss = document.createElement("style");
        myCss.innerHTML = `
            div#myPbrMain {
                padding: 0;
                margin: 0;
                width: 1px;
                position: fixed;
                bottom: 10vw;
                right: 10vw;
                z-index: 2147483647;
            }
            div#myPbrMain > * {
                float: right;
            }
            div#myPbrMain > div.myPbrBtns {
                width: 1px;
                margin-bottom: 2.2vw;
            }
            div.myPbrBtn{
                font: 4vw/1 '微软雅黑';
                float: right;
                height: 4vw;
                padding: 2vw;
                margin-bottom: 0.8vw;
                border-radius: 20vw;
                color: #eee;
                background-color: rgba(0, 0, 0, 0.65);
            }
            div#myPbrMain > div.myPbrBtn{
                width: auto;
            }

            div#myPbrMain * {
                box-sizing: content-box;
                word-break: normal;
            }
        `;
        document.head.appendChild(myCss);

        var mainDivTop = document.createElement("div");
        mainDivTop.id = "myPbrMain";
        mainDivTop.innerHTML = `
        <div class="myPbrBtns" style="visibility: hidden;">
            <div class="myPbrBtn" id="myPbrBtn_800">x8.00</div>
            <div class="myPbrBtn" id="myPbrBtn_300">x3.00</div>
            <div class="myPbrBtn" id="myPbrBtn_200">x2.00</div>
            <div class="myPbrBtn" id="myPbrBtn_150">x1.50</div>
            <div class="myPbrBtn" id="myPbrBtn_125">x1.25</div>
            <div class="myPbrBtn" id="myPbrBtn_100">x1.00</div>
            <div class="myPbrBtn" id="myPbrBtn_075">x0.75</div>
            <div class="myPbrBtn" id="myPbrBtn_050">x0.50</div>
            <div class="myPbrBtn" id="myPbrBtn_Add">+${IntPbrStep}</div>
            <div class="myPbrBtn" id="myPbrBtn_Cut">-${IntPbrStep}</div>
        </div>
        <div class="myPbrBtn" id="myPbrBtn_Main">x1.XX</div>
        `;
        document.body.appendChild(mainDivTop);

        var mainBtn = mainDivTop.querySelector("#myPbrBtn_Main");
        var mainDiv = mainDivTop.querySelector(".myPbrBtns");


        setMainBtnTxt();


        mainBtn.onclick = function () {
            if (mainDiv.getAttribute("style") == "visibility: hidden;") {
                setMainDivShow();
            } else {
                setMainDivNone();
            }
        };

        mainDiv.querySelector("#myPbrBtn_800").onclick = function () {
            IntPbr = 8;
            setVideoPBR();
            setMainBtnTxt();
            setMainDivNone();
        };
        mainDiv.querySelector("#myPbrBtn_300").onclick = function () {
            IntPbr = 3;
            setVideoPBR();
            setMainBtnTxt();
            setMainDivNone();
        };
        mainDiv.querySelector("#myPbrBtn_200").onclick = function () {
            IntPbr = 2.00;
            setVideoPBR();
            setMainBtnTxt();
            setMainDivNone();
        };
        mainDiv.querySelector("#myPbrBtn_150").onclick = function () {
            IntPbr = 1.50;
            setVideoPBR();
            setMainBtnTxt();
            setMainDivNone();
        };
        mainDiv.querySelector("#myPbrBtn_125").onclick = function () {
            IntPbr = 1.25;
            setVideoPBR();
            setMainBtnTxt();
            setMainDivNone();
        };
        mainDiv.querySelector("#myPbrBtn_100").onclick = function () {
            IntPbr = 1.00;
            setVideoPBR();
            setMainBtnTxt();
            setMainDivNone();
        };
        mainDiv.querySelector("#myPbrBtn_075").onclick = function () {
            IntPbr = 0.75;
            setVideoPBR();
            setMainBtnTxt();
            setMainDivNone();
        };
        mainDiv.querySelector("#myPbrBtn_050").onclick = function () {
            IntPbr = 0.50;
            setVideoPBR();
            setMainBtnTxt();
            setMainDivNone();
        };

        mainDiv.querySelector("#myPbrBtn_Add").onclick = function () {
            IntPbr += IntPbrStep;
            setVideoPBR();
            setMainBtnTxt();
        };
        mainDiv.querySelector("#myPbrBtn_Cut").onclick = function () {
            IntPbr -= IntPbrStep;
            setVideoPBR();
            setMainBtnTxt();
        };


        function setVideoPBR() {
            if (IntPbr > IntPbrMax) {
                IntPbr = IntPbrMax;
            }
            if (IntPbr < IntPbrMin) {
                IntPbr = IntPbrMin;
            }

            var tmps = document.querySelectorAll("video");
            for (let i = 0; i < tmps.length; i++) {
                const element = tmps[i];
                element.playbackRate = IntPbr;
            }
            console.log("PBR = " + IntPbr);
        }

        function setMainBtnTxt() {
            var txt = IntPbr * 100;
            if (IntPbr < 10) {
                txt = Padding(txt, 3);
                mainBtn.innerHTML = "x" + txt[0] + "." + txt[1] + txt[2];
            } else {
                txt = Padding(txt, 4);
                mainBtn.innerHTML = "x" + txt[0] + txt[1] + "." + txt[2] + txt[3];
            }
        }

        function setMainDivShow() {
            mainDiv.style = "visibility: show;";
        }

        function setMainDivNone() {
            mainDiv.style = "visibility: hidden;";
        }
    };

    function Padding(num, length) {
        return (Array(length).join("0") + num).slice(-length);
    }


    var sli = setInterval(() => {
        if (document.querySelector("video")) {
            Main();
            clearInterval(sli);
        }
    }, 1000);
    setTimeout(() => {
        clearInterval(sli);
    }, 10000);
})();