[Bilibili] 小窗尺寸缩放

使用滚轮修改视频小窗口尺寸

// ==UserScript==
// @name      [Bilibili] 小窗尺寸缩放
// @name:en         [Bilibili] MiniScreenResizer
// @name:zh      [Bilibili] 小窗尺寸缩放
// @namespace    ckylin-script-bili-miniscreenresizer
// @version      0.1
// @description  使用滚轮修改视频小窗口尺寸
// @description:en  Change Bilibili video miniscreen with your mouse wheel
// @description:zh  使用滚轮修改视频小窗口尺寸
// @author       CKylinMC
// @match        https://www.bilibili.com/video/*
// @grant        unsafeWindow
// @grant        GM_registerMenuCommand
// @grant        GM_unregisterMenuCommand
// @grant        GM_getValue
// @grant        GM_setValue
// @license      GPLv3 License
// ==/UserScript==

(function() {
    const $ = q=>document.querySelector(q);
    const $$ = q=>[...document.querySelectorAll(q)];
    const BVC = {
        mini: '.bpx-player-container[data-revision="1"][data-screen=mini], .bpx-player-container[data-revision="2"][data-screen=mini]',
        container: '.bpx-player-container',
    };
    const CACHE = {};
    const setWH = (e,w,h)=>(e.style.width=w+'px',e.style.height=h+'px',[w,h]);
    const parsePX = px=>parseFloat(px.replace('px',''));
    const getWH = e=>{const es = getComputedStyle(e);return [parsePX(es.width),parsePX(es.height)]};
    const setTrans = (e,cancel)=>e.style.transition=cancel?'none':"width .3s ease, height .3s ease";
    const wait = t => new Promise(r => setTimeout(r, t));
    const setWHcss = (selector,w,h)=>css("RESIZERCSS",`${selector}{ width:${w}px!important;height:${h}px!important; }`);

    function css(id,content){
        let el = $('style#'+id);
        if(!el){
            el = document.createElement('style');
            el.id = id;
            document.body.appendChild(el);
        }
        el.innerHTML = content;
        return el;
    }

    function parseFl (fl){
        try{
            const f = parseFloat(fl);
            if(!isNaN(f) && f>=0) return f;
        }catch(e){}
        return -1
    }

    let menuIds = [];
    let menus = {};
    const registerMenu = (text, callback) => menuIds.push(GM_registerMenuCommand(text, callback));
    const clearMenu = () => { menuIds.forEach(id => GM_unregisterMenuCommand(id)); menuIds = []; };

    async function playerReady(){
        let i=50;
        while(--i>=0){
            await wait(200);
            if(!('player' in unsafeWindow)) continue;
            if(!('isInitialized' in unsafeWindow.player)) continue;
            if(!unsafeWindow.player.isInitialized()) continue;
            return true;
        }
        return false;
    }

    async function waitForDom(q) {
        let i = 50;
        let dom;
        while (--i >= 0) {
            if (dom = $(q)) break;
            await wait(100);
        }
        return dom;
    }

    function applyMenus() {
        clearMenu();
        for (let item in menus) {
            if(!menus.hasOwnProperty(item)) continue;
            let menu = menus[item];
            registerMenu(menu.text, menu.callback);
        }
    }

    function setMenu(id,text,callback,noapply = false) {
        menus[id] = { text, callback };
        if (!noapply) applyMenus();
    }

    function resize(w,h){
            const e = $(BVC.mini);
            setTrans(e);
            if(w&&h){
                setWHcss(/*e*/BVC.mini,w,h);
            }
            return getWH(e);
        }

    (unsafeWindow||window).resizer = {
        $,$$,BVC,setWH,parsePX,getWH,setWHcss,
        resize
    }

    function prevent(e){
        if(!CACHE.container) return;
        const el = CACHE.container;
        if(el.getAttribute('data-screen')!='mini'){
            return;
        }
        e.preventDefault();
        e.stopPropagation();
    }

    function onMouseWheel(e){
        if(!CACHE.container) return;
        const el = CACHE.container;
        if(el.getAttribute('data-screen')!='mini'){
            return;
        }
        e.preventDefault();
        e.stopPropagation();
        console.log(e,e.wheelDeltaY);
        let [w,h] = getWH(CACHE.container);
        let delta = e.wheelDeltaY || e.deltaY;
        delta = 0.1*delta;
        w+=delta;
        h = w/16*9;
        setTrans(CACHE.container,true);
        setWHcss(/*CACHE.container*/BVC.mini,w,h);
        return false;
    }

    async function inject(){
        await playerReady();
        console.log('player ready');
        await waitForDom(BVC.container);
        console.log('dom ready');
        const el = $(BVC.container);
        if(!el) {
            throw new Error();
        }
        console.log('element ready');
        CACHE.container = el;
        el.addEventListener('onwheel',e=>prevent(e),false);
        el.addEventListener('mousewheel',e=>onMouseWheel(e),false);
        el.addEventListener('DOMMouseScroll',e=>onMouseWheel(e),false);
    }

    function init(){
        [
            {
                id:'240',
                text: "240x135",
                callback: ()=>resize(240,135)
            },
            {
                id:'320',
                text: "320x180(默认)",
                callback: ()=>resize(320,180)
            },
            {
                id:'480',
                text: "480x270",
                callback: ()=>resize(480,320)
            },
            {
                id:'640',
                text: "640x360",
                callback: ()=>resize(640,360)
            },
            {
                id:'custom',
                text: "自定义",
                callback: ()=>{
                    const curr = getWH($(BVC.mini));
                    const w = parseFl(prompt("宽度:(当前"+curr[0]+")"));
                    if(w<0) return alert("输入不是有效大于0数字，已取消输入");
                    const h = parseFl(prompt("高度:(当前"+curr[1]+"，根据输入的宽度("+w+")推荐高度:"+(Math.round(w/16*9))+")"));
                    if(h<0) return alert("输入不是有效大于0数字，已取消输入");
                    setTimeout(()=>resize(w,h),200);
                }
            },
        ].forEach(it=>setMenu(it.id,it.text,it.callback,true));
        applyMenus();
        inject().then(()=>console.log('[RESIZER] injected')).catch(e=>console.error('[RESIZER] cannot inject'));
    }
    init();
})();