☰

bilibili优化

增加bilibili播放器的快捷按键，优化个别视图。

当前为 2023-10-23 提交的版本，查看 最新版本。

// ==UserScript==
// @name         bilibili优化
// @namespace    binger.cc
// @version      1.1
// @description  增加bilibili播放器的快捷按键，优化个别视图。
// @author       Ervoconite
// @match        https://*.bilibili.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant        none
// ==/UserScript==


const autoWide = true; // 自动宽屏

const d = document;
const _Log = console.log;
const qs = (sel) => { return d.querySelector(sel) }
const ann = () => { return document.activeElement.nodeName }


const favlistStyle = `
#page-fav .fav-main{width:800px!important}
#page-fav .fav-main .small-item{width:170px!important}
#page-fav .fav-main .small-item:nth-child(5n){margin-right:inherit!important}
#page-fav .fav-main .fav-action-bottom .fav-action-fixtop{width:800px!important;}

#page-fav .fav-sidenav{width:300px!important}
#page-fav .fav-sidenav .text{line-height:33px!important;width:180px!important}
#page-fav .fav-sidenav .fav-list-container{max-height:none!important}

@media (min-width:1420px){
  #page-fav .fav-main{width:980px}
}

/* #page-fav .fav-list>li:nth-child(odd){background:whitesmoke!important;} */
#page-fav .fav-sidenav > div:nth-child(2){background:aliceblue!important;}
#page-fav .modal-wrapper .target-favlist{max-height:80vh!important;}
#page-fav .modal-wrapper .target-favitem{height:unset!important;margin:.5em!important;}
#page-fav .modal-wrapper .fav-meta{display:flex!important;}
#page-fav .modal-wrapper .fav-meta .fav-state{margin-left:20px!important;}

`;


(function () {
    'use strict';

    // alert("debug");

    /**
	 *  @description 个人空间——⭐收藏 视图调整
	 */
    if (location.href.match(/space.bilibili.com/) && location.pathname.endsWith("favlist")) {

        qs("style").innerHTML += favlistStyle;
        setTimeout(() => {
            qs("#page-fav div.fav-sidenav > " +
               "div:nth-child(2) > div.favlist-title").click();
        }, 1000);

    }
    /**
	 * @description 视频播放器加快捷键
	 */
    else if (location.href.match(/bilibili.com\/video/)) {

        const selControl = '#bilibili-player .bpx-player-video-area .bpx-player-control-wrap',
              selRate = `${selControl} .bpx-player-ctrl-playbackrate > ul`,
              selWebv = `${selControl} .bpx-player-ctrl-web`,
              selWide = `${selControl} .bpx-player-ctrl-wide`;
        const selToti = `#bilibili-player > div > div > div.bpx-player-tooltip-area`;

        /** obs: 用来给宽屏和页面全屏按钮加提示 */
        const obs = new MutationObserver((mlist) => {
            if (mlist[3] && mlist[3].type == 'childList' && mlist[3].addedNodes.length) {
                var html;
                const wideTip = mlist[2].addedNodes[0].lastChild;
                const webvTip = mlist[3].addedNodes[0].lastChild;
                (html = wideTip.innerHTML, html == '宽屏模式' || html == '退出宽屏') ? wideTip.innerHTML += ' (h)' : _Log('h ERROR');
                (html = webvTip.innerHTML, html == '网页全屏' || html == '退出网页全屏') ? webvTip.innerHTML += ' (g)' : _Log('g ERROR');
            }
        })

        /** 修改播放器的函数 */
        function modifyPlayer(obs) {
            obs.disconnect();
            const btnWebv = qs(selWebv), btnWide = qs(selWide), btnRate = qs(selRate), btnRates = Array.from(btnRate.children);
            const rateK2R = new Map([
                ['1', '1'],
                ['2', '1.25'],
                ['3', '1.5'],
                ['4', '2'],
                ['5', '0.5'],
                ['6', '0.75']
            ]), rateR2K = new Map();
            rateK2R.forEach((r, k) => { rateR2K.set(r, k) });
            const rate = (k) => { btnRates.find(e => { return e.dataset.value == rateK2R.get(k) }).click() }
            window.addEventListener('keyup', (e) => {
                if (['TEXTAREA', 'INPUT'].indexOf(ann()) > -1) return; // 输入时不反应。
                var k = e.key;
                if (isNaN(k)) switch (k) {
                    case 'g': btnWebv.click(); break;
                    case 'h': btnWide.click(); break;
                    default:
                } else {
                    rate(k)
                }
            });
            /** 给倍速备注按键 */
            btnRate.style.cssText = 'text-align:end; width:100px; font-family:monospace;';
            btnRates.map(e => { e.innerHTML += ` (按${rateR2K.get(e.dataset.value)}) ` })
            if(autoWide) btnWide.click();
        }


        new MutationObserver((mlist, muobs) => {
            if (mlist[0].type == 'childList' && qs(selWide)) {
                _Log('%c终于加载好了~',"color:lime");
                /** 修改播放器 */
                modifyPlayer(muobs);
                /** 启动提示监视器 */
                obs.observe(qs(selToti), { childList: true });
            }
        }).observe(d.body, { childList: true });

    }

})();