☰

更明显的哔哩哔哩进度条

让哔哩哔哩视频页面的进度条更明显

// ==UserScript==
// @name         更明显的哔哩哔哩进度条
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  让哔哩哔哩视频页面的进度条更明显
// @author       beibeibeibei
// @license      MIT
// @match        https://www.bilibili.com/video/*
// @match        https://www.bilibili.com/bangumi/play/*
// @grant        GM_registerMenuCommand
// ==/UserScript==

(function () {
    "use strict";
    //isDebugMode默认false
    let isDebugMode = false;
    if (isDebugMode) {
        console.log("更明显的哔哩哔哩进度条脚本已运行");
    }
    //脚本延迟执行时间
    let delay = 6000;
    //进度条高度
    let limit_height = isDebugMode ? 12 : 6;
    //进度条阴影
    let box_shadow = isDebugMode ? "0 0 2px #FF0000" : "0 0 2px #000000";
    //进度条背景颜色
    let bcolor = isDebugMode ? "rgba(24, 26, 27, 1)" : "rgba(24, 26, 27, 0.7)";
    //进度条渐变色背景颜色(默认35px间隔)
    let bcolor2 = isDebugMode
        ? "repeating-linear-gradient(135deg,rgba(255, 255, 255, 0.7),rgba(0, 0, 0, 0.7) 35px),rgba(255, 255, 255, 0.7) 70px"
        : "repeating-linear-gradient(135deg,rgba(120, 130, 135, 0.7),rgba(0, 0, 0, 0.7) 35px),rgba(120, 130, 135, 0.7) 70px";
    //缓冲进度的背景颜色
    let buffer_color = "hsl(196.47deg 100% 90% / 60%)";
    //高能波浪透明度
    let wavefillOpacity = "0.8";
    // 视频底部控制条的背景颜色 // 62.9%是22/35的结果 35是父节点的高，直接设置颜色不好看，用渐变色截断到22的位置比较好看
    let control_color = "linear-gradient(180deg,#80FFFF80 0%,#80FFFF80 62.9%,#00000000 63%)";

    function core() {
        // 进度条有两种类型，分别为操作进度条和贴底边进度条
        let all_progress = document.querySelectorAll(".bpx-player-progress-schedule");
        if (isDebugMode) {
            console.log(all_progress);
        }

        all_progress.forEach(function (progress) {
            //加高
            if (isDebugMode) {
                console.log(
                    "更明显的进度条：进度条原始高度：" +
                        parseFloat(getComputedStyle(progress).height)
                );
            }
            progress.style.height = limit_height + "px";
            //加阴影
            progress.style.boxShadow = box_shadow;
            //背景颜色
            progress.style.backgroundColor = bcolor;
            //渐变色背景颜色
            progress.style.background = bcolor2;
        });

        //这个是贴底边进度条的容器（因为贴底边，不加高看不出来）
        let progress_parent = document.querySelector(".bpx-player-shadow-progress-area");
        progress_parent.style.height = getComputedStyle(
            document.querySelector(".bpx-player-shadow-progress-area .bpx-player-progress-schedule")
        ).height;

        //更明显的高能进度条的高能波浪
        // let wave = document.querySelector(".bpx-player-pbp > svg > g");
        // if (wave) {
        //     wave.style.fillOpacity = wavefillOpacity;
        // }

        //缓冲进度的背景颜色
        //原背景颜色: rgba(24, 26, 27, 0.3)
        //let buffer_color = getComputedStyle(progress.querySelector(".bpx-player-progress-schedule-buffer")).backgroundColor;
        //let buffer_style = document.createElement("style");
        //buffer_style.type = 'text/css';
        //buffer_style.innerHTML = "/*更明显的哔哩哔哩进度条*/.bpx-player-progress-schedule-buffer { background-color: " + buffer_color + "; }";
        //document.head.appendChild(buffer_style);

        //右下角迷你小窗进度条
        //let mini_style = document.createElement("style");
        //mini_style.type = 'text/css';
        //mini_style.innerHTML = "/*更明显的哔哩哔哩进度条*/.bpx-player-mini-warp .bpx-player-mini-progress { height: " + limit_height + "px !important; }";
        //document.head.appendChild(mini_style);

        //创建一个带有id的样式元素, 以免多次运行导致重复添加样式
        if (!document.getElementById("bilibiliClearProgressBarStyles")) {
            let bilibiliClearProgressBarStyles = document.createElement("style");
            bilibiliClearProgressBarStyles.id = "bilibiliClearProgressBarStyles";
            bilibiliClearProgressBarStyles.innerHTML =
                "/*更明显的哔哩哔哩进度条*/" +
                ".bpx-player-pbp > svg > g {fill-opacity: " + wavefillOpacity + "}"+
                ".bpx-player-progress-schedule-buffer { background-color: " + buffer_color + "; }" +
                ".bpx-player-mini-warp .bpx-player-mini-progress { height: " + limit_height + "px !important; }";
            document.head.appendChild(bilibiliClearProgressBarStyles);
        }

        //.bpx-player-ctrl-btn 播放/时间/清晰度/倍速/字幕/音量/设置/画中画/宽屏/网页宽屏/全屏的按钮
        //.bpx-player-control-bottom 这些按钮的父节点
        // let control_btn_color = "rgb(128 255 255 / 40%)";
        // 单独修改每个按钮的背景颜色时, 个别按钮在hover状态时尺寸会变化, 背景颜色可能会突出一块, 不咋好看, 所以直接修改父节点
        // document.querySelectorAll(".bpx-player-ctrl-btn").forEach((btn)=>{
        //     btn.style.backgroundColor = control_btn_color;
        //     btn.style.boxShadow = control_btn_color + "0px 0px 3px ";
        // });
        // document.querySelector(".bpx-player-ctrl-btn.bpx-player-ctrl-quality").style.boxShadow = control_btn_color + " 10px 0px 3px";
        let control = document.querySelector(".bpx-player-control-bottom");
        control.style.background = control_color;
    }

    //右键菜单
    let id = GM_registerMenuCommand("手动执行", () => {
        core();
    });

    setTimeout(() => {
        requestIdleCallback((deadline) => {
            core();
        });
    }, delay);
    // Your code here...
})();